Senin, 04 November 2013

Mempercantik Popular Posts With CSS No Thumbs Image

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan memberikan tutorial yaitu cara Mempercantik Popular Posts With CSS (No Thumbs Image). dimana pada postingan saya yang lalu pernah juga membahas cara Mempercantik Popular Posts With Thumbs. dan Mempercantik Popular Posts With Thumbs dan Summary.

Baiklah langsung aj deh,dan berikut contohnya :


Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :





    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/* Grid Populartpost by http://.blogspot.com */
#PopularPosts1 ul li a:hover{color:#fff;text-shadow:-1px 1px 0px #000;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family:Arial, Times New Roman, Times, serif; font-size: 13px;font-weight:bold; letter-spacing: normal;margin: 0px 40px 0px 0px;  orphans: 2; padding:0;line-height: 18px; min-height: 30px;  text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;text-align:justify;}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:5px;right:5px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;text-align:center;width:20px;height:20px;line-height:1em;padding:8px;font-size:20px;color:#fff;text-shadow:0 1px 1px #000;}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:92%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:92%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:92%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:92%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:92%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border-radius:20px 0px 20px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

-Kode warna merah diatas adalah panjang setiap popular Post (1-6), Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.

4. Setelah langkah diatas selesai, 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 == &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>

5. Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id=PopularPosts1 locked=false title=Popular Posts type=PopularPosts>
<b:includable id=main>
  <div class=widget-content popular-posts>
    <ul>
      <b:loop values=data:posts var=post>
      <li>
        <b:if cond=data:showThumbnails == &quot;true&quot;>
          <b:if cond=data:showSnippets == &quot;true&quot;>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href=data:post.href expr:title=data:post.title target=_blank><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class=item-title><a expr:href=data:post.href expr:title=data:post.title target=_blank><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 expr:title=data:post.title 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 expr:title=data:post.title target=_blank><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 expr:title=data:post.title 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 expr:title=data:post.title target=_blank><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>

6. Terakhir Simpan Template.


Demikian tadi tutorial Mempercantik Popular Posts With CSS (No Thumbs Image), jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar yang tersedia, maaf jika saya kurang baik menyelaskannya. :D selamat mencoba dan semoga bermanfaat.!!
Diposting oleh di
Label: , , , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)