Showing posts with label kiri. Show all posts
Showing posts with label kiri. Show all posts
Wednesday, December 14, 2016
cara Membuat Widget Share Melayang Disebelah Kiri
cara Membuat Widget Share Melayang Disebelah Kiri
cara Membuat Widget Share Melayang Disebelah Kiri
Kali ini saya akan memberikan tips Cara Membuat Widget Share Melayang Disebelah Kiri,bagi yang belum tahu apa itu Widget Share?Widget Share adalah tombol untuk membagikan postingan seseorang dalam facebook,twitter,gmail dan lain-lain.
sudah ngerti kan?oke langsung aja kita bahas Cara Membuat Widget Share Melayang Disebelah Kiri.
Dibawah Berikut:
1.Buka dulu Blogger Sobat.
?Cari Bacaan "Tata Letak/Layout".
2.Tambahkan Gadget HTML/JavaScript.
3.Copy Kode Dibawah Berikut Dan Paste Di Gadget Sobat Tadi Lalu Save.
<style>
#ctarsisharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#ctarsisharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#ctarsissharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id=ctarsisharebtn title="Share This With Your Friends">
<div class=sbutton id=gb><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class=sbutton id=gplusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class=sbutton id=su><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
#ctarsisharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#ctarsisharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#ctarsissharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id=ctarsisharebtn title="Share This With Your Friends">
<div class=sbutton id=gb><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class=sbutton id=gplusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class=sbutton id=su><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
Go to link Download
Wednesday, October 26, 2016
cara membuat like box di sisi kiri blog
cara membuat like box di sisi kiri blog
???????????????????????? ?????????????? ?????????
Ini dia salah satu widget yang sangat menakjubkan.
Dimana orang-orang selama bertahun-tahun hanya menggunakan tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox).
Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol maka akan terbuka kotak Facebook likenya.
Langkah-langkahnya sebagai berikut:
LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda :
- Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.
- Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery berikut sebelum kode </head>
- <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js type=text/javascript/>3. (Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)Save (simpan) template.
LANGKAH 2. Tambahkan floating likebox ke blog Anda :
- Buka halaman Tata Letak
- Klik tambah gadget > pilih tambah HTML/Javascript
- <script type="text/javascript"> //<!--copy dan pastekan kode script atas ini
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");},
500);}); //--> </script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YJAg223vbZpjz_QTCGUdJwax8v5CQGaCmndxU6dimJ6B__YkhU3bCLIzit6DVD59ci4vMmy9G0nwhvvulerCGIylRDBuAdb6U02mPR_4vf1_-zUjjDtuGQ3HE7ywowDXUEVQf24DmTB8/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http:///www.facebook.com/pages/Eyang-anom/427305383989192&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div>
Anda bisa mengganti "url fans page facebook Anda" dengan alamat url fans page facebook Anda sendiri
contoh fans page facebook blog ini : http://www.facebook.com/RivaldoAtthoriqPutraSetyadi?ref=hl.
Sedangkan untuk gambar logo facebooknya seperti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YJAg223vbZpjz_QTCGUdJwax8v5CQGaCmndxU6dimJ6B__YkhU3bCLIzit6DVD59ci4vMmy9G0nwhvvulerCGIylRDBuAdb6U02mPR_4vf1_-zUjjDtuGQ3HE7ywowDXUEVQf24DmTB8/s1600/facebook1.png", bisa diganti dengan koleksi gambar logo facebook Anda sendiri.
Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).
Semoga bermanfaat.
Go to link Download
Subscribe to:
Posts (Atom)