Menu Ribbon with CSS

1. Login Acount blogger anda.

2. Masuk pada Pengaturan.

3. Pilih Tata letak.

4. Edit html.

5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >

.ribbon:after, .ribbon:before {
        margin-top:0.5em;
        content: "";
        float:left;
        border:1.5em solid #fff;
    }

    .ribbon:after {
        border-right-color:transparent;
    }

    .ribbon:before {
        border-left-color:transparent;
    }
    .ribbon a:link, .ribbon a:visited {
        color:#000;
        text-decoration:none;
        float:left;
        height:3.5em;
        overflow:hidden;
    }
    .ribbon span {
        background:#fff;
        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:#FFD204;
        margin-top:0;
    }

    .ribbon span:before {
        content: "";
        position:absolute;
        top:3em;
        left:0;
        border-right:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
    }

    .ribbon span:after {
        content: "";
        position:absolute;
        top:3em;
        right:0;
        border-left:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
    }

letakkan HTML di bawah ini di atas </header> atau anda bisa menaruh di layout blog anda....

<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>
</div>

 Demo

Check out this Pen!

Read More ->>

Efek Tumpukan Kertas dengan CSS

CSS

/*
---------------------------------------------------------
Sesuaikan lebar kertas dan penampilan.
Pastikan pengurangan/penambahan lebar sesuai dengan perbandingannya
---------------------------------------------------------
*/

.paper1 {
  width:730px;                  /*(730 + 0)*/
  background:#fff;
  border:1px solid #ccc;
}

.paper1:before {
  width:749px;                 /*(730 + 19)*/
  background:#fafafa;
  border:1px solid #ccc;
}

.paper1:after {
  width:756px;                 /*(730 + 26)*/
  background:#fafafa;
  border:1px solid #ccc;
}


/*
---------------------------------------------------------
Jangan mengedit bagian ini jika belum yakin
---------------------------------------------------------
*/

.paper1 {
  padding:15px;
  height:100%;
  position:relative;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
}

.paper1:after, .paper1:before {
  content:'';
  bottom:-3px;
  height:100%;
  left:1px;
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

.paper1:before {
  bottom:-5px;
  left:5px;
}

.paper1:hover:after {
  -webkit-transform:rotate(-3deg) translate(-20px,0);
  -moz-transform:rotate(-3deg) translate(-20px,0);
  -ms-transform:rotate(-3deg) translate(-20px,0);
  -o-transform:rotate(-3deg) translate(-20px,0);
  transform:rotate(-3deg) translate(-20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

.paper1:hover:before {
  -webkit-transform:rotate(3deg) translate(20px,0);
  -moz-transform:rotate(3deg) translate(20px,0);
  -ms-transform:rotate(3deg) translate(20px,0);
  -o-transform:rotate(3deg) translate(20px,0);
  transform:rotate(3deg) translate(20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

Elemen Objek

<div class='paper1'>
     KONTEN DI SINI
</div>

Demo

Read More ->>

Pure CSS Glossy Social Media Drop Down Menu

HTML

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
    <ul>
        <li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="#" target="_blank">Google+</a></li>
    </ul>
</div>

CSS

/*
 * Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/about
 */

.glossy-selectbox {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* CSS3 Browser */
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}

.glossy-selectbox:before,
.glossy-selectbox:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}

.glossy-selectbox:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}

.glossy-selectbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.glossy-selectbox label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}

.glossy-selectbox label:before {
  content:attr(data-default);
}

.glossy-selectbox label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:hover + label {
  color:white;
}

.glossy-selectbox input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}

.glossy-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}

.glossy-selectbox li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}

.glossy-selectbox a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.glossy-selectbox a:nth-child(even) {
  border-right-width:0;
}

.glossy-selectbox a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}

.glossy-selectbox a:hover:before {
  background-position:50% 100%;
}

.glossy-selectbox .social-rss:before      {background-image:url('img/social_rss.png');}
.glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');}
.glossy-selectbox .social-twitter:before  {background-image:url('img/social_twitter.png');}
.glossy-selectbox .social-google:before   {background-image:url('img/social_google.png');}

.glossy-selectbox a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}

/* On click, then... */
.glossy-selectbox input:checked + label {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}

.glossy-selectbox input:checked + label:before {
  content:attr(data-focus);
}

.glossy-selectbox input:checked + label:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:checked ~ ul {
  visibility:visible;
  opacity:1;
}

DEMO

Read More ->>

Sliding Up Image Description

HTML

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.image-box` start -->
    <div class="image-box">
        <div class="image-container">
            <img src="img/image-1.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Description Title</h4>
                <p>Description text...</p>
                <p><a class="more" href="#">More</a></p>
            </div>
        </div>
    </div>
    <!-- `.image-box` end -->
    
    ...
    ...
    ...

    <div class="clear"></div>

</div>

CSS

.image-box-wrapper {
  width:642px;
  margin:50px auto;
}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  -webkit-transition:margin-top .4s ease-out .4s;
  -moz-transition:margin-top .4s ease-out .4s;
  -ms-transition:margin-top .4s ease-out .4s;
  -o-transition:margin-top .4s ease-out .4s;
  transition:margin-top .4s ease-out .4s;
}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;
}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;
}

.image-details h4 {
  font-size:120%;
  height:auto;
}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;
}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;
}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

DEMO

Check out this Pen!

Read More ->>

CSS Facebook Chatbox

Kali ini ane akan share toturial tentang CSS Facebook Chatbox, cekidot!!

CSS

.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
  color:#333;
  width:200px; /* Chatbox width */
  border:1px solid #344150;
  border-bottom:none;
  background-color:white;
  position:fixed;
  right:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}

.chat-box > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:26px;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.chat-box > label {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#344150;
  color:white;
  font-weight:bold;
  padding:0 1em 1px;
}

.chat-box > label:before {content:attr(data-collapsed)}

.chat-box .chat-box-content {
  /* padding:10px; */
  display:none;
}

/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}

HTML

<div class="chat-box">
    <input type="checkbox">
    <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
    <div class="chat-box-content">

        <!-- Kode buku tamu dsb... -->

    </div>
</div>

Check out this Pen!

Read More ->>

Konversi HTML

Read More ->>

Ukur berat blog

Your domain(s): Enter each address on a new line (Maximum 10) (eg. iwebtool.com)

Powered by iWEBTOOL

Read More ->>

CSS Editor

<style>CSS Code Here</style> <!===================> <body>HTML Code Here</body>

Read More ->>

Navigasi CSS3 Sohtanaka

Eksperimen sederhana untuk menciptakan navigasi dengan efek hover menggulung dari Sohtanaka. Kali ini Saya hanya akan menggunakan CSS3 Transisi untuk menganimasikan efek menggulung tiap item menu:

HTML

<nav id='rolling-nav'>
    <ul>
        <li><a href='#' data-clone='Home'>Home</a></li>
        <li><a href='#' data-clone='About'>About</a></li>
        <li><a href='#' data-clone='Portfolio'>Portfolio</a></li>
        <li><a href='#' data-clone='Comments'>Comments</a></li>
        <li><a href='#' data-clone='Contact'>Contact</a></li>
    </ul>
</nav>

CSS

#rolling-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* CSS Transisi */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone); /* Memuat data atribut */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

Check out this Pen!

Read More ->>

Menu Keren With CSS

DEMO

Simpan kode Di bawah ini di Atas kode ]]></b:skin>

.dalang, .dalang ul{padding-top:0px;padding-left:10px; margin:0; list-style:none; display:block;}.dalang{width:150px; height:60px; margin:0 auto; position:fixed;}.dalang li.menu{width:150px; height:60px; line-height:50px; position:relative; z-index:100;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay:0.5s;}.dalang li.menu > a{display:block;width:130px;height:46px;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;transition-delay:0.6s;-o-transition-delay:0.6s;-moz-transition-delay:0.6s;-ms-transition-delay:0.6s;-webkit-transition-delay:0.6s;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFOPz3q0c8XLCXfEDXYT_7eLKCUhzi5mjjgZMERIm9os7OMzn6TqwRsTsQ9vu2Iz5YpGYw86OpIejw6orSjL_3jI5Jolo2keyXvihzQvdU4FJ2R_hWy0NT5qpZ9nFvgQvLLlJpPoj7NU/s1600/Menu.png) no-repeat center center}.dalang ul li a{display:block; width:140px; height:50px; opacity:0.5; float:left;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}.dalang li a b{position:absolute; left:-9999px;}.dalang li.menu ul li.mas1 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohhnl3NuzbYoM0V-LC9gYS1R4CGhcVB3UHq4IQ529Gn5jadvc4fxoO0ieFWQBlLqfjCWjusaG56TB7cTxuArsPiLY2_N-89c6nsheaj9K9IVBUa3UVJMLzwn32vj-8PdlT9HRvROSDf0/s1600/feed.png) no-repeat center;}.dalang li.menu ul li.mas2 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_tS54aywITQBk02jWEYVKplaau6yUTDDkpBtd_mxqVKRPa2jY5izcVzPpo0uEBFm9hd0DcvdMT7ero1NOxfoANrNtn7NlrC2vig_4ymCQPKpdgOhOkL26Pnr_ibjBrVKmjUi-lNXsSA/s1600/mail.png) no-repeat center;}.dalang li.menu ul li.mas3 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZvTHFQde1flkUtpUbVGPfTCPng3vYp3qJSZyxw1-wHo31T1Yyh2NxuyNwBKyexPi3P2LA3-9Fn21noiWx6zJ2p2D4jD5Z5-fIHKKB0eC1xKtouYGeAxchyDleoOFsrf7DPUqhdHp1cE/s1600/homes.png) no-repeat center;}.dalang li ul{z-index:-1; position:absolute; top:0px; left:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay: 0.5s;}.dalang li ul li {position:absolute; left:0; top:0; width:150px; height:50px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay:0.5s;}.dalang li.menu:hover{margin-top:0px;}.dalang li.menu:hover ul{top:0px;width:380px; left:100px;}.dalang li.menu:hover ul li.mas1{left:0; top:0;}.dalang li.menu:hover ul li.mas2{left:100px; top:0;}.dalang li.menu:hover ul li.mas3{left:200px; top:0;}.dalang li a:hover{opacity:1;}.dalang li.menu > a:hover{opacity:0;}

kemudian pilih Edit HTML dan klik Lanjutkan.
Temukan kode ini     :    </head> atau </body>

Salin kode CSS ini dan letakkan di atasnya:

<ul class='dalang'><li class='menu'><a href='http://hooter-spot.blogspot.com/'><b>Menu</b></a><ul><li class='mas1'><a href='http://hooter-spot.blogspot.com/'><b>RSS</b></a></li><li class='mas2'><a href='http://hooter-spot.blogspot.com/'><b>Contact</b></a></li><li class='mas3'><a href='http://hooter-spot.blogspot.com/'><b>Home</b></a></li></ul></li></ul>

simpan Template...

Read More ->>

Pure CSS3 Metal Checkbox

HTML

<span class="checkbox">
    <input type="checkbox">
    <label data-on="ON" data-off="OFF"></label>
</span>

CSS

.checkbox {
  display:inline-block;
  position:relative;
  text-align:left;
  width:60px;
  height:30px;
  background-color:#222;
  overflow:hidden;
  -webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

.checkbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  margin:0 0;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
  z-index:2;
}

.checkbox label {
  background-color:#3c3c3c;
  background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:inline-block;
  width:40px;
  text-align:center;
  font:bold 11px/28px Arial,Sans-Serif;
  color:#999;
  text-shadow:0 -1px 0 rgba(0,0,0,0.7);
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
  margin:1px;
}

.checkbox label:before {
  content:attr(data-off);
}

.checkbox input:checked + label {
  margin-left:19px;
  background-color:#034B78;
  color:white;
}

.checkbox input:checked + label:before {
  content:attr(data-on);
}

DEMO

Check out this Pen!

Read More ->>

Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting

 Pertama-tama, masuklah ke halaman editor HTML templatemu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.


Temukan kode ini:


<div class='post-footer'>
Tekan CTRL+F untuk mempermudah pencarian

Salin kode ini, kemudian letakkan tepat di atas kode tadi:  

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='admin-tulisan'>
          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>
          <div class='kontainer'>
               <img src='http://1.bp.blogspot.com/_yGa4b5VGx6w/Skrkk_0ByLI/AAAAAAAAAC8/gJy0GYR_M08/S220/toilet.jpeg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. <data:post.author/> adalah seorang penulis mahadahsyat yang masih suka pipis di celana dan maunya nenen sama mama. Suka minta jajan yang aneh-aneh dan suka kentut di depan mikrofon.
               <div style='clear:both;'/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->

Sekarang gulung formulirnya ke atas, dan segera temukan kode ]]></b:skin> atau </style>. Letakkan kode ini tepat di atasnya:

.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px Arial,Sans-Serif;
  padding:5px 10px;
  margin:0 0 0 0;
  display:block;
}

.admin-tulisan h4 a {color:#FEEA83;}

.admin-tulisan img {
  width:70px;
  height:70px;
  margin:0 10px 0 0;
  float:left;
  border:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan URL foto profilmu. Untuk mendapatkan URL foto profil caranya mudah. Cukup klik kanan pada foto profil di dasbormu, kemudian pilih copy image location:

Klik Simpan Template.

Read More ->>

JavaScript Recent Comment/Komentar Terbaru dengan CSS

Kali ini ane akan membahas tentang widget recent comment dengan tampilan yang luar biasa keren seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript :

Cekidot..

<style type="text/css">
#komentar {
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0px 0px;
  padding:10px 10px;
  color:#000;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0px 0px 2px #000;
  -moz-box-shadow:inset 0px 0px 2px #000;
  box-shadow:inset 0px 0px 2px #000;
}

#komentar ul {
  margin:0px 0px;
  padding:0px 0px;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0px;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0px 4px 0px 0px;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page   = "http://hompimpaalaihumgambreng.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Jika ingin menambahkan efek Animasi copy script yang ada di bawah dan letakkan setelah kode sebelumnya.

<script type="text/javascript">
var $ul = $('#komentar'),
    roll = function() {
        $ul.find('li').first().slideDown('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});
</script>

Read More ->>

Membuat Komentar Slide Panel pada Template Blogspot

 

Kali ini ane akan membuat Tutorial Membuat Komentar Slide Panel Pada Template Blogspot, Kalo gitu langsung aja kita Ke TKP..
Cekidot!!

Demo

Pertama-tama masuklah ke halaman editor HTML template Anda kemudian temukan kode ini dibawah ini :


]]></b:skin>

Salin kode ini dan letakkan di atasnya Kode ]]></b:skin>

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}

a.openpanel em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {background-color:#900;}

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0px;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

Kemudian temukan kode di bawah ini :

</head>

Salin kode dibawah ini dan letakkan diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

Klik Simpan Template.

Selamat Mencoba

Read More ->>

Cheat Emblem Ninja Saga Permanen 2012

Alat yang dibutuhkan :

Cheat Engine Terbaru Download Disini

Langkah-langkah :

• Lv anda harus 40++
• Msuk NS
• Pergi ke headquarters klik emblem apply now
• Aan kluar tab baru biarin ja tab ithu
• Buka cheat engine Pengaturan hex, Array, Asrom..
• Scan "D6 00 00 00 01 00 00 00 F6"
• Kan tdk ada addres,refresh halaman
• Setelah reffresh ganti klik speedhack 0 speed
• Klik char yg d pilih
• Upgrade charx
• Scan nama char km,biarkan speedhack 0 speed
• Klik smua adrres biar ke tab CE
• Biarkan nm char km d table CE
• Speed rubah 500.0 speed
• Delete nthuh char stelah sudah hpus speedhack menjadi speed normal
• Setelah delete,refresh halaman
• Klik create,create sesuai nm char km yg sudah d delete
• Mainkan seperti biasa sampe tutorial selesai refresh lg halaman NS
• Setelah semua selesai,klik visit friend yg d bwh NS
• Msuk profil friend km,scan lv char friend km
• Kluar addres banyak kan,klik yg valuex ga berubah2 dan berwarna hitam dan truh addres itu ke table CE
• Ganti Type addres td gnti Text,setelah itu ok dan ganti value nm char friend km
• Setelah ithu refresh halaman+refresh server time agar ngesave,dan tutup CE
• Jgn mainkan NS km selama 1 hari,setelah nunggu 1hri mainkan char pas wkt spin
• Waktu jam nyepin char m akan User Emblem+lv 60 full XP tp TP dan Talent blum lv 10 smua

Selamat Mencoba...

Read More ->>

Earn token Top eleven

Selamat siang sob, Kali ini ane akan ngpost Tentang Earn Token Top Eleven, jangan banyak cingcong, Cekidot!!

1.Buka www.topeleven.com
2.Klik PLAY NOW

3.Klik Win token dan Matomy
4.Download HSS kalau udah aktivin HSS di sudut browser ada klik logo nya baru klik connect jika udh warnah hijau berarti udh nyala
5.Klik video dan check offer status pilih video nya baru play dan tonton video nya (sambil reload offer nya)

6.Jika sudah ada tulisan completed selamat anda berhasil

jangan keseringan di earn ntar di blokir kayak Punya Ane :D 

selamat mencoba...

Read More ->>

Cara Membuat Kotak Profile Di Setiap Bawah Posting

Udah Lama Gak Posting Tentang Tutorial Blogger Sekarang Saya Akan Posting Lagi . " Cara Membuat Kotak Profile Di Setiap Bawah Postingan ". Silakan Coba Gan...

1. Login ke Blogger Kamu

2. Masuk Ke Rancangan

3. Klik Edit HTML, Lalu centeng Expand Template Widget

4. Cari Kode ]]></b:skin> Letakkan kode CSS dibawah ini Tepat diatas kode tadi

      .admin-tulisan{
        display:block;
        width:auto;
        background:#CFE2E0;
        border:2px solid #fff;
        box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
        padding:0;
        margin:30px 0 10px 0;
        font:normal 12px Arial, Sans-Serif;
        color:#222;
        }
        .admin-tulisan .kontainer{padding:5px;}
        .admin-tulisan h4{
        background:#0004b1;
        border:none;
        border-bottom:1px solid #699019;
        color:#fff;
        text-transform:normal;
        text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
        font:bold 12px Arial,Sans-Serif;
        padding:5px 10px;
        margin:0 0 0 0;
        display:block;
        }
        .admin-tulisan h4 a{color:#0000ff;}
        .admin-tulisan img{
        width:81px;
        height:68px;
        margin:0 10px 0 0;
        float:left;
        border:1px solid #0004b1;
        padding:2px;
        background:#0004b1;
        box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

5. Kemudian Cari Kode Ini <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'>
dan letakkan Script ini Di atas kode yg km cari tadi

    <!-- Kotak Admin by Dark-48 -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
    <div class='kontainer'>
    <img src='URL GAMBAR KAMU'/>
    Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Terima Kasih !
    <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://dark-48.blogspot.com/2012/09/cara-membuat-kotak-profile-di-setiap.html' target='_blank'>:: Get this widget ! ::</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin by Dark-48 --> 

NB : Sesuaikan Warna Yang Ada Di Kode Atas Dengan Warna Yang Anda Inginkan

Read More ->>

Download Game Quiz PARAMPAA 2

Download

Read More ->>

Harlem Shake Versi Facebook

1. Buka Facebook (Terserah mau di Beranda atau yang lainnya) pakai Browser Google Chrome
2. Klik kanan di mana saja, asal masih di Facebook, pilih Inspect Element lalu pilih Console
3. Masukkan script di bawah ini :

javascript:(function(){function c(){var 
e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function
 h(){var e=document.getElementsByClassName(l);for(var 
t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var
 
e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function
 d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function 
v(i){var s=d(i);return 
s.height>e&&s.height<n&&s.width>t&&s.width<r}function
 m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return 
n}function g(){var 
e=document.documentElement;if(!!window.innerWidth){return 
window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return 
e.clientHeight}return 0}function y(){if(window.pageYOffset){return 
window.pageYOffset}return 
Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function
 E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var 
e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var
 
e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="
 <p>If you are reading this, it is because your browser does not 
support the audio element. We recommend that you get a new 
browser.</p> 
<p>";document.body.appendChild(e);e.play()}function 
x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" 
"+u[Math.floor(Math.random()*u.length)]}function N(){var 
e=document.getElementsByClassName(s);var t=new 
RegExp("\\b"+s+"\\b");for(var 
n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var 
e=30;var t=30;var n=350;var r=350;var 
i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var
 s="mw-harlem_shake_me";var o="im_first";var 
u=["im_drunk","im_baked","im_trippin","im_blown"];var 
a="mw-strobe_light";var 
f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var
 l="mw_added_css";var b=g();var w=y();var 
C=document.getElementsByTagName("*");var k=null;for(var 
L=0;L<C.length;L++){var 
A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could 
not find a node of the right size. Please try a different 
page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var 
A=C[L];if(v(A)){O.push(A)}}})()

4.Copy code tersebut dan Paste di Console.
5.Lalu Tekan Enter Dan Facebook Anda Pun Siap Bergoyang ala Harlem Shake.

Read More ->>

Cara Membuat sharingan Berputar

 

CSS

/* WAKSharingan */

.WAKsharingan1 { -moz-animation:spin2Pulse 1s infinite linear; 
-webkit-animation:spin2Pulse 1s infinite linear;margin-top:170px; 
margin-left:115px;position:absolute;z-index:999;height: 200px; 
line-height: 46px;border-radius:500px;border-left:10px solid 
black;border-right:10px solid black;width: 200px;; 
-moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s 
infinite linear;animation:WAKspin 1s infinite linear}

.WAKsharingan {margin-top:170px; 
margin-left:115px;position:absolute;z-index:999;background: 
url(http://lh4.googleusercontent.com/-1H0QD0Pto-M/UN6cEsf3xAI/AAAAAAAAAOo/CrvHCdmMmrM/s185/supers.png)
 no-repeat;height: 185px; line-height: 46px;border-left:20px solid 
black;border-radius:500px;border-right:20px solid black;width: 185px; 
-moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s 
infinite linear;animation:WAKspin 1s infinite linear}

@-moz-keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

@-webkit-keyframes WAKspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }

@keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

HTML

<div id='WAKsharingan1'><div class='WAKsharingan'/></div> 

Cara Pasang .

1. Taruh Code CSS di Atas Code ]]></b:skin>
2. lalu Taruh Code HTML di bawah <div id='header-wrapper'>

Selesai. 
Selamat Mencoba...

Read More ->>

Cara Merubah Gambar Anonim Komentar Blogger dengan CSS

Kalian mungkin sering melihat gambar Anonim/Anonymous dari komentar blogspot yang menampilkan gambar orang yang berwarna abu-abu. Nah gambar itu dapat dimanipulasi dengan berbagi cara. Diantaranya dengan Javascript atau dengan jQuery. Tapi yang kali ini yang saya bagikan yaitu hanya dengan CSS.
Yah Manipulasi itu ternyata dapat dilakukan hanya dengan CSS khususnya CSS3 atribut selector. Intinya dengan menggunakan CSS3 attribute selector kita akan menentukan attribute src yang mengandung link dari gambar anonim kemudian menggantinya dengan gambar yang kita hendaki.
Link dari gambar anonim dari blogger pada umumnya seperti ini http://img1.blogblog.com/img/anon36.png. Nah itulah nantinya yang akan kita rubah.

Berikut ini adalah CSS yang digunakan :

 

.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFj8wBAYiktq65xqZ0xu-G-lvxfGo7Lg61KJNCS4J336jqwCA1OB7FG72aY3nVWloxSDeAI4XX_hyphenhyphenSeAyGVQyikgQKaMKqKB44HzOg9Z-twE_js4su84SfS7iMUzeRb9tXmgXqarG_kRB/s70/user-anonymous-icon.png);
}

Yah hanya satu CSS yang digunakan.
Jika ingin mengganti gambarnya silahkan ganti link gambar yang berwarna putih sesuai yang anda inginkan.
Karena menggunakan css attribute selector yang specifik maka cara diatas juga bisa digunakan selain gambar anonim.

NB :Cara ini hanya berhasil diterapkan pada browser (webkit) seperti google chrome dan maxthon
Salam Blogger.

Read More ->>

Test

samplesamplesamplesamplesamplesamplesample
samplesamplesamplesamplesamplesamplesample
samplesamplesamplesamplesamplesamplesample.

Read More ->>

Button dengan Efek Hover keren

Pertama-tama masuklah ke halaman editor HTML Template Anda kemudian pilih Edit HTML dan klik Lanjutkan.
Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:

 .tombol{color:666;text-shadow:-1px 1px 0px #636363;font-size:0px;line-height:50px;text-align:center;margin:10px 0px;font-family: 'Electrolize', sans-serif;background:#919191 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VQzoJsgnR3RT4jPrAEwUYOsUYmdt4wKYSBwZYV0ailEARKHxXcsfkraXYrSuW4kfPVUKy_Ykk2tzGNE4o4029nF-wFE-JMQ7qczdjQUsDPUXGanNtCtwN1KaXKFPV7vv-w6vc0Mmi2I/s1600/pause.png)no-repeat left;border-radius:5px;width:50px; height:50px;white-space:nowrap;border:2px solid #ccc;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.tombol:hover{width:450px;text-shadow: 1px 1px 0px #A3A3A3;font-size:20px;background: #919191 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxW5A4u63DZC-XvRp42xIMq0l2L4P1pyOFgxYUPwh_rdknyaViwgEQVZ-Z6MO3hdVV2IQI9dvLzaanHb-CCPrPHBpgnmc8-plXmiRq1WKhEFYvZZgP6AFk62qoWjD306zatfaPJrlWkw/s1600/play.png)no-repeat left;} 

Klik Simpan Template.

MARKUP :

 <div align="center">
<div class="tombol">
<a href="http://hooter-spot.blogspot.com/">Demo</a></div>
</div> 

Check out this Pen!

Read More ->>

Widget Display Skin

Display Skin  adalah widget blogger yang membantu anda dalam menyempurnakan sebuah blog dengan merubah tampilan secara langsung yang ada didalamnya. Widget ini memanfaatkan Cookie browser untuk menyimpan data rubahan dari tampilan blog itu.

Anda bisa mengatur ukuran huruf, tipe huruf, warna huruf, warna bakground, bahkan Anda juga bisa memilih URL background dari tempat lain.

Suport oleh JQuery dan JavaScript

Instalasi

Pemasangan Display Skin

Display Skin adalah widget blogger yang membantu anda dalam menyempurnakan sebuah blog dengan merubah tampilan secara langsung yang ada didalamnya. Widget ini memanfaatkan Cookie browser untuk menyimpan data rubahan dari tampilan blog itu.

Lanjutbatalkan

Perihal Lisensi

Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang.

Display Skin Payer di desain oleh Hooter-Spot. Anda boleh mengedit widget ini, tapi anda tidak diijinkan menghapus Credit yang telah dibuat. Hargailah kerja keras orang lain, supaya mereka dapat mengcreasikan sesuatu yang baru lagi. Suport by JQuery dan JavaScript

MundurSetujubatalkan

Tutorial Memasang Part 1

Pilih Tab Template lalu klik Edit HTML Letakkan CSS berikut di atas ]]></b:skin>

.displayskin-sm{position:fixed;z-index:293;bottom:120px;left:-300px;} .dalem-skin{background:#333;color:#aaaa99;width:300px;padding:6px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0pt 1px 2px black;-webkit-box-shadow:0pt 1px 2px black;-moz-box-shadow:0pt 1px 2px black;display:inline-block;} .dalem-skin a{cursor:pointer;color:#0186CB;} .dalem-skin a:hover{color:#0186CB;text-decoration:underline;} .dalem-skin th,.dalem-skin td {color:#aaaa99;vertical-align:middle;border:none !important;padding:2px 10px;} .dalem-skin select,#daftarskin-sm input, .skin-sm input[type="text"] {padding:4px !important;height:auto !important;border:1px solid #bbb;background-color:#333;padding:2px;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#999;display:inline-block;margin:0 0 0;height:24px;} .dalem-skin select option {color:white;padding:5px 10px;cursor:pointer;} .dalem-skin button {font:normal 11px Tahoma,Arial,Sans-Serif;padding:3px 5px;cursor:pointer;} .bgColorer {overflow:hidden;text-align:center;} .bgColorer span {display:inline-block;width:20px;height:20px;border:1px solid black;margin:0 5px 0 0;cursor:pointer;} .dalem-skin select,#daftarskin-sm input[type="text"] {width:118px !important;} #daftarskin-sm{position:relative;z-index:294;display:none;max-height:200px;padding:6px;margin-bottom:-20px;overflow:scroll;box-shadow:0pt 1px 2px black;-webkit-box-shadow:0pt 1px 2px black;-moz-box-shadow:0pt 1px 2px black} .skin-sm{position:relative;z-index:295;background:#333;box-shadow:0pt 1px 1px 1px black;-webkit-box-shadow:0pt 1px 1px 1px black;-moz-box-shadow:0pt 1px 1px 1px black;padding:6px;} #hideshow-skin1,#hideshow-skin2{cursor:pointer;display:inline-block;}

MundurLanjutbatalkan

Tutorial Memasang Part 2

Buat Gadget HTML/JavaScript baru Masukkan Elemen ini dan klik Simpan

<div class="displayskin-sm"> <div id="hideshow-skin1" style="display:none"></div> <div class="dalem-skin"> <div id="daftarskin-sm"> <table border="0" id="styleSwitcher"> <tr><td colspan="2"><center><div id="bgcolor-sm" class="bgColorer"></div></center></td></tr> <tr><th>Tipe huruf</th><td id="font-skin-sm"></td></tr> <tr><th>Warna huruf</th><td><input type="text" id="fontColorer" value="rgb( 0 , 0 , 0 )" onkeyup="fontColor(this.value);"/></td></tr> <tr><th>Background url</th><td><input type="text" id="urlGambarer" value="URL dan Enter" onkeyup="urlGambar(this.value);"/></td></tr> <tr><th>Reset?</th><td><button onclick="resetStyle();">Kembalikan Tampilan</button></td></tr> </table> </div> <div class="skin-sm"> <center><div class="bgColorer"> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ulNX40bUEQWO5T2t59Mg1lFb0EGqAS2ZKNwOMKhaaOP8r_v_XZ_f6p0_oi0ZrXqSoA9wmEji80_5V9Vs2VFykcgcbvs1X7eB-84dyr4Kn76YOLx5jK6mG4Qb6JiPTGtp15-1eAsdIFQ/s30/Halloween_Wallpapers_47+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ulNX40bUEQWO5T2t59Mg1lFb0EGqAS2ZKNwOMKhaaOP8r_v_XZ_f6p0_oi0ZrXqSoA9wmEji80_5V9Vs2VFykcgcbvs1X7eB-84dyr4Kn76YOLx5jK6mG4Qb6JiPTGtp15-1eAsdIFQ/s1600/Halloween_Wallpapers_47+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLaWEkPsxdbBoVPQW6MbTc3PJvgSLM2QNv8M0FmjFOvNocy33fRexL0PDF4bNnpO7PSfKq5JJt8NcrHLg6iCDsKqINCMVDQUJ_fOHepnuv2S3s4wsWOkLJXBabldYYrjOyRNtkFgWGT4/s30/Halloween_Wallpapers_120+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLaWEkPsxdbBoVPQW6MbTc3PJvgSLM2QNv8M0FmjFOvNocy33fRexL0PDF4bNnpO7PSfKq5JJt8NcrHLg6iCDsKqINCMVDQUJ_fOHepnuv2S3s4wsWOkLJXBabldYYrjOyRNtkFgWGT4/s1600/Halloween_Wallpapers_120+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAHgQsJDTCQWpGyTwD9EDqbgjFPkj7iI2oCH94bdKkxOQqrxQNugXMx6JzvDLKMYcLy38iL65jSeMTCbcBhYMpGifwT4XAZe-aNwiylMuCClmh_Zkz0q5kZnTdu_Pjhw_Ax0bMtSwN7Y/s30/Halloween_Wallpapers_117+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAHgQsJDTCQWpGyTwD9EDqbgjFPkj7iI2oCH94bdKkxOQqrxQNugXMx6JzvDLKMYcLy38iL65jSeMTCbcBhYMpGifwT4XAZe-aNwiylMuCClmh_Zkz0q5kZnTdu_Pjhw_Ax0bMtSwN7Y/s1600/Halloween_Wallpapers_117+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FfVx-kXdBSjz-ifSJAxU7yZHOt24A360WMLz4ueIEHGulfplB7DC_KGOBDtcQkC2C4PTSNmoFTrqdXyJFrH4wwCMCW_U-6QJpVkQXkmCv8VJ3yWaVhLa2bmueMfF3q41a9tWvRQW8WY/s30/Halloween_Wallpapers_55+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FfVx-kXdBSjz-ifSJAxU7yZHOt24A360WMLz4ueIEHGulfplB7DC_KGOBDtcQkC2C4PTSNmoFTrqdXyJFrH4wwCMCW_U-6QJpVkQXkmCv8VJ3yWaVhLa2bmueMfF3q41a9tWvRQW8WY/s1600/Halloween_Wallpapers_55+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IYJ2B-VUzizVarInxp8n3VOAgG7eiOMQZnTNbG5zCPx_V7KDZ8ZgWgNdh-5omQYBlS7ooYoY9H_gaRe93HkW9uyQ5261_nlpCF1fZMQR-p4OMF2XKYeiAADJmTrGEaTTmhRQPz6e5Tmg/s30/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IYJ2B-VUzizVarInxp8n3VOAgG7eiOMQZnTNbG5zCPx_V7KDZ8ZgWgNdh-5omQYBlS7ooYoY9H_gaRe93HkW9uyQ5261_nlpCF1fZMQR-p4OMF2XKYeiAADJmTrGEaTTmhRQPz6e5Tmg/s1600/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> <span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7zHxfQQAlgWrHhcEQtTZun_lITWT5MsaZoMiAQ3OWMb0IXIbXp69675pPaTUDNou1vzLLW8GIv7z3fhyu5Fs76fvtk4xf3dCcngbWNUbbAm3xhn7Vs-d1g2UgPshCjjcANF1oznmxa_A/s30/Dark_Angel_Wallpapers_14+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7zHxfQQAlgWrHhcEQtTZun_lITWT5MsaZoMiAQ3OWMb0IXIbXp69675pPaTUDNou1vzLLW8GIv7z3fhyu5Fs76fvtk4xf3dCcngbWNUbbAm3xhn7Vs-d1g2UgPshCjjcANF1oznmxa_A/s1600/Dark_Angel_Wallpapers_14+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span> </div></center> <div style="display:inline-block;"><span>Ukuran huruf</span> : <input type="text" id="fontSizer" value="11" maxlength="3" onkeyup="changeFontSize(this.value);" style="width:50px;text-align:center"/></div> <div id="buka-daftarskin" style="display:inline-block;float:right"></div> </div> </div> <div id="hideshow-skin2"></div> </div> <script src='http://reader-download.googlecode.com/svn/trunk/cookie.js'></script> <script src="http://not-remove-admin.googlecode-3.com/files/displayskins-sm2.js"></script>

MundurLanjutbatalkan

Instalasi Display Skin Selesai

Terimakasih anda telah memasang Widget Display Skin , semoga dapat bermanfaat. by Hooter-Spot Copyright © 2013

Selesai

1. Anda bisa mengganti URL BACKGROUND sendiri
2. Juga cukup mengganti s1600 menjadi s30
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IYJ2B-VUzizVarInxp8n3VOAgG7eiOMQZnTNbG5zCPx_V7KDZ8ZgWgNdh-5omQYBlS7ooYoY9H_gaRe93HkW9uyQ5261_nlpCF1fZMQR-p4OMF2XKYeiAADJmTrGEaTTmhRQPz6e5Tmg/30/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IYJ2B-VUzizVarInxp8n3VOAgG7eiOMQZnTNbG5zCPx_V7KDZ8ZgWgNdh-5omQYBlS7ooYoY9H_gaRe93HkW9uyQ5261_nlpCF1fZMQR-p4OMF2XKYeiAADJmTrGEaTTmhRQPz6e5Tmg/1600/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg

 <span style="background:url(URL BACKGROUND);" onclick="bgImgSwitch('black url(URL BACKGROUND)repeat-x fixed top center')"></span> 

Read More ->>

Johny Crottube Template

 Demo                    Download

Descriptions :  Johny Template Crottube adalah Johny seri Crott yang dibuat untuk konten video hanya dari Youtube. Ada begitu banyak fitur dalam template ini.
Ini adalah warna putih dan hitam dengan 5 kolom blogger di sana, pemuatan mudah dengan penampilan yang elegan, 1 sidebar kiri di homepage dan 1 sidebar kanan di halaman posting, 3 kolom footer, drop navigasi down menu, grid dan gaya daftar, pagination untuk blogger siap , desain bersih template, dan banyak lagi. Template ini cocok untuk blog konten video dengan update harian hanya dari Youtube. Tapi Anda dapat menggunakannya untuk setiap konten galeri gambar untuk blog Anda

Sumber : http://www.zonetemplates.com/2012/07/johny-crottube-template.html

Read More ->>

Johny Joss Template

Demo              Download

 Descriptions :  Joss Template Banget Johny dirancang untuk konten galeri blogger terutama untuk review film. Tidak ada fitur spesifik dalam template ini.
  Sifat Ini adalah warna hitam dengan 5 blogger kolom di sana, pemuatan mudah dengan penampilan yang elegan, Carousel slider otomatis untuk posting terbaru Anda, 1 sidebar kanan, 3 kolom footer, drop navigasi bawah gaya menu, grid dan daftar, pagination untuk blogger siap, bersih desain template, dan banyak lagi. Template ini cocok untuk blog galeri konten dengan update harian. Tapi Anda dapat menggunakannya untuk setiap konten galeri gambar untuk blog Anda.

Sumber : http://www.zonetemplates.com/2012/07/johny-joss-banget.html 

Read More ->>

cara membuat efek Petir di Blog

 

Kali ini ane akan share tentang gimana cara membuat efek Petir di Blog, kalo jangan banyak cingcong.?

Cekidot.

Langkah Membuat Efek Petir di Blog  :
1. Log in ke Blogger
2. Klik Rancangan
3. Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut ke dalam HTML/Javascript

<style>

type="text/css">body { background-image:  

url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);  

background-color:transparent; }</style>

Read More ->>

Games Online

Langsung Maenkan Games nya Gan...

Read More ->>

Johny Tampan Template Movie

 Jangan banyak cingcong langsung aja?Cekidot...

Demo                  Download

• Movies Blogger Template.
• 4 Column, left sidebar, 3 Column footer, header banner, social icons.
• Fixed width, gallery blogger template, Black, Slide Show.
  
  
  Sumber : http://www.allblogtools.com/blogger-templates/4-columns/johny-tampan/

Read More ->>

Johny Coba Dulu Template Khusus Game

Hiii. sobat kali ini ane akan ngasih template khusus game, jadi jangan banyak cingcong langsung aja download.?Cekidot...

Demo           Download

• Games Blogger Template.
• 6 Column, right sidebar, 3 Column Footer, white, blue, social icons.
• Fixed width, ads ready, search box, Seo Ready, Slide Show.
• Johny Coba Dulu blogger template is a free premium blogger theme for games and gallery blogs.
  
  
  Sumber : http://www.allblogtools.com/blogger-templates/4-columns/johny-coba-dulu/

Read More ->>

Tekken 6 Opacity Template

Kali ini ane akan ngasih template buat sobat...
jangan banyak cingcong, langsung aja?Cekidot..

 Demo             Download

Sumber : http://btemplates.com/2013/blogger-template-tekken-6-opacity/

Read More ->>