Rabu, 25 April 2012

Cara Membuat Related Post Thumbnail Dan Kotak Subscribe


By on 16.39

Cara Membuat Related Post Thumbnail Dan Kotak Subscribe - Kali ini saya akan membahas Tutorial Blog yaitu Cara Membuat Related Post Thumbnail Dan Kotak Subscribe maksud judul diatas adalah, dalam satu kotak ada Related Post Thumbnail (Artikel Terkait Dengan Gambar) dan Kotak Subscribe (Kotak Berlangganan) jadi disatukan. Disebelah kiri nya kotak subscribe/berlangganan, di sebelah kanan nya Related Post dengan Thumbnail (Artikel Terkait Dengan Gambar), apalagi Related Post dengan thumbnailnya ada efek hover nya pastinya keren. DEMO

Jika sobat tertarik, silahkan iktui langkah-langkah di bawah ini :

1. Login ke Blog sobat.
2. Pilih Rancangan.
3. Pilih EDIT HTML, jangan lupa Centang dulu Expand Widget Template nya.
4. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#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}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
5. Selanjutnya cari kode <data:post.body/> jika sudah ketemu letakan kode di bawah ini tepat di atas kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://johnytemplate.googlecode.com/files/related.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/blazer_blog' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://blazerracing.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blazer_blog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blazer_blog'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/blazer_blog'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blazer_blog?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
Yang berwarna merah ganti dengan URL Feedburner anda contoh : http://feeds.feedburner.com/blazer_blog 
Yang berwarna biru ganti dengan URL Blog sobat.

Sepertinya cuma segitu yang bisa saya jelaskan mengenai Cara Membuat Related Post Thumbnail Dan Kotak Subscribe jika ada kesulitan harap tinggalkan pesan di kotak komentar.

Script By : http://creatingwebsite-maskolis.blogspot.com/

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

19 komentar:

  1. makasih info cara membuat related posnya :)

    BalasHapus
  2. tutorialnya bagus... sangat bermanfaat.
    salam sukses ga..

    BalasHapus
  3. dua jempol gan buat anda, trim's infonya,,!

    BalasHapus
  4. mhn maaf mau tanya gan, saya mau cari link anda dimana ya? harap di maklum lg belajar hehe..

    BalasHapus
  5. maksudnya link saya yg mana mas.

    BalasHapus
  6. tukar link dengan anda gan..

    BalasHapus
  7. makasih informasinya, sangat membantu sekali,,,

    BalasHapus
  8. terimakasih banyak atas informasinya sangat bermanfaat

    BalasHapus
  9. informasinya sangat bermanfaat

    BalasHapus
  10. terimakasih atas informasinya sangt bermanfaat

    BalasHapus
  11. terimakasih atas informasinya sangat bermanfaat

    BalasHapus