widget related post blogspot

Widget related post untuk blogspot ini saya sebut dengan widget related post blogspot dengan tampilan widget related post dan widget social media untuk blogspot. Pada tutorial widget related post blogspot kali ini saya memadukan 2 widget dalam satu widget untuk melengkapi widget relatedpost dimana saya menambahkan 3 icon sosial media. Silahkan lihat tampilannya melalui link demo di bawah ini, dan jika anda tertarik dengan widget related post blogspot ini silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS widget related post blogspot dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget related post blogspot
By : Rivai Silaban | Blog Design
Update : Jumat, 15 November 2013
******************************************/
#bdrs_relpost {
width: 550px;
margin:5px auto;
border:solid #CCCCCC 1px;
height:170px;
padding:5px;
border-radius:10px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-530g4kwBV_rKSIsPpvD2E3ztTq3rK_E3o7oqNJhkGj5FL0A3qcWf1RdhKcCfeQtNPYQ2Z9IlS5_9gJwmE9oOWta1fu7HXm2RFxBzfCkG0tdrj-1GPVPOKNujg7q1d3a1RQoDADlSEZQ/s1600/masalah.gif') 0px 100% no-repeat;
}
#bdrs_relpost .BD_random_title {
list-style-type: none;
width: 100%;
padding: 10px;
text-align: right;
margin-right:39px;
}
#bdrs_relpost .BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
}
#bdrs_relpost .BD_random_title a:hover {
color:#990000;
text-transform: none;
}
#bdrs_relpost .navbox {
position: relative;
float: right;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bDlaTsNMhlpjx8Y4AANe5DMbfYwbs7x5VpjdMJNSf-y5_UKpLEGGWktg6voEkQaAurDJGhs0MuMF2R5vAFPvhWD9FeOikY0fzIrF4QRFzEeulRq_HBZOtwsE2wEnVABd-dJHWsawqVQ/s1600/back.png') no-repeat 0% 0%;
display: block;
width: 140px;
position: relative;
padding:2px 0 5px 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#bdrs_relpost li {
margin: 5px 0 0 0;
list-style-type: none;
}
#bdrs_relpost .fb li a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZnRYznFvv82e0ersRtEGdcDGXQGh9Estze6tZ-POf8qYpliWLHgMiFYXIQfm9xyrCBhSbTGtjDl8IJVXmMYwxN5av4vw_gIzmWNxdUhB5vkTRBeUUEo82VaxBhla8gqM476X4zjrNQ9A/s1600/RFB.png') no-repeat -12px 0;
color: #0546DC;
padding: 15px 15px 15px 45px;
width: 100px;
display: block;
text-decoration: none;
margin:-4px 0 -10px -40px;
}#bdrs_relpost .fb li a:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZnRYznFvv82e0ersRtEGdcDGXQGh9Estze6tZ-POf8qYpliWLHgMiFYXIQfm9xyrCBhSbTGtjDl8IJVXmMYwxN5av4vw_gIzmWNxdUhB5vkTRBeUUEo82VaxBhla8gqM476X4zjrNQ9A/s1600/RFB.png') no-repeat 12px 0;
color: #01446B;
padding: 15px 15px 15px 65px;
}
#bdrs_relpost .tw li a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-8Ke6fzops07xu0NX1uDty3IygbIj0mhC31i7PAt9DU-PVP7pPbokx4_MSsM6esKzJYuVaW5doje1D2QPUobKsc7_l0qQHCC6CZWx6TRIxYvpfEweuPqVaJhuWKkwwSovKBHWcEX7UM/s1600/RTW.png') no-repeat -12px 0;
color: #009999;
padding: 15px 15px 15px 45px;
width: 100px;
display: block;
text-decoration: none;
margin:0 0 -10px -40px;
}#bdrs_relpost .tw li a:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-8Ke6fzops07xu0NX1uDty3IygbIj0mhC31i7PAt9DU-PVP7pPbokx4_MSsM6esKzJYuVaW5doje1D2QPUobKsc7_l0qQHCC6CZWx6TRIxYvpfEweuPqVaJhuWKkwwSovKBHWcEX7UM/s1600/RTW.png') no-repeat 12px 0;
color: #00CCCC;
padding: 15px 15px 15px 65px;
}
#bdrs_relpost .gw li a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBG-e26LlCLoTiLzUEqdKVXG3vMWIlBWe-7JR8Nv22zQxAf8y1sELymIqozBe1Oj1yVm0eghoSjyELXaBz62cZ_KdVbuos6aNd0ZjzTez0YiTsq3dCvZFLechV0wAkuuWw2jvG7Yl7suY/s1600/gpluss.png') no-repeat -12px 0;
color: #FF6633;
padding: 15px 15px 15px 45px;
width: 100px;
display: block;
text-decoration: none;
margin:0 0 0 -40px;
}#bdrs_relpost .gw li a:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBG-e26LlCLoTiLzUEqdKVXG3vMWIlBWe-7JR8Nv22zQxAf8y1sELymIqozBe1Oj1yVm0eghoSjyELXaBz62cZ_KdVbuos6aNd0ZjzTez0YiTsq3dCvZFLechV0wAkuuWw2jvG7Yl7suY/s1600/gpluss.png') no-repeat 12px 0;
color: #CC0000;
padding: 15px 15px 15px 65px;
}
/*code CSS end */

Install Program Tag HTML

Untuk memanggil widget related post blogspot tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

• Setelah anda sudah memasang CSS widget related post blogspot saatnya anda memasang kode htmlnya.
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
• Save template anda dan lihat hasilnya, selamat berkreative.

<!-- BDRS widget related post blogspot code start -->
<div id='bdrs_relpost'>
<div style=' float:right '>
<div class='navbox'>
<ul class='fb'>
<li><a href='LINK FACEBOOK'>facebook</a></li></ul>
<ul class='tw'>
<li><a href='LINK TWITTER'>Twitter</a></li></ul>
<ul class='gw'>
<li><a href='LINK GPLUS'>Gplus</a></li>
</ul></div><div style='float:left'>
<div class='BD_random_title'>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div></div>
</div></div>
<!-- BDRS widget related post blogspot code end -->

Keterangan Gambar

• Code warna MERAH ganti dengan link social media anda.
• Silahkan anda edit kembali kode CSSnya untuk menyesuaikan tampilannya sesuai dengan template anda.

Kesimpulan

widget related post blogspot dengan tambahan widget social media sangat cocok buat halaman blogspot yang sangat memperdulikan tampilan halaman blognya.

Bila teman teman mengalami kesulitan dalam memasang kode widget related post blogspot ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda. Semoga postingan ini bermanfaat buat teman teman.

Widget related post blogspot
Jumat, 15 Nopember 2013
Rivai Silaban | Blog Design

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 : 10:38 PM