Cara Membuat Related Post Thumbnail Dan Kotak Subscribe


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.

 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/CoretanDiko' 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://coretandiko.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=CoretanDiko&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
 <input name='uri' type='hidden' value='CoretanDiko'/>
 <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/CoretanDiko'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/CoretanDiko?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/CoretanDiko

Yang berwarna merah 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.

1 komentar: