Home » » Cara Membuat Kotak Feedburner dan Related Post

Cara Membuat Kotak Feedburner dan Related Post

Written By AiRa LoKa on Minggu, 05 Mei 2013 | 14:07


     Hai semua... tutorial ini terinspirasi oleh template saya sebelumnya yaitu jhonny wuss buatan maskolis. Pada template itu saya lihat dibawah postingannya ada sebuah gadget related post dan kotak subscribe via rss feed. sayapun mencoba untuk mencari-cari scriptnya pada edit HTML. Untungnya pada tampilan edit html yang baru memudahkan saya untuk mencarinya. Akhirnya dengan penuh perjuangan, saya menemukan scriptnya. Nah, karena saya tidak pelit, Langsung saja..
Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Lalu cari kode ]]></b:skin>.

2.  Pastekan script dibawah ini diatas kode ]]></b:skin>.
/* Recent Post n Feedburner AiRa LoKa ---------------------------------------------- */
#related{background:#F0F2F5 url(http://lh5.ggpht.com/_1j80TgNqd_8/TTXQmVGix9I/AAAAAAAABZE/_YaCDdI-tAc/s128/rss_feed_logo.png) no-repeat bottom right; border:1px solid #aaa;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{font:bold 14px Arial;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 #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial}
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:#333;border:1px #0099ff;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://3.bp.blogspot.com/-kci2j8VxzNY/UPw8jUo8hzI/AAAAAAAABNw/xV9j7En07ew/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block} 
3.  Cari kode <data:post.body/>. Letakkan script dibawah ini tepat dibawah kode <data:post.body/>.
Nb: Biasanya kode <data:post.body terdapat 3 sampai 4 buah. letakkan pada kode yang kedua.
<div class='clearfix' id='related'>
  <div class='related-posts'>
    <p>Artikel Terkait</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=5;
      </script>
      <script src='http://yourjavascript.com/1198561349/relatedimg.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'>
   <center>
     <p class='intro'>Jika anda menyukai artikel ini
     <a href='http://feeds.feedburner.com/airaloka' target='_blank' title='feedburner'><b>Klik disini</b></a>, atau berlangganan untuk menerima konten yang lebih bagus .
         </p>
         <p class='feed'>
           <a href='http://airaloka.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a>
         </p>
    <div action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=feedburner/airaloka&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p><br/>Enter your email address:<br/></p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='feedburner/airaloka'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p><br/><a href='http://feeds.feedburner.com/feedburner/airaloka'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/feedburner/airaloka?bg=0099ff&amp;fg=444444&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></p></div>
     </center>
  </div>
</div>
4.  Ganti kode yang berwarna biru dengan id feedburner anda. Dan yang kode yang berwarna merah dengan url blog anda.

5.  Simpan.

Selamat mencoba!

1 komentar:

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger