Memasang Blogroll Link Dengan Gambar Profil Blog

Blogroll Link Dengan Gambar Profil Blog - Link yang menuju atau mengarah ke blog yang lain atau yang menuju ke blog kita. Blogroll biasanya identik dengan saling melakukan tukar link blog antar blog yang satu dengan yang lainnya, padahal blogroll sendiri tidak harus sebagai sarana untuk tukar link, tanpa melakukan tukar link namun jika kita ingin memasang link-link blog yang lain kedalam blog kita, juga bisa disebut sebagai blogrol blog. Dengan begitu, blogroll bukanlah sebagai sarana tukar link tapi merupakan daftar link yang diapasng kedalam blog

Blogroll atau daftar link blog biasanya ditempatkan di bagian sidebar blog (kanan atau kiri), hal ini digunakan untuk memberitahukan kepada pengunjung blog kalau selain blog yang mereka kunjungi, juga ada blog yang bisa dilihat juga. Karena, biasanya blogroll juga dikategorikan sesuai dengan blog yang memasang blogroll tersebut. Sebagai daftar link yang ditempatkan kedalam blog, tampilan blogroll sendiri memang tidak terlalu memikat pengunjung blog untuk melakukan klik terhadap link di blogroll tersebut, untuk itulah dalam memasang blogroll lebih baik sesuaikan dengan topik blog. Misalnya link blog ini dipasang di blognya teman-teman dan menulis judulnya sesuai dengan judul blog ini, maka kemungkinan besar banyak pengunjung blog tersebut yang melakukan klik terhadap link blog ini, karena judulnya yang menarik :)

Agar tampilan blogroll menarik dan tidak hanya menampilkan judul atau tulisan saja, maka saya akan mencoba membuat link blogroll ini manjadi lebih menarik yaitu dengan menambahkan gambar profil blog dari pemiliki link blog yang di blogroll tersebut. Maksudnya?
Maksudnya bagaimana yak? hmmm coba perhatikan gambar berikut ini

Jika kita menyorot link blog yang ada di daftar link (blogroll) tersebut dan belum melakukan klik terhadap linknya maka akan muncul gambar profil pemilik blog tersebut, seperti yang terlihat pada gambar diatas
Atau jika masih bingung silahkan jalankan demonya langsung dibawah berikut ini, sorot link (*link tidak aktif) dari nama-nama master blogger dengan mouse maka akan muncul gambarnya

• BloggerTuts Kang Ismet blog.kangsimet.net
• Kompi Ajaib Adhy Suryadi kompiajaib.com
• Template Editor Mas Sugeng mas-sugeng.com
• News Hasbi Htc hasbihtc.com

Sebelumnya, mohon maaf buat mas +Kang Ismet mas +Hasbi Htc mas +Adhy Suryadi dan  +Blog Mas Sugeng karena telah memasang gambar profil tanpa izin sebelumnya, jika tidak berkenan, silahkan beritahukan dan akan saya ganti dengan segera. Terimakasih

Cara Memasang Blogroll Link Dengan Gambar Profil Blog

Buka akun blogger
Buka menu Template klik Edit Html
Cari kode ]]></b:skin> atau </style>
Silahkan salin kode berikut kedalam template blog sebelum kode ]]></b:skin> atau </style>

.blogroll{
 height: 385px;
 width: 600px;
 margin: 20px auto;
 position: relative;
}
.blogroll ul, .blogroll ul li{
 list-style:none;
}
.blogroll li{
 width: 300px;
 list-style:none;
}
.blogroll li a{
 display: block;
 width: 280px;
 padding: 0px 10px;
 text-align: right;
 position: relative;
 z-index: 10;
 background: #fff;
 height: 97px;
 border-right: 1px solid #ddd;
 background-color: rgba(255,255,255, 0.8);
}
.blogroll li:nth-child(1):hover a{
 background-color: rgba(42,53,66,0.9);
}
.blogroll li:nth-child(2):hover a{
 background-color: rgba(51, 51, 51, 0.9)
}
.blogroll li:nth-child(3):hover a{
 background-color: rgba(197, 202, 208, 0.9);
}
.blogroll li:nth-child(4):hover a{
 background-color: rgba(0, 142, 221, 0.9);
}
.blogroll li a span{
 display:block;
}
.blogroll li a span:first-child{
 font-weight: 700;
 font-size: 16px;
 color: #ddd;
 padding-top: 10px;
 font-family: Verdana, Georgia, serif;
}
.blogroll li a span:nth-child(2){
 font-weight: 400;
 font-style: italic;
 font-size: 28px;
 font-family: Verdana, Georgia, serif;
 -webkit-transition: color 0.2s linear;
 -moz-transition: color 0.2s linear;
 -o-transition: color 0.2s linear;
 -ms-transition: color 0.2s linear;
 transition: color 0.2s linear;
}
.blogroll li:hover span:nth-child(2){
 color: #fff;
}
.blogroll li img{
 height:385px;
 position: absolute;
 z-index: 1;
 left: 0px;
 top: 0px;
 opacity: 0;
 -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
 -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
 -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
 -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
 transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.blogroll li:hover img{
 left: 300px;
 opacity: 1;
}

Untuk mengganti warna background dari setiap link, ganti kode warnanya dibagian :nth-child selector

.blogroll li:nth-child(1):hover a{
 background-color: rgba(42,53,66,0.9);
}
.blogroll li:nth-child(2):hover a{
 background-color: rgba(51, 51, 51, 0.9)
}
.blogroll li:nth-child(3):hover a{
 background-color: rgba(197, 202, 208, 0.9);
}
.blogroll li:nth-child(4):hover a{
 background-color: rgba(0, 142, 221, 0.9);
}

Markup HTML
Untuk melakukan pemanggilan dari kode CSS diatas, silahkan salin kode html berikut ini kedalam widget blog atau didalam blog

<ul class="blogroll">
<li><a href="#"><span>BloggerTuts</span> <span>Kang Ismet</span> <span>blog.kangsimet.net</span></a><img alt="Memasang Blogroll Link Dengan Gambar Profil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmc14O36h5PzVVpk_RR6xLEPRI4JYowtFiY_y2aEvg8LwBPUFAousupOt_za4WVdHsNT9eXdLchjHu-ho0YYPSP3Lcstxh0Dt8-6_EiL8dd90MBV8rwST4DhEMYzcztq07ovrGz-WiQM/s1600/KI.jpg" /></li>
<li><a href="#"><span>Kompi Ajaib</span> <span>Adhy Suryadi</span> <span>kompiajaib.com</span></a><img alt="Blogroll Link Dengan Gambar Profil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaw3t5J4eRm4Hv9MsAn2-SyQwqD0uFVNTfhStb2_ZXxzCZ9d1Xvx4Q8fNf3_mjMmibp_4jNiBEqAxTMTx7AUIsgTAoxKhFwUdeKAayV_g89xVM8nHcML1k8Sblc3ZfImsNTYmcqk1P2-I/s1600/AS.jpg" /></li>
<li><a href="#"><span>Template Editor</span> <span>Mas Sugeng</span> <span>mas-sugeng.com</span></a><img alt="Blogroll Link Dengan Gambar Profil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGvUQRReConir9MELfJcAryS_PWFYJ9RVx0fDPPgiOgheT9Pue6aTYsEKzG_S1BmhYZz8taXBdFlrmivFMK5rhpGOEYe3GQ0lsNWjRGy0WAFSD5_Zip_HtWrQCL32V6UaDVvVkvN5080/s1600/mas-sugeng.jpg" /></li>
<li><a href="#"><span>News</span> <span>Hasbi Htc</span> <span>hasbihtc.com</span></a><img alt="Memasang Blogroll Link Dengan Gambar Profil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdFSAy-VyupbjaAE-PHOuzPbt6xTX8RfGXKi7iadz3nIxiHVMDYg7Z2aCiVtdBr-k1nUa_NzSoxQCS4nja0w-h2PTWw-ElVMcQfJNKJLWxAmMkegOH6LYJGP75B22tmhFfrNlSgYmGIA/s1600/hasbi-htc.jpg" /></li>
</ul>

* Ganti judul dan nama sesuai dengan link yang terpasang. Untuk nama link, bisa ditulis dan bisa juga tidak, karena sudah ada link aktif yang terpasang

Bagaimana mudah bukan? jika ingin ada yang ditanyakan, silahkan tinggalkan komentar sobat untuk artikel ini, Memasang Blogroll Link Dengan Gambar Profil Blog