free-cpanel-hosting

http://ainunxxx.blogspot.com/2017/03/free-cpanel-hosting-we-offer-you-unique.html

cpanel + hosting

28 Mar 2017

Free CPanel Hosting We offer you unique feature that no one else can give you - free web hosting account with Basic CPanel control panel

EXAMPLE>>> http://ainunx.thefreecpanel.com/ Features you will Enjoy Free Site Builder Don't know how to code your...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...

TOP themes

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...

Videos News

21 Mar 2017

AccessPress Store - How to set HomePage

AccessPress Store – A next generation WooCommerce theme fully built in customizer! We call it next generation because it i...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...


» » Modifikasi Popular Post



    popular


    Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
    1. Login ke Blogger dengan akun Anda
    2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
    3. Lalu masukkan kode berikut ini diatas ]]></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}
      .PopularPosts ul{padding:5px 0}
      .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
      .PopularPosts .item-content{position:relative;float:left;margin:0}
      .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
      .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
      .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
      .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
      Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
    4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
    5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

      popular

      Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
    6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
  1. <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 == &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>
    </b:includable>
    </b:widget>
  2. Setelah ketemu, ganti dengan kode berikut ini :
  3. <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 == &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-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>
  4. Terakhir, save templates lihat hasilnya.

About Me

«
Next
Thisdemo2 Blogger Store Template originally named Johny Wusss which design by Maskolis
»
Previous
template ini sama dengan Johny Kenthir template

No comments:

Leave a Reply