Trick • Tutorial Blog

Cara Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode

5 tahun ago
2 Comments
by Kahfie IDN

Hai sob, bertemu lagi sama admin jagoankode. hari ini rencananya saya akan membagikan sebuah cara dan panduan mengenai tutorial template blogger untuk Cara Membuat Pilihan Editor Ala Jagoan Kode. sesuai dengan request dari teman teman sekalian. pada akhirnya admin jagoankode kembali dengan widget baru yang ingin admin share kepada blogger lainnya. untuk mempercantik tampilan widget pilihan editor ini bisa dibuat mirip dengan recent post maupun random post sob.

Ada beberapa jenis pilihan editor yang akan diletakkan sesuai keinginan para blogger, namun pribadi saya lebih suka meletak recent post sebagai pilihan editor, karena bisa mempromosikan postingan yang baru kita publish, mungkin dari beberapa pendapat teman teman sekalian berbeda. maka saya membuatkan 2. yang satu pilihan editor berdasarkan artikel terbaru, dan yang kedua adalah pilihan editor berdasarkan random posts (Artikel Acak).

Cara Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode

Di satu sisi ada kelebihan dan kekurangannya masing masing, tergantung kamu ingin lebih berat ke sisi mana, untuk membuat tampilan blog menjadi bagus, tentu item item kecil seperti ini harus keren agar mendukung tampilan blog menjadi bagus lagi dari biasanya. tujuannya disini agar tampilan sisi sidebar widget lebih berwarna dan enak dilihat oleh pengunjung blog nantinya.

Sebenarnya ada begitu banyak tampilan tampilan recent post maupun random post yang kalian lihat di blog orang lain. tetapi berhubung banyak sekali yang tertari pada widget di blog jagoankode ini. apa boleh buat, demi kesenangan pengunjung apapun saya lakukan sob.

Oke baik, silahkan di ikuti proses dan panduan cara memasang widget pilihan editor ala blog jagoankode ini sob. semoga suka ya!

Baca Juga:

Cara Membuat Widget Pilihan Editor Blogger

Proses pembuatan widget ini akan diletakkan pada sidebar blog, jadi pastikan blog kamu sebelumnya sudah mempunyai bentuk dua layout yang default untuk menggunakan widget ini tanpa merombak rombak lagi. saya telah memodifikasi script dibawah ini sekian rupa agar bisa dapat tampil sempurna di blog kamu.

Untuk pemasangannya silahkan diplilih dahulu 2 metode filter yang akan kamu gunakan sebagai pilihan editor blog.

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

Pada poin pertama ini, pilihan editor di filter berdasarkan artikel yang baru di publish di blog kamu. silahkan gunakan ini jika kamu berminat.

Untuk caranya 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://i0.wp.com/www.jagoankode.com/wp-content/uploads/2019/02/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+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 adalah cara untuk menambahkan element yang pertama, saya lanjut ke poin kedua dibawah ini.

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

Untuk poin kedua ini sob, adalah filter berdasarkan artikel acak atau yang biasa disebut random post, Silahkan gunakan ini jika kamu membutuhkannya.

Untuk paduan pemasangannya, silahkan gunakan cara 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://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/s1600/bungfrangki_no_image_100.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" 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 adalah yang kamu lihat disamping kanan sidebar blog jagoankode ini. Trims..

Ada dua contoh sample yang dapat kamu gunakan secara gratis di blog kamu. silahkan dicoba dan dipraktekkan di blog masing masing apabila kamu butuh widget diatas.

Penutup

Sekian dulu untuk tutorial Cara Membuat Widget Pilihan Editor Blogger Ala Jagoan Kode, Semoga bisa bermanfaat bagi para blogger yang membaca ini, apabila terdapat kesalahan penulisan script kamu dapat melaporkan di kolom komentar dibawah. admin jagoankode pamit dulu dan sampai jumpa kembali pada artikel selanjutnya 🙂

You may also like

About the author

Kahfie IDN

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

View all posts

Leave a Comment

2 Comments