Related Post Thumbnail dengan kotak Feedburner

Related Post Thumbnail  dengan kotak Feedburner - Setelah banyak yang menanyakan bagaimana Cara membuat Related Post Thumbnail  dengan kotak Feedburner, Kali ini saya akan menulis Related Post Thumbnail  dengan kotak Feedburner. widget Related Post Thumbnail  dengan kotak Feedburner adalah dimana Related Post Thumbnail  menyatu degan  kotak Feedburner dan biasanya Widget ini diletakan dibawah postingan. Untuk melihat Demo'a bisa dilihat Dibawah postingan ini dan Pada gambar dibwah ini :



Tanpa basa basi Langsung saja Membuat Related Post Thumbnail  dengan kotak Feedburner :
  • Masuk Ke bloger
  • Pilih Template > Edit Html > centang expand widget templates
  • Jangan Lupa download template untuk berjaga - jaga
  • Cari kode ]]></b:skin> dan letakan Code dibwah 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuu_knjXxrMu7CPAnBGvVgF2bN7YiASfhBleA-8w6qklTwhqBxuJcf6padCODGPvYSV0C3QVJ5sGRkAlv5VgEbJfVSHT1B7Xo_BwCa099D71DxRBpwx0qZTjgLCA0pg0mj5tIL4A_s8E/) 0 50% no-repeat;vertical-align:middle}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
  • Selanjutnya cari kode <data:post.body/>  dan copy paste kode dibawah ini dan letakan dibawah kode tadi ( biasanya terdapat lebih dari satu kode, gunakan pada nomer 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/AVvXsEg_Xklhlnv-9c0ZQ9kC2vFhkpSF_rzWI-3hv3dbmMF5O8qXrHdSJTy7O-QIDlwP3xmxqSyKEKL5icB-k9oue0OXZJkwYoerCWY8twslMcxbo6SWNl661oQDVqiFLfhpy3W_VraY5bGglhA/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='ganti dengan alamat Feed' 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://liputaninformasi.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=Liputaninformasi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='Liputaninformasi'/>
    <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='ganti dengan alamat Feed'><img alt='' height='26' src='ganti dengan alamat Feed?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
    </form>
    </div>
    </div>
    </b:if>

Keteranga : Warna biru : ganti dengan alamat feed anda. Warna merah : ganti dengan URL anda. Save Tample dan litat hasilya nah sekian dulu tutorial Membuat Related Post Thumbnail  dengan kotak Feedburner, selamat Mencoba

Anda sedang membaca artikel tentang Related Post Thumbnail dengan kotak Feedburner dan anda bisa menemukan artikel Related Post Thumbnail dengan kotak Feedburner ini dengan url https://liputaninformasi.blogspot.com/2012/04/related-post-thumbnail-dengan-kotak.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Related Post Thumbnail dengan kotak Feedburner ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Related Post Thumbnail dengan kotak Feedburner sebagai sumbernya.

0 komentar:

Posting Komentar