Subscribe:
Tampilkan postingan dengan label Efek Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Efek Blog. Tampilkan semua postingan

Senin, 26 Desember 2011

Cara Membuat Efek Kembang Api Pada Blog

Assalamualaikum Sobat DC. Kali ini DC akan share tentang Cara Membuat Efek Kembang Api Pada Blog.

Langkah - langkah :
1. login blog
2. rancangan --> edit HMTL
3. lalu cari kode </body>
4. lalu masukkan kode script dibwah ini diatas kode </body>

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>

5. simpan...

Kok belum keluar??????
jangan takut dulu sob... masih ada cara yang lain kok... langsung aja ya..

1. login blog
2. rancangan --> elemen halaman --> tambah gadget --> HTML/JavaScript
3. lalu masukkan kode

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>


4. simpan

Dan selesei deh dan jangan lupa coba lihat hasilnya....

kalo belum keluar berarti kodenya masih di disabled tuh 
jadi sobat bisa pakai yang kode dibawah ini aja (versi flash)

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Simpan.
Good Luck sob.... ^_^ 


source : http://vikrymadz.blogspot.com/2011/12/cara-membuat-widget-timerpenghitung.html
Baca Selengkapnya»»

Senin, 01 Agustus 2011

Cara memberi background pada widget


Background Efek

Cara Membuat Background Efek pada Widget Blog
Widget atau gadget sendiri adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi. [ wikipedia .org ] Jika dalam bahasa sederhana blogger widget adalah pernak pernik dalam blog sebagai penghias blog dan memiliki berbagai fungsi.

Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
  1. Colour Background Style
    Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
    #side-wrapper {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 25px 0px 0px 0px;
    width: 315px;
    background: #ffffff;
    }
    Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
  2. Image Background Style
    Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
    Cara Memberi efek background pada widget blogspot Image Background
 StyleNah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
    .post-footer {
    display: block;
    margin: 15px 0px 25px 0px;
    padding: 7px 20px 7px 20px;
    text-align: left;
    font: $postfooterTextFont;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-lYldjKJa1uG_G9iX6zxF4bKryrc2JpoQRz-ScAK9cj1XT3Uha0A25w8ojV5A8TSz4DDl9_aQ_d_FAZZg3Mm5DXjYqlxELaFIX3KUeZm1FHK31EgYMfA-trcK-BhXtg6ErfWhib00yE/s1600/banner+demomaskolis.jpg");
    background-color:#0092dd;
    background-position:top right;
    background-repeat:no-repeat;
    border: 1px solid $postfooterBorderColor;
    }
    Penjelasannya adalah:
    • Background Image diisi URL gambar.
    • Background Color diisi kode warna yang sesuai dengan gambar.
    • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
    • Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi:background-repeat: repeat-y;Untuk ke samping, gunakan repeat-x menjadi:background-repeat: repeat-x;Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
  3. Hover Image Background Style
    Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }
    Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
    #sidebar .widget {
    margin: 0px;
    padding: 0px;
    }
    Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    #main .widget:hover {
    background:#e3e3e3;
    }

Temen-temen semua bisa memodifikasi sesuai selera, ingat harus disesuaikan dengan template yang dipakai. Selamat mencoba dan semoga bermanfaat.
Baca Selengkapnya»»

Kamis, 14 Juli 2011

Memberi Efek Salju Pada Blog dengan berbagai warna

Teman-teman DC. . . .!! Ne aq punya tips baru. . . . Sebenernya sih nggak baru-baru amat, tapi yang ini tipsnya lebih Advance. . . . Sudah mengalami kemajuan!! Dulu-dulu kan Salju warnanya cuman putih mulu. . . .!!?? Tapi sekarang aquw punya script yang warnanya beda. . . Nih scriptnya!!


>>>>Salju Merah
<script src='http://agungosx.googlepages.com/saljumerah.js' type='text/javascript'></script>





>>>>Salju Kunig
<script src='http://agungosx.googlepages.com/saljukuning.js' type='text/javascript'></script>



>>>>Salju Hijau
<script src='http://agungosx.googlepages.com/greensalju.js' type='text/javascript'></script>



>>>>Salju Hijau Tua
<script src='http://agungosx.googlepages.com/saljuijotua.js' type='text/javascript'></script>



>>>> Salju Pink
<script src='http://agungosx.googlepages.com/pinksalju.js' type='text/javascript'></script>



>>>> Salju Ungu
<script src='http://agungosx.googlepages.com/saljuungu.js' type='text/javascript'></script>



>>>> Salju Biru Muda
<script src='http://agungosx.googlepages.com/saljubirumuda.js' type='text/javascript'></script>



>>>> Salju Biru
<script src='http://agungosx.googlepages.com/saljubiru.js' type='text/javascript'></script>



>>>> Salju Coklat
<script src='http://agungosx.googlepages.com/saljucoklat.js' type='text/javascript'></script>



>>>> Salju Orange
<script src='http://agungosx.googlepages.com/saljuorange.js' type='text/javascript'></script>




>>>> Salju Hitam
<script src='http://agungosx.googlepages.com/saljuhitam.js' type='text/javascript'></script>



>>>> Salju Putih
<script src='http://agungosx.googlepages.com/saljuputih.js' type='text/javascript'></script>


Jangan Lupha, di Kopi n' diPaste di template blog kalian di bagian <head>

Selamat Mencoba
Baca Selengkapnya»»

Rabu, 13 Juli 2011

Cara Membuat Label Cloud Berputar

Buat sobat yang pengen membuat tampilan labelnya seperti gambar disamping.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran ane saranin nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama

  •     Login ke Blogger dengan ID sobat.
  •     Klik Tata Letak
  •     Klik tab Edit HTML
  •     Download dahulu template sobat dengan mengklik Download Template Lengkap
  •     Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>
  •     Copy kode berikut ini setelah kode diatas :
    <b:widget id='Label99' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://vikrymadz.blogspot.com/'>vikrymadz</a></div>
    <script type='text/javascript'>
    var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>


II. Langkah Kedua
* Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud

* Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");

* Merubah ukuran font
so.addVariable("tagcloud", "12'>");


Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :


good luck sob...
Baca Selengkapnya»»

Cara Membuat Efek Neon Light Text (2 warna)

Setelah posting Cara Membuat Efek Neon Light Text (1 warna). jadi sekarang tentang Cara Membuat Efek Neon Light Text (2 warna).

Cara ini adalah cara yang ada dan di pakai di web  Yang INI.
dan hasilnya cukup bagus lah menurut saya.

Sebetulnya saya kira cara ini hanya bisa dijalankan pada website ... eeh ternyata cara ini juga bisa dijalankan pada blog. heheheeh Jadi langsung aja deh saya share ke sobat".



Dibawah ini scriptnya (maaf kali ini saya tidak memberikan demo)



<h4>
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script language="JavaScript1.2">var message="Ini Hanya Sebagai Contoh Efek Neon Light Text (2 warna)"
var neonbasecolor="white"
var neontextcolor="red"
var neontextcolor2="blue"
var flashspeed=120    // speed of flashing in milliseconds
var flashingletters=5    // number of letters flashing in neontextcolor
var flashingletters2=3    // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0    // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()</script>
</h4>

Catatan :
Pada 
<script language="JavaScript1.2">var message="Ini Hanya Sebagai Contoh Efek Neon Light Text (2 warna)"
"Ini Hanya Sebagai Contoh Efek Neon Light Text (2 warna)" = adalah text yang akan muncul.
var neonbasecolor="white"
white = warna Background 
var neontextcolor="red"
red = warna text1(depan)
var neontextcolor2="blue"
blue = warna text2(belakang)
var flashspeed=120 // speed of flashing in milliseconds
120 = kecepatan warna text berjalan
var flashingletters=5 // number of letters flashing in neontextcolor
5 = banyak text yang akan tampil

Selamat mencoba ^_^
Baca Selengkapnya»»

Cara Membuat Efek Neon Light Text (1 warna)

Seperti pada web saya yang INI.

pada text yang seakan" berjalan dan dengan warna yang berbeda itu lah yang bisa disebut dengan neon text efek. Tapi pada postingan kali ini saya akan share yang hanya satu warna.

Cara Membuat Efek Neon Light Text (1 warna) ini sebetulnya juga mudah kok karena tidak ada CSS yang di otak atik, melainkan kita hanya membutuhkan script untuk memberikan efek neon light pada text tersebut.

dibawah ini saya kasih contoh Neon Text Light yang satu warna

bagaimana sobat tertarik??? ok klo sobat ada yang tertarik, sobat bisa mengcopy scriptnya di bawah ini.
<h4> <script language="JavaScript1.2">  var message="Ini Hanya Sebagai Contoh Efek Neon Light Text (1 warna)" var neonbasecolor="white" var neontextcolor="red" var flashspeed=100 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } elsedocument.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++)//eval("document.all.neonlight"+m).style.color=neonbasecolorcrossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) }beginneon() </script> </h4>
NB : var message="Ini Hanya Sebagai Contoh Efek Neon Light Text (1 warna)" var neonbasecolor="white"var neontextcolor="red" var flashspeed=100 //in milliseconds Ini Hanya Sebagai Contoh Efek Neon Light Text (1 warna) = adalah text yang akan muncul white = warna background red = warna yang akan berjalan alias yang primer 100 = kecepatan text warna Gimana mudah kan??? ok deh klo dah gitu selamat berefek" sob.... hehehehehe klo mau Efek Neon Light Text (2 warna) sobat bisa buka di artikel saya yangcara membuat efek neon light text 2(warna)
>>> BISA DIPASANG PADA POSTINGAN ATAU PADA GADGET <<<
Baca Selengkapnya»»

Cara Membuat Efek-efek Cursor pada Blog

Cara Membuat Efek-efek Cursor pada Blog. Yups setelah sekian lama gak posting akhirnya kali ini saya bisa share ke sobat-sobat mengenai Cara Membuat Efek-efek Cursor pada Blog.
Cara ini mungkin sebelumnya sudah di share oleh sobat blogger yang lainnnya. Dan disini saya hanya ingin share saja kepada sobat-sobat
DC


ok langsung aja pada langkah-langkah Cara Membuat Efek-efek Cursor pada Blog.

Sebelumnya coba sobat arahkan cursor sobat pada text-text dibawah ini :




Hand

Crosshair

Text

wait

Move

Help


gimana ??? sobat pengen tahu cara membuatnya kan??? ok deh cara membuatnya cukup dengan kode berikut :

<span style="cursor :hand">Ketik Kalimat Sobat Disini</span>

NB : 

  • ganti hand dengan kode diatas tadi (Crosshair,Text,wait,Move,Help)
  • lalu ganti  Ketik Kalimat Sobat Disini dengan tulisan sobat
Baca Selengkapnya»»

Selasa, 12 Juli 2011

Cara Membuat Efek Sesuatu Berjatuhan diblog

Cara Membuat Efek Sesuatu Berjatuhan di Blog. yups kali ini saya akan share mengenai Cara Membuat Efek Sesuatu Berjatuhan di Blog. Cara ini sebenernya adalah request dari sobat saya kemarin lusa lewat facebook... hehehe sori ya kalo postingnya baru sekarang... hihihihi

yups seperti halnya efek daun berguguran dan efek turun salju pada blog.

Tapi kali ini adalah Cara Membuatnya dengan kreasi sobat sendiri, misalnya pada efek daun berguguran, sobat bisa ganti gambarnya dengan gambar sobat sendiri misalnya bintang, love, kupu-kupu dll. Yang pasti terserah sobat deh.... hehehehe

ok deh tapi sebelumnya sobat harus punya file hosting untuk mengupload script sobat itu tadi...  kalo belum punya file hosting untuk mengupload scriptnya sobat bisa buka artikel pada cara membuat google site.

Nah setelah sobat sudah punya file hosting lalu langkah selanjutnya adalah scriptnya...

download scriptnya DISINI

Lalu buka file .js nya dengan cara klik kanan open with Notepad.

setelah terbuka notepadnya lalu cari tulisan "GANTI DENGAN URL GAMBAR SOBAT DISINI"
dan ganti tulisan tersebut dengan alamat gambar sobat.

lalu upload pada file hosting sobat.
Lalu login blog -> rancangan -> edit HTML -> cari kode]]></b:skin>

Letakkan kode dibawah ini dibawah kode ]]></b:skin>

<script src='GANTI DENGAN ALAMAT  SCRIPT SOBAT' type='text/javascript'/>
ganti tulisan GANTI DENGAN ALAMAT  SCRIPT SOBAT  dengan alamat script sobat.

Good Luck ^_^ jika ada masalah komentar ya.....
Baca Selengkapnya»»

Cara Memberi Efek Turun Salju Pada Blog

langsung aja ya sob.... ni ane punya tips Cara Memberi Efek Turun Salju Pada Blog...

sebenernya tips ini cukup gampang kok.. karena kita hanya tinggal memasukkan JS alias Script ke halaman XML kita....

ok langsung aja deh ke langkah-langkahnya....



1. Login Blogger
2. Klik rancangan --> edit HTML --> centang pada Expand Template Widget
3. Cari kode <head>
4. Lalu masukkan kode dibawa ini ke atas kode <head>
<script src='https://sites.google.com/site/dinarcoolblogspotcom/dinarcool-blogspot-com/dinar-snow.js' type='text/javascript'/>
atau

<script src='https://sites.google.com/site/dinarcoolblogspotcom/dinarcool-blogspot-com/dinar-snow2.js' type='text/javascript'/> 

5. Simpan Templates

contohnya bisa dilihat disini...

good luck.........
Baca Selengkapnya»»

Cara Membuat Efek Daun Berguguran pada Blog

 Karena cara ini tidak jauh berbeda dengan "cara membuat efek bintang berjatuhan"

ok langsung saja ya.... untuk kali ini kita gak usah basa-basi dulu.... hehehehehehe


cara ini juga sama kok yaitu :



1. login Blog
2. Rancangan --> Elemen Halaman --> tambah gadget --> HTML/javascript


langsung deh copy kode dibawah ini dan paste pada kotak HTML/javascript.


<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daungugur.js' type='text/javascript'/>


3. simpan deh... dan lihat hasilnya.....


Tapi bila cara ini belum berhasil, ane punya tips berikutnya yaitu :


1. login blog
2. Rancangan --> Edit HTML --> cari kode ]]></b:skin>
lalu copy kode dibawah ini dan taruh dibawah kode ]]></b:skin>

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daungugur.js' type='text/javascript'/>

3. simpan template

Good Luck......
Baca Selengkapnya»»

Cara Membuat Icon Twitter "Flying Bird" Pada Blog

Pagi ini, saya mau share tutorial Cara Membuat Icon Twitter "Flying Bird" pada blog.
Artikel ini mungkin sebelumnya sudah pernah di postingankan oleh beberapa sobat blogger, tapi disini saya hanya ingin share saja kepada sobat-sobat.

Langsung aja deh ya sob ... kita mulai tutorialnya :
1. Login ke Blogger dulu
2. pilih Rancangan --> Elemen Laman --> Tambah gadget --> Pilih HTML/JavaScript

lalu copy script dibawah ini...
<script type="text/javascript" src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21mOw9PrYCUQpU0X12mch0-Dx-LEb0e9zmQYQzyLUbzWOdqnGUzAYaMKaGTv7qDrESEA7jjsk1O6rffeYdYlg1euiwf6Wqk6Wb8pqPpi762Eb_78pps6TchDMeaPtKtzLcivfX2MoATs/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/TwitterKamu";var tweetThisText = "Twitter - TwitterKamu http:/dinarcool.blogspot.com/";tripleflapInit();</script>


lalu jika sobat" pengen merubah warna burung nya sobat bisa ganti padahttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21mOw9PrYCUQpU0X12mch0-Dx-LEb0e9zmQYQzyLUbzWOdqnGUzAYaMKaGTv7qDrESEA7jjsk1O6rffeYdYlg1euiwf6Wqk6Wb8pqPpi762Eb_78pps6TchDMeaPtKtzLcivfX2MoATs/

dengan code" warna lain dibawah ini...
Yellow : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTv3exykBIDFmFXek6UzxGEo8oussYQ9sZeL3AONkdInMQzPDNParNNRFfM2Vt1HFr86gSJNHU2o-9ijMyykGQRXvuq1QC2L-83ZTqi4opdNOtIge0V8YygrbUV78ksj1BdNserXsV_RE/

White : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwhgOYwrSJ2rSPHeTEse8XHeM7fzu-uwppN0_Q8-tX6n2na8ZReZ9UnVw3F2dUzqTUgMSB2fYOr-vYNuDvdm4VHqOyMrBCJ_XSZAZKUM6sB-7gb2Mqw3APORJNAqagHemdqnyX6BN2sI/
 Red : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFUY1Wy6W5oxqFzrKT3TMGuoIPKcXgaiERJzuq1PfXWFUJgSCykZgvyeGOVfmVhxhMnwlWg1TDZKGqOrsOWwkBi1ELCXUqpFlFW1r-TMwbdz9emVzRXUDwRxLpdVziRWM7PnXVG7P_yPU/

Purple : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4F9zMRQfNJ9A3l1Y6bxifCNTRu1vUyJhjt9ckcggemYwDsISW4EievDV-f7719Z3xFOEEtCSVKCQU7BvlG7BmE2aFhh3zwcTv1vECRlWAyeVbzNlKeDma4Br8kD3vRUuNL3ZyKLVTBRs/

Green : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOODHsztg3loJGhuOIYqLWlWpT80ay5PwNe5F3-Yr53VyJz1fJ7TQySqfADOI_x5WSeLu4VoPYB2WCFaw5uNuH9B3rs-Us6-JMrb_QINiNMzhzZUxOyL1LcIZ2cJSLNY5Q6OSSHV1pfZs/

Brown : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UaYNBDDta1xn8pBV0w5sxtGOzWtLrKqFPDEoE5-Ys25Q2r0DnZroFr5Q1W6h71uGAp7U7PO7U3IVgtySCgd7U_0a4y5v7X28LXX690FlFlsY5cqTI6AqtBccK1hVnL_Kiv4q4k5oRBs/

Blue : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFrG5Jg1934edXU9OWdgZA_eQNfWrq1cZoFHgQZDkRBljmdgi7aVzy3C6YwfFvkocyTv6cwMqFBV1pIONg9xJAJWpkRpVILxPtwd4Vmazdjg47JHc2y9oy9ML6fF-0CP18DXbYKkdO2w/

Black : 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYFGKzEBmY1BlBmDDaJz37iafFH_hBe4CnbuMUEdBWGH2VGWnqF5DajpOu8UTL_APkC3EbDQNTaVtHUCzhlDZZmUvZHqQdWu9n5i8fR0jIZiGmhatVPpGBaJS1q-rsKYcltKoyp5QLE8/

Lalu rubah http://twitter.com/TwitterKamu misalnya jadi http://twitter.com/CackieCukrix

Dan jangan lupa juga rubah pada http://dinarcool.blogspot.com/ dengan alamat blog sobat.

lalu setelah selesei jangan lupa Simpan Template

good luck ^_^
Baca Selengkapnya»»

Cara Membuat Efek Taburan Love Di blog

hehehe mungkin sobat pada ketawa nih ma judulnya ... Cara Membuat Efek Taburan Love Di blog. yups tu mang tips blogging tentang efek" pada blog yang akan saya share sekarang.

Efek ini tidak berbeda dengan efek daun berguguran dan efek turun salju. karena saya hanya merubah imagenya saja dengan cara seperti pada artikel saya yang cara membuat efek sesuatu berjatuhan diblog.

Hahahaha.. efek ini mungkin berguna bagi sobat" yang pengen buat blog/web yang romantis hehehehe

tp klo saya sih.... malu ah.... hehehehe tp disini saya hanya share saja, jadi klo berguna alhamdulillah tp klo nggk juga gak apa".. hehehehe ^_^

Langkah-langkah Cara Membuat Efek Taburan Love Di blog
1. login blog
2. klik rancangan - edit HTML - cari kode ]]></b:skin>
3. taruh kode dibawah ini tepat dibawah kode ]]></b:skin>
<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/taburanlove.js?attredirects=0&d=1' type='text/javascript'/>

gimana??? mudah kan.... ok deh selamat mencoba ^_^
Baca Selengkapnya»»

Rabu, 06 Juli 2011

Jam dan Tanggal Mengikuti Mouse

Salam Sejahtera :Halo para sobat blogger DC sore ini akan memposting yang berjudul "Jam dan Tanggal Mengikuti Mouse"seperti yang ada di blog kang fatur ini, Jam danTanggal ini pernah dipinta oleh sobat blogger yaitu "Irfan" demi sobat dan demi kemaslahatan para blogger akhirnya kang fatur pada sore ini meluangkan waktu untuk memposting. Sebelumnya Kang Fatur mohon maaf khususnya sama "Irfan" karena Kang Fatur baru sempat memposting ini. Memiliki sebuah Jam dengan sapuan detik dan Tanggal memutar disekitar dekat kursor mouse sobat dan selalu mengikuti kemana kursor pergi pasti para sobat senang bukan??? dan pemandangan halaman blog kitapun menjadi indah hehe. Bila sobat semua pingin tahu seperti apa? klik disini.

Para sobat juga bisa menyesuaikan Font dan Warna pada Kursor Jam dantanggal ini sesuai selera atau warna blog para sobat tinggal atur aja O.K.
Baik para sobat kang fatur gak mao panjang lebar lagi, karena waktu semakin sore kita langsung aja meranjak ke tahap pemasangan O.K.
Seperti biasa :
Masuk account blogger anda, dasbor, pilih tata letak, pilih edit html, jangan lupa centang "EXPAND TEMPLATE WIDGET" kalau takut salah, ada baiknya sobat untuk mengklik tombol "download tempalte lengkap" buat berjaga-jaga siapa tahu ada yang salah O.K?

Langkah pertama cari kode ]]></b:skin> setelah ketemu paste kode dibawah ini diatas kode tersebut :


<style type="text/css">
<!--
/*Do not Alter these. Set for alignment*/
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
//-->
</style>


Langkah Kedua : cari kode seperti ini </head> dan paste kode Script dibawah ini diatas kode yang berwarna merah tersebut

<script language="JavaScript">
<!-- Mouse Follow Clock from Rainbow Arch -->
<!-- This script and many more from : -->
<!-- http://rainbow.arch.scriptmania.com -->

<!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com
//Hide from older browsers
if (document.getElementById&&!document.layers){

// *** Clock colours
dCol='#00ff00'; //date colour.
fCol='#ffffff'; //face colour.
sCol='#ffffff'; //seconds colour.
mCol='#00ff00'; //minutes colour.
hCol='#00ff00'; //hours colour.

// *** Controls
del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

// Alter nothing below! Alignments will be lost!
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;
}

function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Clock On";
}
else{
vis=true;
document.getElementById("control").value="Clock Off";
Delay();
}
kill();
}

function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
if (!vis)clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>


Setelah selesai jangan lupa simpan template sobat,

Langkah terakhir yaitu pergi ke Elemen Laman lalu klik Tambah Gadget HTML/JavaScript Tambah lalu paste Script dibawah ini, scrip ini yaitu berfungsi sebagai ON/OF kursor Jam dan Tanggal kita, setelah selesai simpan Lihat Blog.

<script type="text/javascript">
<!-- Mouse Clock Button
//Hide from older browsers
if (document.getElementById&&!document.layers){
document.write('<input type="button" id="control" value="Clock Off" onClick="this.blur();onoff()">');
}
//-->
</script>


Bila semua cara tersebut tidak berhasil, ya karena DC juga sering mengalami hal tersebut mungkin karena template sobat tidak memberikan ijin alias tidak cocok dengan Template sobat, untuk itu coba para sobat lakukan langkah berikut:

Pada halaman tata letak Eleman Laman klik Tambah Gadget HTML/JavaScript kemudian paste Kode Script di bawah ini lalu simpan :

<style type="text/css">
<!--
/*Do not Alter these. Set for alignment*/
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
//-->
</style>




<script language="JavaScript">
<!-- Mouse Follow Clock from Rainbow Arch -->
<!-- This script and many more from : -->
<!-- http://rainbow.arch.scriptmania.com -->

<!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com
//Hide from older browsers
if (document.getElementById&&!document.layers){

// *** Clock colours
dCol='#00ff00'; //date colour.
fCol='#ffffff'; //face colour.
sCol='#ffffff'; //seconds colour.
mCol='#00ff00'; //minutes colour.
hCol='#00ff00'; //hours colour.

// *** Controls
del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

// Alter nothing below! Alignments will be lost!
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;
}

function onoff(){
if (vis){
vis=false;
document.getElementById("control").value="Clock On";
}
else{
vis=true;
document.getElementById("control").value="Clock Off";
Delay();
}
kill();
}

function kill(){
if (vis)
document.onmousemove=mouse;
else
document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
if (!vis)clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>


Selamat mencoba, dan semoga bermanfaat??

Baca Selengkapnya»»