Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Sunday, August 18, 2013

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 12:38 PM

13 comments :

  1. Kunjungan pertama. Pake foto juga dong di artikelnya supaya ada gambaran sekilas ttg demonya :)

    ReplyDelete
    Replies
    1. Salam kenal dari saya..
      boleh juga sarannya sob, tapi terkadang repot ngeditnya dan terkadang banyak yang bajak soalnya saya sudah pernah lihat gambar saya dibajak yah sekalian saja dibuat DEMO aslinya,
      Thx atas kunjungannya..

      Delete
  2. sob mau tanya tentang widget ini sob Post perlabel with 1 image ada tutornya gk...???

    btw tutor ini sy coba dl ya, makasih sob salam kenal :)

    ReplyDelete
    Replies
    1. ada, silahkan di lihat artikel lainnya sob..

      salam kenal juga

      Delete
  3. Sob kog tulisan "artikel berlangganan gratis melalui e-mail" nya terpotong ya ?? mohon bantuannya ....

    ReplyDelete
    Replies
    1. terpotong gimana, coba i cek lebar dari ukuran wigetnya mas...

      Delete
  4. Tulisan nya keluar dari kotak nya sob, Coba di cek di blog temen saya (level-of-delusion.blogspot.com).. Maklum masih pemula sob hehehe..

    Makasih !

    ReplyDelete
    Replies
    1. heheh iya yah...

      coba dilihat bagian CSS .BDRS-box h2, #related-posts h2 tambahkan code width:auto; didalam CSSnya.
      tulisan H2 atau title subscribe dipengaruhi postingan H2 blog mbak jadi harus ditambah kode lagi.
      Agar lebih abdol

      untuk lebar widgetnya pada blog mbak bagusnya ukuran pada #BDRS-widget {..}
      widthnya menjadi 590px;


      sama sama mbak..

      Delete
  5. Udh aku ubah mas, tetep gak bisa :(

    ReplyDelete
    Replies
    1. untuk judul subscribenya lihat CSS .BDRS-box h2 kemudian tambahkan kode [ width:auto; ]

      Delete
  6. Udah berhasil mas :) hehehe makasih ...

    ReplyDelete
  7. Mas, untuk membatasi jumlah related post gimana?
    Saya uda ganti kode max-results=5" tetap ga bisa.
    Preview http://www.asuransijiwa.co.vu

    Mohon bantuannya mas...
    Thanks

    ReplyDelete
    Replies
    1. biasanya hanya itu saja yang di ganti, tapi coba dulu di cek dengan baik kodenya kembali

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog