Smooth Back to Top dengan JQuery

Kali ini ane akan share tentang gimana cara membuat back to top di blog, untuk demonya bisa anda lihat di blog ane kalo gitu langsung aja kita ke toturial nya! Cekidot!!

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>

 <style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>  

4. Kemudian letakkan kode berikut ini diatas kode </body>

 <div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>  

5. Simpan Template

Semoga Postingan ane kali ini bisa bermanfaat buat sahabat blogger...

Read More ->>

Widget Posting Terbaru dengan Animasi Scroll

Kali ini Ane akan Ngeposting Tentang widget Artikel Terbaru menggunakan animasi dengan banyak pilihan opsi. Seperti manampilkan komentar, jumlah ringkasan dan banyak lagi lainnya. Nah langsung saja.. Cekidot!!

Demo

1. masuklah ke halaman tata letak dengan mengeklik menu Tata Letak :

2. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya :

 <style type="text/css">
div.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  margin:0px auto;
}
div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background-color:#646464;
  background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:linear-gradient(top, #8B8B8B, #3D3D3D);
  color:white;
  font:bold 12px Arial,Sans-Serif;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}
ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#353535;
  overflow:hidden;
}
ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background-color:#9E9E9E;
  background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:linear-gradient(top, #B1B1B1, #F7F7F7);
  border-top:1px solid #4E4E4E;
  border-bottom:1px solid #FFFFFF;
  word-wrap:break-word;
  overflow:hidden;
}
ul.spy a {text-decoration:none;}
ul.spy li em {
  font-weight:bold;
  color:#0B5D94;
}
ul.spy a.header {
  font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;
  display:block;
  color:#C00000;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
}
ul.spy a.header:hover {
  color:#0556CF;
  text-decoration:underline;
}
ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}
ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #E6E6E6;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}
ul.spy li .imgwrap {
  -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  box-shadow:0px 0px 2px rgba(0,0,0,0.7);
}
ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
</style>

<script type='text/javascript'>
var spyTitle           = "Artikel Terbaru",
    numposts           = 7,
    numchars           = 127,
    komentar           = "Komentar",
    pBlank             = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    modeID             = true,
    showSummaries      = true,
    openNewTab         = false,
    showPostDate       = true,
    showComment        = true,
    showThumbnails     = true,
    animatedRecentPost = true,
    limitspy           = 4,
    intervalspy        = 4000,
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script>
<script src="http://predatorevil.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script> 

Silahkan Ganti URL http://predatorevil.blogspot.com/ dengan alamat blog Anda lalu simpan.
Semoga Bermanfaat...

Read More ->>

Cara Membuat Tampilan Tulisan Di Pojok Blog

 

Cara Membuat Tampilan Tulisan Di Pojok Blog ,Tutorial Ini Terinspirasi dari Pratinjau sebelum posting pada Blog. Sekilas Tentang Tampilan Tulisan Di Pojok Blog Hanya Sebagai Tambahan ataupun bisa di gunakan pada blog Demo bisa di lihat tampilan Tulisan demo Pada Gambar diatas ataupun Kunjungin Blog Demo.

Demo 

Langsung aja ke tutorial! Cekidot!!

• Buka Template > Edit HTML > Expan Template Widget
• Cari kode </body>
• Lalu Paste kan kode di bawah tepat di atas kode </body>

 <!-- Start Demo tutorialbelajarblogger.blogspot.com-->
<div style='position: fixed; top: 75px; left: -225px; width: 600px; padding: 10px; font-size: 24px; text-align: center; color: rgb(255, 255, 255); font-family: &#39;trebuchet ms&#39;, verdana, arial, sans-serif;transform: rotate(-45deg);transform-origin: 50% 0px;-o-transform: rotate(-45deg); -o-transform-origin: 50% 0px;-moz-transform: rotate(-45deg); -moz-transform-origin: 50% 0px; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 50% 0px; background-color: rgb(0, 0, 0); border: 1px solid rgb(170, 170, 170); z-index: 9999; opacity: 0.5;'>Demo</div>
<!-- End Demo http://predatorevil.blogspot.com/-->
 

Simpan Template...
Selamat mencoba...

Read More ->>

Cara Membuat Energy Saving Mode di blogger

1. Masuk ke akun Blogger dan pergi ke Desain --> Edit HTML

2. Cari tag ini dengan menggunakan Ctrl + F </ head>

3. Copas kode di bawah ini sebelum kode </ head>

 <script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js'
 type='text/javascript'/> 

4. klik save template.

5. Next, pergi ke Desain --> Elemen Halaman dan klik Tambah Gadget pada side bar.

6. Pilih 'HTML / Javascript' dan copas kode di bawah ini.

 <script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=180"></script> 

7. Anda dapat mengubah waktu = 180 seperti yang Sobat inginkan.

8. Simapn "HTML JavaScript", Selesai.

9. Demonya bisa anda lihat di blog ini...

Read More ->>

Peeling Stickers Social Media Widget Untuk Blogger

Demo

1. Login ke blogger --> Elemen Halaman Desain.

2. Klik Tambah Gadget dan pilih 'HTML / Javascript'

3. Copas kode dibawah ini :

 <style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="http://www.facebook.com/Previl_TM" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOV4Ee6pC_pnsYa3BbY_UcO80PhCaAz3ooOcPbzjbJvZXz1ePha3ywfhvqXrLwTEqC2GXvoTyJNstmGkjvt65TPzEvCPi09XLpRKQRO2BvxzD8EiSTsh6vKbov6EVMRVbHnYfj3KFQ-XZ/s1600/bloggertrix-facebook.png" /></a>    
<a href="http://www.twitter.com/Previl_TM" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcOCoJGmX77GdoVe96zCDBl2k_rduWtjhi3F_mzwzmDBD0zDTReIpaKR9_9MtsHKBlCu56qdqXqVQj4C2qLkZ4vFlA7GbI9YS__UOLptydX5fyptUEa4-nCbm4tGSPzObbVC29zpfmQmw/s1600/bloggertrix-twitter.png" /></a>    
<a href="https://www.stumbleupon.com/Username" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwmgeAI0zRjRM5AjCwu0_8gDrh-oTI3ph3Ty3fTEARn9kJL8fVEb2UCC2MKXyx9ilCsdcEl4anjrH1AkvLLDs8xMfNirbSSkPDo8hpdrLBBS8NTClCVSU9Xq3BHV-QENNH8nKquEpQY9e/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/Previl_TM/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdF7iya9loI9ajtDw8RX1if_zS2_AhrwvG6q7fxHsFWJMocqnBqAwWJffEga4epkeq79k4k41jQaVHjpxJYwby5tbQM4tud3K2NiGUKBsGXitPz1ybNjW4iH30sk7FlEqgC5o7WorWMH7v/s1600/bloggertrix-rss.png" /></a></p></center> 

Setelah menyisipkan kode di atas, Lalu

* Ganti Previl_TM dengan nama pengguna facebook Anda
* Ganti Previl_TM dengan twitter Username
* Ganti Username dengan Google id sobat
* Ganti Previl_TM dengan feedburner nama

4. Kemudian Simpan...

Selamat Mencoba...

Read More ->>

Isometrica Social Media Sharing Widget For Blogger

 

Check out this Pen!

<style>

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
  <li><a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3p04_SElZkz9MTradki_2wvhaDlbt6nZvLnI4aUBkMCyWScJlyB6jojWxMrIeVEzIOZR_i6CU869J7qfW4Y6PGWGJJX_G8TZAg_ygymmFsA3lyN-GztEjDW8KLI-md8PG5XMy_TaiEjg/s1600/btrix-small-digg.png" title="Add to Digg" /></a></li>
  <li><a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRSuMiaekqU8CxfjNUTSMp6NSDXs6LGbThyphenhyphenY-eT6HMQbjzOJ1svHQtWjbwL0xpBUT10T5QAYbw71AAv4IyHVyelxJ6_nj1KydNRPj13cbSJzi3FAzZZS8YAiO4bVvpGl94DKLmEKV6zQ/s1600/btrix-small-facebook.png" title="Add to Facebook" /></a></li>
  <li><a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKY3X4PglH1LLplPfW7EBbNRcqERbSYZpAFAtZzpNp8gd9hWCgLt-ofpPsKmKLr5RAjXjYAUYTarVd0dqzOLTNgxMxyeiqgk4JwT3w85NLgWwK22BcAWRnwIbl-DzeOPIOWHGBPvzjZC0/s1600/btrix-small-google.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/jeri_agus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRIGkVe69xOZgbxU-yo7cZGiLZtSmg_yPpj_T7mxPKrJXBkyB9wQwDHLQnmRRxlace2tAGkjEzkneTWchx0iGLtg0Ntf-mWw9Xk5d8rGfkhCfLqfd4Gotp7P2ANjUEW03xIaN2Y8g-65I/s1600/btrix-small-twitter.png" title="Add to Twitter" /></a></li>
  <li><a href="///"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DleasGOO4x3OtzUq0PkHhuSPXY4mcJRHAUl_JME1E0Rb8coPORBskLEjlZ7RgCtvS1tz1s8Or6J6ct44yi2ExsdcSwShcQw9BPX9ACPKuCjRMXdeXJdFdKzdI_fiQqa-LVgMI0mMaNY/s1600/btrix-small-rss.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Read More ->>

Add a Pure CSS Showing Counter Social Widget

Tambahkan HTML / JavaScript Gadget :

<style type="text/css">
.container {
  margin: 0px auto;
  width: 300px;
  text-align: center;
}

.btn-sbm {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0 5px;
  padding-top: 40px;
  width: 75px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn-sbm:active {
  margin-top: 3px;
}

.btn-sbm:active .btn-sbm-action {
  padding-bottom: 3px;
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm:active .btn-sbm-action:after {
  bottom: 3px;
}

.btn-sbm-count {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  font-size: 19px;
  letter-spacing: -1px;
  color: #555;
  text-shadow: 0 1px white;
  background: #e6eff5;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #c5c5c5 #bbb;
  border-radius: 8px 8px 0 0;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.btn-sbm-count:before, .btn-sbm-count:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #e6eff5;
}

.btn-sbm-count:before {
  margin-left: -7px;
  margin-top: 1px;
  border-width: 7px;
  border-top-color: rgba(0, 0, 0, 0.07);
}

.btn-sbm-action {
  display: block;
  position: relative;
  line-height: 32px;
  padding: 2px 0 6px;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  border: solid rgba(0, 0, 0, 0.18);
  border-width: 0 1px;
  border-radius: 0 0 8px 8px;
}

.btn-sbm-action:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 0;
  right: 0;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.btn-sbm-tweet {
  background: #83cfe8;
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm-tweet:after {
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.btn-sbm-tweet + .btn-sbm-count {
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.btn-sbm-like {
  background: #6480bd;
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
  background-image: -o-linear-gradient(top, #6480bd, #3c5894);
  background-image: linear-gradient(to bottom, #6480bd, #3c5894);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.btn-sbm-plus {
  background: #626262;
  background-image: -webkit-linear-gradient(top, #626262, #404040);
  background-image: -moz-linear-gradient(top, #626262, #404040);
  background-image: -o-linear-gradient(top, #626262, #404040);
  background-image: linear-gradient(to bottom, #626262, #404040);
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<br/>
<div class="container">

     <a href="https://twitter.com/jeri_agus" rel="nofollow" target="_blank"rel="author"  title="Find us on twitter" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
      <span class="btn-sbm-count">150+</span>
    </a>

    <a href="http://www.facebook.com/jery_agus" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-like">Facebook</span>
      <span class="btn-sbm-count">650+</span>
    </a>

    <a href="https://plus.google.com/u/0/116233378330566694358" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
      <span class="btn-sbm-action btn-sbm-plus">Google+</span>
      <span class="btn-sbm-count">140+</span>
    </a><br/>
</div><a style="float:right; color: #ffffff"href="http://hooter-spot.blogspot.com/2013/04/add-pure-css-showing-counter-social.html">Get This</a>

Check out this Pen!

Read More ->>

Add a Blue Professional Dropdown Menu in Blogger

Tambahkan HTML / JavaScript Gadget :

<style>

#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJOJsojbYXgWaR38LDSsCAsElbvo3KaQy4w_nM3SngAfBjU-ej70K_v2R6fxtXCNngM1_itCP8lMadqkkDLfRXt_GuIcrwroXP_rj31c7pn4bTwgkhaJD0OHcs7VKpE2EA0a5HIimaRZy/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJOJsojbYXgWaR38LDSsCAsElbvo3KaQy4w_nM3SngAfBjU-ej70K_v2R6fxtXCNngM1_itCP8lMadqkkDLfRXt_GuIcrwroXP_rj31c7pn4bTwgkhaJD0OHcs7VKpE2EA0a5HIimaRZy/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJOJsojbYXgWaR38LDSsCAsElbvo3KaQy4w_nM3SngAfBjU-ej70K_v2R6fxtXCNngM1_itCP8lMadqkkDLfRXt_GuIcrwroXP_rj31c7pn4bTwgkhaJD0OHcs7VKpE2EA0a5HIimaRZy/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJOJsojbYXgWaR38LDSsCAsElbvo3KaQy4w_nM3SngAfBjU-ej70K_v2R6fxtXCNngM1_itCP8lMadqkkDLfRXt_GuIcrwroXP_rj31c7pn4bTwgkhaJD0OHcs7VKpE2EA0a5HIimaRZy/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style>

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">XSLT</a></li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">FAQ's</a></li>
    </ul>

• Home
• Tutorials
  • HTML / CSS
  • JS / jQuery
    • jQuery
    • JS
  • PHP
  • MySQL
  • XSLT
  • Ajax
• Resources
  • By category
    • PHP
    • MySQL
    • XSLT
    • Ajax
  • By tag name
    • captcha
    • gallery
    • animation
• About
• FAQ's

Read More ->>

Add a Professional Roseic Style Blockquote in Blogger

 

letakkan css dibawah ini, diatas : ]]></b:skin>

.wg-blockq {
border-left: 6px solid;
border-radius: 20px 0px 20px 0px;
box-shadow: 0pt 0pt 14px #ABABAB;
padding: 8px 9px;
}

.rose-block {
background: none repeat scroll 0 0 #FFFDF1;
border: 2px solid #DAA926;
border-radius: 20px 0px 20px 0px;
padding: 7px 9px;
}

HTML

<div class="wg-blockq"><div class="rose-block">Write Your Codes Here</div></div>

Check out this Pen!

Read More ->>