EDHO-TECH

Hallo sboat EDHO-TECH, kaliini saya akan share tutorial blog yaitu. Cara Membuat Widget Popular Post Berbentuk Gallery. kemarin saya udah share BBM di Android dan iOS, BlackBerry Bunuh Diri? dan CPU Komputer Seharga Mobil Avanza . Mungkin kalian udah biasa dengan tampilan popular post berderet. apa kalian tau dampak negatif pengguna popular post berderet ? ya, kalian tau kalo kalian memasang popular post;/postnig populer berderet ini membuat blog berat. bayangkan jika popular post di tampilkan hanya 5 , maka widget popular post/posting populer meload/memuat 5 posting . Waw ! jadi blog berat . jadi ini saya kasih tutor agar tidak berat dan tampilan unik. yuk langsung meluncur ke tutorial .

Langkah pertama yang kalian lakukan adalah membuat widget popular postnya terlebih dahulu ya. Berikut cara membuat popular post nya .

1. Login ke blogger sobat, langsung ke tata letak
2. Kemudian klik tambahkan widget
3. Kemudian pilih entri populer/popular post
4. Centang hanya image thumbnail/thumbnail gambar
5. Kemudian simpan/save

Nah, kalo sudah kita akan membuat berbentuk gallery 

• Klik menu template pada dashboard, klik edit html
• Cari kode ]]></b:skin>
• Copy dan pastekan kode di bawah ini di atas kode ]]></b:skin>

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none;color: #fff;}
.PopularPosts ul{padding:5px 0;color: #fff;}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0;color: #fff;}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{-webkit-transform:scale(0.9) !important;-moz-transform:scale(0.9) !important;-o-transform:scale(0.9) !important;transform:scale(0.9) !important;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #91009a;overflow: hidden;-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;}
.PopularPosts .item-title{background:#91009a;position:absolute;bottom:8px;right:2px;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;}

NB :

1. Kode yang berwrna ungu adalah warna border dan backgroundnya 
2. kode yang berwarna merah ukuran gambar gallerynya

• Langkah selanjutnya adalah cari kode di bawah ini / yang mirip

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

kemudian ganti semua kode tersebut dengan kode di bawah ini

 <b:widget id='PopularPosts1' locked='false' title='Most Product View' 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (3) Show only 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>
<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>

• Simpan Template Dan Lihat Hasilnya :D

 Semoga Bermanfaat !