Music
Kamis, 21 Juni 2012
Sabtu, 10 Maret 2012
Membuat Link mengeluarkan Bintang Saat di Mouse
a:hover {background-image: url(http://i1206.photobucket.com/albums/bb455/binkbenk/stars.gif);}
Langkah - Langkahnya sebagai berikut ;
Langkah - Langkahnya sebagai berikut ;
- Login Ke akun Blog Anda
- Klik Rancangan
- Pilh Edit HTML
- Cari Kode a:hover {
- Sisipkan Kode Dibawah ini tepat Disamping Kode a:hover {
- Klik simpan Lalu lihat hasilnya
Cara Membuat Browser Blog Bergerak Liar
Langkah - langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan pilih Elemen laman
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode dibawah ini kedalam Gadget
6.Klik simpan dan lihat hasilnya
1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan pilih Elemen laman
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode dibawah ini kedalam Gadget
<!-- Script codes by you -->
<script>
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>
Membuat Tombol Home Back To Top Dan Bottom
Dengan tambahan Kode ini , memudahkan pembaca untuk balik keTOP halaman atau sebaliknya..,
Jadi tidak usah Klik mouse /scroll mouse , cukup klik.
Lanngsung aja berikut Langkah-langkahnya ;
1.Masuklah Ke Akun Blog anda
2.Dasbor Pilih Rancangan-->Edit HTML Dan Centang Kolom Expand Template Widget
3.Cari Kode ]]></b:skin> ( gunakan F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode ]]></b:skin>
Jadi tidak usah Klik mouse /scroll mouse , cukup klik.
Lanngsung aja berikut Langkah-langkahnya ;
1.Masuklah Ke Akun Blog anda
2.Dasbor Pilih Rancangan-->Edit HTML Dan Centang Kolom Expand Template Widget
3.Cari Kode ]]></b:skin> ( gunakan F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode ]]></b:skin>
#binkbenk {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#binkbenk a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#binkbenk img
{
border:0;
}
#binkbenk a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya
<a name='ons-ols'></a>
6.Langkah Terakhir Tinggal Memasukan Kode Dibawah Ini Tepat Dibawah Kode <body>
selamat mencoba...........<div id='#binkbenk'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyjFItHpEvLCiaP2HrYr3jqHMgFUPxWTxaVLUoKPgLgidSd5ESf5ee8CcsbcUN5dUFinmU1naYZH1uw4DFTx4-JQPGF8IvH7Z1wUcOCxRtO8RgCb8SY0gYBlruLerP7Wz2p3mqovKt6mE/s104/home.PNG'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ueLZBj6yifJ0VLl6hzykJBlU0Mn90spGkg08taqgtqj_VwD85uiEWX_fX_WY6oqT0dJu4_PSGjHd842Su8oBkC_zYjzKHlRnwBKp6_a1xRjAj1YlN4-_c1mscpWksOkpJmXRy5aJ9AM/s320/pre-icon1.png'/></a></td>
<td><a href='#ons-ols' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1cSpLxAWOXDakV04yDTwSLzD2r_bgas8W6rCwzXCvmjP4HuW5ZLAZ01uIC6Q0YCiNy34WndQ_tYZxg9TrPYMSUg2nSg-dxjYpHX8KDrj6ftmNBp2u4JO1pFuL783d0FsZlt0aPY7xMI/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
6. Klik simpan template
Memasang Ikon Didepan Judul Posting
Silahkan ikuti langkah2 berikut ini
- Sign in ke blogger dengan id sobat
- Klik menu Edit HTML
- Klik tulisan Download Full Template
- Klik kotak kecil di samping kata Expand template widget
Lalu kode seperti ini
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
biar cepat tekan CTRL + F lalu paste kode di atas di kotak tersebut
- Kemudian sisipkan kode di bawah ini di tengah-tengah kode tersebut
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/puma_red.png" width="45" hight="45" border="0"></img>
- Penulisannya nanti jadinya seperti di bawah ini
<a expr:href='data:post.url'>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/puma_red.png" width="45" hight="45" border="0"></img>
<data:post.title/></a>
<b:else/>
Kode yang berwarna merah anda bisa ganti dengan URL gambar anda
Selamat mencoba.....
Membuat Tulisan Berkedip Berputar
Nah ini dia kodenya Sobat Silahkan Copy dan Simpan
<style type="text/css">
.cuerosbhelatostouch {-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.cuerosbhelatostouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: #DF0101;}
</style>
<div class="cuerosbhelatostouch" style="font-family: Verdana,sans-serif; text-align: center;">
TULISAN SOBAT ATAU ARTIKEL DISINI</div>
</div>
.cuerosbhelatostouch {-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.cuerosbhelatostouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: #DF0101;}
</style>
<div class="cuerosbhelatostouch" style="font-family: Verdana,sans-serif; text-align: center;">
TULISAN SOBAT ATAU ARTIKEL DISINI</div>
</div>
Untuk kode yang berwarna biru bisa sobat rubah ;
720 deg = menunjukkan jumlah putarannya
#DF0101 = menunjukkan warna teks saat dicursor
Verdana,sans-serif = menunjukkan font / model tulisan
Scale (2) = menunjukkan efek besar perubahan tulisan
Scale (2) = menunjukkan efek besar perubahan tulisan
Maaf Sobat kayaknya tips ini kurang menarik tapi agak sedikit unik Coba sobat arahkan cursor ke gambar profil facebook saya diatas Muterkan Nah itulah yang akan saya share kali ini Sobat
"Cara membuat Lencana Facebook Berputar dan membesar Pada Blog"
Langsung aja :
Nah ini dia Sobat Langkah-langkahnya




Selamat mencoba
Narasumber; utak-atik sendiri seharian
Langsung aja :
Nah ini dia Sobat Langkah-langkahnya
- Silahkan sobat Login ke Facebook Sobat
- Kemudian Klik Profil seperti gambar dibawah
- Pada halaman profil cari tulisan tambah sebuah lencana pada situs contoh seperti digambar lalu klik
- Sobat juga bisa langsung menuju alamat http://www.facebook.com/badges/profile.php dengan catatan udah login ke facebook Sobat
- Dan anda akan dibawa pada halaman seperti gambar kemudian Pilih Lencana Profil lalu Klik logo Blogger seperti gambar dibawah
- Dan selanjutnya Sobat akan menuju pada halaman seperti gambar dibawah kemudian klik Edit Konten dan akan muncul kode dibawahnya tuh seperti gambar dibawah
- Tunggu dulu sobat Kalau mau muter seperti contoh diatas tambahkan kode dibawah ini tepat diatasnya
<style type="text/css">.edantouch {-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.edantouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>
<div class="edantouch">
- Nah ini yang terakhir sobat kemudian Klik Menambah Widget
Selamat mencoba
Narasumber; utak-atik sendiri seharian
Langganan:
Postingan (Atom)