ul#navigation { position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:820px; font:normal 11px Arial,Sans-Serif; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:103px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-78px; width:100px; height:22px; background-color:#9E242C; background-repeat:no-repeat; background-position:50% 150px; border:3px solid #303030; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -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; border-radius:0px 0px 10px 10px; color:#ccc; text-decoration:none; text-align:center; text-shadow:0 1px 1px #000; padding-top:85px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 10px; color:#fff; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:-10px; border-width:5px; border-style:solid; border-color:transparent transparent #e6e6e6 transparent; } ul#navigation li:nth-child(1) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerSfJNwvCuRpFJnwrhl6z-lnTzUFj5kaUUpkc3Jk_A3h7ITTwdaVTpTQyo90jIlS89SN6bH3AZcKmXAtLuDjDXxsdoDuc4QzwX6hk0l0yIIgjWZ6TDA4DiwFwLusp6qurNDPCd-cbzP8/s1600/home.png); } ul#navigation li:nth-child(2) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYnP99Z-qnM_6WgGPwVlVGswvvLjtkeuI9BcsSz2bEo2Yskv-O6fZvvMOb-ZApO5jxrIQylDkY7OGjbijN93wHp391GS8ZOiHCpmRJuViEUfrdU8Srduy5aeBt_QcC3wQYP0OxXxNxhL4/s1600/user.png); } ul#navigation li:nth-child(3) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipkZyiNweuvBKC3KqCuT2E6-IrzSPTtzLcWzKL8UUabpnnXHedq3Z6c3uxBc-73p9FHdFk19bEfYBBtigzpCqTFsDZWGNwELPb70HJ6HjX3r6fR1AsS-oiezJ6IBPFkCT4e9v2PDfx3Cs/s1600/mail.png); } ul#navigation li:nth-child(4) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMOVHKq_hdTFuKnlGMIaPYEjMTlOrrSMnVUMizSWKVH13CWrlRbq4uTCpT_wv-14joV0GjFQLSvbm0tqUtfKy7AA4kE4mezN8YT9x02fNldydJaklJOM2SOlh3LSLDCcI0y4pCJa9suM/s1600/rss.png); } ul#navigation li:nth-child(5) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiPU4Vr3wrnGzZSjc4IKSk8dxTJHdOBu1R1xHbIR05ll0ivFjDkrlsdUzYWEkXmobeH0Ji9ygtTiogZKGE1ZTrvFyHyiJA7Ul2xNnLbQozu3z6LytbFQWOjDqKvQ08v9cyjJ-6gorQAuw/s1600/link.png); } ul#navigation li:nth-child(6) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9yq5am6I_JzTuXL-ZSrm6kFxAwQqFOf_iUGyh7Xtr-mHieUcNtT3NN-APIz2yeJCJaaAaEFU6Uu2r1B51beUo-XcgNS0ZjQAc7r30dDaZsXodLaAh9GrDG0sYp3zhuctX-u57Z4_u4VM/s1600/color.png); } @-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } Sumber » http://vicahya.blogspot.com/2012/04/cara-membuat-menu-hidden-keren-di-blog.html#ixzz2ABohAJCZ

Tampilkan postingan dengan label Trick And Tips. Tampilkan semua postingan

Cara Membuat Fans and like di pojok blog

14.01

Unknown

Salah satu tips untuk menambah jumlah pengunjung adalah promosi lewat social network seperti facebook, twitter dan plurk. Kali ini kita akan pasang tombol share dengan cara yang sedikit unik, dan juga menarik perhatian pengunjung untuk membagi nya ke facebook.

Lihat screenshot di samping.. di pojok kanan bawah itu, adalah tombol share facebook yang mengikuti scroll dari browser.. jadi walau kita geser ke atas ke bawah tetep aja di situ aja, gak mau pindah - pindah. Di tombol share facebook ini juga ada penghitung berapa kali halaman blog itu di bagikan ke facebook lewat tombol itu.

Tertarik menggunakannya ? langsung aja ikuti langkah-langkah berikut :

Login ke Blogger
Lalu klik Design > Edit HTML
Copy Paste kode berikut di atas kode ]]></b:skin> :

#pageshare {position:fixed; bottom:1%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; height:auto; padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:55px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px;}
Setelah itu Copy Paste lagi kode berikut ini di atas </body> :

<div id='pageshare' title='Share @Facebook'>
<div class='sbutton' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>ans!!</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='sbutton' id='gb'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like font='' layout='box_count' show_faces='false'/></div>
</div>
Kalau sudah selesai semua langsung aja klik 'Save Template' dan lihat hasilnya.. TerimaKasih :D

Tinggalkan Pesan Anda Di Bawah

Posted in Trick And Tips

Menampilkan Scrool Bar Di Blog

13.57

Unknown

Sobat blogger.. kali ini aku punya trik yang tidak kalah menarik dengan blogging tutorial sebelumnya. Kali ini akan 'Membuat Scroll Bar Blog Berbeda' , sudah tahu kan apa itu scroll ? ScrollBar adalah sebuah kontrol penggulung yang terdapat di sisi suatu jendela. Macam dari ScrollBar sendiri ada 2, horizontal scrollbar dan vertical scrollbar. Fungsinya untuk menggulung teks pada layar atau mengubah nilai sebuah kontrol.

Kali ini kita akan mengubah scrollbar di blog atau juga bisa dibilang scrollbar dari browser. Untuk lebih jelas nya lihat scrollbar berwarna biru pada screenshot disamping ~>

Bagaimana sobat ? Tertarik menggunakan trik ini untuk memperindah blog kalian ? Kalau iya langsung ikuti langkah - langkah berikut ini :

Login ke Blogger
Klik Design > Edit HTML
Pasang kode berikut di atas kode ]]></b:skin>

::-webkit-scrollbar {
height:15px;
width: 15px;
background: #e6e6fa;
}
::-webkit-scrollbar-thumb {
background-color: #1F61DB;
-moz-border-radius: 12px;
border-radius: 12px;
}

# #e6e6fa ganti kode warna itu untuk mengganti warna background scrollbar
# #1F61DB ganti kode warna itu untuk mengganti warna scrollbar
Klik 'Save Template'
Terakhir kasih komentar pada postingan ini jika berhasil dan kalau berkenan tukeran link yakk ! :D

Tinggalkan Pesan Anda Di Bawah

Posted in Trick And Tips

Membuat Efek Pintu Geser Ke Kanan dengan JQuery

13.31

Unknown

TEKS BELAKANG DI SINI

Bila anda ingin membuatnya, seperti berikut caranya :

1.   Rancangan -> Tambah Gadget ->
    Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
    kode yang tertera di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('.box_container').hover(function(){<br /> var distance = $(this).outerWidth();<br /> $(this).find('.box_image').animate({ left : distance },{queue:false,duration:200});<br /> }, function(){<br /> $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:200});<br /> });<br /> });<br /> </script><br /> <br /> <style><br /> .box_container{position:relative; width:270px; overflow:hidden; height:40px; background: blue; color:white;}<br /> .box_image { position:absolute; }<br /> .box_info { margin:10px; font-family: 'Georgia'; font-weight: bold;}<br /> </style><br /> <br /> <div class='box_container'><br /> <img class='box_image' src='URL Gambar di sini' style='width:270px'/><br /> <p>TEKS BELAKANG DI SINI</p><br /> </div>

KETERANGAN =

Ganti gambarnya dengan gambar miliki anda,
letakkan pada kode URL Gambar di sini

Sesuaikan ukuran width: & height: nya
dengan gambar anda tersebut.

Masukkan kalimat atau tulisan anda yang
akan menjadi latar belakangnya
pada kode TEKS BELAKANG DI SINI

Sesuaikan juga warna background dan warna
tulisannya pada kode background: & color:

Selamat mencoba, good luck!

Tinggalkan Pesan Anda Di Bawah

Posted in Trick And Tips

Cara Membuat Fans Page Melayang Di Blog

11.58

Unknown

Di Sini Kamu Bisa Membuat Fans Page/Halaman Facebook Melayang Do Blog Anda

Langkah² :

Cara Membuat Fan Page Facebook Auto Hide :

1. Login ke Blogger.

2. Klik Elemen Laman

3. Klik Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan kode berikut ke dalam kotak yang di sediakan :

<script src="http://ojel88.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: #fff;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 5px ridge #80ff00; display: block;">
<div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;">
<a id="fbcloseslidebox" style="float: right; color: #000; padding: 0pt 2px; border: 1px solid #000; text-decoration: none; font-size: 10px; font-family: Verdana" href="#">Exit</a>
<strong style="color:#000;">Terima Kasih Bagi Yang Kasih Like/Suka</strong>
LETAKKAN KODE FACEBOOK LIKE BOX/FAN PAGE DI ISINI
</div></div>

6.ganti tulisan merah dengan code like box anda

7. Simpan/Save Template.

Created By : Juni Praasetyo |@followmeTYO|

Tinggalkan Pesan Anda Di Bawah

Posted in Trick And Tips