Cara Membuat Popular Post Keren Di Blog

Oleh Unknown

Senin, 12 Januari 2015

Bagikan :

Tweet

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.

• 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/AVvXsEiLzc8HkZoAI-afMuHzxAWSKuBjc_6S-QPcaJUBeQv_w64LbPzUHwn6Q2EMet0c77IcHb6f1dQ9gCekD3JdM7Je68HiHF5pGW0IUcTikm57oMt0PHjk8CUgw5NqKnkNJrTEZ05GuvxuY0Q/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..

Tag : Tutorial Blogspot