Make Subscribe Box and Serelek Jebret Menu

Lama tidak memosting sobat @nitinmaheta ketika melancong ke sana ada satu tutorial full stylish punya ;)) Jika sobat pernah membaca postingan all coded to be a professional blogger dan mengunjungi link dengan judul static follow by email pop out widget for blogger/blogspot seperti itulah tut's karya owner blog Making Different. Singkat definisi begini, membuat kotak berlangganan ditambah link berbagi, bisa di buka/tutup (efek slideout) menggunakan CSS plus onmouseover Event Attribute, onmouseout Event Attribute, & onmouseup Event Attribute.
Bagi blogger aliran cepat saji ingin mendapatkan hasil instan widget silahkan kunjungi Add Awesome Socialize Sharing Slide Out Widget Tinggal isi settingan dan tekan tombol Add to Blogger :D
Koben optimasi kode CSS yg ada karena memang lumayan banyak, dan menghilangkan bagian keterangan ;) Final code optimize like this

#kotak_bawah {
z-index: 999999;
width: 300px;
height: 0px;
position: fixed;
bottom: 0%;
right: 5px;
}
#kotak_2 {
border-top: 2px solid #999;
border-right: 2px solid #999;
border-left: 2px solid #999;
border-radius: 5px;
overflow: none;
width: 265px;
height: 210px;
position: fixed;
bottom: 0%;
right: 5px;
background: #f3f3f3;
}
#kotak_1 {
z-index: 999999;
position: absolute;
bottom: 210px;
right: 5px;
width: 255px;
height: 25px;
cursor: pointer;
padding-top: 2px;
background-color: #f3f3f3;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-right: 2px solid #999;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#kotak_3 {
position: absolute;
bottom: 0px;
right: 5px;
width: 255px;
height: 25px;
cursor: pointer;
background-color: #f3f3f3;
padding-top: 0px;
border-top: 3px solid #555;
border-left: 3px solid #555;
border-right: 3px solid #555;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.panah_bawah {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
.panah_atas {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333;
}
.panah_1 {
width: 8px;
height: 10px;
background-color: #333;
}
#kotak_tutup {
position: absolute;
bottom: 135px;
left: 10px;
width: auto;
height: 75px;
}
#kotak_email {
position: absolute;
bottom: 0px;
width: 243px;
height: 90px;
right: 0;
}
.e_mail {
padding: 5px 0 7px 10px;
width: 218px;
font-size: 12px;
border-radius: 5px;
}
.subs_cribe {
box-shadow: inset 0px 1px 0px 0px #fff;
background-color: #f9f9f9;
border-radius: 5px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #777;
font-size: 11px;
font-weight: bold;
padding: 6px 15px;
margin: 5px auto;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
}
.subs_cribe:hover {
background-color: #c9c9c9;
color: #333;
cursor: pointer;
}

Kode HTML

<div id="kotak_bawah">

<table id="kotak_3" onmouseup="document.getElementById('kotak_2').style.display='block'">
<tr>
<td align="center">
Be Socialized And Subscribed
</td>
<td align="center">
<div class="panah_atas"></div>
<div class="panah_1"></div>
</td>
</tr>
</table>

<div id="kotak_2">

<table style="" id="kotak_1" onmouseup="document.getElementById('kotak_2').style.display='none'">
<tr>
<td align="center">
Be Socializer And Subscriber
</td>
<td align="center">
<div class="panah_1"></div>
<div class="panah_bawah"></div>
</td>
</tr>
</table>

<div id="kotak_tutup">
<table>
<tr>
<td>
<a href="YOUR-LINK1-HERE">
<img height="48px" width="48px" title="Like Us On Facebook" alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBcuODl2-JsLgH8s6qCn3cL7YTTlIycrYrdJcCrJNBBoAzTlngY1dhSxVz_QFoNxRHi6ORtA65nrNmv6vpwpqPSBeBDxUwZISeG46AAktP3pbtBhry9vWrGOP9AQb6y3zzHozbg5tf7O1/s1600/MD-Facebook1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIECEE1e_9BJDmkqbBhOmKDF7aIO9UPyJCOwVmEmAoK3o-IGpcujNABZxxPmeH4ZQScB8m1P3Y0y8a0GuK-bfYCfevriOMatQiVKMzUxIASfK5kDZqD3FEtyuUYnA6Hol0T8-R9tw3YRN/s1600/MD-Facebook2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBcuODl2-JsLgH8s6qCn3cL7YTTlIycrYrdJcCrJNBBoAzTlngY1dhSxVz_QFoNxRHi6ORtA65nrNmv6vpwpqPSBeBDxUwZISeG46AAktP3pbtBhry9vWrGOP9AQb6y3zzHozbg5tf7O1/s1600/MD-Facebook1.png'"/>
</a>
<a href="YOUR-LINK2-HERE">
<img height="48px" width="48px" title="Follow Me On Twitter" alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_fp4vyytSrUQwoWe926O5p9KP3KQvbymxyIZO917Z7TWJ74eqKtD7NytfmjibM2bzaOWERpuQlARTM0Cg6VupJeQ3fQr_t1nESsgnYrNLcfna0R7F-ZBuTSzF6eab8cpRrV7Y67r6XY5/s1600/MD-Twitter1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iDn_monzYqlufdix9v1WLq76JxTryefV7OECDjgjN5ZgMHXi3vPjt2X39sRsu_3-X9_U9dxkcQa-UquERICRVE8sm4nKQx7J43ruPHIFga-Y1NRjygxBUhEXI9G_NBi8txNEratd8A3p/s1600/MD-Twitter2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_fp4vyytSrUQwoWe926O5p9KP3KQvbymxyIZO917Z7TWJ74eqKtD7NytfmjibM2bzaOWERpuQlARTM0Cg6VupJeQ3fQr_t1nESsgnYrNLcfna0R7F-ZBuTSzF6eab8cpRrV7Y67r6XY5/s1600/MD-Twitter1.png'"/>
</a>
</td>
<td width="65px">
<a style="font-size:12px;color:#333;font-weight:bold;"href="YOUR-LINK3-HERE">Like me
</a>
<br /><br /><br />
<a style="font-size:12px;color:#333;font-weight:bold;"href="YOUR-LINK4-HERE">Follow me
</a>
</td>
<td>
<a href="YOUR-LINK5-HERE"><img height="48px" width="48px" title="Add Us To Your Circle" alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjDmeHLquQo4-2fKLzGhTR5H82xOVRXVs_FYWpqkItacJaPhG2bX41Aq2rQZRXbEvx4oKWa5iaiJoy2BB5Z88YR02HUfZXeOCt37evd_zR82SVIU13apdP9Trn0BIoY6VGu1WgFQKglM2/s1600/MD-Google1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCj8Ycic3ZwNHc7dU-nr3oO_P2hyRRP1xgIdJlDHs-LAmGi2JrDwiMw7rOOM4myvCGtpqQcWly121Kp6Q3WoI-TV6ohc8bQleWsbQ4ICV2OzFBenCaEjsFpEneoEouPQE8r4KJcya2yH9k/s1600/MD-Google2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjDmeHLquQo4-2fKLzGhTR5H82xOVRXVs_FYWpqkItacJaPhG2bX41Aq2rQZRXbEvx4oKWa5iaiJoy2BB5Z88YR02HUfZXeOCt37evd_zR82SVIU13apdP9Trn0BIoY6VGu1WgFQKglM2/s1600/MD-Google1.png'"/>
</a>
<a href="YOUR-LINK6-HERE">
<img height="48px" width="48px" title="Subscribe Our RSS" alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1Fp_h9rRSmBRqoVCOsQhKgMvR4nVreHHn1wDozeNBgcc-ODjY80qkcYYcMuxo6FfPVWMfin2C5VkrxiXXvlsvqETFgCkiVxyuoHvB7XNGcXJFtBc1Csls2ctzTo_JfU7rHcaK30WNW4V/s1600/MD-Feedburner1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1BHG908K8nY7iZlJLuIdGzhk3Co14huJpzjQRqANiutVl8hAnJsuuwyiyjsmOUTZrpd21FR1cFo9jSgZDq_AzglIBPZB_ySTAKRFn09x6-KYvofIsN6Pyaip7mlOPZNGw8CRxTZ_4IQKN/s1600/MD-Feedburner2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1Fp_h9rRSmBRqoVCOsQhKgMvR4nVreHHn1wDozeNBgcc-ODjY80qkcYYcMuxo6FfPVWMfin2C5VkrxiXXvlsvqETFgCkiVxyuoHvB7XNGcXJFtBc1Csls2ctzTo_JfU7rHcaK30WNW4V/s1600/MD-Feedburner1.png'"/>
</a>
</td>
<td width="70px">
<a style="font-size:12px;color:#333;font-weight:bold;" href="YOUR-LINK7-HERE">
Add Me
</a>
<br /><br /><br />
<a style="font-size:12px;color:#333;font-weight:bold;" href="YOUR-LINK8-HERE">
Subscribe
</a>
</td>
</tr>
</table>
</div>

<div id="kotak_email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ID-FEEDBURNER','popupwindow','scrollbars=yes,width=550,height=520'); return true">
<input class="e_mail" type="text" id="email" name="email" placeholder="Enter Your Email Here.."/>
<input type="hidden" value="YOUR-ID" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="subs_cribe" name="commit" type="submit" value="Subscribe Our News Letter Now"/>
</form>
</div>

</div>
</div>

Link pada image & link pada tulisan berbeda, sehingga kita dapat menyisipkan link sebanyak 8 biji! Seperti itu sobat optimasi CSS yg gue buat :)

Keterangan:
>> Ganti & isikan YOUR-LINK-1-8-HERE dengan link tujuan masing²
>> Tulisan YOUR-ID-FEEDBURNER & YOUR-ID ganti dengan ID/Account feedburner kalian.

Membuat menu untuk navigasi patut dibuat agar pengunjung tidak kebingungan mencari-cari sesuatu. Sudah berapa koben share bikin menu keren punya! Search saja deh yah ;) Tapi yg spt sekarang belum pernah saya kasih :))

.menFix {
    position: fixed;
    display: block;
    bottom: 5px;
    height: 40px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#version_menu {
    position: fixed;
    display: none;
    bottom: 11px;
    right: 146px;
    margin: 0;
}
.footer_popout:hover #version_menu {
    display: block;
}
#version_menu li {
    display: block;
    float: right;
    list-style-type: none;
}
#version_menu li a {
    display: block;
    padding: 6px 10px 4px 10px;
    margin: 7px 7px 0 0;
    font-weight: bold;
    font-size: 14px;
    height: 20px;
    line-height: 17px;
    color: #fff;
    background: #555;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.menFix {
    background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTQHY6Ne8Ljm9V8q1P4jQfWTqIv8JTnAnf4vc9WS2HGkXfahsNuBuZZj_txlsgAPhoq77L7ZlL1F3-tDAv_Bn7G9ZhZH7yL9gF7W5_CLB-y93rf5VXdzt6ShGN3lqcGx6mYhsjn3yfa59/s1600-d/book-menu.png) scroll 0px -44px no-repeat;
    border: 1px solid #111;
    width: 43px;
    right: 5px;
}
.menFix:hover {
    background-position: top left;
    width: 140px;
}

Markup HTML<div class="footer_popout">
<a href="#" class="menFix"></a>
<ul id="version_menu">
<li><a href="#">1.1.1</a></li>
<li><a href="#">1.1.2</a></li>
<li><a href="#">1.1.3</a></li>
<li><a href="#">1.1.4</a></li>
<li><a href="#">1.1.5</a></li>
</ul>
</div>Demo, perhatikan kanan pojok bawah gambar buku!

Begitulah bentuk dari menu serelek jebret :D
Happy blogging \m/