Membuat Show-Hide Widget Followers Keren Abis
Rabu, 10 Oktober 2012
0
komentar
Hmm... Lama juga neh gak update blog, coz seminggu kemarin sibuk sama urusan offline.
Oke, pada kesempatan kali ini saya akan membahas mengenai widget followers di blog, tepatnya "membuat widget followers keren abis" Sobat pasti tahu kan seperti apa itu widget followers di blog ?? tapi yang akan saya share kali ini pastinya beda dengan membuat followers biasa sob, yang pasti lebih menarik dan keren!! Selain itu juga saya rasa dengan adanya widget followers yang akan kita buat kali ini, membuat berat blog lebih ringan, itu bila dibandingkan dengan widget followers biasa.
Berminat ?? Yowes, berikut cara membuatnya :
1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya:
Jangan disimpan dulu sob, masih ada langkah berikutnya neh
6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect
7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:
14. Save dan lihatlah hasilnya.
Selamat mencoba, semoga bermanfaat ya Shobat Creativepio semuanya.........!
Sumber : http://kode-blogger.blogspot.com/
Oke, pada kesempatan kali ini saya akan membahas mengenai widget followers di blog, tepatnya "membuat widget followers keren abis" Sobat pasti tahu kan seperti apa itu widget followers di blog ?? tapi yang akan saya share kali ini pastinya beda dengan membuat followers biasa sob, yang pasti lebih menarik dan keren!! Selain itu juga saya rasa dengan adanya widget followers yang akan kita buat kali ini, membuat berat blog lebih ringan, itu bila dibandingkan dengan widget followers biasa.
Berminat ?? Yowes, berikut cara membuatnya :
1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya:
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypvFmaAbdhMimtkD_Kf3Sk2pG84_KnD7lsfzjUor6qRHLkh11GvOTSs-O5xP0DCzdVaJrF5Qec78NLKEO0n8NnHYbdkdOdrO57mjckj-CD9xaZ0pwDkfc1ktRLkm8blv7QXkSVtbIKSxQ/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypvFmaAbdhMimtkD_Kf3Sk2pG84_KnD7lsfzjUor6qRHLkh11GvOTSs-O5xP0DCzdVaJrF5Qec78NLKEO0n8NnHYbdkdOdrO57mjckj-CD9xaZ0pwDkfc1ktRLkm8blv7QXkSVtbIKSxQ/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Jangan disimpan dulu sob, masih ada langkah berikutnya neh
6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect
Screenshot
7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:
<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCCMYKz-XTzIeCSa5-A7caQIiw1TC8ulwzXAZFupPYWsSuNSqlGFmX0Edtv3gAqZapbD25QoIp3O3e3mXj5ggy-WFPe7mVBKFHeYEvak2CvebxfRmV9fwwl9Bfzl3ch7JFlH7FbIbkPQP/" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>
14. Save dan lihatlah hasilnya.
Selamat mencoba, semoga bermanfaat ya Shobat Creativepio semuanya.........!
Sumber : http://kode-blogger.blogspot.com/
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Show-Hide Widget Followers Keren Abis
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://creativepio.blogspot.com/2012/10/membuat-show-hide-widget-followers.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Tutorial
0 komentar:
Posting Komentar