Cara Membuat Popular Post Keren Di Blog

Cara Membuat Popular Post Keren Di Blog
My Dream ○ Pada kesempatan kali ini saya akan sedikit berbagi Cara Membuat Popular Post Keren Di Blog dan pastinya juga SEO Friendly.Popular Post sangat berfungsi untuk memperlihatkan pada visitor beberapa artikel kita yang paling banyak dibaca mau pun popular saat ini.Jadi ini akan membuat para visitor penasaran untuk membacanya dan bertanya-tanya "Mengapa Artikel Ini Bisa Populer??".Nah dari pertanyaan itu akan membuat visitor mengklik artikel tersebut dan disana para visitor akan mulai tertarik untuk membaca artikel blog sobat dan menjelajah blog sobat dan keuntungannya adalah Trafic blog meningkat bahkan PR blog meningkat.

Berikut Tutorialnya Silahkan Disimak Baik-baik :
  • Loggin Ke Blog sobat.
  • Klik Tata Letak > Tambah Gadget > Entri Populer.
  • Silahkan Atur berapa jumlah Entri Yang sobat inginkan.
Add Gadget Entri Populer
  • Lalu pergi Ke Edit HTML dengan mengklik Template > Edit HTML dan carilah kode ]]></b:skin> ,gunakan CTRL+F untuk mempermudah pencarian.
  • Setelah bertemu kode diatas silahkan copy dan pastekan kode dibawah ini di atas kode ]]></b:skin>.
/* Popular Posts Widget ----------------------------------------------- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8b_-euqJq567s2JCcX8z_rVB-Y0PWDy1CIYHPeemfxs5cA7amw8fOUhh5yCw0S-MFc-1yr0o0C4e0y3kddQLsPxi7VvP_0kKF9MD6Kauui60VmvsKfD_66rWxz5yYZ-UdL15orZd5Vzk/s1600/1.gif)  no-repeat scroll 5px 10px;list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.popular-posts ul li:hover { border:1px solid #6BB5FF;}
.popular-posts ul li a:hover { text-decoration:none;}
.popular-posts .item-thumbnail img { webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

  • Setelah itu cari lagi kode <div class='widget-contentss'>.
  • Kalau sudah ketemu copy dan pastekan kode ini di bawah kode <div class='widget-contentss'>.Sebenarnya tanpa memakai ini pun tidak masalah tapi apa salahnya dicoba ^_^.Yang wajib dipasang adalah kode yang diatas.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <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>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget>
  • Sekarang Klik Save Dan lihat hasilnya.
Oke semoga artikel ini bisa membantu memperindah tampilan Blog sobat dan jangan lupa untuk meninggalkan komentar dan likenya..semoga berhasil..

2 Responses to "Cara Membuat Popular Post Keren Di Blog"

>>>>>Peraturan Berkomentar di Blogger Ini.<<<<<

[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Link aktif dalam komentar akan terhapus secara otomatis.
[+] Jika ingin menaruh Link Aktif Silahkan klik menu Tukar Link.
[+] Jika ingin berkomentar diluar topik postingan harap beri tanda OOT atau Klik Tombol OOT.
[+] Jika Ingin menggunakan Emoticon silahkan Klik Tombol Emoticon.
[+] Jika Ingin Request Tutor silahkan Klik Tombol OOT dibawah atau pergi ke Menu OOT.

Terima Kasih........

Konversi Kode Emoticon OOT