Button CSS Hover Style For Blog

Salam semuanya,jumpa lagi sama saya hansmjlkcommunity,dalam pembahasan kemarin saya sempat membuat artikel tentang membuat icon button multy guna dengan css dan juga expandable button css,kini giliran membuat Button CSS Hover Style For blogmemang banyak tampilan button yang bisa sobat gunakan oleh karena itu sekarang saya buat lagi artikel tentang button,untukjelasnya bisa lihat demonya.

Demo

Gimana tertarik untuk mencobanya,silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML,centang Expand Widget Templates.

3. Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KTMX-Y-bhZT6I4nN1i-3DDJUhv-0EA9LFT6gyLxy0_e9gq9EeMuWAwqjPhwBk9XGS4dXg7zSDEGMVtJERdG0sffbawLXEk86IOJrIvBiUxhqzkQOiNjsp-4nA6I66AtoNCOgrRklV5E/h80/
helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

4.Kemudian save.


Untuk pemakaiannya gunakan kode di bawah dan letakan dalam kolom HTML bukan Compase

<a href="YOUR LINK " class="hb-buttons">Button name</a>

Keterangan :

Letakan link pada kata berwarna merah
Letakan nama Button sesuai kebutuhan pada kata berwarna hijau


Demikian tutorial kali ini semoga bermanpaat.

Expandable Button CSS For Blog

Expandable Button CSS For Blog,kalo di lihat dari arti kata Expandable berarti Dapat di perluas,maksudnya button ini mempunyai keunikan ketika tombol ini di sentuh mouse maka dengan sendirinya dia akan memberikan efek ke kiri dan kanan,unutk lebih jelasnya silahkan sobat lihat demonya.

Demo

buat yang mau coba silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML

3. Backup Dulu untuk menjaga kesalahan,kemudian centang Expand Widget Templates.

4. cari kode ]]></b:skin> dan letakn kode di bawah tepat di atas kode ]]></b:skin>

a.expand-button:link { color: #6E6E6E; 
font: bold 12px Helvetica, Arial, sans-serif; 
text-decoration: none; padding: 7px 12px; 
position: relative; display: inline-block; 
text-shadow: 0 1px 0 white; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: 
border-color .218s; transition:
border-color .218s; background: #F3F3F3; 
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); 
background: -moz-linear-gradient(linear,0% 40%,0% 70%,
from(whiteSmoke),to(#F1F1F1)); 
border: solid 1px gainsboro; 
border-radius: 2px; -webkit-border-radius: 2px; 
-moz-border-radius: 2px; margin-right: 10px; text-align: center; 
width: 70px; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } 
a.expand-button:hover 
{ color: #333; border-color: #999; 
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 160px;

5. Kemudian save.

Untuk penulisan dalam postingan gunakan kode di bawah

<a class="expand-button" href="#">Button Text</a>

Keterangan 
Yang bertanda # ganti dengan URL sesuai kebutuhan sobat.


Gimana mudah kan.selamat mencoba sobat semoga berhasil.

Cara Membuat Animasi Awan Di Blogspot

Membuat animasi Awan Di Blogspot,itu pembahasan saya kali ini,animasi awan ini saya rasa cukup menarik untuk di coba,membuat tampilan blog sobat mungkin sedikit menarik dengan adanya awan beterbangan di halaman depan membuat kita seakan betah melihatnya.Sobat penasarn nih silahkan lihat dulu demonya.

Demo Live

Gimana tertarik bukan......,buat sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini

1. Pastikan posisi sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML

3. Backup dulu untuk menjaga kesalahan,kemudian centang Expand Widget Templates

4. Cari Kode ]]></b:skin> gunakan CTRL+F untuk memudahan pencarian

5. Copy Kode di bawah dan pastekan di atas kode ]]></b:skin>

#cover-cloud {
 height: 200px;
 left: 0;
 min-width: 1074px;
 position: absolute;
 width: 100%;
 z-index: 0;
}
#cloud {
 background: url(http://2.bp.blogspot.com/-  pIdaj5t_YMg/T4asjeHwrJI/AAAAAAAADPo/1jFK0WRW4Z0/s1600/cloud1.png) repeat-x 0 0;
 height: 188px;
 position: absolute;
 width: 100%;
 z-index: 1;
}
#cloud2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtXchYAJiwnLzB46NJl8RrXSmeFIYTs5N55JFeTUh3leucqhSBDR_Waz1t4MBg5fta1vVxeWxdrqDkUJjz1R3MdPiQhyphenhyphenqRodJlpOgUSI0Let5byxZ8vzS0Qr3D5oHyPnQKmYwaJY85HgQ/s1600/cloud2.png) repeat-x 0 0;
 height: 125px;
 position: absolute;
 width: 100%;
 z-index: 2;
}
#cloud3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT7D56n6E8iGUSRTNL0-hizJbWhLEOjuW5wg43crpQ8opMw6iCh9spzzueBQJJZxpZOdQnSTKgkTXKUdfRpNiCnsu5MJjA3Mi7eaXKRGlYOznjFisvsJCf2QlCGu8jznjbgPxpKhkWVs/s1600/cloud3.png) repeat-x 0 0;
 height: 46px;
 position: absolute;
 width: 100%;
 z-index: 3;
}

6. Kemudian cari lagi kode </head> dan letakan kode di bawah tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
(function(e) {
    e._spritely={animate: function(t){var n=e(t.el);
    var r=n.attr("id");if(!e._spritely.instances){e._spritely.instances={
}}
if(!e._spritely.instances[r]) {
    e._spritely.instances[r]={current_frame: -1;
}}
var i=e._spritely.instances[r];if(t.type=="sprite") {
    var s;var o=function(n){var i=t.width,o=t.height;if(!s){s=[];total=0;for(var u=0;u<t.no_of_frames;u++){s[s.length]=0-total;total+=i;
}}
if(e._spritely.instances[r]["current_frame"]>=s.length-1) {
    e._spritely.instances[r]["current_frame"]=0;
}
else {
    e._spritely.instances[r]["current_frame"]=e._spritely.instances[r]["current_frame"]+1;
}
n.css("background-position",s[e._spritely.instances[r]["current_frame"]]+"px 0");if(t.bounce&&t.bounce[0]>0&&t.bounce[1]>0) {
    var a=t.bounce[0];var f=t.bounce[1];var l=t.bounce[2];n.animate({top: "+="+a+"px",left:"-="+f+"px";
},l).animate( {
    top: "-="+a+"px",left:"+="+f+"px";
},l);
}};
o(n);
}
else if(t.type=="pan") {
if(t.dir=="left"){e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]-(t.speed||1)||0;
}
else {
e._spritely.instances[r]["l"]=e._spritely.instances[r]["l"]+(t.speed||1)||0;
}
if(e.browser.msie) {
var u=e(n).css("background-position-y")||"0";e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}
else {
var u=(e(n).css("background-position").split(" ")||" ")[1];e(n).css("background-position",e._spritely.instances[r]["l"]+"px "+u);
}}},randomIntBetween:function(e,t) {
return parseInt(rand_no=Math.floor((t-(e-1))*Math.random())+e);
}};
e.fn.extend( {
spritely: function(t){var t=e.extend({type:"sprite",do_once:false,width:null,height:null,fps:12,no_of_frames:2;
},t|| {
});
t.el=this;t.width=t.width||e(this).width()||100;t.height=t.height||e(this).height()||100;var n=function() {
return parseInt(1e3/t.fps);
};
if(!t.do_once) {
window.setInterval(function(){e._spritely.animate(t);
},n(t.fps));
}
else {
e._spritely.animate(t);
}
return this;
},sprite:function(t) {
var t=e.extend({type: "sprite",bounce:[0,0,1e3];
},t|| {
});
return e(this).spritely(t);
},pan:function(t) {
var t=e.extend({type: "pan",dir:"left",continuous:true,speed:1;
},t|| {
});
return e(this).spritely(t);
},flyToTap:function(t) {
var t=e.extend({el_to_move: null,type:"moveToTap",ms:1e3,do_once:true;
},t|| {
});
if(t.el_to_move) {
e(t.el_to_move).active();
}
if(e._spritely.activeSprite) {
if(window.Touch){e(this)[0].ontouchstart=function(t){var n=e._spritely.activeSprite;var r=t.touches[0];var i=r.pageY-n.height()/2;var s=r.pageX-n.width()/2;n.animate({top: i+"px",left:s+"px";
},1e3);
}}
else {
e(this).click(function(t){var n=e._spritely.activeSprite;e(n).stop(true);var r=n.width();var i=n.height();var s=t.pageX-r/2;var o=t.pageY-i/2;n.animate({top: o+"px",left:s+"px";
},1e3);
})}}
return this;
},active:function() {
e._spritely.activeSprite=this;return this;
},activeOnClick:function() {
var t=e(this);if(window.Touch){t[0].ontouchstart=function(n){e._spritely.activeSprite=t;
}}
else {
t.click(function(n){e._spritely.activeSprite=t;
})}
return this;
},spRandom:function(t) {
var t=e.extend({top: 50,left:50,right:290,bottom:320,speed:4e3,pause:0;
},t|| {
});
var n=e(this).attr("id");var r=e._spritely.randomIntBetween;var i=r(t.top,t.bottom);var s=r(t.left,t.right);e("#"+n).animate( {
top: i+"px",left:s+"px";
},t.speed);window.setTimeout(function() {
e("#"+n).spRandom(t);
},t.speed+t.pause);return this;
},makeAbsolute:function() {
return this.each(function(){var t=e(this);var n=t.position();t.css({position: "absolute",marginLeft:0,marginTop:0,top:n.top,left:n.left;
}).remove().appendTo("body");
})}})})(jQuery);try {
document.execCommand("BackgroundImageCache",false,true);
}
catch(err) {
}//]]></script>
<script type='text/javascript'>(function($) {
$(document).ready(function(){$('#cloud').pan({fps: 30, speed: 1, dir: 'right';
});$('#cloud2').pan( {
fps: 30, speed: 2, dir: 'right';
});$('#cloud3').pan( {
fps: 30, speed: 0.5, dir: 'right';
});});})(jQuery);</script>

7. Dan Terakhir cari kode <body> kemudian letakan kode di bawah tepat di bawah kode <body>

<div id='cover-cloud'>
<div id='cloud'/>
<div id='cloud2'/>
<div id='cloud3'/>
</div>

Untuk mendaptkan hasil yang optimal silahkan sobat korek kembali scriptnya sesuai selera,sambil nunggu adzan,,hehehehhe.

Setelah semuanya beres kemudian save dan lihat hasilnya.


Beres sudah tutorial kali ini tentang cara Membuat Animasi Awan Di Blogspot semoga artikel ini sedikit bermanpaat buat semuanya.

Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Semakin maraknya tampilan blog dengan menggunakan fitur fitur CSS,maka untuk itu pada kesempatan ini saya akan coba berikan tutorial tentang Membuat tampilan button sliding Effect Dengan CSS,bagi sobat yang penasaran silahkan lihat demonya.

Demo

Bagi sobat yang mau mencobanya silahkan ikuti tutorialnya.

1. Download dulu Kode Snippet Nya DISINI

2. Pilih menu Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakan kode snippetnya yang tadi sobat download di atas kode ]]></b:skin>

Setelah penempatan kode di atas selesai kemudian

* Kembali ke menu dan pilih Tata Letak 

* Add Gadget > HTML/Javascript

* Letakan kode di bawah pada bagian kolom konten

<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE + 
          <g:plusone size="small" annotation="none"
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter"
      href="http://twitter.com/Username"
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook"
      href="http://www.facebook.com/Username"
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email"
      href="mailto:Your Email ID" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
   
  var po = document.createElement('script');
   
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>

Keterangan :
Untuk tulisan yang berwarna merah silahkan ganti dengan URL blog sobat.
Untuk yang berwarna hijau ganti dengan nama account sobat.
Untuk yang berwarna pink ganti dengan alamat email sobat.

4. Setelah semuanya beres tinggal save dan lihat hasilnya.


Selamat Mencoba.............

Membuat Icon Button Multi Guna Dengan CSS3

Membuat Icon Button Multi Guna Dengan CSS,itulah yang akan saya bahas pada kesempatan kali ini,button ini mempunyai banyak fungsi yang bisa sobat gunakan unutk memperindah tampilan blog seperti yang terlihat pada gambar di samping
bagi sobat yang penasaran dengan tampilannya bisa lihat demonya disini,gimana tertarik bukan ya udah langsung aja ikuti tutorialnya di bawah ini.

Silahkan download CSS3 Code Snippet DISINI

1. Login terlebih dahulu ke akun blog sobat.
2. Pilih menu Template > Edit HTML
3. cari kode ]]></b:skin> dan letakan kode snippet yang sobat download di atas kode ]]></b:skin>.


Langkah pertama sudah selesai sekarang giliran cara pemasangan dalam widget

1. Pilih Tata Letak > Add Gadget > HTML/Javascript
2. Copy kode di bawah dan letakan pada kolom konten HTML,dan pilih salah satu sesuai kebutuhan sobat.

<a class="my-button medium blue" href="#"><img alt="" src="images/btn_info.png" />Information</a>
<a class="my-button medium green" href="#"><img alt="" src="images/btn_ok.png" />Success</a>
<a class="my-button medium orange" href="#"><img alt="" src="images/btn_warning.png" />Warning</a>
<a class="my-button medium red" href="#"><img alt="" src="images/btn_error.png" />Error</a>
<a class="my-button medium black" href="#"><img alt="" src="images/btn_add.png" />Add New</a>

<a class="my-button medium green" href="#"><img alt="" src="images/btn_down.png" />Download</a>
<a class="my-button medium purple" href="#"><img alt="" src="images/btn_up.png" />Upload</a>
<a class="my-button medium dark" href="#"><img alt="" src="images/btn_help.png" />Help</a>
<a class="my-button medium terra" href="#"><img alt="" src="images/btn_delete.png" />Delete</a>

Keterangan :
pada tanda # ganti dengan url Link sobat

Demikian tutorial kali ini semoga bermanpaat.

Tex Box CSS Keren

Cara Membuat Efek Terang Gelap pada Text Area,inilah pembahasan kali ini,cukup menarik saya rasa bila pada kolom text area sobat coba pasang efek seperti ini,yang mana efek ini akan memberikan kesan tersendiri,bila sobat arahkan mouse pada kolom text area dia kan memberikan warna efek terang dan bila di lihat secara biasa tanpa mengarahkan mouse maka di seakan meredup warnanya,gimana tertarik bukan silahkan ajah langsung.

Demo

1. Seperti biasa sobat login dulu ke akun blog sobat.
2. Kemudian pilih menu Template dan pilih Edit HTML
3. Centang dulu kotak kecilnya ( Expand Widget Template)
4. Cari Kode ]]></b:skin> kemudian letakan kode CSS di bawah tepat di atas kode ]]></b:skin>.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/
labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

5. kemudian Simpan Template.

Keterangan

Untuk penulisan dalam postingan bisa sobat gunakan script text area di bawah ini

<div class="code1"> Your Code Here </div>

Selamat mencoba semoga berhasil

Membuat Daftar Isi Dengan Jquery Accordiaon

Salam hangat semuanya,jumpa lagi bareng hansmjlkcommunity,kali ini saya akan sedikit mengulas tentang cara Membuat Daftar Isi Jquery Accordion Keren Abis,meletakan daftar isi pada blog sangat penting guna memberi kemudahan kepada pengunjung untuk mengetahui isi artikel dari blog sobat,dengan tampilan yang dinamis daftar isi jquery ini memberikan kenyamanan baik kepada pengunjung atau kepada pemilik blog.

DEMO

untuk sobat yang mau coba coba silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat sudah login ke akun blog sobat.
2. Pilih menu Template / Rancangan kemudian Edit HTML.
3. Cari kode ]]></b:skin> (gunakan CTRL+F)
4. Letakan Kode CSS di bawah ini,tepat di atas kode ]]></b:skin>

#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform: uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top: 5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color: f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. kemudian cari kode </head> dan letakan script di bawah tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js' type='text/javascript'/>

6. Kemudian copy scrip di bawah ini dan letakan pada postingan bagian HTML,widget,atau halaman statis.

<script type="text/javascript" src="https://hanmjlkcommunity.googlecode.com/files/Table-of-Content.js"></script>
<script src="http://hansmjlkcommunity.blogspot.com/feeds/posts/
summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti Tulisan yang berwarna merah dengan URL blog sobat.

7. Setelah semuanya di lakukan kemudian pratinjau terlebih dahulu lalu save.



Gimana mudah kan......silahkan buat yang minat coba saja langsung semoga berhasil.

Cara Membuat Efek Hover Pada Judul Postingan

Assalamuaaikum...apa kabar sobat....?kita jumpa lagi dalam artikel yang akan bahas kali ini yaitu tentang cara membuat efek hover dengan css pada judul postingan,tampilan ini memang cukup menarik untuk di pasang pada blog sobat,dengan tampilan tampilan efek css memberikan kenyamanan dan mempunyai kesan tersendiri,baiklah buat sobat yang ingin mencobanya silahkan perhatikan tutorialnya berikut ini.

Demo

1. Seperti biasa login dulu ke blog sobat.
2. Pilih menu  Rancangan > Edit HTML (jangan lupa ceklist kotak kecil atas)
3. kemudian cari kode </head>
4. masukkan kode berikut dan taruh diatas kode </head>

Quote:
<style type='text/css'>
h3{font-family:veranda !important; font-style:italic !important}
.post h3{color:#666; border-left:10px solid #666; border-right:10px solid #666; padding:3px 5px 3px 20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #666; -webkit-box-shadow:0px 0px 13px #666; -moz-box-shadow:0px 0px 13px #666}
.post h3:hover{color:#FF133F; border-left:10px solid #FF133F; border-right:10px solid #FF133F; box-shadow:0px 0px 13px #FF133F; -webkit-box-shadow:0px 0px 13px #FF133F; -moz-box-shadow:0px 0px 13px #FF133F}
</style>

5.kemudian save atau simpan template dan silahkan lihat hasilnya.

Demikianlah tutorial kali ini,bagi yang tertarik silahkan coba langsung.

Cara Menghilangkan Slide Show Pada Template Bawaan Blogs

Salam sejahtera,jumpa lagi bareng hansmjlkcommunity,pada kesempatan ini saya akan buat artikel tentang cara menghilangkan slid show pada template bawaan blog,slid show yang nampak pada halaman depan memang mempunyai kesan indah,namun di samping itu kita merasa terganggu dengan ada tampilan itu,dengan halaman yang sangat sempit rasanya kita ingin menghapusnya karena berupaya sedikit menghemat halaman,nah bagi sobat yang ingin mencoba untuk menghilangkannnya saya akan kasih tutorialnya berikut ini.


1. Pastikan sobat sudah login ke blog sobat.
2. Pilih menu Template / Rancangan,kemudian pilih Edit HTML.
3. Kemudian cari kode di bawah  (gunakan CTRL+F biar lebih mudah)

<!-- Featured Content Slider Started -->

4. Setelah sobat ketemu sama kode diatas kemudian blog sampe kode

<!-- Featured Content Slider End -->

Script yang harus di hapus seperti ini : 

<!-- Featured Content Slider Started -->
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div class='featuredposts clearfix'>
 <div class='fp-slides'>
 <div class='fp-post'>
<div class='fp-thumbnail'><a href='featured-post-1-url-here'>
<img src='http://1.bp.blogspot.com/-2oDVCuZBTXc/Tla6RkjE4SI/
AAAAAAAABcs/0esFYqkT__Q/s000/1.jpg'/></a></div>
<h3 class='fp-title'><a href='featured-post-1-url-here'>This is default featured post 1 title</a></h3>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
 <div class='fp-post'>
<div class='fp-thumbnail'><a href='featured-post-2-url-here'>
<img src='http://3.bp.blogspot.com/-b417sgFQ7dE/Tla6R8a5yxI/AAAAAAAABcw/QlF1X6lK8g0/s000/2.
jpg'/></a></div>
<h3 class='fp-title'><a href='featured-post-2-url-here'>This is default featured post 2 title</a></h3>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
 <div class='fp-post'>
<div class='fp-thumbnail'><a href='featured-post-3-url-here'>
<img src='http://3.bp.blogspot.com/-QunQPccRUYg/Tla6SNYcApI/AAAAAAAABc0/0ZseXqo_QzM/s000/3.
jpg'/></a></div>
<h3 class='fp-title'><a href='featured-post-3-url-here'>This is default featured post 3 title</a></h3>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='featured-post-4-url-here'>
<img src='http://2.bp.blogspot.com/-o1hmZxj4lZE/Tla6TISLpYI/AAAAAAAABc4/ePJYN3A06Y4/s000/4.
jpg'/></a></div>
<h3 class='fp-title'><a href='featured-post-4-url-here'>This is default featured post 4 title</a></h3>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>

<div class='fp-post'>
<div class='fp-thumbnail'><a href='featured-post-5-url-here'>
<img src='http://1.bp.blogspot.com/-ruvbgcZGais/Tla6TQkI1aI/AAAAAAAABc8/j0U1a_i4RX0/s000/5.
jpg'/></a></div>
<h3 class='fp-title'><a href='featured-post-5-url-here'>This is default featured post 5 title</a></h3>
<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>
</div>
 </div>           
 <div class='fp-nav clearfix'>
<span class='fp-pager'/>                
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
          
</div>
 </b:if></b:if>
 <!-- Featured Content Slider End -->

5. Kemudian hapus kode tersebut lalu save.

Gimana mudah kan,selamat mencoba.

Cara lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Salam hangat buat sobat semuanya,kita jumpa lagi dalam artikel baru saya yaitu Cara Membuat Efek Lipatan Kertas Pada Halaman Blog,meski ini artikel sudah banyak di bahas di blog lain namun tidak ada salahnya saya posting kembali karena artikel ini agak sedikit menarik untuk di coba di pasang pada blog sobat,efek lipatan buku ini lumayan gampang jika sobat tidak mengganti url gambar nya,tapi jika mengganti gambarnya lumayan sedikit ribet,tapi tenang aja sob saya kasih tutorialnya.

Buat sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini.

1. Seperti biasa login dulu sob.
2. Pilih menu Template dan pilih Edit HTML.
3. Cari kode </body>,gunakan CTRL+F untuk memudahkan pencarian.
4. Letakan scrip di bawah ini tepat di atas kode </body>

<script type='text/javascript'>var tujuan =&#39;http://hansmjlkcommunity.blogspot.com&#39;</script>
<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

Catatan : Script di atas adalah scrip bawaan dari KTB,sobat tinggal mengganti yang berwarna merah dengan URL blog sobat.

Namun jika sobat ingin merubahnya dengan tampilan gambar sobat seperti yang ada pada blog saya tinggal ikuti langkahnya berikut ini :

Download dulu scriptnya disini.

kemudian siapkan dua buah gambar

- untuk gambar kecil (lipatan tertutup)ukurannya 80 x 80 resolution 72 (file harus berbentuk JPG)

- untuk gambar besar (lipatan terbuka) ukurannya 502 x 480 resolution 72 (file harus berbentuk PNG)

ini bermakasud supaya hasil gambar nya maximal sesuai dengan gambar aslinya.

Setelah gambarnya siap kemudian sobat upload ke google code

Setelah sobat upload gambarnya kemudian buka script yang di download tadi dan ganti kata


https://hanmjlkcommunity.googlecode.com/files/hansmjlkcommunitykcl%20copy.JPG
ganti dengan URL gambar kecil yang sobat uplaod

https://hanmjlkcommunity.googlecode.com/files/hansmjlkcommunitybr.PNG
ganti dengan URL gambar besar yang sobat uplaod


Setelah semuanya di ganti kemudian save.txt dan upload kembali script yang sudah sobat edit,copy link nya,dan ganti tulisan yang berwarna hijau di bawah dengan link tersebut

<script type='text/javascript'>var tujuan =&#39;http://URL blog sobat&#39;</script>
<script src='http://URL script sobat' type='text/javascript'/>
  

  

Kemudian script tersebut letakan di atas kode </body>

Terakhir pratinjau dulu,sekiranya sukses langsung save.

gimana mudah kan,pasti lumayan pusing yah...heheheheheh,selamat mencoba sob moga berhasil.

Cara Lengkap Membuat Text Area Di Blog

Cara Lengap Membuat Text Area Di Blog,perlu sobat ketahui text area mempunyai fungsi yang sangat lumayan penting dalam pembuatan artikel khususnya buat suatu kalimat yang ingin di tonjolkan kepada pembaca,atau bisa juga di pakai dalam pembuatan artikel untuk menyimpan data script yang panjang maka text area bisa di gunakan demi menghemat halaman.

Banyak jenis text area yang bisa kalian gunakan sesuai keinginan kalian sendiri,namun pada dasarnya text area hampir semuanya mirip sama yang akan saya bahas pada kali ini,sangat mudah sekali jika kalian ingin mencoba Cara Lengkap Membuat Text Area Di blog hanya dengan memainkan kode HTML.

Nah buat kalian yang ingin mencobanya silahkan perhatikan langkah langkahnya yang akan saya berikan secara detail dan jelas.

* Text Area Biasa
Text area biasa bisa sobat gunakan dalam menyimpan text tertentu seperti scrip HTML

dan bila penulisan kalimat sangat panjang maka secara otomatis dia akan membentuk kolom scroll.namun sobat harus memainkan mouse nya bila ingin mengcopy nya dengan menarik blog nya dari atas ke bawah atau sebaliknya.
Untuk menggunakan text area biasa gunakan scrip di bawah ini.

<p align="center"><textarea name="mytextarea" rows="3" cols="60" readonly="">SILAHKAN ISIKAN KONTEN KAMU DISINI</textarea></p>

Hasilnya seperti ini

Demo

* Text Area Hightlight

Text area hightlight atau Copy All sudah tidak asing lagi buat para blogger kelebihannya text area ini secara otomatis akan memblok semua isi tulisan atau yang lainnya yang ada di dalamnya hanya dengan cukup menekan tombol Hightlight atau Copy All maka dengan demikian Hightlight cukup praktis kelihatannya.

Untuk text area hightlight gunakan scrip di bawah ini.

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();
this.form.txt.select();" type="button" value="Copy All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 400px; HEIGHT: 200px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">Masukkan text yang diinginkan di sini. Jika terlalu panjang akan muncul scroll untuk membantu anda membaca keseluruhan teks</textarea></p></div></form>

Dan hasilnya seperti ini

Demo

Cara menggunakan script text area

Kalian cukup mengcopy script di atas dan pastekan pada HTML ketika proses pembuatan artikel berlangsung.

Demikian tutorial kali ini tentang Cara Lengkap Membuat Text area Di Blog yang bisa saya sampaikan semoga dapat sedikit membantu buat kalian yang sedang membutuhkannya,dan saya ucapkan terima kasih atas kunjungannya.

Cara Merubah Jenis Font Judul Postingan

Salam sejahtera,jumpa lagi bareng hansmjlkcommunity,kali ini saya akan coba buat artikel cara merubah hurup pada judul postingan,karena mengingat sudah banyaknya template yang siap pake namun kadang merasa tidak nyaman karena rata tara pada template yang sudah siap pake kebanyakan menggunakan hurup besar khususnya pada judul postingan,oleh karena itu sekarang saya akan coba buat solusinya untuk merubah hurup tersebut sesuai keinginan sobat.
Ada tiga cara yang akan saya kasihkan yaitu :
* Cara merubah ukuran hurup
* Cara Merubah nama hurup
* Cara merubah hurup menjadi
   - Hurup besar semua
   - Hurup kecil semua
   - hurup besar pada awal kalimat

bagi sobat yang berminat mengotak ngatik hurup pada judul postingan silahkan ikuti tutorailnya di bawah ini.

* Pastikan anda sudah login ke akun sobat.
* Pilih menu Template / Rancangan > Edit HTML.
* Cari kode #content h3 { sebagai patokan

* Cara merubah ukuran hurup

Untuk merubah ukuran hurup cari kata font-size: 20px; di bawah kode #content h3 {
Ganti ukuran 20px; sesuai selera sobat
contoh : font-size: 15px;    font-size: 18px;    font-size: 25px;

Catatan : semakin besar ukuran font-size nya maka akan semakin besar pula hurupnya,begitupun sebaliknya. 



* Cara merubah nama hurup

Untuk merubah nama hurup silahkan cari kata
font-family:Arial, Helvetica, sans-serif; (misalnya), di bawah kode #content h3 {
Lalu ganti hurup Arial dalam hal ini sesuai selera sobat misalkan:

- font-family:Georgia, Helvetica, sans-serif;

- font-family:Trebuchet MS, Times New Roman, sans-serif;



* Cara merubah hurup

Di bawah kode  #content h3 { ada kode

- text-transform: uppercase;
- text-transform: lowercase;
- text-transform: capitalize;

Selanjutnya ganti kata upercase,lowercase,capitalize sesuai jenis hurup yang sobat mau.

keterangan :

UPPERCASE  = (hurup besar semua)

lowercase  = (hurup kecil semua)

Capitalize = (hurup besar pada setiap awal kata)

Terakhir sebelum di simpan pratinjau dulu,kalau sudah merasa pas langsung saja save


Semoga berhasil................

Cara Membuat Link Bergoyang Di Blog

Terus berkreasi dan mencari kekurangannya mungkin itu tujuan sobat semuanya dalam membenahi tampilan blognya,sebelumnya saya sempat memberikan tutorial untuk mempercantik tampilan blog sobat seperti Cara membuat efek salju di blog,cara membuat burung terbang di blod dan banyak lagi yang lainnnya,kini giliran saya membuat artikel tentang cara membuat tampilan link bergoyang.Mungkin sebelumnya sobat sempat melihat di blog yang lain tentang tampilan ini,namun tidak ada salahnya saya paparkan kembali tutorialnya mungkin ada sobat yang berminat silahkan ikuti tutorialnya di bawah ini

1. Seperti biasa langkah pertama login dulu ke akun blog sobat.
2. Kemudian pilih menu > Template.
3. Pilih edit html dan centang expand template widget.
4. Kemudian cari kode </head> untuk mempermudah pencarian  tekan CTRL+F.
5. Copy kode dibawah ini lalu simpan tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

6. Kemudian SaveTemplate dan lihat hasilnya


Demikianlah tutorial kali ini mohon maap bila kurang sempurna,dan saya ucapkan banyak terima kasih.

Cara Membuat Tombol Spoiler Pada Postingan Blog

Salam hangat.kita jumpa lagi masih bersama hansjlkcommunity,pada kesempatan ini saya akan sedikit mengulas tentang Cara Membuat Tombol Spoiler Pada Postingan Blog,tombol spoiler cukup penting di gunakan selain untuk sedikit bergaya juga bisa di gunakan untuk pembuatan artikel panjang karena dengan menggunakan tombol spoiler akan menghemat halaman posting,dalam artian lain spoiler berfungsi untuk menyembunyikan suatu artikel dengan sistem buka tutup,jadi pada intinya dengan kita membuak tombol spoiler maka secara otomatis halaman dari spoiler itu terbuka begitupun sebaliknya gimana sobat mau mencobanya gak....?

Baiklah buat sobat yang ingin mencoba Cara Membuat Tombol Spoiler Pada Postingan Blog bisa kalian gunakan script di bawah ini.


Catatan : Dalam penggunaan tombol spoiler ini kalian copy scriptnya dan pastekan pada HTML bukan Compase ya...awas jangan sampai salah.

<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Silahkan letakan kalimat atau HTML disini
</div>
</div>
</div>

Maka hasilnya akan seperti ini :

Silahkan Letakan kalimat / HTML sobat disini

Gimana mudah bukan.......?

Itulah sedikit ulasan dari saya seputar Cara Membuat Tombol Spoiler Pada Postingan Blog semoga dapat bermanpaat dan saya ucapkan terima kasih atas kunjungannya.

Silahkan Letakan kalimat / HTML sobat disini

Cara Mempercantik Tampilan Popular Post Di Blogspot

Assalamualaikum...gimana kabarnya sobat..? kita jumpa lagi masih bersama hansmjlkcommunity yang tidak ada bosan nya berbagi tutorial.pada kesempatan ini saya akan sedikit mengulas tentang cara mempercantik tampilan popular post di blogspot,memang banyak ragam tampilan popular post yang sudah tampil dalam blog dan bahkan jauh lebih menarik dari yang ini,namun tidak ada salahnya saya berbagi,bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini.

* Pertama pasang dulu popular postnya di blog sobat dengan cara

Buka blog sobat pilih menu Tata Letak kemudian Tambah Gadget pilih Popular Post / Entri Popular,untuk cara setingnya ikuti gambat di bawah ini.

* Langkah kedua kita menambahkan kode css nya,caranya :

Buka menu kemudian pilih Template > Edit HTML,kemudian cari kode ]]></b:skin>
gunakan CTRL+F untuk mempermudah pencarian kode,lalu pastekan kode CSS nya tepat di atas kode ]]><b/skin>

 Pilih kode CSS nya di bawah ini sesuai selera sobat.


Popular post 1

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Populra post 2

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Popular post 3

/*---  Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;}.popular-posts ul li:hover {
    border:1px solid #6BB5FF;
    }.popular-posts ul li a:hover {
    text-decoration:none;
    }

Setelah semuanya beres silahkan sobat save dan lihat hasilnya.


Demikian tutorial kali ini terima kasih atas partisipasinya.

Cara Membuat Menu Slide Indah Di Atas Header

Semakin pesatnya perubahan demi perubahan dalam tampilan blog guna memberikan kenyamanan dan kepuasan,seperti Cssscrollbar,Css reflect,cara membuat tabel dengan Css dan banyak lagi,memang saya akui pena,pilannya memberikan kepuasan degan tampilan yang penuh efek,untuk itu pada kesempatan ini saya akan sedikit berbagi dengan sobat yaitu Cara Membuat menu slid Dengan Css di blog,maksud dari menu slid yaitu ketika buka halam blog maka secara otomatis tabel menu akan hadir dari arah kanan menuju ke tengah,untuk lebih jelasnya silahkan sobat coba dan ikuti tutorialnya di bawah ini.

1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode ]]></b:skin>.

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:#8e8f91; 
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 #1e1d1d transparent; 
} 
ul#navigation li:nth-child(1) a { 
background-image:url(http://3.bp.blogspot.com/-8WwZdGaZDF8/
T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png); 
} 
ul#navigation li:nth-child(2) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8G7eBRcOsnpJo9_qfdVk1bMYV2xsqViszuqPxRmRFZyoyOr96-Q5BnUiLsWcV60kMUVJyaeIJtyqjFTaYATopyEwHcxn2jeOAiGBCPqfi8eywC_Z_vtIR3GQ-c_8rxsAu_AStfT412yg/
s1600/user.png); 
} 
ul#navigation li:nth-child(3) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTEv8uITJF8GgNlItHnlXIEvx4FmC_1GyWargi1-Nk3SZn3YNodL9AX7r9E0ySBCgKqRgLEVGWkL00_Y3f_WzdP9F3yHEstlY6DRqqYrDwQPrOkRC16mONVLpgxBJsu6hm5ufsx9x4n5A/
s1600/mail.png); 
} 
ul#navigation li:nth-child(4) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYz32YEFPfofx144FDEUBrPw3hyphenhyphenuO3nO9Ve1ArJKHVuMNep3lryAkV9s2Qw7lliF7SvbZIoppUwyCSsaSRO8PsOxC86-TfREDaBoNDHKsz6IqBdZAQNSkX5asw3XjSetnigl0rdCk2Gzc/
s1600/rss.png); 
} ul#navigation li:nth-child(5) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeGD_tXkIqusTfF_e82IFPSetxZF8yJO3E7pPLVTq9iBmhGdxydxt2pDKFdnhRm1AQUJimgWFwAOCy2famMyYDnVieeHDtQroDb5rnSiI-hOzmrsaxd3cfmDE3KBscYpqxofW0oXHnig/
s1600/link.png); 
} 
ul#navigation li:nth-child(6) a { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq07Ga45oy5uGZBO595Zt6iCiDzL5VTtMlfOpLObQjdjcE583tyvfojSoBXuh2ICasa2i4bNvg06h2LA5b1kz72aKAwQq4W4kb6YkBWe8s85fiNtk_Ilr2RcWp7GKSPNvTggsN56LSKIg/
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;} 
}

5.Kemudian cari lagi kode </body> dan pastekan kode Css di bawah ini tepat di atas kode </body>

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>

6. Kemudian Simpan Template.

Tutorial tentang cara membuat menu slide indah di atas header sudah selesai sekarng sobat lihat hasilnya.

Terima kasih atas partisipasinya dan jangan bosan ya berkunjung ke blog saya ini.