Cara Membuat Scroll Bar di Populars Post Blog

Oleh Unknown

Tuesday, July 25, 2017

Bagikan :

Tweet

Cara Membuat Scroll Bar di Populars Post Blog - pada kesempatan kali ini saya akan memaparkan bagaimana cara agar populars post di blog kita bisa memiliki scroll bar. post ini sebenarnya hampir sama dengan post saya yg kemarin yaitu bagaimana cara membuat scroll pada label/kategori blog.

Dengan memberikan scroll bar pada populars post diblog maka dapat memberikan ruang yang lebih luas pada blog kita karena kia dapat mengatur sendiri tinggi dari populars post kita.

Berikut Cara Membuat Scroll Bar di Populars Post Blog (Pertama):

1. Login blog anda,2. Pilih Theme Lalu Klik Edit HTML

3. Setelah itu cari tulisan Populars Post agar lebih cepat menemukannya maka silahkan tekan tombol Crtl + F lalu masukkan Populars Post lalu enter

4. Jika anda menemukan kodenya seperti digambar berikut maka klik drop downnya.

5. Setelah itu anda kan menemukan kode kurang lebih seperti berikut.

1. <b:widget id='PopularPosts1' locked='false' title='Terpopuler' type='PopularPosts'> <b:includable id='main'>
   
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div style='overflow:auto; width:ancho;height:500px;'>
   <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>
   </div>
   </div>
   </b:includable>
   </b:widget>

catatan:

=> Tulisan  <div style='overflow:auto; width:ancho;height:500px;'>  adalah kode yang harus  ditambahkan di atas tulisan <div class='widget-content popular-posts'>.

=> height:500px yaitu tinggi  dari populars post blog kita, anda bisa merubahnya  seperti height:450px dan sebagainya.

=> Tambahkan pula kode </div> di atas kode </b:includable>

6. setelah itu silahkan anda save thema kalian.

Cara Membuat Scroll Bar di Populars Post Blog (kedua) paling mudah..

1. Pertamamasuk di Blogger anda di www.blogger.com
2. Kemudian Pilih Theme kemudian klik Edit HTML
3. Selanjutnya cari kode ]]></b:skin> atau </style> (gunakan control F untuk mempermudah pencarian)
4. Setelah ditemukan silahkan letakkan kode di bawah ini tepat diatas kode ]]></b:skin> atau </style>

5. #PopularPosts1 .widget-content{
   height:300px;
   width:auto;
   overflow:auto;
   }

6. Silahkan ubah tinggi widgetnya yaitu height:300px; sesuai yang anda inginkan
7. Terakhir Klik Save Theme dan lihat Blog anda

 Sekian tutorial Cara Membuat Scroll Bar di Populars Post Blog, semoga bisa bermanfaat bagi kita semua salam Bloger

Tag : Blog SEO, Tips N Trik