Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
share:

Kamis, 27 Desember 2012
Unknown
No comments

Oprek Popular Post menggunakan CSS aja !

popularpostTampilan yang menarik tapi blog tetap menunjukkan loading yang cepat adalah semua dambaan para blogger. Akan tetapi untuk mempercantik tampilan blog itu harus perlu banyak script-script yang rumit serta banyak. Seperti pada gadget Popular Post, kebanyakan para blogger menggunakan script yang inilah.. yang itulah sehingga membuat loading blognya menjadi lambat. Belum lagi tingkat kegagalan yang tinggi bisa membuat orang Newbie putus asa.  Sebenarnya mereka tidak sadar jika ada cara yang lebih mudah yaitu menggunakan CSS. Untuk bisa mengerti CSS cukup mudah, hanya dengan bisa sedikit bahasa inggris pasti langsung bisa.
Berikut ini contoh script CSS yang di gunakan untuk mengedit Popular Post anda. Sebelum itu anda harus menambah widget Popular Post bawaan dari Blogger.
#PopularPost1{blablablabla}
Script di atas merupakan bagian terluar dari widget PopularPost anda bisa dibilang kalau ini adalah bingkainya.
#PopularPost1 ul{blablablabla}
Yang ini adalah bingkai dari daftar postingan terpopuler anda. Jadi ini berada di dalam #PopularPost1. Bingung ? gini deh, widget popular post kalian itu punya 2 bingkai yang paling luar itu #PopularPost1 dan yang dalamnya itu #PopularPost1 ul. Jika #PopularPost1 ul ukurannya lebih besar dari #PopularPost1 maka akan muncul scroll jika overflow di set auto (overflow:auto)
#PopularPost1 li{blablablabla}
Yang ini merupakan sebuah daftar yang berisikan seperti gambar, alamat dan deskripsi (opsional).
#PopularPost1 li img{blablablabla}
Kalau yang ini sudah bisa ditebak yaitu untuk gambar thumbnailnya.
Jika sobat blogger pengen popular post yang seperti punya saya, silahkan masukkan kode di bawah.
#PopularPosts1{background:#FFF;}
#PopularPosts1 ul{margin-top:0}
#PopularPosts1 li{background:#FFF;font-size:auto;text-shadow:0 1px 1px rgba(0,0,0,0.3);padding:1px}
#PopularPosts1 li img{width:45px;height:40px;background:#fff;border:1px solid #e3e3e3;margin-bottom:-8px}
INGAT ! Letakkan di atas kode </Head>.
Selamat Mengoprek …. Smile
share:

Sabtu, 16 Juni 2012
Unknown
1 comment

Memasang widget Live Score

live score
Mungkin ini adalah widget yang bagus buat blog anda yang menyajikan sajian yang berhubungan dengan bola. Buat yang blognya tidak berhubungan dengan bola juga tidak apa-apa, seperti blog saya ini. Saya sengaja menyajikan Live Score dari Liga Jerman atau yang lebih dikenal dengan Bundesliga. Mengapa saya memilih Bundesliga ? Yap, karena salah satunya adalah kareana ada salah satu tim favorit saya yaitu FC Bayern Munchen. Waduh, maap jadi curhat nih. Langsung saja deh ke PKT eeh, ke TKP maksudnya.
goal2
  • Kemudian klik pada LIVE SCORE MODULES yang ada seperti gambar di atas.
goal1
  • Setelah itu saatnya anda memilih liga apa yang anda ingin tampilkan.
  • Pada nomor 1 pilih Liga mana yang anda ingin tampilkan pada widget.
  • Pada nomor 2 pilih Bahasa untuk widget anda, gunakan Inggris sajalah biar internasional dikit blognya Open-mouthed smile
  • Kemudian langkah terakhir yaitu klik Create Module, pilih yang nomor 3 aja ya biar lebih simple.
goal
  • Pada nomor 1 sesuaikan tiggi dan lebar widget yang nantinya anda buat.
  • Pada nomor 2 sesuaikan untuk nama turnamen.
  • pada nomor 3 sesuaikan untuk tanggal pertandingan.
  • pada nomor 4 sesuaikan untuk nama team.
  • pada nomor 5 sesuaikan untuk Gol nya.
goal3
  • Dan langkah terakhir. copy script yang ada dalam kotak nomor 3. Kemudian pastekan pada ADD GADGET/HTML.
  • Klik View Module atau nomor 2 untuk melihat hasil widget yang sudah anda buat.
  • Pada nomor 1 ini nggak wajib, mungkin jika anda punya uang lebih silahkan sedekah sedikit biar yang punya web ini lebih semangat untuk membuat kreasi-kreasi seperti ini. Smile
Yah segitulah tutorial dari saya, maap kalau penjelasannya kurang jelas, maklum masih newbie dan saya memang jarang bicara. Sekian dan Terima Kasih.
 
powered by blogger.com 4sek4w4n mobile template

Ads