Membuat Menu Blogger Dengan Target Gambar

Membuat Menu Blogger Dengan Target Gambar - Bergegas dari pembahasan pada artikel sebelumnya tentang Cara Membuat Panel Slide Halaman Posting, pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan obrolan singkat seputar pembahasan tips sederhana untuk mendesain serta membuat tampilan blog agar terlihat lebih menarik dan keren dengan Membuat Menu Blogger Dengan Target Gambar sebagai tampilan widget pada halaman sidebar. Widget ini saya khususkan untuk ditampilkan pada sidebar page, karena bentuk dan tampilan sudah saya desain mengikuti lebar kolom sidebar blog pada umumnya seperti tampilan gambar berikut:

Referensi URL - Pengenalan Elemen CSS Target


Tidak jauh berbeda saat Anda memberikan title teks pada sebuah link-url, yang mana sebelum link pada menu tersebut di klik akan menampilkan sejumlah teks sebelum akhirnya Anda dialihkan pada halaman baru. Namun untuk Membuat Menu Blogger Dengan Target Gambar seperti ini, saya membungkus setiap kode pada link-menu dengan Elemen first-child img {z-index:1; opacity:1;} untuk dapat memanggil gambar sebagai title jika salah satu menu di hover. Singkatnya, setiap satu menu sudah saya beri satu buah gambar sebagai target sebelum Anda menuju tautan tersebut. Kode lengkapnya seperti ini:

<style type='text/css'>
//* Image target show menu for sidebar widget
input data='css-target' id='sm-container'
visit: http://hudathemaster.blogspot.com
modified by. Devy Indriyani
publish date: November 23, 2014
*/
#img-sm {
  border-radius:20px;
  background:#3F3935;
  padding-top:290px;
  width:300px;
  position:relative;
  margin:0 auto;}

#img-sm a {
  display:block !important;
  color:#CFCECE;
  font-family:Lato, sans-serif;
  border-left:2px solid #e06666;
  font-size:14px;
  text-transform:uppercase;
  box-sizing:border-box;
  transition:.7s all linear;
  text-shadow:2px 2px 2px rgba(0,0,0,0.6);
  padding:8px 8px;}

#img-sm a:first-child img {z-index:1; opacity:1;}
#img-sm a:hover img {opacity:1; z-index:2;}
#img-sm a:hover {border-left-width:20px;}
#img-sm a img {
  width:250px;
  border-radius:50%;
  overflow:hidden;
  position:absolute;
  top:25px;left:25px;opacity:0;
  transition:.7s all linear;
  box-shadow:0 0 0 3px #eee;}
</style>

Hasilnya:




DEMO SHOW


Semua kode-kode diatas sudah saya ringkas termasuk penggunaan perintah javascript, agar nantinya widget ini tidak membuat loading halaman blog Anda menjadi berat. Tahap selanjutnya tinggal menambahkan link menu sebanyak yang Anda inginkan pada HTML berikut:

<div id="img-sm">
<a href="#">MENU 1<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 2<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 3<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 4<img src="http://Url-Gambar.jpg" alt=".."></a>
</div>

Terlihat keren dan menarik bukan, hehe..!! widget ini saya tampilkan dengan tampilan default seperti warna background, hover link color yang saya desain sesuai dengan warna blog saya, jika sekiranya Anda ingin mengubah tampilan warnanya, Anda bisa pilah-pilih warna yang sesuai dengan blog Anda pada ► Tabel Kode Color Heksa Terlengkap (Ragam Warna).

terima kasi semoga bermanfaat :)