Blog Tutorial Bisnis Online

Cara Membuat Popular Post Bergambar Tanpa Judul

Tips kali ini saya berbagi trik bagaimana cara membuat Popular Posts bergambar pada blog atau web tanpa Judul dan keterangan saat di sentuh gambar bergerak.
Sebenarnya sudah banyak yang membuat tutorial seperti ini bagaimana cara membuat popular post bergambar pada blog hanya saja ini saya post sebagai catatan biar saya tidak lupa jika suatu saat saya memerlukanya.oke gaes langsung aja...yach
ikuti langkah di bawah ini Cara Membuat Popular Post Bergambar Tanpa Judul
  1. Login ke akun Blogger anda
  2. Masuk ke dasbord blogger pilih Tata Letak
  3. Pada menu dalam Tata Letak lalu klik Tambahkan Gadget
  4. pada kolom Dasar-dasar pilih Entri Terpopuler
  5. Selanjutnya anda Konfigurasikan seperti Gambar di bawah ini
  6. Selanjutnya masuk ke Edit Html pada menu Template
  7. Cari kode ]]></b:skin> lalu taruh kode berikut ini di atasnya
Copy paste kode di bawah ini..!!  
 .popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:15px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
.popular-posts ul li img {padding:0px;height:67px;width:67px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;}
.popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

Keterangan untuk yg berwarna biru sesuaikan dengan lebar template anda untuk mengatur ukuran gambar.

Selanjutnya masih di dalam menu edit html
Cari kode seperti di bawah ini di dalam Template anda
 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Tekan Ctrl+F agar lebih mudah dalam pencarian

Jika sudah ketemu silahkan anda ganti dengan kode di bawah ini
<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 == "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-thumbnail-only'>
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0'
expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'
expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHh1kB5y8qTuBNQQTd8kgRhz43U6XNBoCZULT1CEukl0E-OLD33hohHHpaYalzkIYRODaphOlFXYByMEPrYRgiBXqb-8l5VNLCjg4v1M4tltJntjIJoccfQwF0qQqoMCMpIINQSREQFRA/s72-c/default.png'
 expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>
</div>
<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>

Lalu anda Save Template anda dan perhatikan perubahan pada Popular Post anda yang baru.
sekian dan terima kasih "selamat mencoba dan Semoga berhasil" dalam Membuat Popular Post Bergambar Tanpa Judul
    Share:
    Distributor Pulsa Murah | Bisnis Pulsa Elektrik Murah | Dealer Pulsa Murah | Server pulsa murah : Cara Membuat Popular Post Bergambar Tanpa Judul

    Menu

    Postingan Populer

    Facebook