Setting Blog 100%

Satu hal yang paling gak enak setelah template blogger diperbarui ke versi terbarunya ialah kita mesti modifikasi ulang ke tampilan sebelumnya.

Mulai dari font, widget, navigasi menu, logo blog, ukuran layar tampilan blog, dll.

Pokoknya yang sesuai dengan selera kita selaku pemilik blog.

Karena gak mau ribet, apalagi sampai lupa dengan kode2nya, jadilah saya "simpan" di sini saja 😉

O iya! Bagi teman2 yang mengerti HTML, CSS, dan Javascript (JS); boleh banget ambil kodenya di sini. Gratis kok 😁

Gadget Tampil di Posting kecuali Homepage

Fungsi kode di bawah ini ialah hanya menampilkan gadget atau widget tertentu di dalam artikel (blogposting), bukan di beranda (homepage).

<b:if cond='data:blog.pageType == "item"'>

...dan kode pembungkusnya:

</b:if>

Terkait cara pasangnya yakni masuk ke pengaturan template blogger, lalu cari widget yang ingin disetting, silakan tambahkan kode awalnya di bawah kode: <b:includable id='main'> lalu tutup dengan kode </b:if> tepat di atas </b:includable>

Gadget Cuma Muncul di Homepage

Pengaturan di bawah ini membuat widget hanya muncul atau tampil di halaman beranda blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

...dan kode pembungkusnya:

</b:if>

Gadget Tampil di Semua Tempat kecuali BlogPosting

Pengaturan kode di bawah ini memungkinkan widget tampil di semua halaman kecuali di dalam artikel (blogposting).

<b:if cond='data:blog.pageType!= "item"'>

...dan kode pembungkusnya:

</b:if>

Widget Tampil di Halaman Tertentu

Pengaturan kode di bawah ini membuat widget hanya muncul di halaman tertentu di blog.

<b:if cond='data:blog.url == "URL of the page"'>

...dan kode pembungkusnya:

</b:if>

Silakan ubah atau ganti yang sudah ditandai dengan permalink yang ingin diinginkan.

Widget Disembunyikan di Halaman Tertentu

Pada beberapa kasus, widget perlu disembunyikan di halaman tertentu pada blog.

<b:if cond='data:blog.url != "URL of the page"'>

...dan kode pembungkusnya:

</b:if>

Silakan ubah atau ganti yang sudah ditandai dengan permalink yang ingin diinginkan.

Gadget Cuma Tampil di Halaman Statis

Pengaturan blogger yang membuat widget hanya ditampilkan di halaman statis.

<b:if cond='data:blog.pageType == "static_page"'>

...dan kode pembungkusnya:

</b:if>

Statis page atau halaman statis merupakan sebuah "tempat" untuk profil blog kita. Contohnya: tentang saya, daftar isi artikel, disclaimer blog, dll.

Gadget Tidak Muncul di Static Page

Pengaturan blogger di mana widget muncul di semua halaman kecuali di halaman statis.

<b:if cond='data:blog.pageType != "static_page"'>

...dan kode pembungkusnya:

</b:if>

Gadget Artikel Terbaru (Recent Posts)

Nama atau judul widget blog sering menghilang? Biasanya karena kita pasang widget secara langsung lewat fitur tata letak (layout) blog.

Solusinya yakni dengan cara memasangnya secara manual. Tentu lewat tata letak (layout) juga tapi melalui HTML/JavaScript (JS).

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Gadget Komentar Terbaru (Recent Comments)

Jika widget di atas menampilkan artikel terbaru maka widget di bawah ini bertugas menampilkan komentar terbaru di blog.

Cara pemasangannya sama kok!

<script type='text/javascript'>
//<![CDATA[
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}}
//]]>
</script>
<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script>
<script src="https://www.ozal.web.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Cek kode di atas! Ganti alamat blog ini dengan alamat blog teman2. Lalu simpan.

Gadget Artikel Acak (Random Posts)

Widget yang ini menampilkan artikel acak (random) dari seluruh postingan yang ada di blog kita.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

Widget ini cocok banget dipasang atau ditambahkan di blog dengan banyak artikel. Saya juga pasang loh! 😁

O iya! Ganti angka 5 di atas ya! Angka ini merupakan jumlah artikel yang ditampilkan.

Gambar di Blog dengan Permalink

Coba teman2 lihat di samping blog ini, ada widget "traktir" kan? Jika diklik oleh pembaca blog, pasti diarahkan situs web donasi -- tempatnya viewers berdonasi ke konten kreator.

Pokoknya widget tsb memungkinkan para pembaca atau pengunjung blog untuk bisa berdonasi ke kita.

<a href="isi dengan alamat situs web yang ingin dituju" target="_blank" rel="nofollow"><img src="isi alamat url gambar di sini" alt="isi dengan deskripsi gambar" title="isi dengan deskripsi gambar" width="100%" " /></a>

Di atas itu kodenya! Pakai saja ya, gratis kok! O iya, catatan nih. Kalau situs web yang dituju masih di dalam satu blog (bukan mengarah keluar -- outbound link), hapus saja tag rel="nofollow" 😉

Nah, muncul lagi pertanyaan. "Cara buat link gambarnya gimana mas?"

Saya anggap teman2 sudah membuat gambarnya ya!

Silakan teman2 buat artikel terbaru di blog, langsung upload gambarnya, lalu klik kanan pada gambar, pilih menu "buka gambar di tab baru".

Pasti terbuka tuh gambarnya di tab terbaru. Tinggal salin (copy) saja permalink gambarnya. Cukup dimengerti dong! 😉

Okay! Sampai di sini dulu ya. Mau tanya2 boleh banget di kolom komentar. Nanti saya tanggapi... Terima kasih!

Arief Ghozaly Blogger sejak 2015 - sekarang. Teknik Komputer & Jaringan (TKJ).

Berbagi :