22.11.14
27
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:


Image target show menu



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://sahabatblogger77.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).

Akhir kata saya ucapkan terima kasih dan happy blogging..

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Menu Blogger Dengan Target Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

27 komentar

  1. Balasan
    1. Jujur ..idenya kreatif Vy.. memang lain dari yg lain,

      mau bertanya sedikit ., nda byk cuma dikit..saja Ya..?!

      Model/desain tetap sama seperti pada demo.. kira2 kalau dipadukan atau fungsinya diganti dengan misal, konten popular post.. itu bagaimana Vy..?,
      ..

      Hapus
    2. - Aldino
      Dalam tutorial ini saya menggunakan 2 fungsi elemen yang berbeda mas, yang pertama adalah gambar dan yang kedua link-menu, sedangkan tampilan saya bungkus dengan model tabel (display:block !importan), sedangkan untuk memanggil gambar pada setiap link, perintahnya adalah elemen CSS-target.

      jadi jika mas ingin mengganti fungsi tampilannya seperti pop-post, mas ubah kode HTML diatas untuk memanggil kontent pop-post, lalu sesuaikan atribut id dan class yang digunakan. mungkin hal ini akan sedikit sulit, tetapi pasti bisa kok.

      Hapus
    3. Sungguh kreatif betul Mbak Devy ini. memadu dan meramu coding ini hingga menghasilkan suatu tampilan Menu yang menarik dan Elegance :)

      Hapus
    4. tapi intinya.. bisa Kan?..
      jadi untuk sementara sy bawa pulang Image Target Show Menu no 5. sambil megang2 kepala.. apa bisa buatnya. Ok. Vy..tenkyu

      Hapus
    5. Mas Saud setiap berkomentar di blog Devy pasti selalu memuji, padahal kan semua sahabat blogger lainnya juga gak kalah kreatif seperti ini, semuanya sama kok mas,, sama-sama hamba Allah, hehe..

      Hapus
    6. pasti bisa mas AL, sebelumnya tampilan widget ini saya desain dengan penggunaan perintah js untuk memanggil jenis-jenis label artikel sebagai link-menu, tetapi karena areanya ada pada wilayah sidebar, so pasti loading blog sedikit berat.

      jika menggunakan tampilan pop-post yang secara langsung kita ambil dari widget blogger, disan ada kode HTML yang secara otomatis diletakkan saat widget diadopsi ke blog, nah.. coba ubah kode HTML diatas dengan HTML blogger tersebut, namun jangan lupa untuk mengganti atribut elemen CSSnya.

      Hapus
    7. :-s iyya kalo jari2 lentik Vy yg buat..!,
      tp akan sy coba, kalaopun nantinya nda berhasil..

      oiyya Vy..!
      masih ingat tempo hari di kolom komentar?!!
      ada kode css untuk menu navigasi.. yang ituh Vy.. garis oval, kode cssnya..
      di judul apa ya waktu itu Vy..!, dari tadi nyarinya tp blom ketemu..!

      minta air..aus..!

      Hapus
    8. belum dicoba masa sudah tahu hasilnya mas "Bakal gak Berhasil" pasti bisa mas.

      itu masalah penggunaan border. cari kode yang mengatur link tersebut yang menerapkan border, lalu hapus kode tersebut dan gantikan dengan elemen border-radius, agar hasilnya maksimal, gunakan padding dengan nilai 10px 15px.

      selengkapnya mas bisa pelajari disini:
      Konsep Elemen CSS Border Radius

      Hapus
    9. mas al...!!!!
      balik dulu,habisin tuh susunya,biar cepet gede geh

      jangan main kesini mulu,mbak devy mau tidur

      Hapus
  2. tetap bingung duh,gmana ya?

    BalasHapus
  3. iya bener terlihat keren dan menarik , seperti yang buat .... ahihihihi ,,,, cihuy ,,, tutup idung dulu ,,, :-)

    BalasHapus
  4. Setelah saya lihat DEMO nya disitu jelas nampak sesuatu tampilan yang sangat menajubkan keindahan menu dengan target gambarnya. saya ikutan coba tutorialnya ya Mbak makasih

    BalasHapus
    Balasan
    1. dengan senang hati mas saud, tetapi dengan 1 syarat, kalau ingin mencoba widget ini, gambar yang ke-5 jangan diganti ya mas, hehe...!!

      Hapus
    2. ahh yang bener indah mas saud... indah karena ada foto mbak devy apa gimana hayooo =p~

      Hapus
  5. ngeliat demonya emang menarik nih mbak
    dan loadingnya juga ringan

    BalasHapus
  6. makin mntap aja ya kalau tampilan menu nya dilengkapi dengan gambar seperti itu, sehingga bisa bikin pengunjung jadi terpesona dengan desain blog yang keren :)

    BalasHapus
  7. pokoknya paling kreatif nh mba dev,,,,suer (h)

    BalasHapus
  8. menambah ilmu nih hehehe
    terimakasih infonya mba :)

    BalasHapus
  9. eehh ada yang cakep tuh... ketika di hover "By. Sahabat blogger 77" ketemu cewek cantik tuh.. heheh keren mbak makasih banget ne...

    BalasHapus
  10. ngan mau nanyak sedikit cara kukar link gimana

    BalasHapus
  11. ngan blog saya kacar kacir bangget ni? ada template yg boleh di pakai

    BalasHapus
  12. cara pasangnya gimana tuh?

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK