Tutorial Menciptakan Widget Pilihan Editor Blogger Ala Pendekar Kode

Hai sob, bertemu lagi sama admin Cara Membuat Pilihan Editor Ala Jagoan Kode. sesuai dengan request dari sahabat sahabat sekalian. di kesannya admin jagoankode kembali dengan widget gres nan ingin admin share kepada blogger lainnya. sebagai mempercantik tampilan widget pilihan editoritu sanggup dibentuk menyerupai dengan recent post maupun random post sob.

Ada sebagian jenis pilihan editor nan mau diletakkan sesuai impian para blogger, tetapi langsung aku lebih suka meletak recent post jadi pilihan editor, sebab sanggup mempromosikan postingan nan gres kami publish, sanggup saja dari sebagian pendapat sahabat sahabat sekalian berbeda. makanya aku membikinkan 2. nan sebuah pilihan editor menurut artikel terbaru, juga nan kedua yaitu pilihan editor menurut random posts (Artikel Acak).

Di sebuah sisi tersedia kelebihan juga kekurangannya masing masing, tergantung kau ingin lebih berat ke sisi mana, sebagai membikin tampilan blog jadinya bagus, pastinya item item kecil sepertiitu musti keren semoga mendukung tampilan blog jadinya bagus lagi dari biasanya. tujuannya disitu semoga tampilan sisi sidebar widget lebih berwarna juga lezat dilihat oleh pengunjung blog nantinya.

Sebenarnya tersedia begitu banyak tampilan tampilan recent post maupun random post nan kalian lihat di blog orang lain. tetapi berhubung berbagai nan tertari di widget di blog jagoankode ini. apa boleh buat, demi kesenangan pengunjung apapun aku kerjakan sob.

Oke benar, silahkan di ikuti proses juga panduan tutor memasang widget pilihan editor ala blog jagoankodeitu sob. semoga suka ya!

Cara Membuat Widget Pilihan Editor Blogger

Proses pembuatan widgetitu mau diletakkan di sidebar blog, jadi pastikan blog kau sebelumnya rampung mempunyai bentuk dua layout nan default sebagai memakai widgetitu tanpa merombak rombak lagi. aku telah memodifikasi script dibawahitu sekian rupa semoga sanggup mampu tampil tepat di blog kamu.

Untuk pemasangannya silahkan diplilih dahulu 2 metode filter nan mau kau gunakan jadi pilihan editor blog.

1. Pilihan Editor Filter by Recent Posts (Artikel Terbaru)

Pada poin pertama ini, pilihan editor di filter menurut artikel nan gres di publish di blog kamu. silahkan gunakanitu apabila kau berminat.

Untuk tutornya silahkan di ikuti dibawah ini.

1. Login di Akun Blogger Kamu

2. Pergi Ke Menu Tata Letak

3. Tambahkan Gadget Di Sidebar Blog (HTML/JAVASCRIPT)

4. Beri Judul Pilihan Editor

5. Untuk Konten/Scriptnya Pastekan Kode di Bawah Ini.

<style scoped='' type='text/css'> #rcnt-posts-jagoankode{color:#999;font-size:12px} #rcnt-posts-jagoankode img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px} #rcnt-posts-jagoankode ul{margin:0;padding:0} #rcnt-posts-jagoankode ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #rcnt-posts-jagoankode ul li:last-child{border-bottom:0} #rcnt-posts-jagoankode ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style> <div id='rcnt-posts-jagoankode'> <script type='text/javaScript'> var rcp_numposts=7; var rcp_snippet_length=120; var rcp_info='yes'; var rcp_comment='Comments'; var rcp_disable='T?t Nh?n xét'; function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23S8r7gdqWF6iaAveOcrZslAiQma6JwNrQ0rZvQyptHG1_fFO79xujLeAIyM3F-KJun4oMSiodSE5j4UstQhHhWJiA3LBP88vq3bP_4H8YRreFjrGj4w0e8qsOpb9-_mkGPAXMAhIdfDE//"};}};dw+='<li>';dw+='<img alt=" hariitu rencananya aku mau membagikan sebuah tutor juga panduan mengenai tutorial templa  Tutorial Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title=" Tutorial Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('rcnt-posts-jagoankode').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script> </div>

Note :
var rcp_numposts=7; Jumlah Widget Yang Ditampilkan.. Ubah Semau Kamu :)

6. Simpan Dan Lihat Hasilnya.

Sekiranya itu yaitu tutor sebagai menambahkan element nan pertama, aku lanjut ke poin kedua dibawah ini.

2. Pilihan Editor Filter by Random Posts (Artikel Acak)

Untuk poin keduaitu sob, yaitu filter menurut artikel acak ataupun nan biasa disebut random post, Silahkan gunakanitu apabila kau membutuhkannya.

Untuk paduan pemasangannya, silahkan gunakan tutor dibawah ini.

1. Login Ke Blogger.

2. Klik Menu Tata Letak.

3. Tambahkan Gadget Sidebar Blog (HTML/JAVASCRIPT)

4. Beri Judul Pilihan Editor.

5. Pastekan Kode di Bawah Ini. Untuk Scriptnya.

<style type='text/css'> #rndm-posts-jagoankode img{background: #fafafa;float: left;height: 60px;margin-right: 8px;width: 60px;border-radius: 4px;t} #rndm-posts-jagoankode img:hover{opacity:0.6;} ul#rndm-posts-jagoankode{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;} #rndm-posts-jagoankode a{color:#000000;transition:all .3s;display:block} #rndm-posts-jagoankode li:hover a,#rndm-posts-jagoankode a:hover{color:#4285f4;} .random-summary{font-size:14px;color: #222;} #rndm-posts-jagoankode li{background-color:#fff;margin:0;padding:0px;min-height:60px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;font-weight: 700;font-size: 14px;margin: 0 0 10px 0;padding: 0 0 10px 0;border-bottom: 1px solid rgba(0,0,0,0.1);} #rndm-posts-jagoankode li .random-info {font-size:12px;} </style> <ul id='rndm-posts-jagoankode'> <script type='text/javaScript'> var randomposts_number = 7; var randomposts_chars = 120; var randomposts_details = 'yes'; var randomposts_comments = 'Comments'; var randomposts_commentsd = 'Comments Disabled'; var randomposts_current = []; var total_randomposts = 10; var randomposts_current = new Array(randomposts_number); function randomposts(json) {     total_randomposts = json.feed.openSearch$totalResults.$t } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); function getvalue() {     for (var i = 0; i < randomposts_number; i++) {         var found = false;         var rndValue = get_random();         for (var j = 0; j < randomposts_current.length; j++) {             if (randomposts_current[j] == rndValue) {                 found = true;                 break             }         };         if (found) {             i--         } else {             randomposts_current[i] = rndValue         }     } }; function get_random() {     var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));     return ranNum }; </script> <script type='text/javaScript'> function random_posts(json) {     for (var i = 0; i < randomposts_number; i++) {         var entry = json.feed.entry[i];         var randompoststitle = entry.title.$t;         if ('content' in entry) {             var randompostsnippet = entry.content.$t         } else {             if ('summary' in entry) {                 var randompostsnippet = entry.summary.$t             } else {                 var randompostsnippet = "";             }         };         for (var j = 0; j < entry.link.length; j++) {             if ('thr$total' in entry) {                 var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments             } else {                 randomposts_commentsnum = randomposts_commentsd             }; if (entry.link[j].rel == 'alternate') {                 var randompostsurl = entry.link[j].href;                 var randomposts_date = entry.published.$t;                 if ('media$thumbnail' in entry) {                     var randompoststhumb = entry.media$thumbnail.url                 } else {                     randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm9VA6PvCHyWtIr5BP26uMs2Q3bKGhGQ-mpH7mm_iZr1TbRxu7Thne73LFA97prcotH8eaPP3kpGNu-DpiluG8XFugwlpZxFCA3H9TlfwiUF85KBMM1XnZ9BYqpwILauGjuCSMj8LAfHQ/s1600/bungfrangki_no_image_100.png"                 }             }         };         document.write('<li>');         document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt=" hariitu rencananya aku mau membagikan sebuah tutor juga panduan mengenai tutorial templa  Tutorial Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></a>');         document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');         if (randomposts_details == 'yes') {             document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'         };         document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')     } }; getvalue(); for (var i = 0; i < randomposts_number; i++) {     document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>') }; </script> </ul> <div class='clear'/> </div>

Note:
var randomposts_number = 7; Ubah Semau Kamu Untuk Jumlah Yang Ingin Ditampilkan

6. Selesai Dan Simpan. Lihat Hasilnya

Demonya yaitu nan kau lihat disamping kanan sidebar blog jagoankode ini. Trims..

Ada dua tumpuan sample nan sanggup kau gunakan setutor gratis di blog kamu. silahkan dicoba juga dipraktekkan di blog masing masing apabila kau butuh widget diatas.

Penutup

Sekian dulu sebagai tutorial Cara Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode, Semoga sanggup berfungsi sebagai para blogger nan membaca ini, apabila terdapat kesalahan penulisan script kau sanggup melaporkan di kolom komentar dibawah. admin jagoankode pamit dulu juga hingga jumpa kembali di artikel selanjutnya :)