Jumat, 14 November 2014

Cara Membuat Popular Post Thumbnail

Cara Membuat Popular Post Thumbnail

Apa yang dimaksud Popular Post Thumbnail? mungkin dari sebagian anda menanyakan apa yang dimaksud dengan popular post thumbnail. Saya akan menjelaskan pertanyaan anda tersebut serta membagi sedikit ilmu yang baru saya dapat dan beserta contohnya semoga dengan apa yang saya bagikan ini bermanfaat bagi saya dan bagi anda yang membacanya.

Yang dimaksud dengan popular post thumbnail adalah popular post atau artikel populer yang yang sering dikunjungi oleh pengunjung dalam suatu blog dan popular post ini dalam bentuk gambar tetapi jika anda arahkan cursor ke salah satu gambar maka akan muncul judul artikel dari gambar tersebut.

Cara Membuat popular post dalam bentuk gambar

  1. Login ke akun bloger saudara
  2. Klik tata letak ==> tambahkan gadget popular post
  3. Setelah itu klik Template ==> edit HTML
  4. Cari kode ]]></b:skin> copy kode yang ada dibawah ini dan pastekan tepat diatasnya:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='related_posts'><div class='widget-content'><h4>Artikel Terkait</h4><div id='data2007'/><br/><br/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 10;var maxNumberOfLabels = 2;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 2;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;data2007&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div></div></b:if>

     5. Setelah itu cari kode yang mirip dengan kode yang ada dibawah ini
 <!-- (3) Show only thumbnails --><div class='item-thumbnail-only'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a></div> 
     6.  Ganti kode yang diatas dengan kode yang baru di bawah ini
<!-- (3) Show only thumbnails --> <div class='item-thumbnail'><a expr:href='data:post.href' expr:title='data:post.title' target='_blank'><img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/></a></div>
          Angka yang berwarna merah merupakan tinggi dan lebar gambar sesuaikan dengan kebutuhan blog             anda dan keinginan anda
     7.  Klik simpan dan lihat

Lihat Cara membuat Popular Post yang lain

1 komentar:

  1. If you need your ex-girlfriend or ex-boyfriend to come crawling back to you on their knees (even if they're dating somebody else now) you must watch this video
    right away...

    (VIDEO) Get your ex back with TEXT messages?

    BalasHapus