PETA

PETA
DESAINS TGK.ABANG
Showing posts with label Cara memasang kolom atau kotak entri popular. Show all posts
Showing posts with label Cara memasang kolom atau kotak entri popular. Show all posts

Sunday, November 2, 2014

CARA MEMASANG KOLOM ATAU KOTAK ENTRI POPULAR ( POPULAR POSTS )

Cara memasang kolom atau kotak entri popular ( popular posts )

Agar blog kita lebih nyaman untuk dikunjungi oleh orang banyak dan juga lebih menarik untuk dilihat,maka salah satunya adalah dengan cara membuat kolom atau kotak entri popular ( popular posts ) agar tidak memanjang kebawah,yaitu dengan menjadikan kolom atau kotak entri popular   (popular posts )  supaya pendek .
Pertama anda buat dulu Widget entri popular ( popular posts )  dan kemudian baru anda masuk ke menu template blog anda dengan cara :

1.    Masuk ke menu settingan blog anda
2.   Klik template blog , lalu klik edit html
3.   Cari kode <div class='widget-content popular-posts'>
4.   Untuk mempermudah pencarian klik ctrl + f atau f3 , lalu tulis atau copy paste <div class='widget-content popular-posts'> kedalam kotak pencarian
5.   Jika sudah ketemu, Simpan kode di bawah ini tepat di bawah kode <div class='widget-content popular-posts'>
<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>


6.   Sehingga menjadi kode seperti di bawah ini

  <b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>
    <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>
</div>
</b:includable>

Dan beri kode penutupnya yaitu kode </div> pada baris yang ke 2 , sehingga kode </div> nya menjadi 2 baris di atas kode </b:includable>
7.   Kemudian klik simpan template
Catatan yang perlu di perhatikan pada kode dibawah ini adalah :

<div style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #5F04B4;'>

1.    Kode height: 300px adalah untuk membuat tingginya kotak atau kolom entri popular ( popular posts ) .
2.   Kode  5F04B4adalah untuk membuat warna kotak atau kolom entri popular ( popular posts ).
3.   Silahkan anda download kode warna di link di bawah ini .






                                                                        PENULIS ( DESAINS ) TGK. ABANG