We come with the latest version 1.6, get this theme through our official site.

Modifikasi Widget Popular Post Dengan Gaya Komentar Google+

Modifikasi Widget Popular Post Dengan Gaya Komentar Google+
custom widget popular post
Contoh Widget Popular Post Dengan Gaya Komentar Google+
Pada kesempatan kali ini Males Code akan membahas kustomisasi widget popular post dengan gaya komentar google+, tampilan popular post ini sepenuhnya tentunya dari komentar google+, di sini saya membungkus kode .item-title dan .item-snippet dengan kode .popularpostcontent agar kustomisasi ini berjalan dengan sempurna.
Langsung saja ke tahap pemasangan widget:

Langkah Pertama
1.login dengan akun blogger anda
2.Pada Dashboard pilih Tata Letak » Tambah Widget » Pilih Entri Populer
3.Lalu Setting widget tersebut seperti dibawah ini
setting custom widget popular post
3.Klik Simpan
4.lalu klik Simpan Setelan

Langkah Kedua
1.Masuk Ke Template » Edit HTML
2.Letakkan Kode Berikut Diatas Kode ]]></b:skin> atau diatas kode </style>

.PopularPosts li {margin-bottom:0}
.PopularPosts .item-content {margin-bottom: 4px;}
.PopularPosts .item-thumbnail {float: left;margin: 0 5px 5px 0;}
.PopularPosts .item-thumbnail a img {height: 60px;width: 60px;float: left;margin-right: 15px;overflow: hidden;padding: 0;border-radius: 99em;}
.PopularPosts .popularpostcontent {margin-left: 25%;padding: 5px 15px;min-height: 70px;position: relative;background: #fff;color: #444;font-size: 13px;border: 1px solid #ddd;}
.PopularPosts .popularpostcontent:before {content: "";width: 0;height: 0;position: absolute;top: -1px;left: -16px;border-width: 8px;border-style: solid;border-color: #ddd #ddd transparent transparent;display: block;}
.PopularPosts .popularpostcontent:after {content: "";width: 0;height: 0;position: absolute;top: 0;right: 100%;border-width: 7px;border-style: solid;border-color: #fff #fff transparent transparent;display: block;}
.PopularPosts .item-title a {color: #333;text-transform: none;font-size: 13px;text-decoration: none;font-family: Arial, Sans-Serif;font-weight: 700;}
.PopularPosts .item-title a:hover {text-decoration:underline;}
.PopularPosts .item-snippet {font-size: 11px;color: #666;max-height: 45px;overflow: hidden;}
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>
Untuk Mempermudah menemukannya cari kode <!-- (4) Show snippets and thumbnails -->

Lalu ganti semua kode tersebut dengan semua kode 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:else/>
    <div class='item-thumbnail'>
        <a expr:href='data:post.href' target='_blank'>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='http://malescode.googlecode.com/svn/brain/imaging/default.png' expr:width='data:thumbnailSize'/>
        </a>
    </div>
    </b:if>
    <div class='popularpostcontent'>
        <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>
4.Simpan template dan lihat hasilnya

Pengaturan

Url http://malescode.googlecode.com/svn/brain/imaging/default.png adalah merupakan gambar yang akan tampil jika sebuah artikel didalam blog anda tidak memiliki gambar sama sekali, anda dapat mengganti link tersebut dengan url gambar anda sendiri.
Sisanya silahkan anda sesuaikan sendiri.

Demikian tutorial modifikasi widget popular post dengan gaya komentar google+ ini, jika masih ada kesalahan silahkan berkomentar di kotak komentar yang tersedia, selamat berkreasi dan semoga bermanfaat.
Sopala Multapa

wah jadi keren atuh ini mah .. mantapzzz


Unknown

Pertaminanya Bangkrut =( kaga dapet pertamax \o/


Rizky Kurniawan

hahaha, jangan patah semangat :)

Aozon

Kebetulan aku punya masalah di posting populer hompage. ada script ini margin-right: -310px; nah aku mau buang itu tapi gak turun kebawah, giman caranya ya?


Rizky Kurniawan

hapus kode margin-right pada css ini .main-inner .columns dan ini .main-inner .column-right-outer, kemudian rubah width pada css .column-center-outer menjadi 650 pixel

Farrij Annafi'u

mas boleh minta tutor buat mata sama resleting itu dong :)


Rizky Kurniawan

saya pikir tutorial itu tidak bisa dibagi2kan seperti itu saja,
bukan hanya penyampaian caranya yang rumit dan juga berbicara soal harga diri

Kang Mousir

hebat pake pseudo element


Rizky Kurniawan

iya :yaya: , terima kasih ;)

Yuk Diskusi

Kalau ada pertanyaan yuk kita diskusikan