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
#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
<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...
Belum ada tanggapan untuk "Modifikasi widget link list dengan css di blogger"
Post a Comment