Coba Anda perhatikan dahulu di bawah posting ini, disana terdapat 2 (dua) kolom yang satu kolom Feed RSS dan satu lagi kolom Related Post(Artikel Terkait), itulah yang akan aku buat pada blogku yang lain yaitu Menambah 2 (dua) Kolom di Bawah Posting, disamping biar keren juga untuk memanjakan pengunjung.
Cara aku membuatnya adalah sebagai berikut:
- Login ke Blogger
- Rancangan/Layout
- Edit HTML
- Download Template Lengkap
- Aku beri tanda centang Expand Template Widget
- Aku cari kode ]]></b:skin>
- Di atasnya kode ]]></b:skin> aku 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;paddingleft:
21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAA
AAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;verticalalign:
middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
- Trus aku cari kode;
<b:if cond='data:blog.pageType =="item"'><data:post.body/></b:if> :
- Aku letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == "item"'><data:post.body/>dan kode: </b:if> :
<div class='clearfix' id='related'> <div class='subscribe'> <p class='feed'> <a href='http://disini aku letakkan Link Feed/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini aku letakkan kode Form Berlangganan </p></div> <div class='related-posts'>disini aku letakkan kode Related Post</div></div>
- Aku ganti teks warna merah dengan Link Feed, kode Form Berlangganan dan Kode Related Post yang aku punya. Untuk lebih jelas coba Anda perhatikan contoh kode dari blog Kacoeng Kampret di bawah ini;
<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://feeds.feedburner.com/KacoengKampret'>Berlangganan via RSS Feed</a></p>
<p class='intro'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/zPboQ', 'popupwindow', 'scrollbars=yes,width=200,height=170');return true' style='border:0px solid #CACACA;padding:3px;text-align:center;' target='popupwindow'><p>Buka blog ini secara teratur atau masukkan Email pada kolom dibawah ini Anda bisa berlangganan artikel (free).</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='blogspot/zPboQ'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p><p><a href='http://feeds.feedburner.com/blogspot/zPboQ'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/zPboQ?bg=CFCFCF&fg=444444&anim=0&label=readers' style='border:0' width='88'/></a></p></form></p></div>
<div class='related-posts'><b:if cond='data:blog.pageType == "item"'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>";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;<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></b:if> </div>
</div>
</b:if>
- Aku simpan template, selesailah sudah...
+ komentar + 2 komentar
Makasih Kak...
sya coba dlu ya..??
sya seorang newbie ni..
salam kenal ja ya..?
Izin follow juga..
Tutorialnya keren kang.. Bermanfaat,
Posting Komentar