Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog

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.

 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.

DEMO

 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:

1. Silahkan sobat >> Masuk/Login >> ke akun blog sobat.
2. Pada "Dashboard" tampilan blog Baru, Pilih menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
5. Jika sudah ketemu, Letakkan semua kode script 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.

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 == &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 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.

http://kuc0pas.blogspot.com/2012/09/cara-membuat-dan-menambah-dua-kolom.html