Adapun Cara membuat : ( Menu Blogger Dengan Target Gambar ) sebagai berikut :
1. Login ke akun blogger
2. Klik tema
3. Edit html
Masukan CSS di bawah 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>
Masukan Kode HTML di bawah ini :
<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>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah
simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,
dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Menu Blogger Dengan Target Gambar ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar