Cara Membuat Gambar di Header Bergeser
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
Tag :
CSS Tricks,
Cara Membuat Label Keren dengan CSS3 Count Label
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='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"label-size label-size-" + 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='"widget-content " + data:display + "-label-widget-content"'><b:if cond='data:display == "list"'><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='"label-size label-size-" + 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
Tag :
CSS Tricks,
Cara Membuat Tempat Banner Keren di Header Blog
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
Tag :
CSS Tricks,
Cara Membuat Readmore Otomatis di Blog
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 = "no-float";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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><b>Readmore</b> → <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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
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 = "no-float";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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><b>Readmore</b> → <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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
Tag :
HTML Tricks,
Cara Membuat Lingkaran Berputar di Blog
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
Tag :
CSS Tricks,
Cara Membuat Tombol To TOP di Blog
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
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
Tag :
CSS Tricks,
Cara Membuat Backlink Keren dengan CSS
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 == "item"'>
<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='" [URL=" + data:post.url + "]" + data:post.title + "[/URL] www.cheatermaninjau.net"' 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
Tag :
CSS Tricks,
Cara Membuat Link Shadow saat Disentuh Mouse
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.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
Tag :
CSS Tricks,
Cara Membuat Headlines di Header Blog
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&alt=json-in-script&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
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&alt=json-in-script&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
Tag :
CSS Tricks,
Cara Membuat Efek Keyframe Gerak dengan CSS
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.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
Tag :
CSS Tricks,
Cara Membuat CSS Border Triangle
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:
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:
2. Menghilangkan sebagian atau semua Border color
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :
Dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :
Dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :
.coba2 {
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color: black black black transparent;
}
Juga seperti ini tinggal kreasikan pemilihan warna dan transparent-nya.
.coba3 {
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color: #fc0 #fc0 transparent #fc0;
}
Tag :
CSS Tricks,
Cara Membuat Banner Slider di Blog
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
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
Tag :
CSS Tricks,
