cara membuat tombol demo diblog

Cara Mambuat Tombol Demo Button

yang di maksud Cara membuat tombol demo button di sini adalah mambuat sebuah link yang bertiliskan Demo yang nantinya jika di klik maka kita akan di bawa ke alamat link tersebut. .Yang mana manfaatnya adalah untuk memperlihatkan hasil atau contoh kepada pengunjung dari  postingan yang kita poskan ,agar lebih jelas serta memperkuat kebenaran suatu postingan itu sendiri.
Soalnya terkadang untuk para bloger pemula yang masih suka newby /pengunjung merasa bingung ketika mau mencoba atau menerapkan suatu  postingan tips di blognya karena belum tahu dimana letaknya dan seperti apa nanti jadinya .

Sebenarya Cara Mambuat Tombol Demo Button / tombol demo buton link ini tidak lah sesulit yang di bayangkan ,kita hanya perlu memasukan code <button>dengan diakhiri code</button> setelah code Url link yang akan di tuju .

-----------------------------------------------------
contoh :
Url link tujuannya : http://chiborty.blogspot.com
-----------------------------------------------------
maka pembuatannya seperti ini :
<a href="http://chiborty.blogspot.com/"><button>Demo</button></a>

Tetapi jika ingin Link tujuannya terbuka di tab baru penulisannya seperti di bawah ini :
<a href="http://chiborty.blogspot.com/"target="_blank"><button>Demo</button></a
-------------------------------------------------------
Lihat hasilnya seperti ini :

---------------------------------------------------------------
Nah itulah sekilas tentang cara membuat tombol demo button ,mudah -mudahan bermanfaat ,selamat mencoba ,semoga sukses ,salam bloger 

INGAT;;.....

Read More

cara membuat gambar melayang di blog

Cara Buat Gambar Melayang / Floating Image di Blog

Cara Buat Gambar Melayang / Floating Image di Blog 

Hari ni Puenas nya mianta ampiun , rencananya sih tadi tu mau main kerumah temen , tapi karena terlalu panas jadi males dweh keluar rumah takut kulit jadi item hehhehe [ padahal udah item]…
Di rumah lagi sepi ,Orang rumah lagi pada keluar , jadinya ane sendirian di rumah ,O ya ternyata asik juga loh di rumah sendirian ,bisa lebih tenang tanpa ada yang ngomel- ngomel..
Udah ah sob ceritanya takut orang rumah tau , bisa panjang urusan nya…

Mendingan  langsung aja kita bahas postingan kali ini Tentang  Cara Buat Gambar Melayang / Floating Image di Blog Jika diantara sobat ada yang tertarik dengan judul diatas , silakan sobat bungkus saja judul diatas tadi heheheheh…….
Atau mungkin sobat blog  ingin tahu cara bikinnya Seperti gambar yang ada di bawah postingan ane ini,
ya sekedar untuk mempercantik blog ataupun dengan alas an-alasn lain silakan ikuti tutorial di bawah ini :
__________________________________________________
1. Silakan login ke akun blog sobat
2. di dalam menu drop down pilih yang tata letak
3. lalu pilih add Gadget 
4. selanjutnya pilih HTML / Java Script
5. Jika sudah silakan Copy / Paste Code di bawah :
_______________________________________________
posisi kanan bawah :
<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
---------------------------------------------------------------
posisi kiri bawah :
<a style=”display:scroll;position:fixed;bottom:0;left:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
_____________________________________________
posisi kanan atas
<a style=”display:scroll;position:fixed;top:0;right:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
______________________________________________
posisi kiri atas :
<a style=”display:scroll;position:fixed;top:0;left:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
______________________________________________
Cttn : Teks Yang Warna Merah  silakan sobat ganti dengan Url Gambar sobat
_____________________________________________
Jika ingin gambarnya di buat transparan silakan tambahkan code html  ini
setelah “Url Gambar”style=”opacity:0.1;filter:alpha(opacity=10);”/></a>

Contoh :  aslnya seperti ini
<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”Url Gambar”/></a>

Jadi seperti ini :

<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”Url Gambar”  style=”opacity:0.1;filter:alpha(opacity=10);”/></a>
__________________________________________________
cttn : opacity =ukuran  transparannya bisa 0.1 dan 10 atau 0.2 dan 20
          Silakan sesuaikan mana yang sobat suka

Jka sudah selesai Silakan Simpan / save , Lalu lihat Hasilnya Semoga Bermanfa'at


INGAT;;.....

Read More

cara membuat link bergerak ke atas

Bikin Link Bergerak ke Atas

Bikin Link Bergerak ke Atas 

Pada Postingan kali ini Ane akan Coba share Cara Bikin Link Bergerak Ke Atas di Blog
Biar Ga panjang lebar langsung aja Nyo Kita Ke TKP :

1.silakan login kea kun Blognya masing-masing
2. Pada menu pilihan silakan pilih Tataletak
3. Klik tambah gadget
4. Jika terbuka tab baru silakan pilih yang HTML/JavaScript
5. Lalu copy paste Code di bawah :
________________________________________________________

<marqueealign="center"direction="up" height="200"onmouseout="this.start()"onmouseover="this.stop()" scrollamount="2" width="210">
<a href="URL Tujuan" rel="dofollow">Link1</a><br />
<a href="URL Tujuan" rel="dofollow">Link2</a><br />
<a href="URL Tujuan" rel="dofollow">Link3</a><br />
<a href="URL Tujuan" rel="dofollow">Link4</a><br />
<a href="URL Tujuan" rel="dofollow">Link5</a></marquee>
______________________________________________________
Lihat Contoh :
Link1
Link2
Link3
Link4
Link5
 ______________________________________________________
Cttn : Yang warna Merah  Silakan Masukan Url yang akan di tuju
          Yang Warna Hijau Silakan Ganti Dangan Teks Bebas
          Yang Warna Biru up = bergerak ke atas, Jika sobat mau ganti silakan
                                down =  kebawah

6.jika sudah silakan di Save / terapkan .lihat Hasilnya

Selamat Mencoba Semoga Berhasil 

INGAT;;.....

Read More

cara membuat link bergerak saat di sentuh mouse

Bikin Link Bergerak Saat Di Sentuh Mouse

Bikin Link Bergerak  Saat Di Sentuh Mouse :

Mungkin ada yang tertarik dengan judul di atas ,dan ingin mencobanya ,
tetapi tidak tau caranya ,penasaran dan tetap ingin mencoba ,
[Irit banget , kaya tukang obat di pasar ,simple]
silakan lihat caranya  Di TKP :

1.silaka login ke akun bloger sobat
2. Dalammenu drop down pilih rancangan / Template
3. Lalu klik Edit HTML dan jangan lupa backup template [ untuk berjaga-jaga]
4. Cari kode  </head>
5.Jika udah ketemu Copy paste Code berikut  Diatas Code  </head>
______________________________________________________________________________
<script src=' http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>
______________________________________________________________________________
Cttn : Yang Warna Merah boleh di hapus jika di template sobat sudah ada.

6. Jika sudah selesai save /simpan template dan lihat hasilnya

selamat mencoba semoga bermanfa’at
INGAT;;.....

Read More

cara membuat efect gambar berputar di blog

Bikin Gambar Berputar Sa’at di Sentuh Mouse

Bikin Gambar Berputar Sa’at di Sentuh Mouse :

Setelah kemarin ane posting tentang cara agar gambar membesar sa’at di sentuh mouse / krusor
Nah Dalam kesempatan kali ini Ane akan coba share cara agar gambar di blog kita berputar / sleding img zoom  saat di sentuh mouse / krusor, Biar ga penasaran ,kaya AbG tuir liat mangga muda yang bawaannya pingin nyacipin ,kayanya hehehhe...........Gimana kalau kita langsung saja ,eng - ing - eng......................................Monggo ikutipanduan dibawah ini ,silakan lihat di TKP :

______________________________________________________________________________

1.seperti biasa login ke akun bloger masing-masing.

2.padada menu drop down ,silakan pilih TEMPLATE .

3.backup dulu template ,(sekedar berjaga-jaga)

4.lalu klik  Edit Html ....

5.cari kode ]]></b:skin>  :untuk memudahkan pencarian ,kita gunakan CNTRL + F

6.nah jika sudah ketemu ,silakan Copy Paste Kode di bawah Tepat di atas Kode ]]></b:skin>
_______________________________________________________________________

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
_______________________________________________________________________

7. jika semua sudah silakan simpan template klik save dan lihat hasilnya

Cara diatas udah ane coba
selamat mencoba semoga berhasil

INGAT;;.....

Read More