Cara Menambahkan Popular Posts Gallery di atas Posting Blogger

Cara Menambahkan Popular Posts Gallery di atas Posting Blogger. Popular Posts adalah artikel yang paling sering di buka dan di lihat oleh pengunjung, Popular Posts berisi daftar artikel yang seing di buka dan biasanya Popular Posts di letakan sebagai Widget. Dengan adanya Popular Posts pada blog pengunjung akan mengetahui artikel yang paling banyak di lihat dan di baca oleh pengunjung. Anda dapat membuat Popular Posts menjadi menarik dengan membuatnya seperti Galery dan meletakannya di atas posting, dengan cara ini pengunjung akan melihat artikel-artikel terpopuler terlebih dahulu sebelum membaca artikel di bawahnya. Dengan cara-cara di bawah ini anda dapat dengan mudah membuat Popular Posts Galery, Popular Posts yang akan kita buat ini berbentuk Slide yang dapat kita geser untuk melihat lebih banyak. Popular Posts ini akan menampilkan 10 artikel yang paling sering di buka dan akan menampilkannya tepat di atas posting Blogger.

Cara Menambahkan Popular Posts Gallery di atas Posting:

1. Login pada Blogger dan pergi ke Dashboard
   
2. Buka Template, setelah itu BackUp Template untuk berjaga-jaga bila mengalami kesalahan dan klik pada Edit HTML
   
   
   
   
3. Klik pada kotak HTML dan tekan pada keyboard CTRL + F untuk membuka kotak pencarian
    
   
   
   
4. Cari kode ]]></b:skin> dengan memasukannya pada kotak pencarian
   
5. Tambahkan kode dibawah ini tepat di atas atau sebelum kode ]]></b:skin>

   #gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
   #gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
   #gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirK_D5JWLwAJ-wdXkwEyFoQ65DDuTKTp2llKhJr2mLaabwIAkUYp3gwTYEk_19B1yKKtHxod-pWCM5VOuxilxdb-9ZVUl16tW9E7uUGdEzS0VmaKZ2mC9sW_uPfmCZ938SxXgHjBQpiOJF/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
   #gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
   #gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

   Catatan:
    Anda dapat menyesuaikan ukuran galeri, mengubah nilai-nilai yang berwarna merah (590 dan 126)
   
   
6. Selanjutnya carilah kode </head>
   
7. Setelah menemukan kode </head> tambahkan kode di bawah ini tepat di atasnya

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
   <script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   stepcarousel.setup({
   galleryid: "gallery",
   beltclass: "belt",
   panelclass: "panel",
   autostep: {enable:true, moveby:1, pause:6000},
   panelbehavior: {speed:500, wraparound:true, persist:true},
   defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZEIsIkiIyuIEiWMJUOcmcjrn9pBzavku5-Suh3L5WVBX19mTXzfcy0K_-HqPX_nPtTFyMhKx7jCM-bnyXuc72YAkUllNGtOyocx5rjcWyf-9KaIsxkryea1DXw9UccEi40aUuloErBPI/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM19XG_h-Gj9eEOB8yK56HbqwRq_VbNA80q0OIbY4ECXfdl3A0rj1pBZn1Wp2n7JNFluNQOS5uZPOjom9j3AGRbyJa4vEXVwopblIwA4jPOJJuox0kwyZQE3MvN3x_SuVKWXoE5c7rhHSe/s1600/next.png", 2, 36]},
   contenttype: ["external"]
   })
   //]]>
   </script>

8. Selanjutnya untuk menampilkan Widget tapat di atas posting carilah kode di bawah ini
   

   <b:section class='main'

9. Setelah menemukan kode di atas tambahkan kode berikut di bawahnya

   <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
     <div id='gallery'>
      <ul class='belt'>
       <b:loop values='data:posts' var='post'>
        <li class='panel'>
         <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
           <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
          <b:else/>
           <div class='item-title'>
            <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
           </div>
           <div class='item-snippet'>
            <data:post.snippet/>
           </div>
          </b:if>
         <b:else/>
          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
           <b:if cond='data:post.thumbnail'>
            <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
           <b:else/>
            <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVPUeTIwhsQkP_TcuNvmtDlSPDThU7I_uKgHnLdSVmy6dPfUr7Jtv4BQn3qWJh1LhCAEZFoVbigOjNW1H2ATgLCPruCDYIT1teayfrj0kkqdseQ5jzNHtkbb1kNBhD0u7baQYcC9Tf8Cw/s1600/no-image.PNG'/>
           </b:if>
          </a>
         </b:if>
        </li>
       </b:loop>
      </ul>
     </div></div></b:if>
   </b:includable>
   </b:widget>

   CatatanJika anda ingin menampilkan Widget Popular Posts Gallery pada halaman posting hapuslah kode berwarna Biru
   
10. Terakhir Simpan Template

Demikian tutorial dari saya mengenai Cara Menambahkan Popular Posts Gallery di atas Posting
Semoga bermanfaat dan Selamat mencoba ^_^