Combined Post
Mag Posts
Combined Posts 2
Mag Post 2
2 Column Post
Simple Post
Simple Post 2
New Carousel
Video Posts
hallo bro, nih ane punya satu menu lagi, kalo mau dipasang diblog, seperti biasanya, tinggal copy script dibawah ini dan pastekan di html/java script brother. oke,
ini menu asli hanya css3 sama html aja, :D
Ane lagi males bikin box nye.. gkkakaka.. :D :D
<!DOCTYPE html>
<html>
<head>
<style>
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 5px 6px 0px 6px;
height: 31px;
line-height: 100%;
border-radius: 37px;
-webkit-border-radius: 37px;
-moz-border-radius: 37px;
box-shadow: 1px -6px 3px #666666;
-webkit-box-shadow: 1px -6px 3px #666666;
-moz-box-shadow: 1px -6px 3px #666666;
background: #8B8B8B;
border: solid 0px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: georgia;
font-style: normal;
font-size: 14px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
text-shadow: 1px -2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
background: #D4C5CA;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-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: 2px 0px 2px #1D1A26;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #80653E !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ECB6CD, endColorstr=#BA97B8);
background: -webkit-gradient(linear, left top, left bottom, from(#ECB6CD), to(#BA97B8)) !important;
background: -moz-linear-gradient(top, #ECB6CD, #BA97B8) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: dotted 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: -7px 2px 3px #222222;
-moz-box-shadow: -7px 2px 3px #222222;
box-shadow: -7px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:georgia;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
</style>
</head>
<body>
<ul id="menu-bar">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</a></li>
<li><a href="#">Products Sub Menu 2</a></li>
<li><a href="#">Products Sub Menu 3</a></li>
<li><a href="#">Products Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Sub Menu 1</a></li>
<li><a href="#">Services Sub Menu 2</a></li>
<li><a href="#">Services Sub Menu 3</a></li>
<li><a href="#">Services Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
ini menu asli hanya css3 sama html aja, :D
Ane lagi males bikin box nye.. gkkakaka.. :D :D
<!DOCTYPE html>
<html>
<head>
<style>
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 5px 6px 0px 6px;
height: 31px;
line-height: 100%;
border-radius: 37px;
-webkit-border-radius: 37px;
-moz-border-radius: 37px;
box-shadow: 1px -6px 3px #666666;
-webkit-box-shadow: 1px -6px 3px #666666;
-moz-box-shadow: 1px -6px 3px #666666;
background: #8B8B8B;
border: solid 0px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: georgia;
font-style: normal;
font-size: 14px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
text-shadow: 1px -2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
background: #D4C5CA;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-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: 2px 0px 2px #1D1A26;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #80653E !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ECB6CD, endColorstr=#BA97B8);
background: -webkit-gradient(linear, left top, left bottom, from(#ECB6CD), to(#BA97B8)) !important;
background: -moz-linear-gradient(top, #ECB6CD, #BA97B8) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: dotted 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: -7px 2px 3px #222222;
-moz-box-shadow: -7px 2px 3px #222222;
box-shadow: -7px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:georgia;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
</style>
</head>
<body>
<ul id="menu-bar">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</a></li>
<li><a href="#">Products Sub Menu 2</a></li>
<li><a href="#">Products Sub Menu 3</a></li>
<li><a href="#">Products Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Sub Menu 1</a></li>
<li><a href="#">Services Sub Menu 2</a></li>
<li><a href="#">Services Sub Menu 3</a></li>
<li><a href="#">Services Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
haloo sobat, neh, kali ini ane share cara pasang social menu share untuk blog sobat2 semuanya, untuk demo, liat aja dibagian atas gambar yang hampir mirip itu.. hehe, nah itu kira2 hasilnya, tapi untuk hasil yaa, yang sebenernya, sobat bisa liat kan gambarnya, kira2 seperti itu juga. :D :D
Oke, untuk memasangnya, sobat tinggal copy dan pastekan script dibawah ini ke bagian add gadget html/java script pada tataletak blog sobat, sebagai mana biasanya, semua tutorial pemasangan menu dalam blog ini gak ada yang sulit dan gak saya persulit, yahhh kalo sampe ngedit html segala macem takut sobatnya pusing atau males :D :D
<!doctype html>
<style>
.social{
max-width:300px;
}
.social li{
min-height:40px;
clear:both;
float:none;
margin-bottom:10px;
}
.social a{
color:#232323;
position:relative; /*jika ingin posisinya melayang, maka cukup ganti relative dengan fixed atau float-left*/
display:block;
line-height:40px;
padding-left:55px;
}
.social span{
display:block;
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3OGk56gOtvEJCmWPLcZJxxfxfL2ED6NCU9NvO8DywxURHXuBUgpcHRT14ido-7SwC1qO92klsLOvkpzLRD-9B-WQMtwMrxR9sWOF1zzsbWF7v3i_uEhdmbgoJsykKJBKPuacsg_W/s1600/social.png) no-repeat;
position:Absolute;
left:0;
border-radius:32px;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.social .facebook{
background-color:#2d309a;
}
.social .twitter{
background-color:#00FFFF;
background-position:0 -40px;
}
.social .pinterest{
background-color:#FF0000;
background-position:0 -80px;
}
.social .email{
background-color:#00FF00;
background-position:0 -120px;
}
.social .rss{
background-color:#ffba16;
background-position:0 -160px;
}
.social a{
z-index:1;
-moz-transition:color 0.4s ease;
-webkit-transition:color 0.4s ease;
-o-transition:color 0.4s ease;
transition:color 0.4s ease;
}
.social span{
z-index:-1;
opacity:0.8;
-moz-transition:opacity 0.4s ease,width 0.4s ease;
-webkit-transition:opacity 0.4s ease,width 0.4s ease;
-o-transition:opacity 0.4s ease,width 0.4s ease;
transition:opacity 0.4s ease,width 0.4s ease;
}
.social a:hover{
color:white;
text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
.social a:hover span{
width:300px; /*ini merupakan panjangnya slide hover sob, edit sendiri aja agar sesuai*/
opacity:1;
}
</style>
<ul class="social">
<li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>
</li>
<li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>
</li>
<li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>
</li>
<li><a href="#"><span class="email icon"></span>Send Us Email</a>
</li>
<li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>
</li>
</ul>
<style>
.social{
max-width:300px;
}
.social li{
min-height:40px;
clear:both;
float:none;
margin-bottom:10px;
}
.social a{
color:#232323;
position:relative; /*jika ingin posisinya melayang, maka cukup ganti relative dengan fixed atau float-left*/
display:block;
line-height:40px;
padding-left:55px;
}
.social span{
display:block;
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3OGk56gOtvEJCmWPLcZJxxfxfL2ED6NCU9NvO8DywxURHXuBUgpcHRT14ido-7SwC1qO92klsLOvkpzLRD-9B-WQMtwMrxR9sWOF1zzsbWF7v3i_uEhdmbgoJsykKJBKPuacsg_W/s1600/social.png) no-repeat;
position:Absolute;
left:0;
border-radius:32px;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.social .facebook{
background-color:#2d309a;
}
.social .twitter{
background-color:#00FFFF;
background-position:0 -40px;
}
.social .pinterest{
background-color:#FF0000;
background-position:0 -80px;
}
.social .email{
background-color:#00FF00;
background-position:0 -120px;
}
.social .rss{
background-color:#ffba16;
background-position:0 -160px;
}
.social a{
z-index:1;
-moz-transition:color 0.4s ease;
-webkit-transition:color 0.4s ease;
-o-transition:color 0.4s ease;
transition:color 0.4s ease;
}
.social span{
z-index:-1;
opacity:0.8;
-moz-transition:opacity 0.4s ease,width 0.4s ease;
-webkit-transition:opacity 0.4s ease,width 0.4s ease;
-o-transition:opacity 0.4s ease,width 0.4s ease;
transition:opacity 0.4s ease,width 0.4s ease;
}
.social a:hover{
color:white;
text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
.social a:hover span{
width:300px; /*ini merupakan panjangnya slide hover sob, edit sendiri aja agar sesuai*/
opacity:1;
}
</style>
<ul class="social">
<li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>
</li>
<li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>
</li>
<li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>
</li>
<li><a href="#"><span class="email icon"></span>Send Us Email</a>
</li>
<li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>
</li>
</ul>
Hmmm, bagaimana dengan script ini, sobat tertarik menggunakannya??, ya, script ini berfungsi menyapa sekaligus mengingatkan pengunjung yang yang dulunya pernah mengunjungi situs sobat, bisa sobat liat sapaan saya diatas? itu merupakan hasil kerja script yang ini.
oke, untuk penggunaanya, sobat hanya copy script dibawah ini dan letakan di bagian HTML pada postingan sobat. :)
<script type = "text/javascript">
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="This is your first visit to this page. Welcome!";
lastvisit.subsequentvisitmsg="Welcome back visitor! Your last visit was on <b>[displaydate]</b>";
lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}
else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))
}
lastvisit.setCookie("visitc", wh, days);
}
lastvisit.showmessage();
</script>
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="This is your first visit to this page. Welcome!";
lastvisit.subsequentvisitmsg="Welcome back visitor! Your last visit was on <b>[displaydate]</b>";
lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}
else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))
}
lastvisit.setCookie("visitc", wh, days);
}
lastvisit.showmessage();
</script>
Untuk script yang berwarna merah, silahkan sobat ganti dengan kata-kata yang baik menurut sobat, dan untuk yang berwarna kuning, silahkan ganti dengan bahasa indonesia agar sesuai nantinya. :)
Script ini berfungsi menyapa pengunjung setiap saat,dan setiap waktu, seperti bisa anda liat teks hitam tebal diatas, itu adalah pesan yang disampaikan jam ini untuk anda, dan khusus untuk anda sebagai pengunjung setiap blog simpel ini. bagaimana caranya? ini dia scriptnya.
<script>
var Digital=new Date()
var hours=Digital.getHours()
//Atur pesan anda
if (hours>=5&&hours<=11) //MESSAGE FOR MORNING
document.write('<b>Welcome to our site. Good morning visitor.</b>')
else if (hours==12) //MESSAGE FOR NOON
document.write('<b>It is high noon. Thanks for dropping by!</b>')
else if (hours>=13&&hours<=17) //MESSAGE FOR AFTERNOON
document.write('<b>Good afternoon, and thanks for visiting.</b>')
else if (hours>=18&&hours<=20) //MESSAGE FOR EVENING (6pm-8pm)
document.write('<b>Good evening. Hope you\'re enjoying the gentle breeze</b>')
else if (hours>=21&&hours<=11) //MESSAGE FOR NIGHT (9pm-11pm)
document.write('<b>Glad to see you this time of the night.</b>')
else //MESSAGE FOR LATE NIGHT, EARLY MORNING (12pm-4am)
document.write('<b>Wow, thanks for choosing to visit our site over sleep!</b>')
</script>
var Digital=new Date()
var hours=Digital.getHours()
//Atur pesan anda
if (hours>=5&&hours<=11) //MESSAGE FOR MORNING
document.write('<b>Welcome to our site. Good morning visitor.</b>')
else if (hours==12) //MESSAGE FOR NOON
document.write('<b>It is high noon. Thanks for dropping by!</b>')
else if (hours>=13&&hours<=17) //MESSAGE FOR AFTERNOON
document.write('<b>Good afternoon, and thanks for visiting.</b>')
else if (hours>=18&&hours<=20) //MESSAGE FOR EVENING (6pm-8pm)
document.write('<b>Good evening. Hope you\'re enjoying the gentle breeze</b>')
else if (hours>=21&&hours<=11) //MESSAGE FOR NIGHT (9pm-11pm)
document.write('<b>Glad to see you this time of the night.</b>')
else //MESSAGE FOR LATE NIGHT, EARLY MORNING (12pm-4am)
document.write('<b>Wow, thanks for choosing to visit our site over sleep!</b>')
</script>
Bagaimana cara penggunaannya?
Jika anda ingin meletakan script ini dibagian header blog, anda cukup tambahkan gadget dan pilih html/java script lalu pastekan script diatas, dan jika ingin meletakannya di atas postingan blog, anda hanya tinggal pastekan script diatas dibagian page atau postingan saat anda akan memulai menulis postingan.
Dan untuk script yang berwarna merah, itu adalah pesan yang akan tampil, silahkan edit dengan teks kesukaan anda :)
Salam blogger :)
Halo sob, hihi, iseng-iseng ane share script yang suka iseng juga nih. sobat udah tau dong tadi pas masuk ke postingan ini, sobat disambut dan disapa sama pertanyaan admin :D :D :D
dan sobat bisa terapkan script ini di blog sobat, hehe, caranya, jika mau diletakan di postingan tertentu saja, sobat tinggal letakan kode dibawah ini dibagian html postingan sobat :D :D :D, tapi kalo mau dipasang di seluruh page dan posting, caranya, klik add gadget, tambahkan html/javascript, selesai, nanti pengunjungnya bisa ngamuk2.. gkgkgk
ini scriptnnya :
<script language="JavaScript">
<!--
var name=prompt("Enter Your Name, Please.","name");
var today = new Date ()
var hrs = today.getHours();
document.writeln("<b>");
document.writeln("<b>");
if (hrs <= 12)
document.write("Good Morning "+name+'!');
else if (hrs <= 18)
document.write("Good Afternoon "+name+'!');
else
document.write("Good Evening "+name+'!'); document.writeln("<br />");
// -->
</script>
<!--
var name=prompt("Enter Your Name, Please.","name");
var today = new Date ()
var hrs = today.getHours();
document.writeln("<b>");
document.writeln("<b>");
if (hrs <= 12)
document.write("Good Morning "+name+'!');
else if (hrs <= 18)
document.write("Good Afternoon "+name+'!');
else
document.write("Good Evening "+name+'!'); document.writeln("<br />");
// -->
</script>
Halo sobat, udah malem rupanya
yah. hehe, tapi ane masih seru nih share- share yang kayak ginian..
maklum, udah jadi hobi. hihihi..oke dah, gak usah banyak cingcong, takut ngantuk duluan yang bacanye.. hihi..
ini die nih yang mau ane bagiin buat para blogger yang masih nyari menu yang pas buat bloggnya, hehe, ane punya satu lagi nih, bolehlah agan coba pasang diblog aga, :D :D
Save and Enjoy :)
ini die nih yang mau ane bagiin buat para blogger yang masih nyari menu yang pas buat bloggnya, hehe, ane punya satu lagi nih, bolehlah agan coba pasang diblog aga, :D :D
Nah, seperti ini screen shootnye, wah, lumayan keren kan, elegant.. hikhikhik..
okedah,
jika sobat mau pasang menu ini, simple banget, SEBAGAI MANA BIASANYA,
klik add gadget, klik html/javascript, dan pastekan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style:none;
padding-top:50px;
}
li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
.effects:after, .effects:before {
-moz-transition:width 0.5s ease 0s;
height: 3px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
.effects:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
.effects:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
.effects:hover:after, .effects:hover:before{
width: 72px;
height: 2px;
opacity:1;
}
</style>
</head>
<body>
<ul>
<li class="effects"><a href="#">HOME</a></li>
<li class="effects"><a href="#">ABOUT</a></li>
<li class="effects"><a href="#">PORTFOLIO</a></li>
<li class="effects"><a href="#">BLOG</a></li>
<li class="effects"><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul {
list-style:none;
padding-top:50px;
}
li {
position:relative;
float: left;
width:150px;
text-align:center;
padding-top:35px;
padding-bottom:35px;
color:#fff;
margin-right:20px;
border-radius:5px;
background:#161616;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
cursor:pointer;
}
.effects:after, .effects:before {
-moz-transition:width 0.5s ease 0s;
height: 3px;
width: 0px;
position: absolute;
content: ' ';
display: block;
opacity:0;
box-shadow: 0px 0px 5px #00c6ff;
}
.effects:after {
background: -moz-linear-gradient(left, #0ad, #08b);
top: 84px;
left: 75px;
}
.effects:before {
background: -moz-linear-gradient(right, #0ad, #08b);
top: 84px;
right:75px;
}
.effects:hover:after, .effects:hover:before{
width: 72px;
height: 2px;
opacity:1;
}
</style>
</head>
<body>
<ul>
<li class="effects"><a href="#">HOME</a></li>
<li class="effects"><a href="#">ABOUT</a></li>
<li class="effects"><a href="#">PORTFOLIO</a></li>
<li class="effects"><a href="#">BLOG</a></li>
<li class="effects"><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
Save and Enjoy :)
Ekhem..... lagi - lagi css3..
Hallo sobat blogger. hehe, kali ini ane berhasil ngemodif ni menu footer, yang tentunya gak kalah keren ama menu-menu yang laennya.. :D, menu ini simple bro, ngeditnyapun enteng, untuk liat demonya klik .
nah untuk tutorialnya, sebagaimana ane ngasih tutorial, gak perlu ribet, gak perlu edit2 HTML segala macem yang mungkin sobat keblinger, atau males ngeditnya, langsung aje pasang ni menu dengan cara add gadget, klik add html/javascript, pastekan kode dibawah ini, jangan lupa, edit alamatnya sama punya ente yaah, kalo bingung gimana ngeditnya, sobat perhatikan markup yang ini
<li><a href="#" class="dribble"><small>Dribble</small></a></li>
Nah, hapus tanda pagarnya dan pastekan linknye disitu yeh.. hihi.
oke, ini scriptnya.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #fff url(pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
#masterpanel {
background-color:#161616;
background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
}
#masterpanel ul {
padding:0;
margin:0;
float:left;
width:80%;
margin:0 10%;
list-style:none;
font-size:1em;
}
#masterpanel ul li {
padding:0;
margin:0;
float:left;
position:relative;
border-right:1px solid #555;
}
#masterpanel ul li:first-child { border-left:1px solid #555; }
#masterpanel ul li a {
margin:5px;
margin-left:20px;
margin-right:20px;
float:left;
height:36px;
width:36px;
text-decoration:none;
color:#333;
position:relative;
}
a.dribble { background:url(http://png-4.findicons.com/files/icons/2419/socialshift/32/dribble.png) no-repeat; width:26px;}
a.forrst { background:url(http://png-5.findicons.com/files/icons/2398/home_archive_freebies_about_contact_rss_twitter_social_media_sleek_icons/32/forrst.png) no-repeat; }
a.facebook { background:url(http://png-2.findicons.com/files/icons/524/web_2/32/facebook.png) no-repeat;}
a.twitter { background:url(http://png-5.findicons.com/files/icons/524/web_2/32/twitter.png) no-repeat;}
a.google { background:url(http://png-3.findicons.com/files/icons/2684/social_media_icons/32/google_plus.png) no-repeat;}
a.linked { background:url(http://png-2.findicons.com/files/icons/832/social_and_web/32/linked_in.png) no-repeat;}
a.yahoo { background:url(http://png-4.findicons.com/files/icons/2229/social_media_mini/32/yahoo.png) no-repeat;}
a.myspace { background:url(http://png-1.findicons.com/files/icons/524/web_2/32/myspace.png) no-repeat;}
#masterpanel a small {
background:#000;
text-align:center;
width:70px;
padding:5px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
border-radius:3px;
display:none;
color:#fff;
font-size:0.8em;
text-indent:0;
}
#masterpanel a:hover small {
display:block;
position:absolute;
top:0px;
left:50%;
margin:-40px;
z-index:9999;
-moz-animation:mymove .25s linear;
-webkit-animation:mymove .25s linear;
}
@-moz-keyframes mymove {
0%{ -moz-transform:scale(0,0); opacity:0;}
50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -moz-transform:scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
0%{ -webkit-transform:scale(0,0); opacity:0;}
50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -webkit-transform:scale(1,1); opacity:1;}
}
</style>
</head>
<body>
<footer id="masterpanel">
<ul id="mainpanel">
<li><a href="#" class="dribble"><small>Dribble</small></a></li>
<li><a href="#" class="forrst"><small>Forrst</small></a></li>
<li><a href="#" class="facebook"><small>Facebook</small></a></li>
<li><a href="#" class="twitter"><small>Twitter</small></a></li>
<li><a href="#" class="google"><small>Google+</small></a></li>
<li><a href="#" class="linked"><small>LinkedIn</small></a></li>
<li><a href="#" class="yahoo"><small>yahoo</small></a></li>
<li><a href="#" class="myspace"><small>Myspace</small></a></li>
</ul>
</footer>
</body>
</html>
<html>
<head>
<style>
body {
background: #fff url(pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
#masterpanel {
background-color:#161616;
background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
}
#masterpanel ul {
padding:0;
margin:0;
float:left;
width:80%;
margin:0 10%;
list-style:none;
font-size:1em;
}
#masterpanel ul li {
padding:0;
margin:0;
float:left;
position:relative;
border-right:1px solid #555;
}
#masterpanel ul li:first-child { border-left:1px solid #555; }
#masterpanel ul li a {
margin:5px;
margin-left:20px;
margin-right:20px;
float:left;
height:36px;
width:36px;
text-decoration:none;
color:#333;
position:relative;
}
a.dribble { background:url(http://png-4.findicons.com/files/icons/2419/socialshift/32/dribble.png) no-repeat; width:26px;}
a.forrst { background:url(http://png-5.findicons.com/files/icons/2398/home_archive_freebies_about_contact_rss_twitter_social_media_sleek_icons/32/forrst.png) no-repeat; }
a.facebook { background:url(http://png-2.findicons.com/files/icons/524/web_2/32/facebook.png) no-repeat;}
a.twitter { background:url(http://png-5.findicons.com/files/icons/524/web_2/32/twitter.png) no-repeat;}
a.google { background:url(http://png-3.findicons.com/files/icons/2684/social_media_icons/32/google_plus.png) no-repeat;}
a.linked { background:url(http://png-2.findicons.com/files/icons/832/social_and_web/32/linked_in.png) no-repeat;}
a.yahoo { background:url(http://png-4.findicons.com/files/icons/2229/social_media_mini/32/yahoo.png) no-repeat;}
a.myspace { background:url(http://png-1.findicons.com/files/icons/524/web_2/32/myspace.png) no-repeat;}
#masterpanel a small {
background:#000;
text-align:center;
width:70px;
padding:5px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
border-radius:3px;
display:none;
color:#fff;
font-size:0.8em;
text-indent:0;
}
#masterpanel a:hover small {
display:block;
position:absolute;
top:0px;
left:50%;
margin:-40px;
z-index:9999;
-moz-animation:mymove .25s linear;
-webkit-animation:mymove .25s linear;
}
@-moz-keyframes mymove {
0%{ -moz-transform:scale(0,0); opacity:0;}
50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -moz-transform:scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
0%{ -webkit-transform:scale(0,0); opacity:0;}
50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
100%{ -webkit-transform:scale(1,1); opacity:1;}
}
</style>
</head>
<body>
<footer id="masterpanel">
<ul id="mainpanel">
<li><a href="#" class="dribble"><small>Dribble</small></a></li>
<li><a href="#" class="forrst"><small>Forrst</small></a></li>
<li><a href="#" class="facebook"><small>Facebook</small></a></li>
<li><a href="#" class="twitter"><small>Twitter</small></a></li>
<li><a href="#" class="google"><small>Google+</small></a></li>
<li><a href="#" class="linked"><small>LinkedIn</small></a></li>
<li><a href="#" class="yahoo"><small>yahoo</small></a></li>
<li><a href="#" class="myspace"><small>Myspace</small></a></li>
</ul>
</footer>
</body>
</html>
Opsi : Jika sobat ingin menambahkan beberapa acount menu lagi,biar lebih mudah, sobat tinggal copas aja script bagian <li><a href="#" class="myspace"><small>Myspace</small></a></li> lalu ganti myspace nya dengan kesukaan sobat, inget, kalo dibagian kode class="janganadaspasiyah" tapi kalo dibagian <small>may space, boleh ada spaci, </smal>, karna ini yang nanti jadi hover mousenya. nah kalo udah, selanjutnya sobat copy lagi kode
a.myspace { background:url(isi link icon) no-repeat;} kode a.myspace diganti dengan nama acount menu yang baru sobat tambahkan tadi. dan seterusnya seperti itu jika ingin menambahkan menu baru. :)
Dan untuk script yang berwana kuning diatas, itu merupakan warna hover tooltipnya, sobat bisa ganti sesukanya. :)
Kalo masih bingung, koment aja dibawah, admin pasti bales :)
Dan kalo mau copas artikelnye, ane rasa sobat tau tentang etika copas :)
Happy blogging :)
kalo yang ni, scriptnya ini die.
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
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 #2187e7;}
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 #2187e7; }
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); }
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle1"></div>
</body>
</html>
<html>
<head>
<style>
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
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 #2187e7;}
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 #2187e7; }
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); }
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="circle1"></div>
</body>
</html>
Kalo mau dipasang di blog kayaknya bakalan bikin pengunjung puyeng deh gan.. :D :D
Oke lah, ini nih tutorialnye (sebenernya bukan tutorial deh) ups.. hahaha :D,
kopi kode dibawah ini, pastekan di javascript tataletak sobat, bukan di edit html yah, karna ini toh script cuma buat ngeramein blog aje, Gkgkgkgk.
kopi kode dibawah ini, pastekan di javascript tataletak sobat, bukan di edit html yah, karna ini toh script cuma buat ngeramein blog aje, Gkgkgkgk.
<!DOCTYPE html>
<html>
<head>
<style>
.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
</style>
</head>
<body>
<div class="ball"></div>
<div class="ball1"></div>
</body>
</html>
<html>
<head>
<style>
.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
</style>
</head>
<body>
<div class="ball"></div>
<div class="ball1"></div>
</body>
</html>
Nah, buat sobat pemula,..sobat bisa liat kode warna merah itu adalah penulisan css3 untuk browser, kalo moz berarti untuk mozila, nah kalo webkit, itu berlaku untuk selain mozila, kayak misalnya opera, internet ex, safari dll. :D :D, dan untuk script yang berwarna ungu, itu adalah gaya penulisan css3 untuk animasi, kalo bingung, sobat bisa klik untuk memahami css3 animasi :D :D
Hay brother, bagaimana aktivitas ngeblognya, wah semoga makin bersemangat aje yeh.. hihi. dan ane yakin banget nih, kalo blog sobat tampilannya cantik, pasti dah tiap hari maunya posting2 aje, hihi, gak kaya blog ane, jelek bro. wkwkwk
oke deh bro, kali ini ane mau share bagaimana membuat evek loading (seperti pada demo diatas )hanya dengan menggunakan css3, wah keren pastinya, apalagi css3 kan lebih gampang (keliatannye si :D :D ) okelah, jangan banyak bacot, kita mulei aje yeh :D :D dan jika sobat blogger mau praktek langsung, sobat bisa klik disini
1. Masukan markup ini dibagian html, inget HTML yah, kalo belom tau, kode html itu diletakan dibagian tag <body> sampai </body>, dan sobat bisa letakan dibawah tag <body>, tapi bisa juga, malah sangat bisa markup ini sobat letakan di tataletak>add gadget> html/java script. :D :D
<ul id="progress">
<li>
<div id="layer1" class="ball"></div>
<div id="layer7" class="pulse"></div>
</li>
<li>
<div id="layer2" class="ball"></div>
<div id="layer8" class="pulse"></div>
</li>
<li>
<div id="layer3" class="ball"></div>
<div id="layer9" class="pulse"></div>
</li>
<li>
<div id="layer4" class="ball"></div>
<div id="layer10" class="pulse"></div>
</li>
<li>
<div id="layer5" class="ball"></div>
<div id="layer11" class="pulse"></div>
</li>
</ul>
2. Masukan script css dibawah ini di atas kode ]]>bskin (yah pookoke yang mirip karo kode kuen lah) ane hihihihi.
Nah, kalo udah, savedeh, lalu liat hasilnya.. Dan hal yang musti di inget nih yeh, ini script cuma iseng aje, ya kalo sobat mau dipasang silahkan, tapi ane sih pengennye buat kayak ginian cuma buat belajar aje.. :D :D :D
Dan yang ini full scriptnya :
And kalo yang terakhir enni nih,.. sobat bisa copy scripnye ni..
Dan sekarang, ane yakin sobat blogger "pemula" pasti bisa ngebadain dari sript diatas, mana yang css mana yang bukan :D :D :D ul#progress {
list-style:none;
width:125px;
margin:0 auto;
padding-top:50px;
padding-bottom:50px;
}
ul#progress li { /* Style your list */
float:left;
position:relative;
width:15px;
height:15px;
border:1px solid #fff;
border-radius:50px;
margin-left:10px;
border-left:1px solid #111; border-top:1px solid #111;
border-right:1px solid #333; border-bottom:1px solid #333;
background:#000;
}
ul#progress li:first-child { margin-left:0; }
.ball {
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
width:15px;
height:15px;
border-radius:50px;
-moz-transform:scale(0);
-webkit-transform:scale(0);
-moz-animation:loading 1s linear forwards;
-webkit-animation:loading 1s linear forwards;
}
.pulse {
width:15px;
height:15px;
border-radius:30px;
border: 1px solid #00c6ff;
box-shadow: 0 0 5px #00c6ff;
position:absolute;
top:-1px;
left:-1px;
-moz-transform:scale(0);
-webkit-transform:scale(0);
-webkit-animation:pulse 1s ease-out;
-moz-animation:pulse 1s ease-out;
}
/* Control Layers */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
@-moz-keyframes loading {
0%{-moz-transform:scale(0,0);}
100%{-moz-transform:scale(1,1);}
}
@-webkit-keyframes loading {
0%{-webkit-transform:scale(0,0);}
100%{-webkit-transform:scale(1,1);}
}
@-moz-keyframes pulse {
0% {-moz-transform: scale(0);opacity: 0;}
10% {-moz-transform: scale(1);opacity: 0.5;}
50% {-moz-transform: scale(1.75);opacity: 0;}
100% {-moz-transform: scale(0);opacity: 0;}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0);opacity: 0;}
10% {-webkit-transform: scale(1);opacity: 0.5;}
50% {-webkit-transform: scale(1.75);opacity: 0;}
100% {-webkit-transform: scale(0);opacity: 0;}
}
Nah, kalo udah, savedeh, lalu liat hasilnya.. Dan hal yang musti di inget nih yeh, ini script cuma iseng aje, ya kalo sobat mau dipasang silahkan, tapi ane sih pengennye buat kayak ginian cuma buat belajar aje.. :D :D :D
Dan yang ini full scriptnya :
<!DOCTYPE html>
<html>
<head>
<style>
#content {
width:100%; /* Full Width */
height:5px;
margin:50px auto;
background:#000;
}
.expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 10s ease-out;
-webkit-animation:fullexpand 10s ease-out;
}
/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
@-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
</style>
</head>
<body>
<div id="content">
<span class="expand"></span>
</div>
</body>
</html>
Nah...untuk script yang warna item adalah komponen HTML lengkap, dan yang warna merah adalah script CSS3, kemudian yang warna kuning, itu Merupakan markup dasar htmlnye :D :D :D<html>
<head>
<style>
#content {
width:100%; /* Full Width */
height:5px;
margin:50px auto;
background:#000;
}
.expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 10s ease-out;
-webkit-animation:fullexpand 10s ease-out;
}
/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
@-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
</style>
</head>
<body>
<div id="content">
<span class="expand"></span>
</div>
</body>
</html>
And kalo yang terakhir enni nih,.. sobat bisa copy scripnye ni..
<!DOCTYPE html>
<html>
<head>
<style>
ul#loadbar {
list-style:none;
width:140px;
margin:0 auto;
padding-top:50px;
padding-bottom:75px;
}
ul#loadbar li {
float:left;
position:relative;
width:11px;
height:26px;
margin-left:1px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
background:#000;
}
ul#loadbar li:first-child { margin-left:0; }
.bar {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
width:11px;
height:26px;
opacity:0;
-webkit-animation:fill .5s linear forwards;
-moz-animation:fill .5s linear forwards;
}
#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
@-moz-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
@-webkit-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
</style>
</head>
<body>
<ul id="loadbar">
<li>
<div id="layerFill1" class="bar"></div>
</li>
<li>
<div id="layerFill2" class="bar"></div>
</li>
<li>
<div id="layerFill3" class="bar"></div>
</li>
<li>
<div id="layerFill4" class="bar"></div>
</li>
<li>
<div id="layerFill5" class="bar"></div>
</li>
<li>
<div id="layerFill6" class="bar"></div>
</li>
<li>
<div id="layerFill7" class="bar"></div>
</li>
<li>
<div id="layerFill8" class="bar"></div>
</li>
<li>
<div id="layerFill9" class="bar"></div>
</li>
<li>
<div id="layerFill10" class="bar"></div>
</li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul#loadbar {
list-style:none;
width:140px;
margin:0 auto;
padding-top:50px;
padding-bottom:75px;
}
ul#loadbar li {
float:left;
position:relative;
width:11px;
height:26px;
margin-left:1px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
background:#000;
}
ul#loadbar li:first-child { margin-left:0; }
.bar {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
width:11px;
height:26px;
opacity:0;
-webkit-animation:fill .5s linear forwards;
-moz-animation:fill .5s linear forwards;
}
#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }
@-moz-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
@-webkit-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}
</style>
</head>
<body>
<ul id="loadbar">
<li>
<div id="layerFill1" class="bar"></div>
</li>
<li>
<div id="layerFill2" class="bar"></div>
</li>
<li>
<div id="layerFill3" class="bar"></div>
</li>
<li>
<div id="layerFill4" class="bar"></div>
</li>
<li>
<div id="layerFill5" class="bar"></div>
</li>
<li>
<div id="layerFill6" class="bar"></div>
</li>
<li>
<div id="layerFill7" class="bar"></div>
</li>
<li>
<div id="layerFill8" class="bar"></div>
</li>
<li>
<div id="layerFill9" class="bar"></div>
</li>
<li>
<div id="layerFill10" class="bar"></div>
</li>
</ul>
</body>
</html>
#salam share :)
Live Demo
Halo sob, assalamu'alaikum :) Kali ini saya ingin share tentang bagaimana membuat menu ribon hanya dengan menggunakan css3, tapi maaf yah, untuk tutorial pembuatannya mungkin lain kali aja :D, saya lagi gak mood nih :D
tapi jangan khawatir, bagi sobat yang ingin menggunakan menu ini di blognya, sobat tinggal copas aja script yang dibawah ini, dan masuk kedasbor, klik add gadget, tambahkan html/ java script lalu pastekan kode tersebut,
dan untuk script .ribbon span {
background:#6B8E23; ini merupakan warna latar belakangnya, silahkan sobat ganti sebebas2 nya. jika ingin mengganti semua warnanya, makan tingga sobat cari aja semua yang mirip dengan ini #6B8E23; #CD853F; #6B8E23;,
dan selesai :D
Halo sob, assalamu'alaikum :) Kali ini saya ingin share tentang bagaimana membuat menu ribon hanya dengan menggunakan css3, tapi maaf yah, untuk tutorial pembuatannya mungkin lain kali aja :D, saya lagi gak mood nih :D
tapi jangan khawatir, bagi sobat yang ingin menggunakan menu ini di blognya, sobat tinggal copas aja script yang dibawah ini, dan masuk kedasbor, klik add gadget, tambahkan html/ java script lalu pastekan kode tersebut,
<!DOCTYPE html>
<html>
<head>
<style>
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #6B8E23;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#ffffff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#6B8E23;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#CD853F;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #8B0000;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #8B0000;
border-bottom:0.5em solid #fff;
}
</style>
</head>
<body>
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
<a href='#'><span>Contact</span></a>
</div>
</body>
</html>
NB : kode Home "tanda pagar isikan dengan link url, "home" ganti dengan menu sesua ente.<html>
<head>
<style>
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #6B8E23;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#ffffff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#6B8E23;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#CD853F;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #8B0000;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #8B0000;
border-bottom:0.5em solid #fff;
}
</style>
</head>
<body>
<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
<a href='#'><span>Contact</span></a>
</div>
</body>
</html>
dan untuk script .ribbon span {
background:#6B8E23; ini merupakan warna latar belakangnya, silahkan sobat ganti sebebas2 nya. jika ingin mengganti semua warnanya, makan tingga sobat cari aja semua yang mirip dengan ini #6B8E23; #CD853F; #6B8E23;,
dan selesai :D
<!DOCTYPE html>
<html>
<head>
<style>
.registration form{
width:220px;
height:330px;
background-color: Darkslategray;
padding: 10px 0px 0px 4px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 10px 10px 10px 10px; /*radius dimulai dari atas kiri hingga kanan bawah*/
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border : 1px solid: black;
color: white;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
font-family: "Century Gothic";
}
/*selanjutnya masuk ke registrasi input, diawali dengan mengatur panjang lebarnya kolom*/
.registration input, .registration select{
width: 195px;
height: 20px;
margin: 3px 0px 0px 10px;
border: 0px;
font-weight: bold;
}
.registration input:focus{
background-color: white;
}
.registration form label{
margin: 5px 0px 0px 15px;
}
a{
outline:none;
}
/*lalu, selanjutnya kita memodifikasi tampilan tombol registrasinya, perhatikan bentuk penulisannya*/
.register_button{/* kenapa ditulis .register_button{ karna id markupnya berupa class"register_button" dan kalo dirubah, kemungkinan kecil eror*/
width: 149px;
height: 42px;
background-color: Olivedrab;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;/*moz adalah khusus untuk browser mozila*/
-webkit-border-radius: 10px 10px 10px 10px;/*dan ini untuk browser lain seperti opera, safari dll*/
margin: 15px auto 0px auto;
text-align: center;
cursor: pointer;
clear: both;
}
/* dan ini adalah css untuk tulisan yang ada dalam tombol*/
.register_button span{
font-weight: normal;
font-size: 28px;
font-family: "Verdana";/*dan ini untuk memilih jenis font*/
line-height: 40px;
}
.register_button span a{
text-decoration: none;
color: white;
}
.register_button span a:hover{
color: black;
}
/*selanjutnya, kita memodifikasi pesan eror yang muncul*/
span.error{
margin-right: 20px;
font-size: 9px;
color: olivedrab;
height: 10px;
}
p.error{
margin:0px 14px 0px 10px;
font-size:9px;
color:orangered;
height:6px;
padding: 0px 0px 8px 0px;
text-align:right;
text-transform:none;
}
/*dan selesai... :)
</style>
</head>
<body>
<div class="registration">
<form>
<label>Email kamu </label>
<input type="text" />
<p class="error"><span>Email ini udah ada yang punya bro</span></p>
<label>Password</label>
<input type="text" />
<p class="error"><span>Minimal 1000 karakter</span></p>
<label>Password [ulangi]</label>
<input type="text" />
<p class="error"><span>Ulangi paswordnya weh</span></p>
<label>Year of Birth</label>
<input type="text" />
<p class="error"><span>tanggal lahir nya bro</span></p>
<label>Kampung</label>
<select name="country">
<option>blukar</option>
<option>Kolong jembatan</option>
<option>Jembatan</option>
<option>Ancol</option>
<option>alam gaib</option>
</select>
<div class="register_button"><span><a href="#">REGISTER</a></span></div>
</form>
</div>
</body>
</html>
<html>
<head>
<style>
.registration form{
width:220px;
height:330px;
background-color: Darkslategray;
padding: 10px 0px 0px 4px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 10px 10px 10px 10px; /*radius dimulai dari atas kiri hingga kanan bawah*/
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border : 1px solid: black;
color: white;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
font-family: "Century Gothic";
}
/*selanjutnya masuk ke registrasi input, diawali dengan mengatur panjang lebarnya kolom*/
.registration input, .registration select{
width: 195px;
height: 20px;
margin: 3px 0px 0px 10px;
border: 0px;
font-weight: bold;
}
.registration input:focus{
background-color: white;
}
.registration form label{
margin: 5px 0px 0px 15px;
}
a{
outline:none;
}
/*lalu, selanjutnya kita memodifikasi tampilan tombol registrasinya, perhatikan bentuk penulisannya*/
.register_button{/* kenapa ditulis .register_button{ karna id markupnya berupa class"register_button" dan kalo dirubah, kemungkinan kecil eror*/
width: 149px;
height: 42px;
background-color: Olivedrab;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;/*moz adalah khusus untuk browser mozila*/
-webkit-border-radius: 10px 10px 10px 10px;/*dan ini untuk browser lain seperti opera, safari dll*/
margin: 15px auto 0px auto;
text-align: center;
cursor: pointer;
clear: both;
}
/* dan ini adalah css untuk tulisan yang ada dalam tombol*/
.register_button span{
font-weight: normal;
font-size: 28px;
font-family: "Verdana";/*dan ini untuk memilih jenis font*/
line-height: 40px;
}
.register_button span a{
text-decoration: none;
color: white;
}
.register_button span a:hover{
color: black;
}
/*selanjutnya, kita memodifikasi pesan eror yang muncul*/
span.error{
margin-right: 20px;
font-size: 9px;
color: olivedrab;
height: 10px;
}
p.error{
margin:0px 14px 0px 10px;
font-size:9px;
color:orangered;
height:6px;
padding: 0px 0px 8px 0px;
text-align:right;
text-transform:none;
}
/*dan selesai... :)
</style>
</head>
<body>
<div class="registration">
<form>
<label>Email kamu </label>
<input type="text" />
<p class="error"><span>Email ini udah ada yang punya bro</span></p>
<label>Password</label>
<input type="text" />
<p class="error"><span>Minimal 1000 karakter</span></p>
<label>Password [ulangi]</label>
<input type="text" />
<p class="error"><span>Ulangi paswordnya weh</span></p>
<label>Year of Birth</label>
<input type="text" />
<p class="error"><span>tanggal lahir nya bro</span></p>
<label>Kampung</label>
<select name="country">
<option>blukar</option>
<option>Kolong jembatan</option>
<option>Jembatan</option>
<option>Ancol</option>
<option>alam gaib</option>
</select>
<div class="register_button"><span><a href="#">REGISTER</a></span></div>
</form>
</div>
</body>
</html>
Oke, kali ini lagi-lagi saya mau share sekaligus mendemokan bagaimana membuat formulis registrasi dengan menggunakan css3, seperti yang sobat liat demonya di atas..
Hasil akhir kira-kira seperti itu jeleknya, tapi sobat tentunya bisa mengkreasikan sendir bukan..
mari kita mulai belajar bersama.. ini untuk pemula, para master harap kasih saran dan kritiknya. :)
1. sobat siapkan script htmlnya seperti pada gambar ini. lalu letakan dibagian body template, atau dibagian mana saja terserah yang pentinga jangan di bagian css (diatas kode ]]>bskin, ) ini khusus css aja. gkgkgk
Maka hasilnya akan seperti ini :)
2. perhatikan, css ini saya letakan dibagian <heade> biasanya, css hampir selalu diletakan dibagian atas kode ]]>bskin. tapi jika mau meletakannya dibagian head, maka harus diawali dengan kode <style>...... ini css..</style> </head>
Hasilnya kayak gini :D
Dan hasilnya :D sobat berhasil :D
Untuk langsung praktek, klik
dan untuk scriptnya
Langganan:
Postingan (Atom)
Popular Posts
-
Untuk caranya, cukup kopas script ini, letakan di Html bukan di compose <script language="JavaScript"> /* scri...
-
Tutorial Pertama Masuk kedasbor blog kamu Klik tata letak Adgadget >> klik HTML/ Java script. Pastekan kode dibawah ini La...
-
--> Fae developer membuat efek matrik Hallo sobat, kali ini saya ingin bagikan tips iseng tapi menarik, ya, tentu saja yang digunak...
-
Tutorial here Pertama Masuk kedasbor blog kamu Klik tata letak Adgadget >> klik HTML/ Java script. Pastekan kode dibawah ini La...
-
Hai sob..!! assalamu'alaikum.. kali ini saya akan membahas dan menunjukan bagaimana membuat tombol dengan css3, sebenarnya banyak ...
-
oke, Kali ini saya ingin share satu lagi menu yang cantik buat blog sobat, menu ini didesain bagi blog yang memiliki banyak ka...
-
Email subcriber adalah pelanggan newsletter / jenis kotak surat (pos) yang ada dalam website ataupun blog. Ini sangat diperlukan u...
-
<<TUTORIAL >> Author : Fae Demo : Klik Here Please copy this script : <style> ul.arrowunderline{ list-s...
-
<!DOCTYPE html> <html> <head> <style> .registration form{ width:220px; height:330px; background-color: Darkslateg...
Translate
Followers
Blog Archive
-
▼
2013
(36)
-
▼
Januari
(36)
- Vertikal menu only css3.
- Memasang social followers slide hanya menggunakan ...
- Sapa pengunjung yang sama dalam blog
- Java script : Sampaikan pesan hari ini kepada seti...
- Salam sapa pengunjung dengan javascript
- Full screen image hanya dengan java script
- Memasang menu navigasi css3 dengan evek transisi
- Membuat menu social media tooltip hanya dengan css3
- Membuat loading dengan css3 bagian 3
- Membuat loading animation loop hanya dengan css3
- Membuat loading dengan css3
- Membuat ribbon menu dengan css3
- Script formulir sederhana
- Membuat formulir pendaftaran sederhana dengan css3
- login css kreatifve
- Script tombol gaya ngambang
- Membuat tombol dengan Css3 gaya ngambang
- Membuat efek goyang dombret pada postingan blog
- Membuat evek ketikan pada tulisan dalam postingan ...
- Membuat animasi text warna berjalan dengan script ...
- Membuat evek matrik pada tulisan di blog posting
- Memasang menu horizontal Css3 unik diblog
- Memasang menu multi level drop down keren dengan C...
- Tutorial memasang subcriber cantik dalam blog
- Tutorial memasang Email subcriber cantik
- Email Subcriber Cantik Untuk Blog Mu
- TUTORIAL SIMPEL MEMBUAT Email Subcriber Cantik Unt...
- Membuat Hover ( disentuh mouse) goyang pada link
- Membuat footer menjadi 3 kolom add gadget
- Hanya menampilkan judul posting pada beranda
- Redmore Otomatis
- Uber Round Color Tabs Tutorial
- Clean Arrow Underline Menu
- Tutorial 10 tab menu simpel yang cantik untuk blog...
- CSS Spotlight Menu
- Semi Opaque Menu CSS3 untuk blog anda
-
▼
Januari
(36)



















Recent Comment