Sunday, November 15, 2015
Thursday, November 12, 2015
Membuat Scroll Box (Kotak Gulung)
Masukkan Tulisan atau teks sobat disini:
sdfsfs dgdg
dfgdg
gdfgd
gdfg
gdfg
gdfg
gdgd
gdfg
gdgd
gdfg
gdgd
sdfsfs dgdg
dfgdg
gdfgd
gdfg
gdfg
gdfg
gdgd
gdfg
gdgd
gdfg
gdgd
Friday, November 6, 2015
Cara Membuat Menu Slide Indah Di Atas Header
Langkah-langkahnya adalah sebagai berikut:
1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode ]]></b:skin>.
6. Kemudian Simpan Template, (selesai dan lihat hasil tampilan blog)
.
1.Seperti biasa login dulu ke blog sobat
2.Kemudian pilih menu Template > Edit HTML.
3.Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan dalam pencarian kode tersebut)
4.Setelah ketemu letakan kode Css di bawah ini tepat di atas kode ]]></b:skin>.
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}
ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#8e8f91;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #1e1d1d transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(http://3.bp.blogspot.com/-8WwZdGaZDF8/
T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXueuvVNWc3YPe73iNgX36OeNJ8lL3SU4cJvkMYaMdLlgllwD-BdcauqpTOBzWOaqqd-YsdI0qr-lYZVZGkDHjryejVYQEO5XH4OM3Kab7SFrZz5IVRAk1991eNceAOoR7jbPLQYkp99A/
s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRj0cGXx_t856SvbOts6Bl24soiOmlPa2u_yHXtto9sTdXbmsxvFbolzBg2YI4kuz-jrlR4t8BQ7tSS2KjO-QC1sSz7yIvK8JtVlFMj8wABSNmQ3glaEtWtW6jXVrcJrT3iQOo25qkz58/
s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5fNQfjyECiqQLCfRCjcfpZm4SRoPIyViHfdu_jg3LnLnazl6h3hdYLBL5AwA_ChLSzmBEohNVjm7zsWUwER4LNSh1qtJ4ChLd_YjRPRmQgCiYAOCQdbu1YXByE7dZFFn_zd3tNSAE7k/
s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrjPupOdKimRtJLGonei1p7OqddyaH37dv48AEzFBcWTlYdGFzwMn9qAlRiJTr5QQuef-rWOYVfNatW1_R1F7hCGqSsEkC29_f5YXMI-h9La-DIVeNZKU5BbaYlq3JIttSDkuDDys-WQ/
s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78Ymd_RFR1PLN1MrQFDL6z_m5NIcYST8pmXsQbGCn0b7xXJmtDsMryraoJBd5ec4XnnP03nBPqmtHQXXipMkqnpCGXQ69imlCcPmij3sEQbSBFvVTyxHs9hoJsE2sfn38xYoHD8aycB8/
s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
5.Kemudian cari lagi kode </body> dan pastekan kode Css di bawah ini tepat di atas kode </body>position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}
ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#8e8f91;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #1e1d1d transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(http://3.bp.blogspot.com/-8WwZdGaZDF8/
T1jCmIXy3YI/AAAAAAAAAgs/6YHfBmBXNcM/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXueuvVNWc3YPe73iNgX36OeNJ8lL3SU4cJvkMYaMdLlgllwD-BdcauqpTOBzWOaqqd-YsdI0qr-lYZVZGkDHjryejVYQEO5XH4OM3Kab7SFrZz5IVRAk1991eNceAOoR7jbPLQYkp99A/
s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRj0cGXx_t856SvbOts6Bl24soiOmlPa2u_yHXtto9sTdXbmsxvFbolzBg2YI4kuz-jrlR4t8BQ7tSS2KjO-QC1sSz7yIvK8JtVlFMj8wABSNmQ3glaEtWtW6jXVrcJrT3iQOo25qkz58/
s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5fNQfjyECiqQLCfRCjcfpZm4SRoPIyViHfdu_jg3LnLnazl6h3hdYLBL5AwA_ChLSzmBEohNVjm7zsWUwER4LNSh1qtJ4ChLd_YjRPRmQgCiYAOCQdbu1YXByE7dZFFn_zd3tNSAE7k/
s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrjPupOdKimRtJLGonei1p7OqddyaH37dv48AEzFBcWTlYdGFzwMn9qAlRiJTr5QQuef-rWOYVfNatW1_R1F7hCGqSsEkC29_f5YXMI-h9La-DIVeNZKU5BbaYlq3JIttSDkuDDys-WQ/
s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78Ymd_RFR1PLN1MrQFDL6z_m5NIcYST8pmXsQbGCn0b7xXJmtDsMryraoJBd5ec4XnnP03nBPqmtHQXXipMkqnpCGXQ69imlCcPmij3sEQbSBFvVTyxHs9hoJsE2sfn38xYoHD8aycB8/
s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>Blogging</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Windows</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Internet</a></li>
</ul>
6. Kemudian Simpan Template, (selesai dan lihat hasil tampilan blog)
.










