Select Menu

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>




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>





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>

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>

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>
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
Demo


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>


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>

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 :) 



Heeh, ane lupa satu lagi nih gan..
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>


Kalo mau dipasang di blog kayaknya bakalan bikin pengunjung puyeng deh gan.. :D :D
Halohah :D :D.. ane lupa nih, masih ade yang ketinggalan atu lagi bro, yah masih seputar loading evek si.. gkgkkgk. tapi kai ini loadingnya gak kalah keren ame yang barusan ane sharing tadi.. hihi, bro bisa liat hasil aakhirnya di ataskan :D :D :D, nah, kira hasil akhirya seperti itu lah. :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.

<!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>


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.
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








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>

Dan sekarang, ane yakin sobat blogger "pemula" pasti bisa ngebadain dari sript diatas, mana yang css mana yang bukan :D :D :D
#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,

<!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.
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>

Halo sahabat blogger semuanya, asalamu'alaikum. bagaimana kabarnya hari ini, semoga tetap sehat dan tetap semagat.. amin..
     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
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4

Log in



Sign up