Modifikasi Popular Post Sederhana Tanpa Thumbnails

Modifikasi Popular Post Sederhana Tanpa Thumbnails

Bola Hero Gawai

Modifikasi Popular Post Sederhana Tanpa Thumbnails

Popular Post Sederhana Tanpa Thumbnails
Sebenarnya dasar dari modifikasi popular post ini adalah dari modifikasi popular post warna warni yang sudah banyak bertebaran di Google. Saya sendiri kurang tahu asal script-nya dari mana, namun yang jelas dengan ini kita bisa menentukan background berbeda untuk tiap item popular post-nya. Di sini saya menggunakan popular post tanpa thumbnail dan snippets, dan juga tidak menggunakan penomoran seperti pada popular post warna-warni kebanyakan.

Dengan begitu kode CSS-nya menjadi lebih sedikit dan lebih simple. Di sini saya hanya menggunakan warna dominan abu-abu, namun sebenarnya Anda bisa memberikan warna-warna cerah lainnya untuk setiap item-nya. Screenshot-nya tampak pada gambar di bawah ini.

Modifikasi Popular Post Sederhana Tanpa Thumbnails

Untuk membuatnya tentunya Anda harus menambahkan widget popular post dahulu melalui Tata Letak >> Add a gadget >> Pilih Popular Post dan hilangkan tanda centang pada thumbnails dan snippets serta tentukan jumlahnya 10 item.

Kemudian silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </stytle>


.PopularPosts .widget-content ul{margin-top:-7px;padding:7px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;width:100%;margin-bottom:1px}
.PopularPosts .widget-content ul li:nth-child(1){background:#444}
.PopularPosts .widget-content ul li:nth-child(2){background:#555}
.PopularPosts .widget-content ul li:nth-child(3){background:#666}
.PopularPosts .widget-content ul li:nth-child(4){background:#777}
.PopularPosts .widget-content ul li:nth-child(5){background:#888}
.PopularPosts .widget-content ul li:nth-child(6){background:#999}
.PopularPosts .widget-content ul li:nth-child(7){background:#aaa}
.PopularPosts .widget-content ul li:nth-child(8){background:#bbb}
.PopularPosts .widget-content ul li:nth-child(9){background:#c1c1c1}
.PopularPosts .widget-content ul li:nth-child(10){background:#ccc}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:#20c1ea;}

Jika Anda ingin merubah background pada tiap itemnya, silahkan ganti background pada kode .PopularPosts .widget-content ul li:nth-child(1) - (10)

Jika Popular Post ini tidak rata kiri dengan widget lainnya, silahkan tambahkan margin-left minus, misalnya seperti ini margin-left:-5px dan tambahkan pada kode .PopularPosts .widget-content ul

Kemudian jangan lupa untuk menghapus kode <b:include name='quickedit'/> untuk mengurangi error pada validasi HTML5.

Kemudian untuk menambahkan title tag pada link popular post-nya silahkan Jump To Widget dan pilih PopularPosts1 dan temukan kode seperti di bawah ini:


            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>

Kemudian ganti dengan kode di bawah ini:


            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>

Selesai dan selamat mencoba ....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

85 Comments Add Comment

Ambil Pertamax @@,

Balas

wah keren kang, saya mau nyoba dulu, praktekin juga di blog dummy :D

*salam damai

Balas

keren modelnya popular post tanpa thumbnail jadi lebih ringkas ya mas, tapi sayangnya saya gak berani masang krn menjadi sasaran para copaser, hmmm :(

makasih sharingnya mas Adhy, krn suatu saat juga akan saya gunakan di blog saya popular post seperti ini agar blognya seo friendly :-bd

Balas

Iya juga sih, popular post menjadi dilema juga, di satu sisi dibutuhkan untuk menambah page view blog, di sisi lain menjadi incaran para copaser.

Balas

Silahkan dicoba mas Rio :D

Balas

Keren mas adhy... seperti popular post blog Kompi ajaib saat ini.
Oya mas, Untuk Widged Recent Post / artikel terbaru yang tanpa gambar ada gak panduan nya di blog ini. yang ada title di link nya.. Thanks mas

Balas

kalau diterapkan di blog saya yang bukan validasi bisa nggak mas

Balas

Ada mas, silahkan searching aja dengan Recent post di search box.

Balas

Bisa mbak Indah :) Silahkan dicoba aja :)

Balas

Keren mas ... :) Jadi makin keren dan tidak memakan banyak tempat di seidebar ya mas :)

Balas

Saya suka banget liat templatenya mas Adhy & Kang Ismet, tata letak homepage dan tampilan psotingannya rapih dan enak dipandang tidak seperti blog saya :D ... :) Kalau boleh tau, template dasarnya itu namanya apa ya mas ? :) Terimakasih :)

Balas

Template saya dasarnya dari Johny Ajaib dari Maskolis mas :)

Balas

saya copy dulu scriptnya mas makasih ya

Balas

sudah saya praktekan master ;)

Balas
This comment has been removed by the author.

Langsung saya praktekkan kang ;)

Balas

mantab mas , ijin praktekan , dan ijin share

Balas

Mantap.. Ijin bookmark kang! :D
Mampir yuk kang ke blog saya, ada cendol :ng

Balas

dengan memakai scrip ini di pupalar post menambah warna warni di blogg yaa jadi blogg kelihatannya tambah semangat
:)

Balas

Kang, biar most populernya rata bagian kiri sama kanan gimana ???? Nih saya kasih ssnya

www(.)prntscr.com/2o82ct

Balas

simple dan imut om..kos nu koment :D

Balas

langsung saya terapkan =)D kang hahahaha

Balas

akhirnya..request saya muncul juga. terima kasih banyak mas. :D

Balas

waduh sudah ketinggalan beberapa episode nih kang .. baru bisa menonghol hehe
saya fikir itu cukup keren kalau dipasang di blog nyang atunya lagi ... !! intinya asal kreatif pasti hasilnya sip

Balas

pake izin ya sekarang hehe .. gitu dong !!

Balas

ya , mas sekarang ane mau berubah :)

#salam damai dan salam kenal mas :)

Balas

sama kang rully saya juga ketinggalan beberapa episode nih,,hehe

langsung modifkasi blog dummy :D

Balas

Silahkan sist Dwi hehehe... :D

Balas

Silahkan dicoba aja mas :D

Balas

Iya sayang jika tidak mau berubah mas :D

Balas

Silahkan dicoba aja :D

Balas

Iya mas biar lebih berwarna :D

Balas

Coba tambahkan margin-left minus, misalnya seperti ini margin-left:-5px dan tambahkan pada kode .PopularPosts .widget-content ul jika masih kurang perbesar angkanya :)

Balas

hehehehe asal jangan amit-amit aja mas Panjz :)

Balas

Silahkan dicoba aja mas :)

Balas

Hehehehe sama-sama :D

Balas

@kang Ruly: betul kang...tinggal kreatifnya kita aja, script keren-keren banyak betebaran di Google :)

@mas Mawan: Silahkan dicoba aja mas, dimodif lagi biar tambah keren :)

Balas

dari dulu nyari yang ginian susah amat :D sekarang akhirnya di post juga, makasih kang

Balas

Di blog ane ko gak bisa yah?
=(

Balas

Jangan lupa tambahkan dulu widget popular post-nya lewat tata letak :)

Balas

Kang. Kalau di perbesar angkanya makin nggak karuan entri populernya.

Balas

Wah, keren juga modifikasinya kang...terlihat sederhana tapi nggak membosankan.

Balas

kelihatnnya keren dan ringkas nih, hehehe...

Balas

Hehehehee makasih mas :)

Balas

Iya mas jadi simple hehehe :D

Balas

kayaknya berubah wujud lg nih :-bd haduh.. capek mas baru siap buat artikel di blog tutorial hehe.. :)

Balas

Hehehehe hanya sedikit gelap-gelapan :p

Balas

Makin TOP Cerr nih templatnya

Balas

wiihh, keren mas..
btw, templatenya jd gelap :D

Balas

Templatenya tambah keren kang.. Terlihat lebih bergairah :ng apalagi tampilan komentarnya yg sekarang, beehh saya suka bnget kang Adhy :-bd Mantap..

Balas

Maaf nih bang.. numpang nanya, saya ngalamin ini nih.
Blog saya udah lama kehapus, dan selalu tertulis tidak tersedia untuk alamat ini. Pas saya buka sebulannya, tertulis tidak ada alamat, buat (nama blog ini).
pas saya udah buat, saya cek di webmaster, semua url yang pernah saya feetch google tuh masih ada.
alexa pun hingga sekarang masih ada 15 jutaan, apalagi sitelinks nya masih lengkap semua.
tapi artikelnya udah kosong, gue cuman mau nanya sebaiknya dibuat lagi/mulai lagi atau nggak yah? soalnya pasti kelebihan backlink dalam sehari!
Makasih! mohon responnya yah!

Balas

ini baru disebut keren =)D oh ya mas, mengapa tidak sekalian menghilangkan link border di browser mozilla saat link diklik? biar tambah joss kelihatannya :)

Balas

wah desain baru yah sob ,keren :)

Balas

Keren Kang, jadi lebih simple :D

Balas

Biasa mas lagi bosen heheeee :p

Balas

Hehehee iya mas lagi gelap-gelapan :D

Balas

Hehehehe gairah malam mas, jadi gelap-gelapan hehehee :D
Makasih mas

Balas

Sebaiknya buat baru lagi, untuk url-url lama lebih baik dihapus aja dan remove url di wmt.

Balas

Enggak mas cuman ganti warna aja hehehe :p

Balas

Iya mas dengan begini kodenya jadi lebih simple namun tetap masih bisa warna-warni :D

Balas

semakin fresh aja templatenya bang... :D
bener-bener mantab

Balas

dalam postingan blog mas panji i like girls because imut-imut mas mas adhy...=)) mulai kacau dach mas panjz,,kalau ada maskolis pasti ngakak dia

Balas

mantap tampilan homenya tutorialnya sekalian dipost mas adhy :D

Balas

izin nyoba Kang :) wah tampilan baru yah :)

Balas

Keren gan tutornya :-bd , Tapi sayang ga cocok sama blog saya =(

Balas

wess tampilan baru ya kang.. keren tambah mantap aja KA

Balas

Oh itu scriptnya dari Kompi Wide kok mas :D tiinggal di modif aja :)

Balas

Iya mas sedikit gelap-gelapan hehehe :)

Balas

Iya mas jika tidk cocok jangan di pasang, masih banyak modif tutorial popular post yang mungkin cocok dengan tema blognya di Google.

Balas

Hehehehe makasih mas :) nyoba agak gelapan dikit hehehe :p

Balas

ini warnanya bisa di rubah kan mas... oya untuk demonya langsung di sedibar blog ini ya mas.. mantap deh...

oya saya mau nanya mas.. kalau untuk membuat tampilan homepage seperti bloh KA ini gimana ya mas.. keren soalnya hehehehe

Balas

iya mas warna setiap itemnya bisa dirubah-rubah :)
post homepage KA saya ambil dari template Kompi Wide, cuman di modif sedikit tampilannya :)

Balas

di kompi wide nggak ada tutornya mas.. saya nggak bisa kalau ngambil dari page scoure hehehehe... nggak mudeng mas...?

Balas

oh dari sana ya..ntar diceklah mas :D

Balas

menarik... jadi lebih enak lihatnya. :D kapan2 coba ah. thx mas sharenya

Balas

Wkwkwkw kebiasaan lama mas Panjz muncul lagi wkwkwkw :ng

Balas

keren mas, tidak terlalu berat.....

coba dulu ya mas :-bd

Balas

diatas ada yg menanyakan soal style summary post di homepage KA ini, sama kek kompi wide, klw ga keberatan mas adhy share jg postingannya, trims ^_^

Balas

beberapa hari pengen ganti warna, baru ketemu tutorialnya...hadeuh.
dus kalopengen tulisan Popular post nya ikutan berwarna kaya milik disini gimana kang?
halaaa.....ngga pernah puas banget deh ih sayah teh...:p

Balas

Yuhuuu simple banget yaa..
tinggal tambahin CSS aja :D makacihhh banyakk Om

Balas

sipz
idcheat.com
duniagame.info

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×