Welcome!

1. Masuk ke edit HTML kemudian centang Expand Template Widget

2. Letakkan kode ini diatas ]]></b:skin>
div.Kode {
background: url("URL Gambar") no-repeat ;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:300px;
position:absolute;
height: 200px;
width: 277px;
}

#header-wrapper:hover .Kode {
margin-left:490px;
opacity:0;
}

div.Kode1 {
background: url("URL Gambar") no-repeat;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:405px;
position:absolute;
height: 200px;
width: 277px;
opacity:0;
}

#header-wrapper:hover .Kode1 {
margin-left:490px;
opacity:1;
}

3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>
<div class='Kode'/>
<div class='Kode1'/>

4. Pratinjau dulu sebelum di save

Edit by KODE
Sumber

Cara memasang Label pada blog :
1. Masuk dasbor kemudian pilih tata letak

2. Tambah Gadegt pada bagian sidebar atau footer atau yang lainnya

3. Pilih widget label blogger dan tambahkan

4. Pengaturan pada widget label : centang pada Tampilkan Jumlah Entri Per Label

5. Simpan
 
Next :
1. Masuk ke edit HTML kemudian centang Expand Template Widget

2. Cari id widget Label atau code mirip seperti di bawah ini
 
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
 
</b:includable>
</b:widget>

Perhatikan:
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
 
Hapus semua pada bagian ini.
 
</b:includable>
 </b:widget>

3. Jika sudah di hapus masukan code di bawah ini pada bagian yang di hapus tadi:
 
<b:if cond='data:title'><h2><data:title/></h2></b:if><div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'><b:if cond='data:display == &quot;list&quot;'><ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul><b:else/><b:loop values='data:labels' var='label'><span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'><b:if cond='data:blog.url == data:label.url'><span expr:dir='data:blog.languageDirection'><data:label.name/></span><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></b:if><b:if cond='data:showFreqNumbers'><span class='label-count' dir='ltr'>(<data:label.count/>)</span></b:if></span></b:loop></b:if></div>

4. Lalu letakkan code di bawah ini diatas kode ]]></b:skin>
 
.sidebar ul li {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswcSF3mVOF6xjYZ1uUI8_V6nrsl2GeU4GCO3rmJ0vi8Io0X-56HzBut0rNN4DM2pbK06CESvVt1i-icnbF8nhNEHDWJ9_U-keNUPsJe6XUbrZRckPutuEwa5mBA7YJcogCyaXtRqJqBY9/s1600/icon-new-window.png) no-repeat left center;list-style-type:none;margin:0 0 5px;padding-left:20px;transition:padding 0.26s ease;-moz-transition:padding 0.26s ease;-webkit-transition:padding 0.26s ease;}

.sidebar ul li:hover {padding-left:23px;}

.sidebar ul li:hover span.label-count {opacity:0.5;margin-left:10px;}

span.label-count {background:#cc0000;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0 10px 10px 0;color:#000;height:auto;margin-left:50px;opacity:0;position:relative;text-align:center;width:auto;padding:2px 8px;transition:all 0.3s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;}

span.label-count:before {content:"";width:0;height:0;position:absolute;right:100%;top:0;border-width:10px;border-style:solid;border-color:transparent #cc0000 transparent transparent;}

5. Pratinjau dulu sebelum di save

Sumber

1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>
 
.Kode {position: absolute;right: 190px;width: 178px;height: 33px;top: 150px;background: #000;z-index: 9;padding: 2px;padding-top:4px;padding-left:4px;border-radius: 5px 5px 1px 5px;border: 2px solid #494949;}

.Kode:before{content: "";position: absolute;bottom: -11px;left: 162px;border-width: 10px 25px 0px 0px;border-style: solid;border-color: #484848 transparent;display: block;width: 0;}

3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>
 
<div class='Kode'>
<a href="URL Blog" onmouseover="window.location=this.href"><img src="URL Gambar" height="31" width="88" title="KLIK DISINI"/></a>
</div>

4. Pratinjau dulu sebelum di save

Edit by KODE
Sumber

Langkah-Langkah:
1.Login Blogger » Template » Edit HTML » Expand Widget Templates
2.Cari Code </head>
3.Copy/Paste kode dibawah ini tepat diatas kode tadi

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot;;summary_noimg = 260;summary_img = 250;img_thumb_height = 95;img_thumb_width = 95;</script><script type='text/javascript'>//<![CDATA[ function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1) {var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx = s.join("")}chop = (chop <strx.length-1) ? chop:strx.length-2;while(strx.charAt(chop-1)!=' ' &&strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1){imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img src="'+img[0].src+'"width="'+img_thumb_width+'px"height="'+img_thumb_height+'px"/></span>';summ = summary_img}var summary = imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML = summary}//]]></script>

4.Kemudian Cari Kode <data:post.body/>
 
5. Ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><b>Readmore</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 

6. Simpan, dan lihatlah hasilnya

INFO:
260 : Tinggi postingan tanpa gambar
250 : Tinggi postingan dengan gambar
95 : tinggi gambar
95 : lebar gamba

Sumber

Berikut adalah caranya :
Pertama, masuk ke Dasboard blog kalian
Klik pilihan Template
Pilih Edit HTML
Jangan lupa centang 'Expand Template Widget'
Kemudian kalian masukan kode berikut di bawah kode ]]></b:skin> 

.putarx{margin-top:0px; margin-left:0px; width:98px; height:98px; float:left;} .putarx1{background-color:rgba(0,0,0,0); border:25px solid #fff; opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:190px; width:200px; height:200px; margin:0 auto; position:relative; top:-70px; -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear}@-moz-keyframes spin2Pulse{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} } @-webkit-keyframes spin2Pulse{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }  

Keterangan:
Kode berwarna BIRU adalah untuk mengatur letak Sharingan Berputar, silakan kalian atur sendiri
Kode berwarna HIJAU adalah untuk mengatur ukuran Sharingan Berputar, silakan kalian atur sendiri, Namun saya hanya akan memberikan gambar Sharingan berukuran 75px x 75px. Untuk ukuran lainnya silakan kalian cari gambar sendiri
Kode berwarna UNGU adalah untuk mengatur arah putaran Sharingan Berputar, 360deg untuk searah jarum jam, -360deg untuk berlawanan arah jarum jam 

Masih belum selesai. Masih di Edit HTML

Masukan kode berikut di bawah kode <header id='header-wrapper'> ( Sebenarnya bisa kalian letakkan dimana saja, asalkan tidak Error )
 
<div class='putarx'>
<div class='putarx1'/>
</div>
 
Terakhir, Save Template.

Sumber

Langkah-Langkah:
1. Login Blogger » Template » Edit HTML
2. Cari kode </head> dan pastekan kode dibawah ini tepat diatas kode tadi

<script src='http://bitxpjs.googlecode.com/files/To%20TOP%20BIT-XP.js' type='text/javascript'/> 

3. Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tadi

#bittop {
position:fixed;_position:relative;bottom:2px; right:2px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); } 

4. Cari code <body> dan ganti menjadi <body id='top'>
5. Klik Simpan, lalu masuk kemenu Layout » Tambah Gadget
6. Klik HTML/JavaScript dan pastekan kode dibawah ini

<div id='bittop'>
<a href='#top'>
<img alt='To TOP' src='http://images.findicons.com/files/icons/2152/snowish/128/go_top.png' border='0' /></a>
</div> 

7.Klik Simpan dan liatlah hasilnya

NB :
Warna biru : Ganti dengan URL gambar sobat atau Silahkan pilih gambar dibawah ini yang agan mau jika agan males design gambarnya:



http://images.findicons.com/files/icons/2152/snowish/128/go_top.png




http://images.findicons.com/files/icons/2127/ultimate_gnome/128/go_top.png

Sumber

Masuk Blogger --> Template --> Edit HTML --> Centang EXPAND TEMPLATE WIDGET
Pastekan CSS Di Bawah Ini Di Atas ]]></b:skin>

/* X-T CSS BackLinks */
#XTbacklinks{overflow:hidden;margin-top:5px;border:3px solid #0c00ff;border-radius:5px;height:50px;width:565px;-webkit-transition:all .4s ease-in-out}#XTbacklinks:hover{border:3px solid #0c00ff;height:235px;-webkit-transition:all .7s ease-in-out}.XTbkl{margin-top:3px;float:left;color:black;width:495px;border:1px solid #0c00ff;background:#fff;-moz-border-radius:3px;transition:all .9s ease-in-out}.XTbkl:hover{color:black;border:1px solid #0c00ff;background:#fff}#XTbacklinksTitle{border:3px solid #0c00ff;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 2px #000;color:#0c00ff;font-size:20px;font-familly:Arial;text-align:center;}

Sisanya Edit sendiri ya??

Lalu cari kode <data:post.body/> Dan Pastekan HTML ini Di bawahnya.
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='XTbacklinks' style='margin-top:30px;'>
<div id='XTbacklinksTitle'>
<a expr:href='data:post.url'><data:post.title/></a>
</div>
<div id='XTbacklinksTitle'>
Backlinks Please Thanks ^_^
</div>
<table border='0' height='140' style='margin-left:7px;' width='260'>
<tr><td>URL<br/><input class='XTbkl' expr:value='data:post.url' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>Code For Forum<br/><input class='XTbkl' expr:value='&quot; [URL=&quot; + data:post.url + &quot;]&quot; + data:post.title + &quot;[/URL] www.cheatermaninjau.net&quot;' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>HTML Code<br/><textarea class='XTbkl' onclick='this.focus();this.select();' readonly='readonly' style='height:18px;' title='Press CTRL+C to copy'><a expr:href='data:post.url' target='_blank'><data:post.title/></a></textarea></td></tr>
<tr><td><script src='#' type='text/javascript'/></td></tr>
</table>
</div>
</b:if>
 
Klik Simpan.

Sumber

Langkah-langkah: 
1.Masuk ke:

Untuk Dashboard Baru Masuk : Blogger » Edit HTML » Centang Expand Widget
Untuk Dashboard Lama Masuk : Blogger » Rancangan » Edit HTML » Centang Expand Widget 

2.Cari kode seperti dibawah ini

a:hover{color:#333; text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out;}

atau a:hover saja.

3.Ganti kode tersebut menjadi kode dibawah ini

a:hover{color:#FF0000;text-shadow: 0 0 0.5em #FFEE00,0 0 0.5em #FFEE00;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out;} 

4.Kemudian Simpan dan liat hasilnya

Keterangan:
1. Semakin banyak kode 0 0 0.5em #FFEE00 akan semakin tebal Shadow/Bayangan yang dikeluarkan contoh:

a:hover{color:#FF0000;text-shadow: 0 0 0.5em #FFEE00,0 0 0.5em #FFEE00,0 0 0.5em #FFEE00,0 0 0.5em #FFEE00;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

Sumber

1. Buka Dasbor Blog!
2. Buka Template --> Edit HTML
3. Cari kode "]]></b:skin>" ( Ctrl + F atau F3 Untuk mempermudah pencarian )
4. Letakkan kode CSS berikut tepat di atas kode "]]></b:skin>"

CSS :

#ACheadlines{
float: left;
margin-left: 60px;
width: 350px;
height: 200px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
background: #000;
margin-top: -200px;
padding: 3px;}
 
NB :
Edit-edit sendiri sesuai kebutuhan
 
5. Cari kode "header-wrapper" ( Ctrl + F atau F3 untuk mempermudah pencarian )
6. Letakkan kode HTML berikut tepat di atas kode "header-wrapper"


HTML :
 
<div id='ACheadlines'>
<b:section class=' ACheadlines1' id=' ACheadlines ' showaddelement='yes'/>
</div>
 
NB :
Sebenarnya kode HTML di atas bisa di letakkan di antara tag <body> dan </body> ( Asalkan tidak error )
 
7. Klik Simpan
8. Eitt!!! Belum selesai!!,
9. Buka Dasbor blog lagi --> Tata Letak --> Tambahkan Widget --> HTML/Javascript
10. Masukkan kode berikut di dalam kolom yang telah di sediakan!

<div style="overflow:auto; width:100%px; height:175px; padding:10px; border:0px solid #000000;">
<script src="https://chandra-yozers-comunity.googlecode.com/files/AC%20headlines.js"></script>
<script>var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://aryoz-comunity.blogspot.com.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script></div>
 
NB :
Kalimat yang berwarna merah : Ganti URL blog/web sobat
Kalimat yang berwarna orange : Jumlah postingan yang akan ditampilkan
Selebihnya bisa kalian edit-edit sendiri.
 
11. Klik simpan 
12. Selesai!

Edit by KODE
Sumber

Cara-caranya ikuti dibawah ini:
1.Masuk ke:  
Untuk Dashboard Baru Masuk : Blogger » Layout » Add Widget/Tambah Widget 
Untuk Dashboard Lama Masuk : Blogger » Rancangan » Layout » Add Widget/Tambah Widget 

2.Jika sudah mengklik Add Widget/Tambah Widget, pilih HTML/JavaScript.
 
3.Pastekan kode dibawah ini,, pilih salah satu yang kalian suka: 
1. Keyframe AtasBawah: yaitu animasi yang bergerak keatas dan kebawah
<style type="text/css">
#atasbawah
{
background:red;
width:100px;
height:100px;
font-size:20pt;
position:relative;
animation:atasbawah 2s infinite;
-moz-animation:atasbawah 2s infinite; /* Firefox */
-webkit-animation:atasbawah 2s infinite; /*Safari and Chrome*/
}
@keyframes atasbawah
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-moz-keyframes atasbawah /* Firefox */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-webkit-keyframes atasbawah /* Safari and Chrome */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
</style>
<div id='atasbawah'>Atas Bawah</div>
 
2. Keyframe Muter-Muter: yaitu animasi yang bergerak muter-muter
<style type="text/css">
#mutermuter
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mutermuter 5s infinite;
-moz-animation:mutermuter 5s infinite; /* Firefox */
-webkit-animation:mutermuter 5s infinite; /*Safari and Chrome*/
}
@keyframes mutermuter
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mutermuter /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mutermuter /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style><div id="mutermuter">
Muter Muter</div>
 
3. Keyframe Kiri-Kanan: yaitu animasi yang bergerak ke kiri dan ke kanan
<style type="text/css">
#kirikanan
{
width:100px;
height:100px;
font-size:20pt;
background:red;
position:relative;
animation:kirikanan 5s infinite;
-moz-animation:kirikanan 5s infinite; /* Firefox */
-webkit-animation:kirikanan 5s infinite; /*Safari and Chrome*/
}
@keyframes kirikanan
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-moz-keyframes kirikanan /* Firefox */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-webkit-keyframes kirikanan /* Safari and Chrome */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
</style>
<center><div id='kirikanan'>Kiri kanan</div></center>


Sumber

1. Pembentukan Triangle (Segitiga)

Bisa dilihat pada demo Div dibawah ini:



Div diatas terbentuk dengan css style dibawah ini:

.coba {
width:0px;
height:0px;
border-width:150px;
border-style:solid;
border-color: red green blue yellow;
}

Dengan kode html :

<div class="coba">
</div>

Untuk ukuran dari bordernya bisa kamu atur pada kode css border-width, jika belum mengerti pembentukan tampilan dari css triangle ini bisa di ilustrasikan dengan gambar dibawah ini:

Cara membuat banner slider di blog yang secara otomatis bergeser sendiri. OK. Langsung ke triknya. Pertama-tama yang harus dilakukan adalah login dulu ke Blogger --> Template --> Edit HTML.

Masukkan kode CSS ini di atas kode ]]></b:skin>

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}

Untuk kode HTML letakan diantara kode html / didalam <body> dan </body> (tergantung kamu mau diletakan dimana.)

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>


Note :

# : ganti dengan url/title sesukamu
urlgambar : ganti dengan url gambar sesukamu
 
Sumber

Cara membuat notifikasi sederhana di blog dengan CSS3. Untuk membuatnya seperti biasa Login dulu ke Blogger --> Template --> Edit HTML

Masukan kode CSS ini di atas kode ]]></b:skin>

#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

Sedangkan untuk kode HTML berikut ini letakkan di bawah kode <body>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>

Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>


Selesai dan hasilnya akan seperti ini.

Hai kawan-kawan kali ini saya akan share trick sederhana untuk loading blog dengan animasi. Trik ini dibuat dengan CSS3 Animation! Dan sudah saya siapkan beberapa animasinya agar sobat bisa memilih sendiri animasinya! Okeh langsung aja yok ke TKP!
A. Animation 1 (Bounce and Rotate efek) : 
Anda bisa lihat contohnya di sini
 
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-webkit-keyframes WAKloading{
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
} 

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s;

4.Sehingga nantinya jadi seperti ini :

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s;} 

5. Save Template!

B. Animation 2 (Earthquake Effect) : 
Bisa dilihat contohnya di sini
 
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-o-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-moz-keyframes WAKloading{
0%{opacity:1;-moz-transform:rotate(0deg);}
5%{opacity:1;-moz-transform:rotate(5deg);}
10%{opacity:1;-moz-transform:rotate(-5deg);}
15%{opacity:1;-moz-transform:rotate(5deg);}
20%{opacity:1;-moz-transform:rotate(-5deg);}
25%{opacity:1;-moz-transform:rotate(5deg);}
30%{opacity:1;-moz-transform:rotate(-5deg);}
35%{opacity:1;-moz-transform:rotate(-5deg);}
40%{opacity:1;-moz-transform:rotate(5deg);}
45%{opacity:1;-moz-transform:rotate(-5deg);}
50%{opacity:1;-moz-transform:rotate(5deg);}
55%{opacity:1;-moz-transform:rotate(-5deg);}
60%{opacity:1;-moz-transform:rotate(5deg);}
65%{opacity:1;-moz-transform:rotate(-5deg);}
70%{opacity:1;-moz-transform:rotate(5deg);}
80%{opacity:1;-moz-transform:rotate(-5deg);}
85%{opacity:1;-moz-transform:rotate(5deg);}
90%{opacity:1;-moz-transform:rotate(-5deg);}
95%{opacity:1;-moz-transform:rotate(5deg);}
35%{opacity:1;-moz-transform:rotate(0deg);}
} 

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s; 

4. Sehingga hasilnya nati jadi seperti ini :

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;} 

5. Save Template

C. Animation3 ( Sliding Effect ) : 
Bisa anda lihat di sini
 
Untuk Menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi :

@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WAKloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes WAKloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes WAKloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}} 

3. Cari kode #outer-wrapper kamu. Lalu sisipkan kode berikut kedalamnya!

animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s; 

4. Sehingga menjadi seperti ini :

#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;} 

5. Save Template

Sumber 

Hello, Kodelicious.
Disini aku ingin membahas 'Cara membuat FB Comment dan Blogger Comment Berdampingan'. OK. Langsung saja.
CSS ini cocok untuk template yang gelap-gelap. Tapi juga untuk template yang terang. Tinggal edit CSS-nya.

Pertama-tama Masuk ke Blogger --> Template --> Edit HTML

Bagi yang sudah pernah pasang :
1. Cari kode berikut :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments For Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Facebook Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger Comments</div>

2. Ganti kode yang berwarna merah dengan kode ini :

onmouseover

Bagi yang belum pernah pasang :
1. Cari kode berikut :

<div class='comments' id='comments'>

Notes : jika ada 2 kode, pilih yang kedua

2. Taruh kode berikut di bawah kode tersebut :

<div id='com-campur'>
<div class='comments-tab' id='fb-comments' onmouseover='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments For Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Facebook Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onmouseover='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Blogger Comments
</div></div><div class='clear'/>
</div><br/>
<div class='comments-page' id='fb-comments-page'><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments colorscheme='dark' expr:href='data:post.url' num_posts='2' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3. Kemudian letakkan kode berikut ini di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<meta content='willy.a.knight' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

4. Langkah terakhir, taruh kode berikut di atas kode ]]></b:skin>

#fb-comments-page {padding:5px;border:3px solid black;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/s1600/bg-home.jpg) repeat} #com-campur{margin-left:100px;}#comments.comments-page a{color:white} #comments.comments-page{color:white;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/s1600/bg-home.jpg) repeat}#blogger-comments-page{padding:0px 5px;display:none}.comments-tab{font-size:14px;color:white;float:left;padding:7px;margin-right:3px;margin-left:3px;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDz2ld7WP7ZVuSlItXjIMvl5w6hnZdaF0-o2WFn-BlxnRMXKfF0FtDaff2IqWJ9RsNp4BRSPeDQ0NuHOA1rGlgZON0Tdf6cvPN1Noqcmlrp70NCipZsymAZQy5G1MrhNgqa1-GIBEo1U/s1600/bg-home.jpg) repeat;border:5px solid black}.comments-tab-icon{height:14px;width:auto;margin-right:3px}.comments-tab:hover{border:5px solid blue}.inactive-select-tab{background-color:#d1d1d1}

5. Save Template. 

Notes :
* Biasakan sebelum mengedit template, backup dahulu template anda agar jika terjadi kesalahan bisa di kembalikan seperti semula.
* Panjang FB comment bisa diatur dengan sesukanya. bila template kamu berwarna putih, hapus aja kode ini colorscheme='dark'

Sumber

Cara membuat animasi loading di blogger/blogspot - Animasi loading ini berguna untuk memberikan efek memanipulasi terhadap blog agar terkesan lebih cepat.
 
OK. Langsung saja. Untuk membuat animasi loading ini, sangat mudah. 

Pertama-tama, masuk dulu ke Blogger --> Template --> Edit HTML --> Masukkan kode berikut ini diatas ]]></b:skin>
Sebelum itu, Back-Up dulu template kamu, khawatir Error!!

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian tambahkan jQuery berikut di atas kode </head>


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


Langkah terakhir, pasang Script berikut di atas tag </body>

<div id='loadhalaman'>
<div class='loadball'>
</div>
<div class='loadball-2'>
</div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Selesai. Silahkan lihat hasilnya.