Senin, 16 Juli 2012

Membuat Related Post Thumbnail dan Kotak Feedburner

Membuat Related Post Thumbnail dan Kotak Feedburner -
Related Post Thumbnail

Membuat Related Post Thumbnail dan Kotak Feedburner - Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Membuat Related Post Thumbnail dan Kotak Feedburner selain bisa menjadikan blog kita lebih SEO, fitur Membuat Related Post Thumbnail dan Kotak Feedburner juga memudahkan pembaca untuk menjelajahi blog kita.

Yah nggak perlu lama-lama lagi karena pasti sobat sudah tidak sabar untuk menambahkan ke blog sobat. Oke langsung saja:
  1. Pertama Anda mesti login ke blogger dulu
  2. Kemudian klik Template > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan. 
  4. Setelah itu, letakkan kode berikut di atas 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. Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)
    <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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjyDLRQwnW0Lpl3HQmDpulq6B-bKzqkWSBPhtTdVpo3J6SWb55l8hW3Z_rr-KMYIW9-2_Ys9V0C-yrXyyFPtr87YWZgOPOMkzl62l3vmsgTghpQ5SambUIJC9ej5gZvl3YDwSh_dKpdM/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/JohnyTemplate' 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://johnytemplate.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=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='JohnyTemplate'/>
    <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/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
    </form>
    </div>
    </div>
    </b:if>
    Keterangan :
    Warna JohnyTemplate : ganti dengan alamat feed anda.
    Warna http://johnytemplate.blogspot.com/ : ganti dengan URL anda.
  6. Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.

    Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.
Ref: http://creatingwebsite-maskolis.blogspot.com/2012/03/membuat-related-post-thumbnail-dan.html
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blogger Kendari

ads

Ditulis Oleh : Unknown Hari: 18.43 Kategori:

Comments
0 Comments

0 komentar:

Gambar Komentar

 

Yang Ngintip Disini

cbox