Home Widget Style Top Entri Ala Goyang Dumang

Assalamualaikum warahmatullahi wabarakatuh.

Mengisi waktu luang ini saya manfaatkan untuk membuat artikel baru. Walau mata agak ngantuk setelah makan siang tadi namun hasrat untuk saling berbagi pada blog ini, Serasa ada yang menggugah niat saya agar beranjak membagikan postingan yang saya sendiri bingung awalnya menamai artikel ini. Setelah kemarin saya bagikan tentang cara: Membuat Widget Media Sosial Sticky Minimalis. Maka di edisi pertengahan bulan Desember tahun 2014 ini saya akan bagikan juga tutorial yang saya kasih judul "Style Top Entri Ala Goyang Dumang". Karena nanti hasilnya widget popular post atau Top entri ini, link Buttonya akan bergoyang jika di sentuh mouse. dan saya terinfirasi dengan sebuah lagu baru yang lagi booming di mana lagu tersebut yang berjudul lagu : Video Youtube Goyang Dumang Cita Citata. Dengan racikan kode script css yang sengaja saya padu dengan campuran pading dan margin agar membentuk menghasilkan effects transition dengan sentuhan hover maka akan berbentuk tampilan slide yang di tentukan arah geraknya maka saya namakan saja dengan mudah widget Style Top Entri Ala Goyang Dumang, atau dengan style effects gerak yang menghover bak menyerupai goyangan tari.

Style modifikasi popular post :

Banyak sekali gaya dan bentuk widget yang satu ini. Seperti namanya widget popular post ini yang artinya widget yang menampilkan artikel di blog kita yang mana artikel tersebut lagi popular di bahas pada bulan dan minggu ini. Hampir setiap web site dan blog yang menggunakan widget ini. karena dengan adanya widget ini pengunjung yang lainya yang baru masuk akan mengetahui artikel mana yang lagi ramai di bahas visitornya. Apalagi jika blog yang traffic perharinya bisa menghasilkan visitor bukan hanya dari blogwalking atau kunjungan rutin. Maka pengunjung yang hasil dari search itu akan tertuju pada widget popular post karena mereka merasa asing dengan blog yang baru mereka kunjungi. Naaah sedikit pembahasan tentang pentingnya sebuah widget popular post atau Top entri ini semoga anda memahami sebelumnya.

Ingat setiap penambahan widget baru pada template anda sebaiknya hapus kode :
<b:include name='quickedit'/> Agar template anda tetap Valid HTML 5 CSS 3

Cara Memasang Style Top Entri :

Baik sobat blogging yang berbahagia jangan kelama'an langsung capluk saja cara memasang tutorial yang saya share ini. Pertama dan paling utam anda masuk dashboard jangan lupa sign in. Jika pada template blog anda belum ada widget popular post silahkan tambahkan dulu widget popular post nya dengan widget popular post bawaan blogger dengan cara : Pada dashboard blog anda pilih layout atau tataletak, selanjutnya pada tata letak bagian sidebar anda klik add widget, dan pilih pada pilihan vertikal widget popular post. pada add widget jangan ceklis pada bagian tampilkan gambar dan diskripsinya. karena tutorial yang saya bahas ini tidak menggunakan gambar dan tek diskripsi. Hanya link dan judul artikel saja. Saya pastikan pada tahap ini anda sudah paham dan sudah menerapkan widget popular post satandar blogger.

Modufikasi Popular Post Dengan CSS :

Untuk membuat tampilan widget popular post bawaan blogger itu terkesan unik menarik ccantik dan elegance. Silahkan anda bubuhi wifget tersebut dengan belaian kode css berikut dengan cara : Pada dashboard blog anda klik template, selanjutnya klik edite template. Kemudian cari kode : ]]></b:skin> atau kode : </style> Tekan pada keyboard Ctrl + F untuk memudahkan pencarian. Setelah ketemu copy kode CSS di bawah ini dan pastekan tepat di atas kode : ]]></b:skin> atau diatas kode : </style>

Pada tutorial kali ini saya sajikan 2 style/gaya untuk memodifikasi tampilan yang berbeda. Silahkan anda pilh style yang mana ke dua nya sama menarik dan uniknya.

CSS Style 1.

/* popular posts  CSS 1 */
.popular-posts ul{padding-left:0px;border:2px solid #32cd32;border-radius:5px;counter-reset:popcount}.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:0.2em 0.5em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#800080;color:#fff;position:relative;font-family:georgia;float:left;border:2px solid #fff;border-radius:5px}.popular-posts ul li{border-bottom:1px double #006400;height:37px}.popular-posts ul li:hover{padding-left:10px;border:2px solid #ffd700;background:#48d1cc}.popular-posts ul li a{text-decoration:none;color:#800080}.popular-posts ul li a:hover{text-decoration:none;text-decoration:none;color:#ff0000}.popular-posts .item-thumbnail img{webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px;list-style:none}.popular-posts .item-thumbnail img:hover{ webkit-border-radius:0px;list-style:none; -moz-border-radius:0px}
.popular-posts ul{box-shadow:inset 0 2px 0 rgba(255,255,255,0.3),0 2px 2px #32cd32;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
transition:background-color 1s ease-out 0
}

DEMO STYLE 1

CSS Style 2.

/* popular posts  CSS2 */
.popular-posts{
overflow:auto; height:270px;
margin-top:0cm;
} .popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUkkv0LzxntaJCrDJwjAqUQ_kHs1jswHqgbUN1YhR0fuwPY8Qy_2K77nsxJU_a_ZsaM2Q-xOwO4AORxLYIoE3dpBHkXsxAbwJuLYY8RxPv9VNVeY7ARNVCkPa8RPjdrc-Zn8WmBFmK9U/s1600/rb+cancel+icon...jpg) no-repeat scroll 1px 1px;
list-style-type: none;
margin: 0 0 3px 0px; padding: 1px 1px 1px 33px !important;
border: 1px dotted #dddddd;
border-radius: 10px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; }.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoYzDxXi3QxlErOlDcxdSN4JV4PMUnRmWySG5NovS-wu6YY4-QIzpX3khcs2myvzmS6vICeHr9EJiWPUwQ2o8X2Mhbu0gqYhkfDKpgS6B-lz1UfcN_Hq2tWVhFP6d9rTKeQMBMTu3V1M/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}.popular-posts ul li a:hover {
text-decoration:none;
}.widgetSystem { width: 85%; padding: 5px; background: #DDD;margin-left:0.3cm;
margin-top:0.4cm;
border: 1px solid #fff;
border-radius: 5px;box-shadow: 0 0 1px 1px #fff
} .widgetSystem .nama { text-align: center;
font-size: 1.3em;
font-weight:bold; background: #FF0000;
background: rgba(153, 153, 153, 0.6);
padding:5px;
color: #FF0033;
font-family: "Times new roman", Arial, sans serif;
border-radits: 5px }.codeview {
margin : 15px 15px 15px 35px;
padding : 10px; clear : both;font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
line-height:1.6;
background: no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}.codeview li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}

Keterangan :

Silahkan anda pilih salah satu CCS Untuk memodifikasi tampilan widget popular post pada blog anda. setelah pemasangan kode CSS diatas tepat pada kolom yang saya tuliskan diatas Save/simpan template dan silahkan coba buka halaman anda jika sudah benar pemasanganya akan tampil widget popular post yang keren dan elegance. Jika belum berhasil coba baca lagi tutorialnya dengan seksama selamat mencoba.

Dalam satu template blog tidak boleh memilih ke 2 kode CCS diatas jika anda memilih style no 1 maka nomor style no 2 jangan di ikut sertakan. Jadi hanya satu yang di pilih

Demikianlah kiranya yang bisa saya ketengahkan untuk anda semua. Semoga sajian yang sederhana ini bisa bermanfaat untuk sobat blogging yang membutuhkanya. Jika ada kesulitan silahkan diskusikan atau tanyakan pada kolom komentar dibawah ini. Mohon jika terdapat kekeliruan dalam postingan ini. Dan jika anda dapatkan link url blog ini yang mati atau/brokenlink sudi kiranya memberitahu saya. Terima kasih atas sapa dan salam juga kunjung dan komentar anda pada post ini. Tetap semangat dan berexpresi. Salam sukses dan ceria selalu buat seluruh sahabat blogging yang terinta. Happy Blogging ....

Berlangganan lewat email pada post baru Blog : Karrysta.

Style Top Entri Ala Goyang Dumang

Unknown Widget Senin, Desember 15, 2014 199 comments