HOSTING MURAH 2014

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

1. Silahkan masuk ke www.giladiskon.com
2. Silahkan daftarkan data diri anda melalui form yang sudah tersedia
3. Aktifkan akun anda dengan membuka email yang sudah didaftarkan tadi sesuai petunjuk, jangan lupa passwordnya diganti.
4. Setelah itu baca syarat dan ketentuan kontesnya disini
5. Gimana mudahkan? buruan ikutan sobat, keburu ketinggalan. Kontes ini akan berlangsung selama satu setengah bulan yaitu dimulai dari tanggal 15 Juli sampai 31 Agustus 2013. Selamat mengikuti.

1 - CoBlitz

2 - Incapsula

3 - CloudFlare

4 - JsDelivr

5 - Coral Konten Jaringan Distribusi

Menambahkan Pocket - Bacalah Kemudian Tombol di Blogger?

<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.title/></title>

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.title/></title>
<b:include data=’blog’ name=’all-head-content’/>
<meta content=’your homepage keywords’ name=’keywords’/>
<meta content=’noodp,noydir’ name=’robots’/>
<link href=’https://plus.google.com/#’ rel=’author’/>
<meta content=’en_EN’ property=’og:locale’/>
<meta expr:content=’data:blog.title’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’website’ property=’og:type’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<title><data:blog.title/></title>
<b:include data=’blog’ name=’all-head-content’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/></title>
<!–  All in One SEO Pack 2013 Blogger –>
<b:include data=’blog’ name=’all-head-content’/>
<meta expr:content=’data:blog.pageName + &quot;, your post keywords&quot;’ name=’keywords’/>
<meta content=’noodp,noydir’ name=’robots’/>
<link href=’https://plus.google.com/#’ rel=’author’/>
<meta content=’en_EN’ property=’og:locale’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<!–/ All in One SEO Pack 2013 Blogger –>
<b:else/><title><data:blog.pageName/></title></b:if>
</b:if>
</b:if>

Apa Bitly:

Cara Membuat Auto Generate Short URLs Post Anda di Blogger dengan Bit.ly

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

<!-- Short URLs Script TB -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='shoternUrl'>

<form id='shorturl'/>

 <!-- short url widget script start -->

  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>

<script charset='utf-8' type='text/javascript'>

BitlyClient.addPageLoadEvent(function(){

BitlyCB.myShortenCallback = function(data) {

// this is how to get a result of shortening a single url

var result;

for (var r in data.results) {

result = data.results[r];

result[&#39;longUrl&#39;] = r;

break;

}

       document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}

BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);

});

</script></div>

    </b:if>

<!-- Short URLs Script  TB -->