Membuat Menu Link Box On And Change Color Dengan CSS

Membaut Menu Link Box On And Change Color Dengan CSS-Kali ini saya akan mengupdate post tentang membuat menu Link Box On And Change Color menu ini memasng cocok untuk template berwarna hitam karna bisa menyala karna itu saya akan memberi tahu anda cara membuatnya.

1. Masuk Ke Blogger Anda
2. Pilih Edit HTML
3. Sebelum Mengedit template anda harus centang
   Expand Template Widget 
4. Cari code Ini ]]></b:skin>  agar lebih cepat anda bisa mengunakan F3 atau CTRL+F
5. Masukan code di bawah ini diatas code ]]></b:skin>

#contact {
margin:0 auto;
margin-top:-60px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL0_DMSuHz9cikQYQvnXnNwVL4z0OZYj2Rrsw9EeC_dD_HIkaBpTD-qx-sxrC5_Fhzyxi3K-Gcqarle8sapGJaQZ28iMJiBSx_jxSt2jxxt63zNtyW7gPCv_EpSW0YGRD00RvS38Sr6f4/s1600/bgnav.png) repeat scroll 0% 0% padding-box rgb(14, 14, 14);
border:8px solid transparent;
overflow:hidden;
width:720px;
box-shadow:0pt 0pt 8px rgba(0, 0, 0, 0.5);
height:auto;
}
#contact a, #contact a:visited {
color:rgb(230, 230, 230);
text-decoration:none;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
#contact a:hover {
color:rgb(230, 230, 230);
text-shadow:0pt 0pt 3px rgb(255, 255, 255);
text-decoration:none;
}
#contact-kolom-1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXSQzxgkZhU1XkQ3yxD0-rm0GpC3GJ3YJ7QTQ0cWD1gVG_eAoNDrp0WuKHrVt7erPH97gIHM4E_xYJpNck5xlmXMrYbmQhpDyotjKZ6XdYpAJ-RICqkwvaEhcAhoAvuT1wJTTk1iLtQ8/s1600/yahoo-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-1:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXSQzxgkZhU1XkQ3yxD0-rm0GpC3GJ3YJ7QTQ0cWD1gVG_eAoNDrp0WuKHrVt7erPH97gIHM4E_xYJpNck5xlmXMrYbmQhpDyotjKZ6XdYpAJ-RICqkwvaEhcAhoAvuT1wJTTk1iLtQ8/s1600/yahoo-icon.png) no-repeat right bottom #8703CF;
}
#contact-kolom-2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEsMpdhxz5vGZN7oJjneCgZVHTh3XcjOifsa_PS8Cg0VYlZn2H6YfCWtQFGqJOLWYfaJD3hVbteTZ25krmwFLqKFHgD-gjIBuz1n7GUfsEPpqZu0OJ6VvAcHMz4SvzUAeCOdUi1xG0NQ/s1600/Google-plus-grey-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-2:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEsMpdhxz5vGZN7oJjneCgZVHTh3XcjOifsa_PS8Cg0VYlZn2H6YfCWtQFGqJOLWYfaJD3hVbteTZ25krmwFLqKFHgD-gjIBuz1n7GUfsEPpqZu0OJ6VvAcHMz4SvzUAeCOdUi1xG0NQ/s1600/Google-plus-grey-icon.png) no-repeat right bottom #333333;
}
#contact-kolom-3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCs_9radpN3SS7zn_9J-m4qGChb2HL9nhU_3greQWJ16PQ3COkPySM09niL-jiqut4beAz62vvLYD90UlsuZntu19JG0ZSSGWJCN35e9Zr9l8RJ39DBE1HtxLPQktcuIVOGteJ6ahsw8/s1600/twitter-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-3:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCs_9radpN3SS7zn_9J-m4qGChb2HL9nhU_3greQWJ16PQ3COkPySM09niL-jiqut4beAz62vvLYD90UlsuZntu19JG0ZSSGWJCN35e9Zr9l8RJ39DBE1HtxLPQktcuIVOGteJ6ahsw8/s1600/twitter-icon.png) no-repeat right bottom #00ACBF;
}
#contact-kolom-4 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbc5L59murqZq55Xz9oefm73YLqkO_VGOb6r8_XTz-ydHF4CmOUPUjmMh5tlT2T1rE8NhJl2wFhg1sRiyHaet-rie53yvikxnwr-aUIQMTDGZVeyi5KQeh0MmJXubo7zuX2QHrQt1tCg/s1600/facebook-icon.png) no-repeat right bottom transparent;
width:180px;
height:45px;
float:right;
display:inline;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
#contact-kolom-4:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbc5L59murqZq55Xz9oefm73YLqkO_VGOb6r8_XTz-ydHF4CmOUPUjmMh5tlT2T1rE8NhJl2wFhg1sRiyHaet-rie53yvikxnwr-aUIQMTDGZVeyi5KQeh0MmJXubo7zuX2QHrQt1tCg/s1600/facebook-icon.png) no-repeat right bottom rgb(59, 89, 152);
}

   6. Teks warna biru bisa kamu ganti dengan url icon yang anda inginkan 
   7. Lalu Klik Tombol Simpan template

1. Setelah Selesai Masuk Ke bagian Elmen-Laman
2. Pilih tambahkan Gadget Pilih HTML/JavaScript 
3. Masukan code Di bawah ini

</div></div>
<div id='contact'>
<div id='contact-kolom-1'><a href='#'>Alamt YM anda</a><br/><span style='font-size:10px;padding:0px;'>Send Me IM!</span></div>
<div id='contact-kolom-2'><a href='URL Google Plus anda' target='_blank'>Google Plus<br/><span style='font-size:10px;'>Add Me To Your Circle!</span></a></div>
<div id='contact-kolom-3'><a href='URL Twitter anda' target='_blank'>Twitter<br/><span style='font-size:10px;'>Follow Me!</span></a></div>
<div id='contact-kolom-4'><a href='URl Facebook anda' target='_blank'>Facebook<br/><span style='font-size:10px;'>Add My Facebook</span></a>
</div></div>

4. Lalu klik tombol simpan dan lihatlah perubahan pada blog anda. 

 Link icon dan alamat link bbisa diganti dengan selera anda