Sedikit pengetahuan untuk sobat KUCOPAS semua, Menambah dan membuat dua kolom widget dibawah postingan blog ini merupakan panduan untuk para blogger yang memaksimalkan pada halaman postingan blog. Karena dengan menambah dua kolom widget dibawah postingan blog, Sobat dapat memaksimalkan serta mengisi ruang kosong yang ada dan menambahkan widget seperti yang sobat inginkan.
Tehnik menambah dan membuat dua kolom widget dibawah postingan blog ini sudah banyak di gunakan oleh para blogger. Dan biasanya di dalam kolom widget mereka menambahkan atau mengisinya dengan iklan (sponsor), widget artikel terkait (related post), kotak berlangganan email dan juga widget-widget yang lain.
Manfaatnya jika sobat menggunakan teknik menambah dan membuat dua kolom widget dibawah postingan blog ini adalah agar tidak menjejali atau memenuhi pemasangan widget pada sidebar blog yang bisa berpengaruh pada kecepatan loading blog saat di buka atau di kunjungi para visitor. Mungkin hal ini sering diabaikan dan tidak di perhatikan oleh para blogger karena keasikkan untuk mempercantik tampilan blog dengan widget-widget yang notabenya tidak telalu penting. Alhasil loading blog bisa menjadi sangat berat saat di buka atau di akses.
Karena itu jika sobat tertarik untuk memaksimalkan halaman postingan blog, Sobat bisa melakukannya dengan menambah dan membuat dua kolom widget dibawah postingan blog. Lihat contoh gambar dua kolom widget dibawah postingan blog berikut ini.
Menambah dan membuat dua kolom widget dibawah postingan blog seperti gambar di atas caranya sangat mudah, Silahkan sobat ikuti langkah-langkah yang akan saya berikan tutorialnya secara detail dan jangan sampai ada yang terlewatkan berikut ini:
Silahkan sobat >> Masuk/Login >> ke akun blog sobat.
Pada "Dashboard" tampilan blog Baru, Pilih menu >> Template >> Edit HTML >> Lanjutkan.
#000000 adalah Kode warna untuk Garis tepi widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.
#3d85c6; adalah Kode warna untuk Background widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.
6. Masih dalam Edit HTML, Silahkan sobat cari lagi kode <data:post.body/> (Gunakan CTRL+F untuk mempercepat pencarian).
7. Jika sudah ketemu, Letakkan semua kode script berikut tepat sesudah atau dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class='kucopas'> <div class='bawahkiri'> Taruh Kode Script Widget atau tulisan Sobat di sini </div> <div class='bawahkanan'> Taruh Kode Script Widget atau tulisan Sobat di sini </div> </div> </b:if>
8. Sebelum di save atau di simpan, Silahkan sobat klik preview atau pratinjau terlebih dahulu, Guna untuk menghindari terjadinya eror saat Edit HTML pada Template blog sobat.
9. Jika hasil dari preview atau pratinjau tidak terjadi eror, Silahkan sobat klik >> Simpan Template >> dan lihat hasilnya pada postingan blog sobat, Disitu akan terlihat ada dua kolom widget tadi yang sudah sobat pasang.
Keterangan:
Jika sobat tidak menggunakan fungsi Readmore pada blog sobat, Maka letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang pertama.
Namun jika sobat telah menggunakan fungsi Readmore pada blog sobat, Maka akan ada dua kode <data:post.body/> atau lebih. Kemudian letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang kedua atau terakhir.
Warna PINK silahkan sobat ganti dengan Kode Script Widget atau tulisan sesuai dengan keinginan sobat.
Contoh Penerapan kode Widget:
<b:if cond='data:blog.pageType == "item"'> <div class='kucopas'> <div class='bawahkiri'> <center>KOLOM WIDGET KANAN <H2>Artikel Terkait:</H2></center> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script> </div> </div> <div class='bawahkanan'> <center>KOLOM WIDGET KIRI <H2>TRANSLATE</H2></center> <!-- Begin TranslateThis Button --> <center><div id='translate-this'><a class='translate-this-button' href='http://www.translatecompany.com/' style='width:180px;height:18px;display:block;'>translation</a></div> <script src='http://x.translateth.is/translate-this.js' type='text/javascript'/> <script type='text/javascript'> TranslateThis(); </script></center> <!-- End TranslateThis Button --> </div> </div> </b:if>
Keterangan:
Warna BIRU adalah Kode Script Widget bawah postingan sebelah KIRI yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.
Warna PINK adalah Kode Script Widget bawah postingan sebelah KANAN yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.
Jika sobat mengikuti langkah-langkahnya seperti apa yang sudah saya jelaskan tutorialnya diatas, Sampai disini saya rasa sobat pasti sudah bisa memasang atau menerapkan dua kolom widget dibawah postingan pada blog sobat. Namun bila sobat masih menemui kesulitan, Silahkan sobat bertanya pada form komentar yang tersedia.
Semoga artikel posting tutorial blog tentang cara menambah dan membuat dua kolom widget dibawah postingan blog yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy blogging...
