Menambah Dua Kolom Dibawah Postingan

Pada postingan sebelumnya, saya sudah menjelaskan cara menambah kolom di bawah postingan. Perbedaannya pada postingan yang terdahulu adalah letak kolom berada di bawah kotak komentar atau diatas footer. Dan pada tutorial kali ini letak kolom persis di bawah postingan dan mempunyai dua buah kolom yaitu kolom kotak berlangganan artikel dan related post (artikel terkait) seperti terlihat pada gambar di bawah ini.

Dari gambar diatas terdapat 2 (dua) kolom yang satu kolom Feed RSS dan satu lagi kolom Related Post (Artikel Terkait). Itulah pembahasan kita kali ini yaitu cara menambah dua molom di bawah postingan. Adapun langkah-langkah pembuatannya adalah sebagai berikut:

1. Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;
2. Cari kode ]]> ;
3. Di atas kode ]]> letakkan kode di bawah ini:
   #related{background:#eee url(http://lh6.ggpht.com/_pt7i0nbIOCY/SuPuxFn6_FI/AAAAAAAACXU/z314-b9H97c/dot_thumb.gif) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
   #related .related-posts{font-weight:400;width:53%;float:right}
   #related .related-posts p{margin:0}
   #related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
   #related .related-posts ol{font-weight:400;margin:2px 0 0}
   #related .subscribe{width:43%;float:left;color:#000}
   #related .subscribe p.intro{font-weight:400}
   #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
   #related .subscribe form{margin:0;padding:0}
   .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden}
   .clearfix{display:inline-block}
4. Cari kode di bawah ini:
5. Letakkan kode di bawah ini diantara kode: dan kode: :
   <a href='http://disini letakkan Link Feed anda/feeds/posts/default’>Berlangganan via RSS Feed

   disini letakkan kode Form Berlangganan Anda

   disini letakan kode Related Post Anda
6. Ganti teks warna merah dengan Link Feed dan kode Form Berlangganan serta Kode Related Post yang Anda punya. Untuk lebih jelas perhatikan contoh di bawah ini:
   <a href='http://www.maskolis.co.cc/feeds/posts/default’>Berlangganan via RSS Feed

   <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=co/vlpg‘, ‘popupwindow’, ‘scrollbars=yes,width=200,height=170′);return true’ style=’border: 1px solid rgb(204, 204, 204); padding: 3px; text-align: center;’ target=’popupwindow’>

   Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya

   <input name='uri' type='hidden' value='co/vlpg‘/>

   Delivered by FeedBurner

   <a href='http://feeds.feedburner.com/co/vlpg‘><img alt='Feed Reader' height='26' src='http://feeds.feedburner.com/~fc/co/vlpg?bg=99CCFF&fg=444444&anim=0′ style=’border:0′ width=’88′/>

   var homeUrl3 = "";var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;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;textLabel = "";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++;}}

   RelPost();
7. Simpan Template, selesai!!!

Nah, gimana mudah atau tambah bingung? Itu tadi tutorial cara membuat atau menambah dua kolom di bawah postingan, selamat mencoba dan semoga bermanfaat.

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com