cara membuat related post di blogspot

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. Untuk melihat DEMO silahkan klik link dibawah ini :

KLIK DISINI UNTUK MELIHAT DEMO

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 : Rivai Silaban | 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/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/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 KLIK DISINI

Kesimpulan

Widget pada postingan kali ini sudah lumayan lengkap untuk hal bloging, silahkan anda edit CSSnya untuk menyesuaikan pada tampilan halaman blog anda.

Bila anda mengalami kesulitan dalam memasang widget yang satu ini silahkan hubungi saya atau gunakan form komentar dibawah untuk share bersama saya, dengan senang hati saya akan membantu anda.

Widget Related Post Complite
18 Agustus 2013
Admin Rivai Silaban
Salam Bloger

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:38 PM