-->

Music

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 ;

  • Login Ke akun Blog Anda
  • Klik Rancangan
  • Pilh Edit HTML
  • Cari Kode a:hover { 
  • Sisipkan Kode Dibawah ini tepat Disamping Kode a:hover   
background-image: url(http://i1206.photobucket.com/albums/bb455/binkbenk/stars.gif);}
  • Klik simpan Lalu lihat hasilnya
Selamat mencoba....

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
<!-- 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>
6.Klik simpan dan lihat hasilnya

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> 

#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>
<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
selamat mencoba...........

Memasang Ikon Didepan Judul Posting

Silahkan ikuti langkah2 berikut ini

  1. Sign in ke blogger dengan id sobat

  2. Klik menu Edit HTML

  3. Klik tulisan Download Full Template
  4. 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>
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






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

  • 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

css