bloger sejati

Showing posts with label floating. Show all posts

Cara Membuat Wadah Iklan Muncul Tiba - tiba / Membuat Iklan Melayang Di Blog

Posted by Unknown Friday, July 26, 2013

Cara Membuat Wadah Iklan Muncul Tiba - tiba - Membuat Iklan Melayang Di Blog

Bingungkan?? awalnya aku juga bingung...tapi lama - lama pati sobat mengerti.

Fungsinya sangat penting sekali terutama blog yang memasang iklan, baik dari adsense google maupun dari kumpul blogger dan sebagainya.

Dengan ditambahkannya JavaScript pada Wadah Iklan ini kita akan dapat mengoptimalkan penghasilan blog melalui adsense atau pay per klik.
Langkah-langkahn nya sebagai berikut:

1. Login ke Blogger

2. Masuk ke "Tata Letak - Elemen Laman"

3. Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"

4. Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):

1. Width: 350px; ubah angkanya untuk mengatur lebar wadah;
2. FFFFFF adalah warna background
3. 1px solid #333333 adalah jenis dan warna border..
4. Ganti kode yang berwarna merah dengan script iklan milik sobat.

Selengkapnya...

Membuat Gambar Animasi Melayang

Posted by Unknown Saturday, August 4, 2012

Copy code berikut lalu pastekan ke mode html halaman/tulisan baru jika ingin memasangnya di halaman Anda saja dan untuk memasang di halaman utama anda harus memasang di widget teks di sidebar Anda.
Posisi bawah-kiri

<div style="display:scroll;position:fixed;bottom:0;left:0;"><a href="URL link yang dituju" terget="_blank"> <img src="URL gambar berada" /> </a></div>

Posisi bawah-kanan

<div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="URL link yang dituju" target="_blank"> <img src="URL gambar berada" /> </a></div>

Posisi atas-kiri

<div style="display:scroll;position:fixed;top:0;left:0;"><a href="URL link yang dituju" target="_blank"> <img src="URL gambar berada" /> </a></div>

Posisi atas-kanan

<div style="display:scroll;position:fixed;top:0;right:0;"><a href="URL link yang dituju" terget="_blank"> <img src="URL gambar berada" /> </a></div>

Keterangan:
Tulisan yang saya warnai dengan warna merah itu link yang akan di klik atau di tuju, misalnya http://irfanhandi.wordpress.com/ nah kalau yang warna biru itu tempat url dimana letak gambar tersebut berada, misalnya: http://fitr4y.files.wordpress.com/2011/05/eagle2.gif
Demikian cara pasang floating images atau gambar melayang ini, jika kurang jelas mari kita sama-sama bahas.
Untuk Mas Andan yang sempat bingung, mungkin ini jawabannya.
Ternyata kalau dipasang di halaman scriptnya berubah menjadi sepert ini:
Unduh disini
Coba pastekan code diatas di halaman/tulisan baru di mode html kemudian lihat hasilnya di mode visual.
Semoga membantu.

Selengkapnya...

Cara Memasang Animasi Melayang Pada Blog/Website

Posted by Unknown

Tutorial kali ini kita akan membahas tentang cara bagaimana memasang sebuah animasi pada blog/website agar dia bisa melayang di depan halaman blog/website. Ok marilah kita ikuti persyaratannya sebagai berikut :

1. Tentunya kita harus sudah mempunya url file flash yang bisa dipanggil dari blog/website secara online. Klow belum tahu silahkan baca kembali postingan sebelumnya yang berjudul Cara Memasang Animasi Atau Game Flash Pada Blog Atau Website.

2. Bila telah mendapatkan url flash kita maka ada 3 posisi penyimpanan melayang yang akan kita coba yaitu :

    a. Penempatan SEBELAH BAWAH KIRI, kodenya yaitu :

<div style="position: fixed; bottom: 0px; left: 2px;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="https://sites.google.com/site/koreanwidget/Magician02.swf?attredirects=0" wmode="transparent" type="application/x-shockwave-flash" quality="high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>

b. Penempatan SEBELAH BAWAH KANAN, kodenya yaitu :

<div style="position: fixed; bottom: 0px; right: 2px;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview" wmode="transparent" type="application/x-shockwave-flash" quality"high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>

     c. Penempatan PADA SIDE BAR, kodenya yaitu :

<div style="text-align: center;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview" wmode="transparent" type="application/x-shockwave-flash" quality="high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>

keterangan : - 150 = lebar animasi, 320 = tinggi animasi
                   - http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview = alamat url animasi pada webhosting

Sekian dan semoga bermanfaat walow tulisannya tidak karuan.....wasalam

Selengkapnya...

Cara Membuat Facebook Like Box Melayang

Posted by Unknown

Cara Membuat Facebook Like Box Melayang - Ini bukan Facebook Like Box biasa melainkan dengan mebuatnya melayang seperti layaknya udara di blog sobat. Facebook Like Box ini akan mengikuti pengunjung kemana saja sambil mengikuti arah scroll naik ke atas maupun bawah. Facebook Like Box ini juga dilengkapi dengan tombol close yang gunanya menonaktifkan atau menutup gadjet tersebut. Bila sobat tertarik, berikut tutorialnya :

1. Login Ke Blogger
2. Masuk ke Rancangan
3. Pilih Tambah Gadged
4. Masukkan HTML/Javascript berikut ini

<style type="text/css">
#topbar{
position:absolute;
padding-left:-100px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE1sIAh-6Zg970Qr2RZM1OxDXNGMaRy4rl8EkMwy0jLUUHq6ka8zl3xsqph5yLR5UybPI56IL52QcaEAwxr10YBTN9jheV4j5lg7NaN2aBJG55q1n98XjPjMgUCDQgsq7tF0mjE6GmR2p/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">

PASTE KODE LIKE BOX DISINI

</div>
</center>
</div>

6.Ganti Kode bewarna merah dengan kode facebook like box sobat untuk login sobat bisa masuk halaman DI SINI
7. Simpan Templates

Sekian tutorial Cara Membuat Facebook Like Box Melayang. Semoga bermanfaat,,

Selengkapnya...

Cara membuat animasi twitter melayang di blog

Posted by Unknown

Di beberapa blog saya menemukan "Bagaimana Cara Membuat Burung Twitter Melayang". Namun kali ini saya akan memberikan 6 Buah Ikon widget twitter yang melayang khusus untuk kamu. Ada Edisi Songoku, Transformers, Orang Terbang, Burung Twiiter dan lain-lain. Caranya Pun Mudah, tinggal kamu lihat sja tutornya di bawah ini :

1. Masuk ke Blogger.com dengan akun kamu.

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu pilih salah satu kode HTML/Javascript yang kamu suka di bawah ini. Jangan Lupa disalin dan di masukkan kedalam kotak HTML/Javascript yaaaah.

a. Burung Twitter Melayang

b. Widget Transformers Melayang

c. Widget Naga Hitam Melayang

var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>

d. Widget Orang Berwarna Orange Melayang

e. Widget DragonBall (Songoku) Melayang

f. Widget Naga Merah Melayang

NOTE :

Tinggal kamu ganti saja tulisan yang berwarna biru itu

Selengkapnya...

Membuat animasi melayang di blog

Posted by Unknown

Untuk bisa membuat gambar yang diem manis dipojok kiri seperti punya saya, sangat mudah caranya. Tapi pertama tama tentukan dulu gambar yang ingin dibikn, gambar yang gerak geraf atau versi gif juga boleh kok apa lagi gambar aku...hahahaha.. (uhuk). Terus tu gambar upload dulu di web yang menyediakan jasa bikin URL gt, kalo sih makenya flickr.com. Yang lain juga boleh seperti photobucket.com, imageshack.com, atau dll.

1. Login Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Edit html.
5. Kemudian copy code dibawah ini dan paste di atas kode ]]></b:skin> ( biar mudah pake cntr F)
===================================================

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

================================================

Ket : Kode yang tercetak pink ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode </body>
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.
==========================================================

<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/>
</div>

==========================================================
Ket : kode yang berwarna pink diganti dengan url tempat gambar anda disimpan.

7. Simpan, jadi deh...

Selengkapnya...

bloger sejati

Pages

Cara Membuat Wadah Iklan Muncul Tiba - tiba / Membuat Iklan Melayang Di Blog

Membuat Gambar Animasi Melayang

Cara Memasang Animasi Melayang Pada Blog/Website

Sekian dan semoga bermanfaat walow tulisannya tidak karuan.....wasalam

Cara Membuat Facebook Like Box Melayang

Cara membuat animasi twitter melayang di blog

Membuat animasi melayang di blog

sponsor

Labels

Followers

Tentang aku

Blog Archive

pengunjung blog