Menu Kontak Orange Yang Fantastis

Menu Kontak Orange

Untuk beberapa blogger kebanyakan ingin blognya dipenuhi dengan segala macam hiasan-hiasan khususnya yang menggunakan CSS, nah kali ini saya akan mencoba berbagi salah satu menu kontak fixed yang dibuat oleh salah satu teman blogger saya yang sering membantu saya dalam menyelesaikan berbagai macam permasalahan pada saat saya ngeblog khususnya dibidang CSS yaitu teman saya yang bernama "Fahmy Athailla Al Majid" atau yang lebih dikenal dengan "Fahmy Setiawan" dia juga mempunyai blog yang salah satunya beralamat di http://alkian.blogspot.com saya banyak dibantu sama dia dan juga banyak belajar sama dia.
Mengapa saya jadi curhat tentang orang lain? ya terserah saya dong blog saya ini :p
ok kembali ke bahasan, untuk yang ingin memiliki tampilan lebih bagus di blognya bisa ikuti langkah-langkahnya. Pertama log in ke blogger masing2 lalu masuk ke "Rancangan" dan klik "Edit HTML" dan letakkan kode di bawah ini di atas kode ]]></b:skin> sebelumnya jangan lupa back up template terlebih dahulu jaga-jaga supaya tidak terjadi hal-hal yang tidak diinginkan.

#stickyNAV{
z-index:999;
background-image: linear-gradient(bottom, rgb(237,125,38) 42%, rgb(255,163,65) 71%, rgb(255,196,91) 86%);
background-image: -o-linear-gradient(bottom, rgb(237,125,38) 42%, rgb(255,163,65) 71%, rgb(255,196,91) 86%);
background-image: -moz-linear-gradient(bottom, rgb(237,125,38) 42%, rgb(255,163,65) 71%, rgb(255,196,91) 86%);
background-image: -webkit-linear-gradient(bottom, rgb(237,125,38) 42%, rgb(255,163,65) 71%, rgb(255,196,91) 86%);
background-image: -ms-linear-gradient(bottom, rgb(237,125,38) 42%, rgb(255,163,65) 71%, rgb(255,196,91) 86%);
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
padding:10px;
text-align:center;
border-bottom:2px dashed #ed7c26;
outline:2px solid #ed7c26;
box-shadow:0 3px 15px #000;
font-family: Courier New, Courier, monospace;
color:#fff;
text-shadow:1px 1px 1px #000;
}
.facebook{
font-family:Helvetica;
padding:5px;
border-radius:5px;
box-shadow:1px 1px 1px #003e4f, 1px 2px 1px #003e4f, 1px 3px 1px #003e4f;
cursor:hand;
background:#277bd6;
}
.facebook:active{
box-shadow:1px 1px 1px #003e4f, 2px 2px 1px #003e4f;
position:relative;
top:2px;
}
.facebook a{
color:#fff;
text-decoration:none;
}

Nah jika sudah lalu simpan dan dilanjutkan dengan meletakkan kode pemanggilannya, caranya masuk ke "Rancangan" lalu pilih "Tambah Gadget" pilih "HTML/javascript" dan letakkan kode berikut di dalam formulirnya tau bisa juga meletakkannya di dalam "edit HTML" dan letakkan sesuai kehebdak misal di bawah elemen <div class="header"></div> lalu simpan dan untuk demonya bisa terlihat di postingan ini:

<div id="stickyNAV">
Contact me in here...! <span class="facebook"><a href="http://www.blogger.com/post-edit.g?blogID=1950518855911629240&amp;postID=3342388506998938122#">Facebook</a></span></div>

Kode ini bisa anda ganti dengan alamat facebook anda http://www.blogger.com/post-edit.g?blogID=1950518855911629240&amp;postID=3342388506998938122#"



36 komentar:

  1. Pakein "z-index:999;" di #stickyNav nya.

    BalasHapus
    Balasan
    1. nama ane kok dipajang semua, pake aja yang fahmi setiawan -_-

      Hapus
    2. sudah2, ouh baru ngerti sekarang z-index buat apaan. seperti absolute cman fixed. mantaplah kalian berdua. :p

      Hapus
  2. saya agak gaptek kalau masaalah CSS, apalagi kalau tak ada demonya :)

    BalasHapus
    Balasan
    1. ah nyang bener, saya liat blognya bapak full CSS :p
      itu demonya yang warna orange ada tombol facebook warna birunya. ^:D

      Hapus
  3. nggak ada demo penampakannya nih mas

    BalasHapus
    Balasan
    1. di atas yg ngambang warna orange. emg ga ada yah?? gede bgt padahal.

      Hapus
  4. Balasan
    1. itu mbak di atas warn orange ngambang.

      Hapus
  5. wah keren gan. jadi dia mengikuti terus selama di scrol ya. ehm, mantap. btw boleh saran nie, blog mu ga bisa di koment lewat ponsel loh. mungkin jangna make template magazine, pake yang standard aja untuk template mobilenya. soalnya beberapa teman emang BW make HP, lebih praktis.

    BalasHapus
    Balasan
    1. saya cman setting standart. saya blm ngerti cara setting mobilenya. tapi thanks sarannya :D

      Hapus
  6. Mantaps , satu lagi tutorial yang jadi pedoman para blogger hehe

    BalasHapus
    Balasan
    1. wah terima kasih telah berkunjung bang. =D

      Hapus
  7. wahhh mang disini penuh dengan kode-kode CSS dah.. makasih ya kawan...

    BalasHapus
  8. ana copy dulu sob,
    mungkin suatu saat nanti bisa dimanfaatkan...

    BalasHapus
  9. masa demo facebook,, gak salah tuch hahahahh :P

    BalasHapus
  10. Balasan
    1. itu yang warna orange gede banget di atas =D

      Hapus
    2. bagus juga yach,, demonya.. keren

      Hapus
  11. Itu buat apa ya gan, masih gaptek banget ini.

    BalasHapus
  12. kalau berhasil memasangnya di blog tampilannya akan makin bagus ni
    nice share

    BalasHapus

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)