Modifikasi widget link list dengan css di blogger

CSS sitemap Widget

Selamat pagi sobat blogger semua, kembali muncul share tentang css ni buat widget link list blogger agar tampil lebih menarik sekalian juga bernomor seperti widget popular post. widget link list di gunakan untuk menempatkan beberapa link yang di anggap penting atau untuk mengarahkan pengunjung blog pada sebuah halaman. bisa juga untuk memajang link blogger sahabat lain yang di anggap favorite atau lainnya, untuk itu agar tampilannya lebih menarik dan tidak terlalu biasa saja saya mencoba berbagi cssnya di bawah ini silahkan di baca... berikut contoh widget link list


untuk menggunakan secara otomatis pada widget, simpan css di bawah ini dalam template blog sobat bersama css lainnya

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-37#LinkList { width: 310px; border:3px solid #DCDCDC;margin-top:20px; }
#LinkList h2 {color:#fff;font-weight:bold;border-bottom:3px solid #DCDCDC;margin-top:0px;font-size:20px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:15px;background:#FFD700;margin-bottom:-10px;}
#LinkList ul li a:hover{color:#4169E1;text-decoration:none} 
#LinkList ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-size: 20px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 18px; margin: 0px 30px 0px 0px; min-height: 20px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} 
#LinkList ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
#LinkList ul li:first-child:after, 
#LinkList ul li:first-child + li:after, 
#LinkList ul li:first-child + li + li:after, 
#LinkList ul li:first-child + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:7px;right:5px;width:30px;height:30px;font-weight:bold;line-height:1em;text-align:center;font-size:28px;color:#808080} 
#LinkList ul li:first-child + li + li + li + li + li + li + li {background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li +li{background:#E6E6FA;width:290px;}
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} 
#LinkList ul li:first-child + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li:after{content:"6"} 
#LinkList ul li:first-child + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#LinkList ul li:first-child + li + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li:after{content:"5"} 
#LinkList ul li:first-child + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li:after{content:"4"} 
#LinkList ul li:first-child + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li:after{content:"3"} 
#LinkList ul li:first-child + li{background:#E6E6FA; width:290px;} 
#LinkList ul li:first-child + li:after{content:"2"} 
#LinkList ul li:first-child{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child:after{content:"1"} 
#LinkList ul{margin:0;padding:0px 0;list-style-type:none} 
#LinkList ul li{position:relative;border-bottom:1px solid #DCDCDC;padding:10px}

setelah itu buka tata letak dan tambahkan widget link list yang sobat butuhkan.


jika sobat sudah pernah memasang widget link list silahkan di cek ID nya pada urutan berapa, misalkan jika belum pernah memasang ID nya akan seperti LinkList dan jika pernah memasang lebih dari satu maka seterusnya mulai LinkList1 atau LinkList2.

jika sobat ingin memasang secara manual pada widget HTML/Javascript salin kode di bawah ini

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-53<style>
#LinkList { width: 310px; border:3px solid #DCDCDC;margin-top:20px; }
#LinkList h2 {color:#fff;font-weight:bold;border-bottom:3px solid #DCDCDC;margin-top:0px;font-size:20px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:15px;background:#FFD700;margin-bottom:-10px;}
#LinkList ul li a:hover{color:#4169E1;text-decoration:none} 
#LinkList ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-size: 20px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 18px; margin: 0px 30px 0px 0px; min-height: 20px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} 
#LinkList ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
#LinkList ul li:first-child:after, 
#LinkList ul li:first-child + li:after, 
#LinkList ul li:first-child + li + li:after, 
#LinkList ul li:first-child + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:7px;right:5px;width:30px;height:30px;font-weight:bold;line-height:1em;text-align:center;font-size:28px;color:#808080} 
#LinkList ul li:first-child + li + li + li + li + li + li + li {background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li +li{background:#E6E6FA;width:290px;}
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} 
#LinkList ul li:first-child + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li:after{content:"6"} 
#LinkList ul li:first-child + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#LinkList ul li:first-child + li + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li:after{content:"5"} 
#LinkList ul li:first-child + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li:after{content:"4"} 
#LinkList ul li:first-child + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li:after{content:"3"} 
#LinkList ul li:first-child + li{background:#E6E6FA; width:290px;} 
#LinkList ul li:first-child + li:after{content:"2"} 
#LinkList ul li:first-child{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child:after{content:"1"} 
#LinkList ul{margin:0;padding:0px 0;list-style-type:none} 
#LinkList ul li{position:relative;border-bottom:1px solid #DCDCDC;padding:10px}
</style>
<div id='LinkList'>
 <ul>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
 </ul>
</div>

Contoh untuk demonya seperti di bawah ini nanti hasilnya


buat sobat yang tertarik silahkan di gunakan dan di sesuaikan dengan tampilan template agar serasi dan terlihat bagus dengan mengubah nilai warna latar, lebar dan yang sobat inginkan.

demikian saja semoga berguna...

Artikel Terkait

  • Floating Social Bookmark CSS
    Sekarang ini untuk membuat floating social Bookmark sudah sangat mudah, anda bisa mengikuti dua cara di bawah ini. Demo Cara 1: Script Floating Social Bookmark diletakkan di widget blog. Login ke blog Anda. Pilih Tata letak Pilih Add Gadget (saran: pilihlah gadget paling bawah) Pilih HTML/JavaScript. Copy dan Paste-kan script dibawah …
  • Menu navigasi blogger responsive CSS3
    Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…
  • Costume halaman error 404
    404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang tidak ada atau telah di hapus dari web/blog. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404" untuk di pasang pada blog sobat dengan sedikit custom dan tambahan jquery. Untuk…

6 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...