Cara Membuat Menu animasi

Masih di Variasi Blogger share Cara Membuat Menu animasi cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://variasiblogger.blogspot.com/'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Silahkan sobat edit kembali kode script di atas sesuai Variasi menu yang sobat inginkan , untuk contoh kode script di atas klik DEMO

More about → Cara Membuat Menu animasi

Cara cepat membuat navbar keren di blog

Masih di Variasi Blogger share Cara cepat membuat navbar keren di blog cekidot

Silahkan sobat Copy Paste script  di bawah ini dan simpan sebelum kode script ]]></b:skin> di blog sobat

#navbar-iframe{opacity:0;-moz-opacity:0;filter:alpha(Opacity=0);background:#000 url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/str4.gif) center repeat;}
#navbar-iframe:hover{opacity:1;-moz-opacity:1;filter:alpha(Opacity=1);}

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan ctrl + F paste script ]]></b:skin> jika sudah ketemu silahkan Copy Paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Jika sobat sudah terdapat kode navbar pada Template Blog sobat saya sarankan hapus dan ganti dengan kode script di atas,Silahkan ganti teks yang berwarna merah di atas dengan gambar animasi pilihan sobat

More about → Cara cepat membuat navbar keren di blog

Cara Membuat pesan bergambar di blog

Masih di Variasi Blogger share Cara Membuat pesan bergambar di blog cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan sebelum kode ]]></b:skin> di blog sobat

    /* to top */
    #toTop {
    width:100px;
    background:none;
    border:0px solid #ccc;
    text-align:center;
    padding:5px;
    position:fixed;
    bottom:10px;
    right:10px;
    cursor:pointer;
    color:#666;
    text-decoration:none;
    }
    </style></head>
    <script language="javascript" type="text/javascript">
    /* toggle() checks to see if the images has already been faded
    or not and sends the appropriate variables to opacity(); */
    function toggle(el,milli) {
    // Get the opacity style parameter from the image
    var currOpacity = document.getElementById(el).style.opacity;
    if(currOpacity != 0) { // if not faded
    fade(el, milli, 100, 0);
    } else { // else the images is already faded
    fade(el, milli, 0, 100);
    }
    }
    /* changeOpacity() uses three different opacity settings to
    achieve a cross-browser opacity changing function. This
    function can also be used to directly change the opacity
    of an element. */
    function changeOpacity(el,opacity) {
    var image = document.getElementById(el);
    // For Mozilla
    image.style.MozOpacity = (opacity / 100);
    // For IE
    image.style.filter = "alpha(opacity=" + opacity + ")";
    // For others
    image.style.opacity = (opacity / 100);
    }
    /* fade() will fade the image in or out based on the starting
    and ending opacity settings. The speed of the fade is
    determined by the variable milli (total time of the fade
    in milliseconds)*/
    function fade(el,milli,start,end) {
    var fadeTime = Math.round(milli/100);
    var i = 0; // Fade Timer
    // Fade in
    if(start < end) {
    for(j = start; j <= end; j++) {
    // define the expression to be called in setTimeout()
    var expr = "changeOpacity('" + el + "'," + j + ")";
    var timeout = i * fadeTime;
    // setTimeout will call 'expr' after 'timeout' milliseconds
    setTimeout(expr,timeout);
    i++;
    }
    }
    // Fade out
    else if(start > end) {
    for(j = start; j >= end; j--) {
    var expr = "changeOpacity('" + el + "'," + j + ")";
    var timeout = i * fadeTime;
    setTimeout(expr,timeout);
    i++;
    }
    }
    }
    </script>
    <div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
    document.getElementById('june').style.display=''">
    <img src="http://img24.imageshack.us/img24/3151/welcomevariasibloggerbl.png"
    style="opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
    </div>
    <div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
    <div id="june" style="display : none;"><body>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan Ctrl + F paste scipt ]]></b:skin> jika sudah ketemu silahkan Copy paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Silahkan sobat ganti script yang berwarna merah diatas dengan gambar pilihan sobat,Saya sarankan Back Up dulu Template sobat soalnya pengalaman saya menggunakan  Cara Membuat pesan bergambar di blog ini terjadi kesalahan pada Template blog saya , tapi setelah saya utak atik script di atas akhirnya berjalan dengan baik namun setelah saya melepas script diatas terdapat widget yang hilang yaitu Navbar tidak ada jadi silahkan baca Cara Back Up Template di Blog

Klik DEMO

More about → Cara Membuat pesan bergambar di blog

cara membuat halaman blog full part 2

Masih di Variasi Blogger share cara membuat halaman blog full part 2 cekidot

Silahkan Copy Paste script  di bawah ini simpan di blog sobat

<script>
<!--
var mylocation="http://www.bing.com"
var winheight=100
var winsize=100
var x=5

function go(){
win2=window.open("","","scrollbars")
if (!document.layers&&!document.all){
win2.location=mylocation
return
}
win2.resizeTo(100,100)
win2.moveTo(0,0)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=mylocation
winheight=100
winsize=100
x=5
return
}
setTimeout("go2()",50)
}
//-->
</script>
<a href="javascript:go()" onmouseover="window.status='open window';return true" onmouseout="window.status=''" >bing.com</a>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : silahkan sobat ganti script yang berwarna merah diatas dengan alamat link blogs sobat dan nama blogs sobat

Untuk contoh silahkan klik DEMO

More about → cara membuat halaman blog full part 2

Gambar Membesar semua saat terkena corsur di postingan

Masih di Variasi Blogger share Gambar Membesar semua saat terkena corsur di postingan cekidot

Silahkan sobat Copy Paste script  di bawah ini di Edit HTML jangan lupa centang pada Expand Template Widget kemudian tekan Ctrl+f kemudian paste kode script ]]></b:skin> jika sudah ditemukan silahkan Copy paste script di bawah ini dan simpan sebelum kode script tadi

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

Simpan dan lihat hasilnya semoga bermanfaat

More about → Gambar Membesar semua saat terkena corsur di postingan

Cara Pasang efect kembang api di blog

Masih di Variasi Blogger share Cara Pasang efect kembang api di blog cekidot

Silahkan Copy Paste script  di bawah ini simpan di blog sobat

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="Cara Pasang efect kembang api di blog" src="https://sites.google.com/site/variasibloggerblogspotcom/widget_variasi_blogger_blogspot_com/widget-kembang-api-variasi-blogger.SWF" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

klik DEMO

More about → Cara Pasang efect kembang api di blog

Cara Mudah Membuat Screensaver di blog

Masih di Variasi Blogger share Cara Mudah Membuat Screensaver di blog cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

<script language='javascript' src='https://sites.google.com/site/brotherrickyxp/home/utk-file-js/variasiblogger.js' type='text/javascript'></script>
    <style type='text/css'>
    div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/black-cat.gif) no-repeat center center fixed black; }
    div#energysaving p span {display:none;visibility:hidden;}
    </style>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : silahkan sobat edit kembali untuk file js di atas ( https://sites.google.com/site/brotherrickyxp/home/utk-file-js/variasiblogger.js ) dan juga untuk file gambar nya ( http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/black-cat.gif ) silahkan sobat ganti dengan gambar pilihan sobat

More about → Cara Mudah Membuat Screensaver di blog