Cara Modifikasi Widget Popular Posts Keren Dengan CSS Pada Blogger

Modifikasi Widget Popular Posts Keren Dengan CSS


Menambahkan Widget Popular Posts atau Artikel paling banyak dibaca di berguna untuk menaikan trafik pageview pada blog kita. Dengan memasang widget tersebut, akan menarik perhatian para pengunjung untuk mengklik dan menambah waktu kunjungan pengunjung tersebut, sehigga bounce rate blog semakin kecil.
Cara Modifikasi Widget Popular Posts Keren Dengan CSS Pada Blogger
Popular Post with CSS
Blogger sendiri sudah menyediakan widget ini, namun karena tampilannya yang kurang menarik membuat para blogger mencari tutoial tentang modifikasi widget yang lebih keren, tentu saja dengan CSS. Untuk itu, netomaniak.com mencoba membagikan Cara Modifikasi Widget Popular Posts Keren Dengan CSS Pada Blogger.

A. Menambahkan Widget Popular 

1. Silahkan Masuk ke akun blogger anda dan pilih Blog anda.

2. Sekarang masuk ke menu Tata Letak / Layout dan Klik Tambahkan gadget/Add Gadget.

3. Scrool ke bawah dan Cari Popular Post lalu klik.

Cara Modifikasi Widget Popular Posts Keren Dengan CSS Pada Blogger

4. Sekarang Setting Widget/gadget anda sesuai dengan gambar di atas lalu klik Simpan.

Sekarang silahkan preview blog anda, apakah widget sudah muncul atau belum.

B. Memodifikasi Tampilan Popular Post dengan CSS

Ini adalah tutorial untuk memodifikasi tampilan gadget popular post agar tampilannya lebih stylish/keren dan menarik perhatian pengunjung. Ikuti langkah-langkahnya dengan benar:

1. Silahkan Masuk ke EDIT HTML template anda, lalu cari kode ]]></b:skin>

2. Sekarang Copy kode CSS dibawah ini dan patekan tepat diatas kode ]]></b:skin>
.PopularPosts li{margin-bottom:-10px}
.PopularPosts .item-thumbnail{float:left}
.popular-posts ul li img{width:60px;height:60px;-moz-border-radius:60px;-webkit-border-radius:60px;border-radius:60px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;border:2px solid #CCC;padding:2px}
.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;min-height:60px;border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-left:75px;margin-bottom:5px;padding:5px}
.popular-post-isi:before{content:"";width:0;height:0;position:absolute;right:100%;top:19px;border-color:transparent #f7f7f7 transparent transparent;border-style:solid;border-width:10px}
.item-title{font-size:12px;line-height:1.1em}
.item-snippet{color:blue;font-size:11px;line-height:1em}
credit: mdf-blog.blogspot.com

3. Sekarang cari kode di bawah 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;'/>
Agar lebih cepat silahkan cari (CTRL+F) dan masukan  <!-- (4) Show snippets and thumbnails -->.

4. Lalu gantikan semua kode diatas dengan kode script 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/AVvXsEjcLsUop7Q0WLZwTxtBnlY4Ogm8jZR0AHv-tKATxUHtuTMzkJ3hpRBC8vs_yaLSwBcS79JRKKaj45y1enjfV_u-MkW7uzzSFeIGoOIQ1HFri1hYohhKVLrs2JWdHS15TH3dxwt_Q5Aj_vQu/'/>
    </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;'/>  
5. Sekarang silahkan klik Simpan Template.

Itu dia tutorial mudah Cara Modifikasi Widget Popular Posts Keren Dengan CSS Pada Blogger. Jika anda tidak ingin menampilkan ringkasan/deskripsi singkat pada popular post anda silahkan tambahakan kode .item-snippet { display:none } dibawah kode CSS yang tadi tidambahkan.

Semoga bermanfaat sekian dari embahkong tarjun covas
Baca juga.

Komentar

Posting Komentar

Postingan populer dari blog ini

CARA MEMBATALKAN PERMINTAAN PERTEMANAN DI FACEBOOK

Gambar
                          CARA MEMBATALKAN PERMINTAAN PERTEMANAN DI                                            FACEBOOK                                    Facebook  adalah media sosial di mana seseorang bisa berteman dengan siapa saja asal yang di ajak berteman mau. Tapi apa jadi nya bila permintaan petemanan kamu tidak di konfirmasi? jengkel, sedih atau marah? Ok tidak usah seperti itu barangkali orang yang kamu add friends request memang merasa kamu bukan teman nya Nah kalau sudah seperti itu akan lebih baik jika kita menghapus/membatalkan permintaan pertemanan kita di facebook, karena eh karena apabila kita telah melakukan add friends request sebanyak 20X dan tidak di konfirmasi semua bisa-bisa acount faceboo...
Baca selengkapnya

Cara Mudah Membuat Recent Post (Artikel Terbaru)

Gambar
Cara Mudah Membuat Recent Post (Artikel Terbaru)  -  Blogger Update . Fungsi  Recent Post (Artikel Terbaru)  adalah untuk memberikan informasi kepada pengunjung (visitor) mengenai  Artikel Terbaru  yang baru diterbitkan. Blogger tidak menyediakan Gadget khusus untuk  Recent Post (Artikel Terbaru)  yang kita inginkan. Berikut ini adalah  Cara Membuat Recent Post (Artikel Terkait) Langkah-langkah membuat Recent Post (Artikel Terbaru) 1. Masuk ke  Blogger . 2. Masuk ke Dashboard Blogger anda. 3. Klik 'Tata Letak'. 4. Klik 'Tambahkan Gadget'. 5. Pilih 'HTML/JavaScript'. 6. Copy script dibawah ini dan masukan ke dalam gadget HTML/JavaScript tadi. <div id="hlrpsb"> <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script> <script style="text/javascript">var numposts =  5 ;var showpostdate = false;var showpostsummary = false;var nu...
Baca selengkapnya

Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren

Gambar
Cara membuat Daftar Isi / Sitemap Otomatis Di Blogger terbaru dan Keren dengan javascript Accordion Style Sitemap  adalah salah satu elemen penting dalam sebuah blog. Karena di Blogger.com tidak menggunakan layanan plugin seperti di WP, maka penggunanya sering kali membuat daftar isi  secara manual . Membuat sebuah halaman daftar isi di  blogspot  mereka. Hal ini juga dipercaya meningkatkan SEO onpage blog mereka tersebut. Dengan membuat  daftar isi otomatis  dalam blog mereka, pengunjung akan dapat melihat semua postingan yang terdapat dalam blog mereka, biasanya setiap postingan di bagi berdasarkan  label atatu kategori. Oke, setelah sebelumnya  netomaniak  telah membuat postingan  Cara membuat daftar isi otomatis dengan tabulasi , kali ini saya mencoba membagikan  cara membuat daftar isi otomatis dengan efek accordion style ,  yang tentunya lebih keren dan stylis. javascript yang digunakan boleh dibilang sangat...
Baca selengkapnya