Adding 2 columns below the post

 
To post this time I only help one of my friends, which we use the same template by Kang Rohman (R.1.5 ). as you see the picture above or you can see below this post. which feeds on the left and right are related articles

so how to make it? let follow step by step:
P.S: for his CSS code I took from my template so it probably will look exactly the same as mine :)
  •  highly recommended you to backup your template by way of download full template
  • check settings on Expand Widget Templates
 
  • find this code ]]></ b: skin>
  • then remove the code above and replace with the code below

#related{background:#eee url(http://lh6.ggpht.com/_pt7i0nbIOCY/SuPuxFn6_FI/AAAAAAAACXU/z314-b9H97c/dot_thumb.gif) 45% 0 repeat-y;-moz-border-radius:5px;-moz-box-shadow:1px 1px 5px #696969;-webkit-border-radius: 5px;background:none repeat scroll 0 0 #E3E3E3;border:1px solid #fff;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}

.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px; border: 3px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; }
.Rssbendol { background: url('http://i447.photobucket.com/albums/qq191/bendol212/template%20blog/feedburner.png') no-repeat bottom right; }
.Rssbendol a { background: none;}
.inpRssbendol { border: 1px solid #B9C1C6; width: 170px; background: rgb(255, 255, 255) url('http://sites.google.com/site/cumaisenggroup/cabinet/dasbor/RSS.png') no-repeat 2px 2px; font-size: 11px; padding:3px 4px 4px 20px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; }
.sbmtRssbendol { padding:2px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; }
.subs table {border-collapse: inherit; border: none;}
.subs tr { border:0;}
.subs td { border:0;}
.subs th { border:0;} .clear { clear: both; }

#tombol {
background: #ccc;
color: #000;
font-weight:bold;
-moz-border-radius: 5px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin-top:5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}

]]></b:skin> 

for the next step, a little difficult for those of you who dont really know about blogger template or you will not understand my english :D, because I am not fluent in english.

There are 2 steps for this section,I hope this will facilitate you in the addition of 2 columns below the post

1. If you use the auto Read More
  • Find this code  <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
  • place the code that I will give below among <b:if cond='data:blog.pageType == "item"'><data:post.body/> and </ b: if>

Example :
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini Letakkan url blog anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div>
<div class='related-posts'>disini letakan kode Related Post Anda</div></div>
</b:if>



2. If you are not using the Auto Read More 
  • Find this code <data:post.body/>
  • then place the code that I will give below under the code <data:post.body/>

first find this code <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> . if you find that code in your template put the code below under the code <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
And if you do not find the above code search <data:post.body/> then paste the code below under the code <data:post.body/>
The following code, place the code below as my instructions above


<br/><br/>
<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://bendol-online.blogspot.com/feeds/posts/default'>SUBSCRIBE VIA RSS FEED</a></p>
<p class='intro'><!-- Script Artikel Berlangganan -->
<div class='kotakRSS1'>
<div class='Rssbendol'>
If you like the article on this blog, Please <a href='http://feeds.feedburner.com/bendol' target='_blank' title='Berlangganan'>
<b>CLICK HERE</b></a> to subscribe for free via email, that way you will get a shipment every article there is an article that appeared in <a href='http://bendol-online.blogspot.com/' target='new'><font color='#0099DD'><b>BENDOL ONLINE</b></font></a>
<div class='subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssbendol' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email Address Here...&quot;;}' onfocus='if (this.value == &quot;Enter your Email Address Here...&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your Email Address Here...'/>
<input name='uri' type='hidden' value='bendol'/>
<input name='title' type='hidden' value='bendol'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='tombol' type='submit' value='SUBCRIBE'/></div>
</form></td>
</tr>
<td align='left' style='padding:4px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/bendol'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bendol?bg=99CCFF&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a></td>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Artikel Berlangganan -->
</p></div>

<div class='related-posts'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;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></b:if> </div>
</div>

  • You just change my blog feeds to your blog feed, which I mark with color
  • save your template, if already completed
  • and see the result
  • GL
if you are Indonesian people, you can read it here 


comment 1 comments:

Ian Apian on November 14, 2012 at 12:06 AM said...

Must be Have 1

thank bro

Post a Comment

Delete this element to display blogger navbar

 
Google Pagerank Powered by  MyPagerank.Net
© Blogspot Tutorialz | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
Powered by Blogger