Modifikasi widget link list dengan css di blogger

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

  • Input Kode CSS ke Halaman HTML
    Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets. Metode Inline Style Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:…
  • Prioritas Selector CSS (Cascading)
    Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading. Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana ca…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…
  • Pengertian CSS
    CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini. Pengertian CSS Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah …
  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Pengertian Selector, Property dan Value
    Setelah mengetahui cara menginput kode CSS ke halaman HTML, saatnya untuk memahami kode CSS itu sendiri. Kali ini kita akan membahas inti dari CSS, yakni Pengertian Selector, Property dan Value pada CSS. Pengertian Selector CSS Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘men…

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...