.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

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 hasilnyaPengaturan
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.
wah jadi keren atuh ini mah .. mantapzzz
BalasHapusterima kasih ;)
HapusPertaminanya Bangkrut =( kaga dapet pertamax \o/
BalasHapushahaha, jangan patah semangat :)
HapusKebetulan 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?
BalasHapushapus 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
Hapusmas boleh minta tutor buat mata sama resleting itu dong :)
BalasHapussaya pikir tutorial itu tidak bisa dibagi2kan seperti itu saja,
Hapusbukan hanya penyampaian caranya yang rumit dan juga berbicara soal harga diri
ooo, gpp mas. sebenernya ada sih tutor nya, tapi masih bingung menerapkan nya
Hapuslebih baik jangan kamu pasang, nantinya kamu bakalan dapat pujian tidak enak dari orang seperti saya.
Hapuskenapa mas ?? apa ada yg salah, tutorial nya di sini
Hapushttp://www.infokmu.com/2014/03/about-me-ala-blog-info-k-moe.html
tidak ada yang salah, hanyasaja saya takut hal yang saya alami terjadi denganmu
Hapuskamu pasti mengerti, kalo para cloning itu pasti dapat apa...?
oke kalo gitu, ligipula saya bingung ama tutorialnya, di terapin gk bisa-bisa
Hapusterima kasih :)
maksudnya apa ni..
HapusPertama : lihat gaya atau CSS sama JavaScriptnya sama atau tidak..
Hapuskedua : Saya membuat posting bukan hanya asal copas atau asal buat saja, tentunya saya berani bikin posting karena saya memahami, bisa dan mengerti atas apa yang saya buat.
Ketiga : halaman about me dalam blog saya terinspirasi dari DTE.. memang mirip dengan DTE tetapi saya tidak mengambil source kode dari DTE... bahkan sama sekali beda.... Sekian dan terima kasih...
coba check ini http://www.infokmu.com/2013/12/artikel-terkait-dimuat-secara-acak.html?showComment=1387614201151#c8768854634684881942 ; dan lihat waktu terbit komentarnya ... itu menandakan saya dari waktu sebelum itu sudah menggunakan animasi about me seperti itu.. bukan hasil cloning dari blog ini..
Hapussaya bukan bermaksud begitu, saya bukan bermaksud hasil dan karya sendiiri dan juga bukan bermaksud seperti itu.
Hapusyang saya maksud iyalah jadilah diri sendiri , buat karya sendiri dan hasilkan dengan kerja keras sendiri. :W
saya bukan nyindir kamu kok 7:(
hebat pake pseudo element
BalasHapusiya :yaya: , terima kasih ;)
Hapussip
BalasHapus