1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/* scroll
----------------------------------------------- */
.scrollboxs{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFm_pcX4B0lNw5_WeoD2VZIpL3bquQhfoHNcdFBjIBcpNJ6IMrNQTr9ZAG45sd4y3BinGRS0qVmEfeBny0LQXXsCrvb29cQ5wgoeZkneH6H-O_GzszmzBRb-QA5frQHMlep-A0Rix8NDQ/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 3px 3px 5px #000000;
-moz-box-shadow: 3px 3px 5px #000000;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
.scrollboxs a, .scroll:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx077nn2jyrebQXqzmaUE7QtdS9SkNzV8HbupLgTxX0I4I_77XJnF3PYnS0niNS4-POTB2QaIvUnmQGP34Nq3BhS89pwJeVUTaC3NCHtYwUqNn3sJiocRewv3ujftbFyAwRHec04AXAjp4/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-box-shadow: 3px 3px 5px #2E2E2E;
-moz-box-shadow: 3px 3px 5px #2E2E2E;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
Untuk ukuran Height ,Width dan lainnya silahkan sesuaikan dengan keinginan kawan-kawan,
simpan template...
selanjutnya cara pemanggilannya pada Html atau pada edit html Posting:
<div class"scrollboxs">
Teks Yang ingin disimpan pada scroll box</div>
Selamat mencoba
Cara Membuat Scroll Box dengan Background Kertas
Pure CSS Fish Eye Menu
kali ni saya akan membahas pure CSS Fish Eye,fish eye atau yang kita kenal dengan mata ikan.
mata ikan disini bukan berarti kita membuat menu dengan mata ikan ya...hehehe
tapi kita akan membuat suatu menu yang apabila kursor kita dekatkan maka menu tersebut akan membesar.
Cara membuatnya:
1. Seperti biasa Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/*----------------
Pure CSS Fish Eye Menu Expand Down
-------------------------------*/
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:150px;
width:500px;
margin-bottom:30px;
}
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px;
height:50px;
border:none;
}
.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
.expand-down ul li:hover a img {
width:100px;
height:100px;
}
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}
4. jangan lupa disave
5. Pemanggilannya pada html silahkan disimpan di tempat yang diinginkan pada edit html posting ataupun Gadget Html/java script:
<div class="expand-down">
<ul class="expand-down">
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq98czxv0x2Duh_71mB23fqMn4jasFdtgr-S4c79YRJLDoUewvwQQ2JQoH47N2AqvEeoyDzWjLJqns8Brd_bmXaEmbsfGi_t-LYdjIKxmcT5UFekPG9gdB9b2oQ-nGQ97HFG7uiwmdKk/s1600/safari-trans.png"/>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsmLxn3Vxejt9GNnxJRAQI7d1ovoQR_rgmCFbvo2OqPZ0-qMT_8G-dwL808V8EQvCnyKu2CUe47ooxne-rvvNhMU2kUaSRtJu83ShSbr7-EQK5qvIOI1p8lPGjoqqN-ak2EfImoWVi7U/s1600/firefox-trans.png"/>
</a>
</li>
<li>
<a href="#"target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6awS-vbuGSvDi19sOc5xlTpYZ9UWWsWAAIDfVWP4IevivU1wZ_bJGsyf8uSr2-FBcJ1fBemIapO1pdROq3eFdKvnMYYsK1joLwrgzw5HzMjFrSXcWNJA8iR2U7l4DE3p3TQGevtRyxjs/s1600/google-chrome-trans.png" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIevKHDfZsqaVQFP0jkojeRKg_w_aLj73_kmxAJlX-tHGk9oB67seu7aqnpT-rplDcqu6uB1ENytBG2gezIG4Fj8MKlIt9zh67r1dGoYrXMQPSVxJtP1d8tYeCPoE9CECcuczfWNBu6YM/s1600/ie-trans.png"/>
</a>
</li>
<li>
<a href="#" title="Konqueror" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbLPlLhvKjd311RQmGrT02kNx92rlwkloUKnF8tij9f3evTPtM86WOlFhXWSSe2n2gjKURUxpSmx6Fez2NuPZ5XBVQDR6NZilZ5Ui45QiDmefCSR1T-J6pT14ApdatU1H8m6SGorOAVw/s1600/konqueror-trans.png" />
</a>
</li>
</ul>
</div>
Selesai...
Selamat mencoba
CSS3 Dropdown Menu
kali ini saya akan membahas sebuah menu yang berguir kebawah atau dropdown dengan CSS3,mungkin para blogger pernah melihat blog seseorang yang menggunakan dropdown menu atau menu yang bergulir kebawah...
ok langsung saja
1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
/*----------------
CSS3 DropDown Menu
-------------------------------*/
#navcss {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#navcss li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#navcss a {
font-weight: bold;
color: #000;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#navcss a:hover {
background: #000;
color: #000;
}
/* main level link hover */
#navcss .current a, #navcss li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -40px;
color: #000;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#navcss ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#navcss ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #000 !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#navcss li:hover > ul {
display: block;
}
/* level 2 list */
#navcss ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJxQK0cgOh7SdJsKroMp6nh5j6RtugZ5SwRIflzRtNjrj_8Z-PTuU53Yr3RaflRY2YXhdSuqWjvYu6ajpSyI1_2saIitWHufbdGf8p1FFoedgNBa_Zpo_weYWqI-GZM6Sq7uNRpAj2uI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#navcss ul li {
float: none;
margin: 0;
padding: 0;
}
#navcss ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#navcss ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#navcss ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#navcss ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#navcss:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#navcss {
display: inline-block;
}
4. Simpan Kode berikut di bawah kode Head-nav(sesuai template) :
<ul id="navcss">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">My Projects</a>
<ul>
<li><a href="#">N.Design Studio</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Designer Wall</a>
<ul>
<li><a href="#">Design Job Wall</a></li>
</ul>
</li>
<li><a href="#">IconDock</a></li>
<li><a href="#">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Simpan template.......... selamat mencoba
