Beranda > DESIGN > Desain Populer Buat Web atau Blog Galeri

Desain Populer Buat Web atau Blog Galeri

Desain Populer Buat Web atau Blog Galeri

Desain Populer Buat Web atau Blog Galeri

 

  1. login ke Blogger
  2. Masuk ke template >> klik Edit HTMl centang Expand Widget Templates.
  3. lalu masukkan kode berikut ini diatas

    .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)} 

    Silahkan disesuaikan dengan web atau blog sobat masing2

  4. Kemudian masuk ke menu layout >> add a gadget pilih Popular Post pada baris kelima.
  5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

    Desain Populer Buat Web atau Blog Galeri

    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 :

    <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’>
                  <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>

  7.  Setelah kode di atas ketemu, ganti dengan kode berikut 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>

  8.  langkah yang paling terakhir, save templates dan  lihat hasilnya.

Sumber: FreeBacklink

  1. April 12, 2014 pukul 9:54 am

    You can choose modern minimalist theme, elegant or romantic themes of interest.
    Learning Photography Online made simple by Dan Feildman.
    It is always accomplished utilizing trees, rocks
    along with other objects of nature.

  2. April 24, 2014 pukul 4:29 am

    I would recommend a 90-day plan where you aim to write every day, contribute to a relevant forum or group every day and
    spend an hour a day researching competitors in your niche to see how they monetize their blogs and sites.
    I think this is a step for Iran in filling part of the important role women play
    in politics. Plus these sites allow you to blog without having to learn the right along with your
    visitors and search engine rankings.

  3. Mei 22, 2014 pukul 6:05 pm

    My brother recommended I may like this blog. He was once totally right.
    This submit actually made my day. You can not consider simply how so much time I had spent for this info!
    Thank you!

  4. Mei 23, 2014 pukul 10:36 pm

    I’m really impressed with your writing skills as well
    as with the layout on your blog. Is this a paid theme or did you modify it
    yourself? Anyway keep up the nice quality writing, it’s rare to see a great blog like
    this one these days.

  5. Juni 15, 2014 pukul 3:09 pm

    Hey there! Do you know if they make any plugins to assist with Search Engine Optimization? I’m
    trying to get my blog to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Appreciate it!

  6. Agustus 6, 2014 pukul 12:46 am

    grat submit, very informative. I’m wondering why the other specialists of this
    sector don’t realize this. You must continue your writing.
    I’m confident, you’ve a huge readers’ base already!

  7. September 20, 2014 pukul 6:36 am

    Heya i am for thhe first time here. I came across this board aand I find It really useful & it helped me out a lot.

    Ihope tto give something back and aid others like you helped me.

  8. November 7, 2014 pukul 7:18 pm

    Awesome! Its genuinely awesome piece of writing, I have got much clear idea on the
    topic of from this paragraph.

  9. November 18, 2014 pukul 11:46 am

    Nice side!

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: