HOSTING MURAH 2014

Navigation
• item #1
• item #2
• item #3
• item #4
• item #5

Kode CSS

.navigation {float:right;border-top:1px solid #444;
  list-style: none;
  padding: 0;
  width: 200px; 
  height: 35px; 
  margin: 10px;
  background: #333;
  position: relative; 
  z-index: 100;
}

.navigation, .navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

  .navigation:hover, .navigation:hover a.main {border-bottom:1px solid #222;
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
}

  .navigation a.main {text-shadow:0 1px 1px #111;
  display: block; 
  height: 35px;
  font: bold 20px/40px arial, sans-serif; 
  text-align: center; 
  text-decoration: none; 
  color: #FFF;  
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 100;
}

.navigation:hover a.main {
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.04);
}

.navigation li { 
  width: 200px; 
  height: 35px;
  background: #333;
  font: normal 13px/40px arial, sans-serif !important; 
  color: #2C6891;
  text-align: center;
  margin: 0;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.navigation li:nth-child(even), .navigation li:nth-child(odd) { background: #333; 
    border-top:1px solid #444;border-bottom:1px solid #222;
}


.navigation li.n1 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
  -webkit-transition: 0.2s linear 0.6s;
  -o-transition: 0.2s linear 0.6s;
  transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
  -webkit-transition: 0.2s linear 0.4s;
  -o-transition: 0.2s linear 0.4s;
  transition: 0.2s linear 0.4s;
}
.navigation li.n4 { 
  -webkit-transition:0.2s linear 0.2s;
  -o-transition:0.2s linear 0.2s;
  transition:0.2s linear 0.2s;
}
.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.2s linear 0s;
  -o-transition:0.2s linear 0s;
  transition:0.2s linear 0s;
}
.navigation:hover .n2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.navigation:hover .n3 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.navigation:hover .n4 {
  transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.navigation:hover .n5 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

Kode HTML

<ul class='navigation'>
<a class='main' href='#url'>Navigation</a>
<li class='n1'><a href='#'>item #1</a></li>
<li class='n2'><a href='#'>item #2</a></li>
<li class='n3'><a href='#'>item #3</a></li>
<li class='n4'><a href='#'>item #4</a></li>
<li class='n5'><a href='#'>item #5</a></li>
</ul>

/* Offline Mode
----------------------------------------------- */
#offline-mode{
background:#dfdede url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11XSbDff4g58UYFh8-wyGsgRq7OHAT_IPlmhAewTgga5pvh9UhLcVoiQ7b3dB1zg5VBRIwMmUBSRepXOqfXU7gpUdrnGFCUQbgDeEoNhFQkqohas-eITzGWzEP69cmhKWST0Vc3EVaYc/s1600/offline-mode.png)no-repeat 3% 50%;padding:20px 20px 20px 175px;border:1px solid #c9c9c9;margin-bottom:10px}
#offline-mode h2{
font-size:220%;
text-transform:uppercase;
color:#fff;
text-shadow: -1px -1px  3px rgba(0,0,0,0.3);
}
#offline-mode p{
font-size: 12px;
color:#888;
line-height:1.8em;
margin-top:-15px;

<div class='comment-form'>
...kode panjang....
</div>

<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

<!-- <div class='comment-form'>
..............
  </div>-->
 <div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

<!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->

html{
	background: url(img/bromo.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Mulai dengan memilih gambar

Membuat Struktur HTML

<div class="container">

	<div class="header">
		<h1 class="brand">Mount Bromo</h1>
		<span class="red">East Java,</span> <span class="white">Indonesia</span>
	</div>

	<div class="content">
		<p>Mount Bromo (Indonesian: Gunung Bromo), is an active volcano and part of the Tengger massif, in East Java, Indonesia. At 2,329 metres (7,641 ft) it is not the highest peak of the massif, but is the most well known. The massif area is one of the most visited tourist attractions in East Java, Indonesia. The volcano belongs to the Bromo Tengger Semeru National Park. The name of Bromo derived from Javanese pronunciation of Brahma, the Hindu creator god.</p>
		<p>Mount Bromo sits in the middle of a vast plain called the "Sea of Sand" (Javanese: Segara Wedi or Indonesian: Lautan Pasir), a protected nature reserve since 1919. The typical way to visit Mount Bromo is from the nearby mountain village of Cemoro Lawang. From there it is possible to walk to the volcano in about 45 minutes, but it is also possible to take an organised jeep tour, which includes a stop at the viewpoint on Mount Penanjakan (2,770 m or 9,088 ft) (Indonesian: Gunung Penanjakan). The best views from Mount Bromo to the Sand Sea below and the surrounding volcanoes are at sunrise. The viewpoint on Mount Penanjakan can also be reached on foot in about two hours. From inside the caldera, sulfur is collected by workers <a href="http://en.wikipedia.org/wiki/Mount_Bromo">Read More</a></p>
	</div>

	<div class="footer">
		<div class="footer-left">Designed by <a href="http://tutorial-webdesign.com">Wakaka Design</a> | back to <a href="#">tutorial</a></div>
		<div class="footer-right">Image By <a href="http://www.flickr.com/photos/daniele_parisi/2825831148/sizes/o/in/photostream/">Daniele Parisi</a></div>
	</div>

</div>

Code CSS

*{padding:0;margin:0}
html{
	background: url(img/bromo.jpg) no-repeat center center fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	font-family: 'Open Sans', sans-serif;
	font-size:13px;
	text-shadow: 0px 1px 2px #000;
}
a{color:#999;text-decoration:none}
a:hover{border-bottom:1px solid #999}
.header{
	padding:8% 2%;
	font-size:24px;
	text-shadow: 0px 1px 0px #333;
}
	h1.brand{
		font-size:50px;
		font-family: 'Oleo Script', cursive;
		text-shadow: 0px 2px 3px #f4f4f4;
	}
	.header span.red{color:#f20000;}
	.header span.white{color:#fff;}

.content{padding:2%;color:#f4f4f4;}
.content p{margin:10px 0}
.footer{
	padding:5% 2%;
	width:95%;
	position:absolute;
	overflow:hidden;
	color:#f4f4f4;
}
	.footer-left{
		position:relative;
		width:45%;
		float:left;
	}
	.footer-right{
		text-align:right;
		position:relative;
		width:45%;
		float:right;
	}

/* Kotak Komentar */
#threaded-comment-form p{letter-spacing:0.8px;position:relative;border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );padding:16px;font-size:12px;line-height:1.4em;color:#000;margin:0 0 12px 5px;font-family:coda;border-radius:4px 4px 4px 4px}
#threaded-comment-form p::before{top:100%;border:solid transparent;content:"";height:0;width:0;position:absolute}
#threaded-comment-form p::before{border-top-color:#fff;border-width:12px;left:6%;margin-left:-28px}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:1px dashed yellow}
.comments{background:#DDD;margin:0;padding:0;border-left:1px solid #ccc;border-right:1px solid #ccc;}
#comments h4{background:#f8f8f8;border-top:1px solid #CCC;border-bottom:1px solid #CCC;color:#000;display:block;font-size:14px;font-weight:bold;padding:10px;position:relative;text-align:center}
.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
.comment-thread ol{margin:0 0 18px}
.comments-content{padding:10px}
.comments .comments-content .comment-thread ol{list-style-type:none}
.comments .comments-content .user{font-style:normal;font-weight:bold}
.comments .avatar-image-container{float:left;max-height:50px;overflow:hidden;width:50px;background:#f5f5f5;border-radius:100%;margin:5px;}
.comments .avatar-image-container img{max-width:45px;height:45px;padding:4px;border-radius:100%;}
.avatar-image-container{border:1px solid #ccc;float:left;max-height:45px;overflow:hidden;padding:5px;width:45px}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{border-bottom:1px solid #999;box-shadow:0 1px 0 #fff;display:block;margin-bottom:-1px!important;padding:6px}
.comments .comments-content .comment-content,.spammer-detected{font:13px/140% 'Coda',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;color:#000;margin-bottom:0;padding:10px;text-align:justify}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:72px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );padding:10px;position:relative;border-radius:4px 4px 4px 4px}
.comments .comments-content .datetime a:link,.comments .comments-content .datetime a:visited{float:right!important;font-family:cambria,georgia,serif;color:#888!important;font-size:10px;padding:2px 10px}
.comment-replies .comment-block{box-shadow:none}
.comments .comments-content .comment{margin:2px 0 0;padding:0;width:100%}
.comments .comments-content .inline-thread{padding:0;margin-bottom:-16px}
.comments .comments-content .comment-replies{position:relative}
.comments .comment-thread.inline-thread{border-left:5px solid #f5f5f5;background:transparent;margin:2% 10% 2% 15%;padding:10px;}
.comments .comment-thread.inline-thread .comment{width:auto;padding:0;background:transparent;border:none;box-shadow:none}
.comments .comment-thread.inline-thread .comment .comment-block{border:1px solid #999;background-color:#E5E5E5;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#EDEDED) );background:-moz-linear-gradient( center top,white 20%,#EDEDED 100% );border-radius:4px 4px 4px 4px;padding:10px}
.comments .continue{border-top:0;width:auto}
.comments .continue a{background:#fff;color:#000;font-family:coda;text-align:center;float:right;font-weight:normal;padding:0 6px}
.comments .continue a:before,.comments .comment .comment-actions a:before{color:#000;font:normal normal 100%/normal "FontAwesome";content:"\f055";margin-right:.2em}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed,.comment .continue{margin:0;bottom:0;padding:0.6px 0;position:absolute}
.comments .comment .comment-actions a{padding:0 0 1px;display:block;position:absolute;top:65px;left:-60px;width:52px;text-align:center;border:1px solid #ccc;background-color:#EDEDED;background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) );background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );font:11px/18px sans-serif;color:#333;font-size:12px}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{text-decoration:none!important;color:#0070b0;background-color:#eee}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#346FC9!important}
.comments .thread-toggle{display:none}
.comments .comments-content .icon.blog-author{content:"";display:block;width:100%;height:4px;background-color:#4b8db5;background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);position:absolute;bottom:0;left:0}
.comment-footer{display:none;color:white;font-weight:bold;padding:0 0 10px;text-shadow:1px 1px #000000}
.comments .comment-block:before{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:12px;bottom:0;content:"";display:block;height:0;left:-25px;position:absolute;top:14px;width:0}
.comments .comment-block:after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:13px;bottom:0;content:"";display:block;height:0;left:-25px;position:absolute;top:13.2px;width:0}
#comment-editor{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL17KsCe6rawWKOT0TuUESHrQqEJwQwWn7bKN79aGRbSC8DYSt1HfCU96Ue_22YHnng17bPKpTZMqDM98yxFeijvqXcqpvxFba1iw2crstfU6JdOmDxeqKmPi-z-y9HPclxmKW16vDfV1/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}
.comments .comments-content .datetime:before{color:#888;content:"Berkomentar...";margin-left:.4em}
.comments .comment-thread.inline-thread .datetime:before{color:#888;content:"Membalas...";margin-left:.4em}
/* Efek thread-comment bertingkat hanya dengan CSS */
.comments .comment-thread.inline-thread .comment{margin:2px 0 0 -50px}

<style>
  body {
  background: #666;  
}
  .papers {
  background-color: white;
  height: 350px;
  padding: 20px;
  width: 260px;
  -webkit-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
 
}
</style>

Cara Memasang CSS Top Shadow

<style>

.post-title, .entry-title, .post h3, .post h2 {display: none;}

</style>

Cara Menambahkan Widget Rss Subscription Dark Style:

Cara Memasang Scrollbar Mirip Style Mbah Google:

Apa Definisi WebKit Scrollbar?

::-webkit-scrollbar                 { /* 1 */ }
::-webkit-scrollbar-button          { /* 2 */ }
::-webkit-scrollbar-track           { /* 3 */ }
::-webkit-scrollbar-track-piece     { /* 4 */ }
::-webkit-scrollbar-thumb           { /* 5 */ }
::-webkit-scrollbar-corner          { /* 6 */ }
::-webkit-resizer                   { /* 7 */ }

Mengapa Menggunakan Custom Scrollbar?

Bagaimana Tambahkan WebKit Scrollbar di Platform Blogger?

• Kembali ke Blogger.com >> Template >> EDIT HTML >> Lanjutkan.
• Sekarang dalam tema Mencari ]]> </ b: skin> dan di atasnya Paste Code CSS Berikut.

/* --- Tempat Blogging Custom WebKit Scrollbar di Blogger --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}

• Kemudian Ganti # 336699 dengan warna dengan selera Anda.

Fitur Reblog atau berbagi konten Anda di blog mereka adalah sesuatu yang bisa membuat posting Anda pergi virus. Baru-baru ini, salah satu pengguna kami meminta Cara Memasang Fitur Reblog di Artikel Blogger Anda. Bagaimana jika seseorang memuja posting Anda dan ingin berbagi di blog-nya? Dalam situasi ini, Anda dapat menawarkan mereka fungsi berbagi satu-klik yang tidak hanya akan menyebarkan konten Anda di seluruh internet, disamping itu juga membantu Anda untuk mendapatkan backlink sebelumnya. Oleh karena itu, hari ini di artikel ini, kami akan menunjukkan kepada Anda Cara Memasang Fitur Reblog di Artikel Blogger Anda.

Mengapa untuk memungkinkan penggunaan untuk Reblog Tulisan Anda?

Cara Tambah Tombol Reblog posting Anda di Blogger?

.reblog {
color: #fff;
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 0 #75a43b;
padding: 5px 10px;
display: inline;
border: 1px solid #69963b;
background: #7cc237;
border-radius: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));
background: -webkit-linear-gradient(top, #afd95b, #7cc237);
background: -moz-linear-gradient(top, #afd95b, #7cc237);
background: -ms-linear-gradient(top, #afd95b, #7cc237);
background: -o-linear-gradient(top, #afd95b, #7cc237);
box-shadow: inset 0 1px 0 #d0e8a0;
-webkit-box-shadow: inset 0 1px 0 #d0e8a0;
-moz-box-shadow: inset 0 1px 0 #d0e8a0;
-o-box-shadow: inset 0 1px 0 #d0e8a0;
}
.blogthis a {
color: #fff; text-decoration:none;}
a.reblog:hover {
color: #fff;
background: #7cc62b;
background: -webkit-gradient(linear, left top, left bottom, from(#b5e261), to(#7cc62b));
background: -webkit-linear-gradient(top, #b5e261, #7cc62b);
background: -moz-linear-gradient(top, #b5e261, #7cc62b);
background: -ms-linear-gradient(top, #b5e261, #7cc62b);
background: -o-linear-gradient(top, #b5e261, #7cc62b);
text-decoration:none;
}

<div class="reblogme"><li class='blogthis'><b:if cond='data:top.showBlogThisButton'>
<a class='reblog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Reblog This Post</a></b:if>
 </li></div>

1. Buka Akun Blogger Anda
2. Masuk ke menu HTML
3. Cari kode ]]></b:skin>
4. Pastekan kode dibawah ini di atas kode ]]></b:skin>

/* CSS Menu Classic tempat blogging */
#tempatblogging_classic-menu{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-BwFZIvKbEzLc7SU61PtH4omv0fEsZN1b1mGOhQwIpNY1cizVSKyawiInJ961CLwRCHfM7OKrm8lGfLV51R3KELT-I2s95cYBgEW-EXvrSHOjkCvOulB7VrbMkyM65tGMJLhu4_6T08/s1600/tempatbloggingfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#tempatblogging_classic-menu ul,#tempatblogging_classic-menu li{margin:0 auto;padding:0 0;list-style:none}
#tempatblogging_classic-menu ul{height:35px;width:980px}
#tempatblogging_classic-menu li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#tempatblogging_classic-menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#tempatblogging_classic-menu li a:hover{color:#fff}
#tempatblogging_classic-menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#tempatblogging_classic-menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#tempatblogging_classic-menu label span{font-size:12px;position:absolute;left:35px}
#tempatblogging_classic-menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#tempatblogging_classic-menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#tempatblogging_classic-menu ul.menus a{color:#333}
#tempatblogging_classic-menu li:hover ul.menus{display:block}
#tempatblogging_classic-menu a.prett{padding:0 27px 0 14px}
#tempatblogging_classic-menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#tempatblogging_classic-menu ul.menus a:hover{background:#ddd;color:#333}
.page-tempatblogging_classic-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-tempatblogging_classic-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-tempatblogging_classic-menu ul li{list-style:none;line-height:32px;display:inline-block}
.page-tempatblogging_classic-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-tempatblogging_classic-menu li a:hover,.page-tempatblogging_classic-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}

<div id="tempatblogging_classic-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>

#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisoKJusyHpWFX-_r3EzAUWRF9svjw-JI4Uc5hbfrRbZ6dRn9JmGM_ztEsWN8o-9I8y2e_Dpan4t3VG6pi9ykzBvI8SAkA8FWhl9eRldJfjTJD_N9O8uB2gFAtLNKphMgTCjINH8ayKEWY/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>