Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » » Modifikasi widget popular posts stylish with CSS

Modifikasi widget popular posts stylish with CSS

CSS , Tutorial Blog
Sunday 11 May 2014
Belum ada komentar
Untuk kesempatan kali ini saya akan share cara modifikasi popular post dengan css yang keren ganteng dan stylish :D yaitu "Modifikasi widget popular posts stylish dengan CSS".

Berikut cara modifikasi widget popular posts stylish dengan CSS

» TAHAP 1
1. Login akun blogger anda
2. Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer
3. Lalu pilih jumlah post yang akan ditampilkan, Setting seperti gambar berikut ini !
4. Klik Simpan
5. Klik Simpan Setelan

» TAHAP 2
1. Masuk ke Template » Edit HTML » Centang  
Letakan kode CSS berikut ini diatas kode ]]></b:skin> 
 .PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {
  width:60px;
  height:60px;
  padding:2px;
  -moz-border-radius:60px;
  -webkit-border-radius:60px;
  border-radius:60px;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  border:2px solid #CCC;
}
.popular-posts ul li img:hover {
  border:2px solid #ccc;
  -moz-transform:scale(1.2) rotate(-360deg);
  -webkit-transform:scale(1.2) rotate(-360deg);
  -o-transform:scale(1.2) rotate(-360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(-360deg);
}
.popular-post-isi {
  position:relative;
  background-color:#f7f7f7;
  padding:5px;
  min-height:60px;
  border:1px solid #ccc;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin-left:75px;
  margin-bottom:5px;
}
.popular-post-isi:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:19px;
  border-width:10px;
  border-style:solid;
  border-color:transparent #f7f7f7 transparent transparent;
}
.item-title {
  font-size:12px;
  line-height:1.1em;
}
.item-snippet {
  color:blue;
  font-size:11px;
  line-height:1em;
}

3. Cari kode dibawah ini
            <!-- (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;'/>

Untuk mudah menemukannya cari saja kode  <!-- (4) Show snippets and thumbnails -->Lalu ganti semua kode tersebut dengan kode berikut ini 
             <!-- (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 border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
                  </a>
                </div>
    <b:else/>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
     <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKFqgJcwOGbolL_Efu0OhMuvFoWAsu-ILRp0I7ggOZzmGhvoDV6fGnT2qo0DVhUb9fqcyPz5BHCbiGtbwRuvKoPS83F1OwvYPlflxSB198z7bpc3ib2hv7gIztDg3lPg8hA6CnJydomag/'/>
    </a>
    </div>
              </b:if>
              <div class='popular-post-isi'><div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
              <div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div></div>
            </div>
            <div style='clear: both;'/>  

4. Simpan Template dan Lihat hasilnya..

//Pengaturan
Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini:
.item-snippet { display:none }

Url ini: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKFqgJcwOGbolL_Efu0OhMuvFoWAsu-ILRp0I7ggOZzmGhvoDV6fGnT2qo0DVhUb9fqcyPz5BHCbiGtbwRuvKoPS83F1OwvYPlflxSB198z7bpc3ib2hv7gIztDg3lPg8hA6CnJydomag/
merupakan gambar yang tampil jika artikel tidak memiliki gambar, silahkan ganti denagn url gambar anda.
Sisanya silahkan anda sesuaikan sendiri.

Demikian posting tentang Modifikasi Widget Popular Posts Stylish dengan CSS, selamat berkreasi dan semoga bermanfaat.

Resource: http://mdf-blog.blogspot.com/2013/04/modifikasi-widget-popular-posts-stylish.html
Terima kasih telah membaca artikel tentang Modifikasi widget popular posts stylish with CSS di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template