cara membuat related post di blogspot

Di hari ini taukahbahwa.blogspot.com akan menyampaikan berita tentang cara membuat related post di blogspot. Semoga dengan berita cara membuat related post di blogspot akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

Widget Related Post pada halaman blogspot yang satu ini dilengkapi dengan fitur subscribe dan sosial media. Widget ini sudah tergolong komplit karena sudah memakai fitur fitur untuk bloging. Perbaduan antara widget Related Post, email form Subscribe dan sosial media akan menambah kesan elegan pada tampilan halaman blog anda. Tapi tujuan kita bukanlah hanya begitu saja melainkan widget ini berguna untuk memudahkan para pengunjung blog untuk lebih berinteraksi dengan kita. Oke langsung saja menuju TKP sebab saya merasa bahwa anda sudah lebih paham tentang arti widget ini daripada saya. 

Fitur Aplikasi

1. Form Subscribe
2. Sosial media
3. Related Post

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi 

/*****************************************
Name : widget Related post with subscribe
By : Arieadie | Blog Design
Update : 18/08/2013
******************************************/
#BDRS-widget {
width:580px;//lebar widget
padding:3px;
border: solid #999 1px;
background-color: #FFFFFF;
height: 200px;// tinggi widget
border-radius:5px;
box-shadow: 0 1px 4px #000;
}
#BDRS-widget .left {
width:56%;
padding:3px;
float: left;
}
#BDRS-widget .right {
width:40%;
padding:5px;
background-color: #CCCCCC;
float: right;
}
.BDRS-box{
border:1px;
solid #1A2638;
border-radius:10px;
padding:10px;
text-align:center;
background-color: #FFFFFF;
height: 171px;
}
.BDRS-box h2{
margin-top:5px;
color:#FF0000;
font-family:georgia;
font-size:18px;
margin-bottom:5px;
padding:0;
text-shadow:0px 1px 1px #000;
line-height:35px;
font-weight: bold;
}
.BDRS-box .input1{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:180px; color:#990000; font-family:georgia; margin-bottom:5px;border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;}
.BDRS-box .BDsubmit{background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: border-radius:10px 10px 10px 10px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px;
height:36px;
background-color: #990000;
border-color: #FF0000;
}
.BDRS-box .BDsubmit:hover{background-color: #DD0000;
color: #000000;
border-color: #550000;}
.BDRS-box .submit:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#5B0A00;} #related-posts { float : left; width:100%; margin-left : 5px; font : 11px Verdana; margin-bottom:2px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 {
font-size : 14px;
font-weight: bold;
margin : 5px 7px 0;
padding : 0 0 5px;
font-family: Geneva;
font-style: italic;
border-bottom:dashed #990000 1px;
} #related-posts a {
text-decoration : none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000099;
} #related-posts a:hover {
text-decoration : none;
color: #990000;
} #related-posts ul { border : medium none; padding : 0; }
#related-posts ul li {
display : block;
background : url(&quot;&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 0px;
margin-bottom : 0px;
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLpby5nAGs35_bgoVWo3ZBNmDbicAHnliCRhC8VKeSdr-8czxtmNDqPKMoLpV4fg1Z1byPwcswhS2VsX320WtyNeZ6-YOjRXIvZwv0VizTpO6jqq74Gnst_fpvtz1sK1Soca0z6U77w2I/s1600/ico-rss.jpg) no-repeat;
display:block;
list-style-type:none;
margin-bottom: 5px;
padding-left: 20px;
padding-top:0px;
}
#related-posts ul li a {block;color: #222}
#related-posts ul li a:hover {block;
color: #990000;
}
.BD-sosial a {
background-color:#99FF00;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 13px;
color: #6C0000;
font-weight: bold;
text-decoration: none;
padding:3px 10px;
margin-right:2px;
border: solid #999900 1px;
margin-bottom:2px;
text-shadow: 0px 1px 0px #111;
border-radius:3px;
}
.BD-sosial a:hover {
background-color:#E6FFBF;
color: #333333;
text-shadow: 0px 1px 0px #111;
border: solid #666 1px;
box-shadow:0 0 2px #666;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode<data:post.body/>
• Save template anda dan lihat hasilnya, selamat berkreative. 

<!--BDRS start for widget -->
<div id='BDRS-widget'>
<div class='left'>
<div id='related-posts'>
<h2><b>Related Posts </b>
</h2><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var relatedTitles=new Array();var relatedTitlesNum=0;
var relatedUrls=new Array();function related_results_labels(json)
{for(var i=0;i&lt;json.feed.entry.length;i++)
{var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=
entry.title.$t;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;)
{relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);
for(var i=0;i&lt;relatedUrls.length;i++){if
(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=
relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j&lt;a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*
Math.random());var i=0;document.write(&#39;&lt;ul&gt;&#39;);
while(i&lt;relatedTitles.length&amp;&amp;i&lt;20)
{document.write(&#39;&lt;li&gt;&lt;a href=&quot;&#39;+ relatedUrls[r]+&#39;&quot;&gt;&#39;+
relatedTitles[r]+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);if(r&lt;relatedTitles.length- 1){r++;}else{r=0;}
i++;}
document.write(&#39;&lt;/ul&gt;&#39;);document.write();}
</script>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<div class="BD-sosial" style="margin-bottom:10px;">
<a href="LINK GPLUS ANDA " target="_blank" title="gplus">Gplus</a>
<a href="LINK FACEBOOK ANDA " target="_blank" title="facebook">Facebook</a>
<a href="LINK TWITTER ANDA " target="_blank" title="twitter">Twitter</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA " target="_blank" title="follow">Join Us</a>
</div></div>
<div class='right'>
<div class='BDRS-box'><h2> Artikel berlangganan GRATIS melalui email</h2>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input class='input1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter Your Email Address...'/>
<input class='BDsubmit' name='submit' type='submit' value='Subcribe'/>
<input name='uri' type='hidden' value='ID Feedburner '/>
<input name='loc' type='hidden' value='en_US'/>
</form></div></div></div><div style='clear: both;'/>
<!--BDRS clear for widget -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar box subscribe pada kode CSS nya.
• Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
• Untuk Tulisan warna MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.
• Untuk ID BLOG ANDA silahkan ganti dengan nomor ID blog anda
  Kunjungi halaman cara mengetahui ID blog halaman 
• atau 1ni

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com