End of Page Slide Out Box with Open Close Button

Artikel sekarang mungkin ada kaitannya dengan postingan sebelumnya, you can read it end of page slide out box and end of page slide out box plus minimize use jquery. AA Koben akan membuat hal serupa dengan style yang sedikit berbeda! Ketika melakukan scroll ke bawah, konten akan tampak dan akan tertutup kembali, namun tombol tutup tetap tampak. Begitulah penjelasan bahasa HTML kalau menggunakan kata-kata :P Area content akan saya buat untuk situs jejaring facebook. Tidak menutup kemungkinan bisa sobat gunakan untuk yg lain ;)

#likeFBbox {
display: none;
position: fixed;
z-index: 9999;
bottom: 0;
right: 10px;
padding: 5px;
width: 300px;
background: #f1f1f1;
overflow: hidden;
-webkit-box-shadow: 0 0 3px 0 #666;
box-shadow: 0 0 3px 0 #666;
}
#likeFBbox .header {
font-size: 12px;
margin: 0;
font-weight: 600;
text-align: center;
height: 25px;
line-height: 25px;
left: -5px;
padding: 5px 10px;
position: relative;
top: -5px;
width: 292px;
background: #4A67A3;
color: #fff;
}
#likeFBbox #close {
cursor: pointer;
position: absolute;
top: 13px;
right: 12px;
}
#imgFBbox {
cursor: pointer;
display: none;
position: fixed;
z-index: 9999;
bottom: 20px;
right: 20px;
-webkit-box-shadow: 0 0 3px 0 #666;
box-shadow: 0 0 3px 0 #666;
}
#imgFBbox img {
display: block;
}

Karena bentrok dengan kode emoticon, buka link berikut ambil dan buka kode planing HTML tersebut pada text editor Ex: notepad.
Image gue pakai link Data URI, silahkan ganti dengan link host kalau mau. Kemudian perhatikan kode<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426&amp;width=296&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:296px; height:258px;" allowTransparency="true"></iframe>Ganti link https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426 dengan link masing-masing.

Masukan bumbu snippet jQuery & simpan pada tempat semestinya!

SAVE.

DEMO

codepen.io/beben-koben/full/KwdQya

Happy coding \m/