Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog

KUCOPAS - Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Postingan Blog. Kali ini saya akan share artikel tips dan trik yang berhubungan dengan tutorial blog, yaitu tentang cara menambah dua kolom widget di bawah postingan blog. Cara ini berbeda dengan Cara Membuat 2 (Dua) Kolom Elemen Di Bawah Postingan Blog yang sudah pernah saya share triknya, sobat bisa melihat langsung perbedaannya dalam artikel tersebut.

Sedikit pengetahuan untuk sobat semua, menambah 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 dua kolom widget dibawah postingan blog ini sudah banyak di gunakan oleh para blogger, dan biasanya didalam kolom widget tersebut 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 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 dikunjungi oleh 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.

Oleh sebab itu, jika sobat tertarik untuk memaksimalkan halaman postingan blog, sobat bisa melakukannya dengan menambah dua kolom widget dibawah postingan blog. Lihat contoh gambar screenshot dua kolom widget dibawah postingan blog berikut ini.

DEMO

Menambah 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.

Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Postingan Blog

1. Silahkan sobat >> Masuk/Login >> ke Blogger.com menggunakan akun sobat.
2. Pada Dashboard tampilan blogger baru, pilih menu >> Template >> Edit HTML.
3. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
4. Jika sudah ketemu, letakkan semua kode berikut tepat sebelum atau diatas kode ]]></b:skin>

.kucopas {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
.bawahkiri {float:left;width:47%;margin-right:5px;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}
.bawahkanan {float:right;width:47%;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}

Keterangan:

• #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.
• Untuk mengetahui daftar kode warna, sobat bisa melihatnya pada artikel posting Daftar Kode Warna HTML.

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 salah satu postingan blog sobat, disitu akan terlihat ada dua kolom widget tadi yang sudah sobat pasang.

Catatan:

• 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 == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; 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 dibawah 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 dibawah 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 blog sobat. Namun bila sobat masih menemui kesulitan, silahkan sobat bertanya pada form komentar yang tersedia.

Demikian trik tutorial blog yang mengulas tentang Cara Membuat Dua Kolom Widget Di Bawah Postingan Blog yang telah saya share, semoga bisa sangat bermanfaat bagi sobat KUCOPAS semua.