Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

Menghias Widget popular post alakadarnya

Menghias Widget popular post alakadarnya

Terkadang aktivitas ngeblog bisa saja malas ada juga membosankan, Pantas saja bagi teman blogging menggunakan iklan pada blognya selain untuk mengurangi kebosanan bisa juga sebagai sumber penghasilan dengan memasang iklan pada blognya. Namun pada blog saya bukan berarti tidak ingin memasang iklan hanya saja blog saya belum ramai pengunjung dan saya rasa belum waktu kali yah.? Rasa bosan dan malaes ini bukan berarti saya tidak ingin berbagi, Namun sedikit ada gangguan fisik yang sedikit badan saya kurang vit. Apa gara-gara saya nginep, Semalam di Kota Sumedang yah? Tapi kayanya gak deh..Hanya pergantian cuaca di tempat saya, sehingga udara kurang bersahabat dengan tubuh saya sehingga 2 Hari kemarin saya agak berkurang aktivitas blogging dan blogwalking. Mohon maaf buat Sahabat blogging semua jika saya belum bisa BW ke blog Anda. Semoga dengan akan di postingan tutorial Menghias Widget popular post yang sealakadarnya ini saya secepatnya bisa berkunjung balik ke blog Sobat semua.

Trik Blogger

Baca juga artikel lainya :   Pendidikan anak usia dini

Untuk tampilan demonya bisa Anda buka :   DISINI

Untuk mengobati kesuntukan pada saat ngeblog tidak ada salah nya saya akan berbagi Trik blogging untuk menghias mempoles widget popular post, Walaupun artikel serupa sudah banyak bertebaran di dunia online, Namun barangkali sebagian dari Anda yang berminat dengan tutorial yang akan saya bagikan pada kesempatan ini. Sebelumnya jenis dari popular post ini pernah di posting Oleh  Kang Adhy Suryadi  teman blogging senior saya. Namun pada postingan ini sedikit saya menambahkan beberapa script untuk menghiasi wideget popular post ini, Dari segi warna dan tampilan mungkin sama namun nanti hasil dan penampakanya sedikit unik dan di bedakan dengan menamabahkan pada bagian tertentunya. jika berminat silahkan simak

Tekhnik awal Menghias Widget popular post sealakadarnya :

Pertama cara memasang widget tersebut, pastikan anda sudah masuk di account anda. Pilih dasboard kemudian pilih tataletak/layout selanjutnya pilih add widget dan pilih entri popular seperti gambar di bawah ini penampakan memilih widget popular nya :

Trik Blogger
Otimasi widget popular post :
Jangan lupa kasih nama judul widget popular post itu jika ingin yang di tampilakn pada widget popular post Artikel anda yang paling baru maka pilish pada 7 hari terakhir contoh seperti yang nampak pada gambar diatas, atau apa saja yang anda kehendaki. Dan pada pilihan di bawah nya tidak usah ada yang di contreng, karena pada tutorial ini tidak akan menampilkan gambar juga cuplikan diskripsi, pilih nominal yang anda akan tampilkan pada popular post setelah selesai jangan lupa save/simpan widget popular postnya.

Agar widget popular post ini bisa valid Html5 jangan lupa hapus kode di bawah ini dengan cara masuk blog Anda pilih template dan pilih edite template cari kode di bawah ini tekan Ctrl + F Untuk memudahkan pencarianya, dan temukan kode berikut ini setelah ketemu hapus kumpulan kode tersebut, dan save template

<b:include name='quickedit'/>

Apabila langkah ini sudah di terapkan pada blog anda atau anda sudah memasang widget popular post sebelumnya, Maka trik diatas lewati saja, silahkan anda lanjutkan pemasangan scripts lainya

Untuk mempengaruhi widget popular post ini menjadi tampil elegan copy kode Css di berikut ini. Masih pada edit template. Cari kode ]]></b:skin> atau </style> Setelah ketemu pastekan Css di bawah ini tepat diatas kode : ]]></b:skin> atau </style>


/* -- ENTRI POPULAR -- */
#PopularPosts1{margin-top:0px;margin-bottom:-3px}
#PopularPosts1 h2 {background:#008b8b;color:#ccffff;margin:0;padding-left:6px;text-shadow:none;border:4px double #66ffff;}
.PopularPosts .widget-content ul{margin:0;padding:6px !important;list-style-type:none;background:#f8ca12;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 40px 10px 10px!important;max-width: 83%;margin-bottom:1px}
.PopularPosts .widget-content ul li:first-child {background:#2a6963;width:93%}
.PopularPosts .widget-content ul li:first-child:after{content:"01";}
.PopularPosts .widget-content ul li:first-child + li{background:#2f7b73;width:93%}
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}
.PopularPosts .widget-content ul li:first-child + li + li{background:#27857c;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#269389;width:93%;}
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#40a197;width:93%;}
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#1bae9f;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#1db9a9;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#47c4b7;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#44cec1;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#40e0d0;width:93%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
.PopularPosts .widget-content ul li:first-child:after,
.PopularPosts .widget-content ul li:first-child + li:after,
.PopularPosts .widget-content ul li:first-child + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top: 2px;right: 2px;background:#4682B4;width:20px;line-height:1em;text-align:center;color:#fff; font-size:11px !important; font-weight:bold;padding: 15px 5px;}
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;padding:0;width:30px;height:90px}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:#66ff00;}


Silahkan sesuaikan tampilan juga warna pada background popular post ini, dan silahkan anda berkreasi, Setelah semuanya terpasang dengan benar silahkan save template dan silahkan lihat blog anda.
Kesimpulan :
Apapun jenis widget popular post yang anda pilih saya kembalikan pada selera anda masing-masing hanya saran saja. Pergunakanlah widget yang sekiranya paling penting saja, karena blog dengan berbagai macam widget dan banner apapun itu hanya akan merugikan anda sendiri, karena pengunjung siapa saja akan malas jika blog yang di kunjungi sangat berat dengan load yang lola alias loading lama. semoga bisa mengambil intisari dari tutorial ini. Hanya saran gunakanlah semua element blog kalau bisa yang serba Valid Html5 dan Css3 plus Responsive agar lebih ramah dan bersahabat. Karena ada nilai lebih lho,,di balik optimasi itu semua. Bagi yang peduli dengan Validasi itu juga. Oke Sob selamat mencoba semoga artikel ini bisa memberi warna ceria untuk saling berbagi, Salam blogging ...

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

42 komentar

bagus juga mas widget popular postnya,
jadi pengen pasang... :)

wah keren banget mas Popular postbya :D ijin pelajari cssnya :D

indah sekali mas hiasannya sudah begitu ada angka-angkanya lagi hehe warnanya juga menarik :D

Mahir modifikasi widgetnya mas saud
Hasilnya jadi lebih inofatif dan atraktif, makasih mas

Manfaat gan, matur thanks... Salam dr Pulau Dollar

wah keren nih tampilanya

lagi kurang fit saja bisa menciptakan widget popular post yang indah gitu, apalagi kalau pas sehat mas :)

Woow, amzing,,,trims mas Saud dah berbagi..:)

Setelah dimodifikasi tampilannya jadi super keren ya... Mantap Kang, Ijin praktek :)

lagi males utak atik template kang,,_
izin BM dulu kang,,_

popular post ini rata rata selalu ada ya maz di blog , , ,
kalau punyau itu dari maz cristian tatelu , , ,
pengen ganti yang adi maz kariz ini aja dah . . . tapi takut disangka njiplak ntar . .
boleh nggak maz ???

keren mas, jd tambah mantap pokoknya

Wew, keren juga loh mas :)

aq menyimak dulu mas saud,kayaknya lain daripada yang lain nih mas,dapat inspirasi darimana tuh???

yg penting widgetnya enak dilihat dan tdk menggangu serta memberatkan loading aja mas :D

jadi lebih keren nih, nanti saya coba mas

sepertinya sangat menarik mas Saud widget populer post nya, saya ijin comot koce css nya, mau saya pakai untuk menghiasi blog jadul saya, biar bisa tampil elegan seperti blog Mas Saud ini

Silahkan Mas Ficri seoga bermanfaat yah
Makasih ataskunjunganya :-bd

keren mas.... terpukau melihatnya :)

e salah emooot mas =D

Hasilnya keren widgetnya mas.

Salam

Silashkan Mas Abdul dengan senang hati

hebat Kang Karryst ,tapi apakah ini bisa diterapkan di template lain seperti template bawaan blogspot,,atau hanya untuk teplate tertentu saja ,,,,,,,,

Yah Mbak dihias sedikit semoga kemasanya bisa
dI gunakan yah makasih atas kunjunganya :)

ingin sekai aya ngedit2 tampilab blog sy, tpi karena koneksiny internet timbul tenggelam, mka hrus sabr dulu...oh y bang, dngan koneksi internet pas2an seperti sy, kok sy sering kesulitan membuka kotak komentarny agan...mungkinkah perlu diedit biar g kesulitan sy mengeposkan komntar d blog ini...mksih

Yah hanya mempoles script yang sudah ada di template
Mas Wong, dan sedikit di hias agar memberi kesan warna berbeda :)

Oke Mas Abu Thanks back. salam balik juga dari Subang -Jabar

jadi lebih keren ya mas tampilan widget popular post nya berwarna warni ;)

saya akan mempelajarinya Kang,,,,Terimakaish untuk tutornya yah Kang Karrysta,hehe

Yah hanya sekemampu saja Kang Ucup, semoga dengan
Seadanya harapan saya bisa bermanfaat.makasih atas kunjunganya :)

Iya Kang saya lagi belajar edit-editan hehe tapi belum berani ke edit css atau html,,

Ok sip Mas De Nif --- Sama-sama yo Mas..? +top

Yah Kang Heri iseng-iseng aja lagi buntu ide yah berbagi
Dan memanfaatkan yang ada saja, semoga bisa bermanfaat :)

Silahkan Teh Enis semoga bisa bermanfaat yah Teh.
Di coba saja Teh atau jika masih ragu gunakan dulu
Blog lain sebagai experimen, setelah berhasil baru
Terapkan pada blog utama Teteh Enis *salam :)

Terkadang saya juga mengalami begitu Kang Zeer di kala koneksi
Jaringan internet saya kurang bersabat, masuk koment di blog teman
Ngalami gendala. Namun apabila blog saya loadnya masih berat
Akan saya upayakan semaximal mungkin untuk kenyamanan semua sobat

Yah Mbak keren dikit, biar gak jenuh ngelihat popular post nya :)

Ok makasih Mas atas partisipasinya

jadilebih bagus ya mas

Wau, keren kang hasilnya, boleh dipelajari nih Kang. Terimakasih ya

kalau ini mah bukan ala kadarnya atuh...keren banget ko'..

Bener Bang, widget yang utama memang yang paling penting biar ngga laload yah :) Tapi pengen juga nghias-nghias gini :D

Memang keren kang setelah dimodifikasi. Apalagi, kalo ada penomorannya. Jadi beda dari yang lain tentunya ya kang.

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger