Kawan masih ingat dengan postingan saya Cara Membuat Elemen Sembunyi disisi Kanan :z; itu sebagai ilustrasi saja karena yang akan saya bahas sekarang Cara Lain Membuat Elemen Sembunyi disisi Kanan yang bisa kawan Simpan File / Script Iklan / Iframe atau yang lainnya
screenshot |
Cara Membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Home / Dasbor pilih Template - Edit HTML
- Copas Script berikut dibawah ]]></b:skin> atau diatas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
Seandainya pada Template kawan sudah ada script jquery diatas [walau seri berapa saja] maka script tersebut tak usah ditambahkan lagi
- Selanjutnya pilih Tata Letak - Tambahkan Gadget
- Pilih tanda + pada HTML / JavaScript
- Copas script berikut kedalamnya [bisa digabung dengan Gadget yang sudah ada]
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bbcslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-310"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bbcslikebox{background: url("http://i.picasion.com/pic63/e58865b7a360e9be1c5568bd5d6832f6.gif") no-repeat scroll left center transparent !important;display: block;float: right;height: 260px;padding: 0 5px 0 40px;width: 290px;z-index: 99999;position:fixed;right:-310px;top:60%;}
.bbcslikebox div{border:none;position:relative;display:block;}
.bbcslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.bbcslikebox span a{color: gray;text-decoration:none;}
.bbcslikebox span a:hover{text-decoration:none;}
</style>
<div class="bbcslikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBlogbegoCreation&width=300&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=260" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 260px; width: 300px;background:#fff;"></iframe> </div>
</div>
Penjelasan :
- Kode teks http://i.picasion.com/pic63/e58865b7a360e9be1c5568bd5d6832f6.gif yang berwarna merah adalah Url Image FBLike silahkan ganti disesuaikan dengan isinya
- top:60% adalah posisi tampilan 60% dari atas, yang bisa kawan rubah
- Script <iframe s/d </iframe> adalah FaceBook Like seperti contoh diatas, kawan tinggal mengganti BlogbegoCreation dengan Account FaceBook kawan :x; dan kawan bisa menghapus semuanya untuk menyimpan script Iklan atau File lainnya disana
- Simpan Blog kawan