Cara Membuat Sliding Hover Button

Cara Membuat Sliding Hover Button  – Button atau tombol yang bisa di klik mempunyai banyak kegunaan. Efek sliding (geser) yang ada pada button ini mirip dengan menu Rocking Rolling Rounded dengan jquery yang dulu pernah saya posting. Sobat dapat menggunakan button ini untuk tombol download, subscribe by email atau lainnya, terserah keperluan masing-masing.

Cara Membuat Button dengan Efek Sliding Hover

1. Login ke dashboard blogger Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
4. Backup dulu template anda sebelum melakukan editing.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   
   .a-btn{
   background:#80a9da;
   background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
   background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
   padding-left:20px;
   padding-right:80px;
   height:38px;
   display:inline-block;
   position:relative;
   border:1px solid #5d81ab;
   -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;
   float:left;
   clear:both;
   margin:10px 0px;
   overflow:hidden;
   -webkit-transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
   transition:all 0.3s linear;
   }
   .a-btn-text{
   padding-top:8px;
   display:block;
   font-size:18px;
   white-space:nowrap;
   text-shadow:0px 1px 1px rgba(255,255,255,0.3);
   color:#446388;
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   transition:all 0.2s linear;
   }
   .a-btn-slide-text{
   position:absolute;
   height:100%;
   top:0px;
   right:52px;
   width:0px;
   background:#63707e;
   text-shadow:0px -1px 1px #363f49;
   color:#fff;
   font-size:18px;
   white-space:nowrap;
   text-transform:uppercase;
   text-align:left;
   text-indent:10px;
   overflow:hidden;
   line-height:38px;
   -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -webkit-transition:width 0.3s linear;
   -moz-transition:width 0.3s linear;
   -o-transition:width 0.3s linear;
   transition:width 0.3s linear;
   }
   .a-btn-icon-right{
   position:absolute;
   right:0px;
   top:0px;
   height:100%;
   width:52px;
   border-left:1px solid #5d81ab;
   -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
   }
   .a-btn-icon-right span{
   width:38px;
   height:38px;
   opacity:0.7;
   position:absolute;
   left:50%;
   top:50%;
   margin:-20px 0px 0px -20px;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaHCesgpX4b_9eVpMtJ16bEHzDt2HCxoLA4q86B8eHDoFuX4cHI2v3547PMxQYqn-uPkrYW68lediSCbVFIymfnrWuMjFEVf21tNGwP8gmKefXWcI2zYjM1gh_SSulw3fGK57MKfB_n0/s1600/arrow_right.png) no-repeat 50% 55%;
   -webkit-transition:all 0.3s linear;
   -moz-transition:all 0.3s linear;
   -o-transition:all 0.3s linear;
   transition:all 0.3s linear;
   }
   .a-btn:hover{
   padding-right:180px;
   -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
   }
   .a-btn:hover .a-btn-text{
   text-shadow:0px 1px 1px #5d81ab;
   color:#fff;
   }
   .a-btn:hover .a-btn-slide-text{
   width:100px;
   }
   .a-btn:hover .a-btn-icon-right span{
   opacity:1;
   }
   .a-btn:active{
   position:relative;
   top:1px;
   background:#5d81ab;
   -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
   border-color:#80a9da;
   }
   
   
6. Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya (pilih salah satu saja) :
   
   
   <div class="button-wrapper">
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Register now</span>
   <span class="a-btn-slide-text">It's free!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Become a member</span>
   <span class="a-btn-slide-text">Sign up!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Enter</span>
   <span class="a-btn-slide-text">Log in!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   <a href="Button URL" class="a-btn">
   <span class="a-btn-text">Get an account</span>
   <span class="a-btn-slide-text">For free!</span>
   <span class="a-btn-icon-right"><span></span></span>
   </a>
   </div>

   Keterangan :
   
   Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.
   
   
7. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya didalam area posting tanpa perlu di parse :
   
   

   <div class="button-wrapper">
         <a href="Button URL" class="a-btn">
         <span class="a-btn-text">Register now</span>
         <span class="a-btn-slide-text">It's free!</span>
         <span class="a-btn-icon-right"><span></span></span>
         </a>    
   </div>

   Terakhir save dan lihat hasilnya.

Semoga Cara Membuat Sliding Hover Button ini bermanfaat !

Cara Membuat Teks Pada Kursor

Membuat Teks Pada Kursor – Jumpa lagi sobat blogger !! Sory banget kalau saya lama ngga bikin posting karena lagi banyak kesibukan offline di akhir tahun 2011 kemarin. Mengawali tahun 2012 ini saya mau share tentang membuat teks pada kursor. Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog. Buat yang sudah bosan dengan trik mengganti gambar pada kursor, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.


Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Selamat mencoba Cara Membuat Teks Pada Kursor ini dan Selamat Tahun Baru 2012 buat sahabat blogger semuanya !!

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover  - Widget untuk berbagi artikel ke layanan social bookmark sudah banyak kita jumpai diberbagai situs. Termasuk saya pun sudah beberapa kali menuliskan postingan mengenai social bookmark dan yang terakhir adalah tentang cara membuat floating share button (tombol share melayang) di blog. Nah selain widget social bookmark statis yang biasanya ada di sidebar atau pun widget social bookmark melayang yang biasanya ada di halaman posting, masih ada beberapa style lagi yang bisa kita gunakan. Pada tips blogging kali ini saya ingin berbagi bagaimana cara membuat menu navigasi ke layanan social bookmark dengan efek mouseover. Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu pula, contoh sederhananya seperti pada drop down menu. Hasil dari widget social bookmark dengan tampilan seperti menu navigasi ini dapat anda lihat langsung pada bagian atas header blog saya ini.

Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :

1.       Seperti biasa, login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script widget social bookmark dibawah ini, dan paste pada gadget.

<style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#eeeeee; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .rss a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcP7BQnyO0WtfFAccM2484L5pYMsZoxvdUxB6DNZtEzTH9mYHbzvEIC-VUgPF7a6Jqj7qIxmUeBdaegMWuLSl6oZlH6mLEiL8xsqaH2Ir0XZXZQ04WXh8N2UZnhym0F22kUpuhXMxxNk/s1600/64x64.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh503O2iPhBNYBr8HNSkLl-oee1JVb_i5ZVDST8R39Nxf1T2i2CLcGh9d-ypbqu9cVBrNu0KXD8oXFnmg5upuUtf9QC4X_eXKwcGE2fpKhA3ho29YVGiZkaMpbDFrffTi5AHPoUbxiYAPA/s1600/64x64.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnnqgnwA5jpyg9G528C7ZENAoNaLdcaFF6Vnbprfuu4rSGAEr7hFIk-W4ylXrGms6y_LP420YMHSRVm9zLnsJAtmOdVOzScKh8CQckktvXAvxYzdmoBOXLqQkFiLW0DmoYyCZ1hbd71g/s1600/64x64.png); } ul#navigation .googlebookmarks a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgEw8PZRSPrAnuMkRBreKMPMGYSCL6CWmTY_Ly0__UJKN5bL-egMA-RTDQeK1mBF1u5QCGAsQBnXyf9iJTZ2FL8hbxRKgCeK_V2Xvm7xqF-wvIiBosuMbMbItqzr-Xk_r9xlSIZTiskU/s1600/64x64.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbSdF-tdjfmq3eDQ6m8dhQtRbyXeKYrhg1H1XFLdFs07yms9-Qw5eTkxcP9Ip9U2W-7XIq3TUXkaApHW3vyru2BFM48NLn0p3-nPlpy2-KIav1_f7IkuC1FFMzEUnahjgdqgxy61gF1zn/s400/yahoo_64x64.png); } </style> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> <ul id="navigation"> <li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li> <li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li> <li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li> <li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li> <li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li> </ul>

4.       Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.

5.       Simpan / Save gadget

Widget social bookmark melayang dengan efek mouseoverini sebenarnya dapat juga ditempatkan secara permanen pada template anda. Nah buat sobat blogger yang punya hoby ngutak-ngatik template, cobalah bereksprimen melakukannya. Yang pasti sobat harus menempatkan menu navigasi social bookmark tadi diatas menu blog yang ada pada header. Selamat bereksprimen ya..:D

Cara Membuat Border Image Dengan CSS3 Stylish Effect

Cara Membuat Border Image Stylish Dengan CSS3  -  Supaya gambar atau image pada postingan atau artikel terlihat bagus, kita dapat menambahkan bingkai atau border pada image/gambar tersebut. Pada tips membuat border image dengan menggunakan CSS ini kita sedikit memberikan sentuhan stylish effect dengan opacity sehingga efeknya bingkai gambar/image akan tampak seperti dibuat menggunakan aplikasi Photoshop. Border gambar dengan CSS ini juga dapat sobat gunakan untuk photo profil di sidebar.

Cara membuat border image dengan menggunakan CSS :

1.    Upload dulu gambar yang mau digunakan. Jika gambar yang mau digunakan sudah ada pada postingan, copy link gambar/image tersebut dengan cara klik kanan dan pilih Copy Image Location.

2.    Dari dashboard blogger masuk ke menu Posting > Edit Entri dan pilih Edit HTML disebelah tulisan Compose.

3.    Image yang diupload di blogger/blogspot biasanya kodenya akan terlihat seperti di bawah ini :

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGkuVGkijEneLyQKIqKeCt27Cs_l83bNxJmNC8P9plCIzP38iN2tm1QuUHF29ZM1VcZWsaBPCOLGn1IIcrR02e3SWgQPBx9UpzZE0l6zPS-2aQj0vk7myHcmp25QdG2y4UKl48-HJu8xd/s1600/AVATAR+KU.png" imageanchor="1" style="clear: left;

float: center; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGkuVGkijEneLyQKIqKeCt27Cs_l83bNxJmNC8P9plCIzP38iN2tm1QuUHF29ZM1VcZWsaBPCOLGn1IIcrR02e3SWgQPBx9UpzZE0l6zPS-2aQj0vk7myHcmp25QdG2y4UKl48-HJu8xd/s200/AVATAR+KU.png" width="181"/></a></div>

Dan tampilan gambar aslinya akan terlihat seperti ini pada postingan :

4.    Nah kode membuat border untuk gambar/image diatas adalah seperti dibawah ini :

<div style="width: Apx;height: Bpx;padding: 0px;border-width: 3px;border-style: solid;border-color: #555;background-image:

url(http://LINK-IMAGE-ATAU-GAMBAR); margin: 0 auto;">

<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:

0.5;width: Cpx;height: Dpx;">

</div>

</div>

Keterangan :

·         A dan B adalah lebar dan tinggi gambar aslinya yaitu width=181px dan height=200px.

·         C dan D adalah lebar dan tinggi gambar setelah nanti ditimpa atau dikurangi border. Pada contoh ini kita mengambil pengurangan ukuran sebesar 20px, sehingga C=width=161pxdan D=height=180px.

·         Untuk mengatur penempatan gambar di kiri , tengah atau kanan tinggal tambahkan pada CSS float: left; , float: center;  atau float: right;

5.    Ganti tulisan link warna biru dengan link warna merah, sehingga kode lengkap gambar menjadi :

<div style="width: 181px;height: 200px;padding: 0px; float: center;border-width: 3px;border-style: solid;border-color: #555;background-image:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGkuVGkijEneLyQKIqKeCt27Cs_l83bNxJmNC8P9plCIzP38iN2tm1QuUHF29ZM1VcZWsaBPCOLGn1IIcrR02e3SWgQPBx9UpzZE0l6zPS-2aQj0vk7myHcmp25QdG2y4UKl48-HJu8xd/s200/AVATAR+KU.png); margin: 0 auto;">

<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:

0.5;width: 161px;height: 180px;">

</div>

</div>

6.    Hasil akhir gambar/image yang sudah diberi border dan opacity menjadi seperti dibawah ini :

Bagaimana sobat, setelah image/gambar kita berikan border jadi kelihatan lebih bagus bukan. Tips ini sederhana namun saya berusaha menjelaskan langkah-langkahnya sedetil mungkin supaya juga mudah dipahami buat yang masih newbie :D sekali pun. Semoga trik cara membuat border image/gambar dengan menggunakan CSS ini bisa membantu anda berkreasi membuat gambar-gambar keren di blog sobat.

Cara Membuat Blogroll dengan Efek Marque dan Scroll

Cara Membuat Blogroll dengan Efek Marque dan Scroll  - Memasang blogroll dengan efek marque
ataupun blogroll dengan scroll biasanya karena alasan penghematan tempat,
terutama jika sobat ingin blogroll ditampilkan pada sidebar bukan pada halaman
sendiri seperti Link Sobat yang ada di blog ini. Cara membuat blogroll dengan
efek marque dan scroll ini pun sangat mudah, saya akan jelaskan satu persatu
biar sobat lebih jelas lagi dan bisa mempraktekkan cara membuatnya.

Cara Membuat Kotak
Blogroll dengan Efek Marque :

1.   
Login ke dashboard blogger anda.

2.   
Pilih Rancangan > Elemen Halaman > Add
gadget (HTML/JavaScript).

3.   
Copy script di bawah ini dan paste pada gadget.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="200">

::<a href="http://rayhanzhampiet.blogspot.com/">Share with Irfan</a>::<p>

::<a href="http://rayhanzhampiet.blogspot.com/"><blink>Tips Blogging</blink></a>::<p>

::<a href="http://rayhanzhampiet.blogspot.com/"><i>Info Blogging</i></a>::<p>
Link....<p>

Link....<p>

Dst....<p>

</marquee>

4.   
Hasilnya akan terlihat seperti ini :

::Share with Irfan::

::Tips Blogging::

::Info Blogging::

Link....

Link....

Dst....

5.   
Edit linknya sesuai dengan link blogroll sobat
kemudian Simpan (Save).

Cara Membuat Kotak
Blogroll dengan Efek Scroll (Unorderlist) :

1.   
Login ke dashboard blogger anda.

2.   
Pilih Rancangan > Elemen Halaman > Add
gadget (HTML/JavaScript).

3.   
Copy script di bawah ini dan paste pada gadget.

<div style=”border:1px solid #006600;overflow:auto;width:180px;height:100px;”>

<ul>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Share With Irfan</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Tips Blogging</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Artikel Komputer</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><blink>Share With Irfan</blink></a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><i>Tips Blogging<i></a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><b>Artikel Komputer</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Link Sobat</a></li>

</ul>

4.   
Hasilnya akan terlihat seperti ini :

• Share With Irfan


• Tips Blogging


• Artikel Komputer


• Share With Irfan


• Tips Blogging


• Artikel Komputer


• Link Sobat

5.   
Edit linknya sesuai dengan link blogroll sobat
kemudian Simpan (Save).

Nah dari 2 kotak blogroll diatas tinggal pilih aja
sobat mau pakai blogroll dengan marque atau blogroll dengan scroll (unorderlist). Menurut saya sih dua-duanya sama bagusnya jadi pasang aja 2
macam blogroll sekaligus biar tambah rame he he. Untuk lebar dan tinggi kotak
blogroll silahkan disesuaikan dengan sidebar yang ada di blog sobat.

Cara Membuat/Pasang Efek Hujan Salju di Blog Anda

Cara Membuat Efek Hujan Salju di Blog Anda  - Efek
hujan salju yang saya posting ini sangat bagus ditampilkan jika blog sobat
mempunyai background/latar belakang berwarna gelap atau hitam. Karena kalo efek hujan salju ini dipasang di blog
yang background pada bagian posting warna terang atau putih seperti blog saya
ini, maka pemasangan efek hujan saljunya jadi sia-sia karena tidak akan
terlihat. Apalagi kalo hujan saljunya kecil-kecil kayak hujan gerimis gitu wah
tambah ngga keliatan jadinya. Kalau efek hujan daun  berjatuhan yang saya posting sebelum ini karena daunnya berwarna hijau malah lebih terlihat jika backgroundnya putih. Langsung aja nih sobat ikuti langkah pembuatannya
disini ya.

Cara membuat/memasang
efek hujan salju di blog :

1.   
Login ke dashboard blogger anda.

2.   
Pilih Rancangan > Elemen Halaman > Add
gadget (HTML/JavaScript).

3.   
Letakkan script efek hujan salju dibawah ini
pada gadget.

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

4.   
Simpan dan lihat hasilnya.

Nah hujan saljunya sudah terlihat turun kan he he..,
kapan ya kita bisa merasakan musim dingin beneran kayak di Amrik sono ? OK
sobat sekian dulu aja tips/trik cara membuat/pasang efek hujan salju pada blog
ini. Semoga bermanfaat dan salam blogger.

Cara Membuat Efek Daun Berjatuhan Di Blog

Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.       Seperti biasa login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head> pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

NB : 16 Nov 2011

Kalau di blog sobat sudah menggunakan efek bintang pada kursor, video slide, pemutar music mp3 online atau penggunaan script animasi yang lainnya, sebaiknya jangan tambahkan lagi dengan efek daun berjatuhan ini. Karena akan memberatkan loading blog sobat alias jadi lemot. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript. Trims.

Cara Membuat Efek Bintang (Sprinkle) Pada Kursor

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di
blog lain dengan efek bintang yang bertaburan (sprinkle) dan
berwarna-warni bukan ? Memang efek bintang
bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat,
namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog
akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo
memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursor
cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.      
Login ke dashboard blogger sobat.

2.      
Pilih Rancangan > Elemen Halaman > Add
Gadget (HTML/JavaScript).

3.      
Copy dan paste script dibawah ini pada gadget
baru tadi.

<script><br /> // JavaScript Document<script type='text/javascript'><br /> // <![CDATA[<br /> var colour="red";<br /> var sparkles=65;<br /> <br /> var x=ox=400;<br /> var y=oy=300;<br /> var swide=800;<br /> var shigh=600;<br /> var sleft=sdown=0;<br /> var tiny=new Array();<br /> var star=new Array();<br /> var starv=new Array();<br /> var starx=new Array();<br /> var stary=new Array();<br /> var tinyx=new Array();<br /> var tinyy=new Array();<br /> var tinyv=new Array();<br /> window.onload=function() { if (document.getElementById) {<br /> var i, rats, rlef, rdow;<br /> for (var i=0; i<sparkles; i++) {<br /> var rats=createDiv(3, 3);<br /> rats.style.visibility="hidden";<br /> document.body.appendChild(tiny[i]=rats);<br /> starv[i]=0;<br /> tinyv[i]=0;<br /> var rats=createDiv(5, 5);<br /> rats.style.backgroundColor="transparent";<br /> rats.style.visibility="hidden";<br /> var rlef=createDiv(1, 5);<br /> var rdow=createDiv(5, 1);<br /> rats.appendChild(rlef);<br /> rats.appendChild(rdow);<br /> rlef.style.top="2px";<br /> rlef.style.left="0px";<br /> rdow.style.top="0px";<br /> rdow.style.left="2px";<br /> document.body.appendChild(star[i]=rats);<br /> }<br /> set_width();<br /> sparkle();<br /> }}<br /> function sparkle() {<br /> var c;<br /> if (x!=ox || y!=oy) {<br /> ox=x;<br /> oy=y;<br /> for (c=0; c<sparkles; c++) if (!starv[c]) {<br /> star[c].style.left=(starx[c]=x)+"px";<br /> star[c].style.top=(stary[c]=y)+"px";<br /> star[c].style.clip="rect(0px, 5px, 5px, 0px)";<br /> star[c].style.visibility="visible";<br /> starv[c]=50;<br /> break;<br /> }<br /> }<br /> for (c=0; c<sparkles; c++) {<br /> if (starv[c]) update_star(c);<br /> if (tinyv[c]) update_tiny(c);<br /> }<br /> setTimeout("sparkle()", 40);<br /> }<br /> function update_star(i) {<br /> if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";<br /> if (starv[i]) {<br /> stary[i]+=1+Math.random()*3;<br /> if (stary[i]<shigh+sdown) {<br /> star[i].style.top=stary[i]+"px";<br /> starx[i]+=(i%5-2)/5;<br /> star[i].style.left=starx[i]+"px";<br /> }<br /> else {<br /> star[i].style.visibility="hidden";<br /> starv[i]=0;<br /> return;<br /> }<br /> }<br /> else {<br /> tinyv[i]=50;<br /> tiny[i].style.top=(tinyy[i]=stary[i])+"px";<br /> tiny[i].style.left=(tinyx[i]=starx[i])+"px";<br /> tiny[i].style.width="2px";<br /> tiny[i].style.height="2px";<br /> star[i].style.visibility="hidden";<br /> tiny[i].style.visibility="visible"<br /> }<br /> }<br /> function update_tiny(i) {<br /> if (--tinyv[i]==25) {<br /> tiny[i].style.width="1px";<br /> tiny[i].style.height="1px";<br /> }<br /> if (tinyv[i]) {<br /> tinyy[i]+=1+Math.random()*3;<br /> if (tinyy[i]<shigh+sdown) {<br /> tiny[i].style.top=tinyy[i]+"px";<br /> tinyx[i]+=(i%5-2)/5;<br /> tiny[i].style.left=tinyx[i]+"px";<br /> }<br /> else {<br /> tiny[i].style.visibility="hidden";<br /> tinyv[i]=0;<br /> return;<br /> }<br /> }<br /> else tiny[i].style.visibility="hidden";<br /> }<br /> document.onmousemove=mouse;<br /> function mouse(e) {<br /> set_scroll();<br /> y=(e)?e.pageY:event.y+sdown;<br /> x=(e)?e.pageX:event.x+sleft;<br /> }<br /> function set_scroll() {<br /> if (typeof(self.pageYOffset)=="number") {<br /> sdown=self.pageYOffset;<br /> sleft=self.pageXOffset;<br /> }<br /> else if (document.body.scrollTop || document.body.scrollLeft) {<br /> sdown=document.body.scrollTop;<br /> sleft=document.body.scrollLeft;<br /> }<br /> else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br /> sleft=document.documentElement.scrollLeft;<br /> sdown=document.documentElement.scrollTop;<br /> }<br /> else {<br /> sdown=0;<br /> sleft=0;<br /> }<br /> }<br /> window.onresize=set_width;<br /> function set_width() {<br /> if (typeof(self.innerWidth)=="number") {<br /> swide=self.innerWidth;<br /> shigh=self.innerHeight;<br /> }<br /> else if (document.documentElement && document.documentElement.clientWidth) {<br /> swide=document.documentElement.clientWidth;<br /> shigh=document.documentElement.clientHeight;<br /> }<br /> else if (document.body.clientWidth) {<br /> swide=document.body.clientWidth;<br /> shigh=document.body.clientHeight;<br /> }<br /> }<br /> function createDiv(height, width) {<br /> var div=document.createElement("div");<br /> div.style.position="absolute";<br /> div.style.height=height+"px";<br /> div.style.width=width+"px";<br /> div.style.overflow="hidden";<br /> div.style.backgroundColor=colour;<br /> return (div);<br /> }<br /> // ]]><br /> </script><br />

4.      
Simpan dan lihat hasilnya.

NB : Silahkan ganti warna “red”
dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat
jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja
yang sabar ya. Selamat mencoba sobat.