Cara Membuat Widget Melayang | sample andry surya's blog
Powered By Blogger

Cari

News Update :

translate

Halaman

Poll

Rating

print this page Print this page

Andry Surya's Blog

Andry Surya's Blog
Just Pick not Real Search Enginer

Search

Loading

Rabu, 04 Januari 2012

Cara Membuat Widget Melayang

Cara membuat widget melayang pada blog. Terutama yg akan blogtegal bahas yakni membuat widget melayang pada pengguna blogspot, manfaat dari widget melayang itu sendiri banyak, biasanya di gunakan untuk ditempati iklan berbasis PPC atau iklan yg begitu penting yg sangat terbatas waktu promosinya yang di maksudkan agar pengunjung tahu bahwa ada bisnis yang penting sekarang ini.
Widget melayang ini bisa kita atur tata letaknya entah mau d letakan sebelah kiri, kanan, atas maupun bawah pada posisi blog, nanti akan awak terangkan di bawah, hokey :d
Untuk tampilan besar kecilnya ukuran widget melayang ini tergantung pada isi yang akan kita tempatkan.
Jika widget melayang ini kita tempati iklan berbasis PPC, maka ukuran-y akan menyesuaikan dg ukuran iklan, untuk contohnya bisa di lihat pada pojok kanan atas di blogtegal.com ini.
Bagaimana apakah kamu tertarik untuk membuatnya? Jika ya mari kita lakukan penelitiannya hehehehe. . . . . .
Silahkan copi paste script di bawah ini pada widget HTML/Javascript.
Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:

  • masuk ke dasboard blog kamu.
  • pilih Rancangan
  • pada elemen halaman klik ''Tambah widget''
  • Dan pilih Widget HTML/Javascript
  • kemudian paste-kan script di bawah ini.
  • dan Simpan
<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> silahkan tempatkan kode iklan atau banner atau teks atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
Perhatikan pada tulisan yang berwarna ungu pada script di atas, di situ berisi tentang pengaturan tentang posisi, background,border widget melayang tersebut. Atur sesuai dg keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan. Oh ya, jika kamu ingin menempatkan widget melayang tersebut pada halaman yg ingin kamu tentukan baca artikel blogtegal tentang menampilkan widget pada halaman tertentu yg kita inginkan
Bagaimana apakah sudah bisa membuat widget melayang atau membuat iklan melayang? Semoga bermanfaat.


from: http://www.blogtegal.com/2011/01/trik-membuat-widget-melayang.html


TERIMA KASIH ATAS KUNJUNGANNYA SILAHKAN BERIKAN KOMENTAR DAN BERIKAN LINK WEBSITES ANDA DAN SAYA AKAN MENGUNJUNGINYA KEMBALI
Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

Ditulis Oleh : Andry Sang Pemilik Andry Surya's Blog

Terimakasih anda telah membaca artikel Cara Membuat Widget Melayang ini diposting oleh Andry pada hari Rabu, 04 Januari 2012. Dan saya ucapkan juga terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Semoga Bermanfaat untuk anda.

:: Get this widget ! ::

0 Comments
Tweets
Komentar

0 komentar:

Poskan Komentar

Stay On

Read latest headlines in your favorite news reader
Fellow Readers
Sign up for our email news letter

Iklan

(i)
Ads by Google

Backlink

Tukar Link Yuk!! [KLIK DISINI]

Andry Surya's Blog kodenya: <a href="http://andry5ury4.blogspot.com/" target="_blank"><img alt="Andry Surya's Blog" height="66" src="http://images.cooltext.com/2409287.gif" width="500" /></a> Free kodenya: <a href="http://andry5ury4.blogspot.com/" target="_blank"><img src="http://images.cooltext.com/2409293.gif" alt="Free" height="15" width="80" /></a> Image by Cool Text: Free Graphics Generator - Edit Image taruh nih widget di blogmu kalau udah klik contact me. ntar ku kunjungi balik
Wirausaha

Blog Kawan

Berbagi Info dan Tips Blogging blog-indonesia.com
CO.CC:Free Domain

info

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More