HOSTING MURAH 2014

• Walaupun software ini bersifat gratisan, tapi sangat bagus dan memberikan layanan yang maksimal seperti pelaporan lengkap masing-masing  elemen template Blog kawan misalnya ada kesalahan pada HTML atau JavaScript template maupun waktu yang diperlukan untuk loading, caranya dengan memilih-Waterfall chart yang letaknya di samping kanan dan dibawahnya ada tulisan Download HAR yang bisa kawan Download dengan format arsip http (HAR) 

<style>
.btrix_blockmenu{
font: bold 14px Germand;
width: 190px; /* width of menu */
}
.btrix_blockmenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.btrix_blockmenu ul li{
margin:0;
padding:0;
}
.btrix_blockmenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>
<div class="btrix_blockmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Us</a></li>
<li><a href="http://mas-basir.blogspot.com/p/contact.html">Contact me</a></li>
</ul>
</div>

<style type="text/css">
.tb_socialwidget { width: 280px; }
.tb_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.tb_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.tb_socialwidget ul li:first-child { border-top: 0 none; }
.tb_socialwidget ul li:last-child { border-bottom: 0 none; }
.tb_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.tb_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.tb_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ymIGE6DHSZxUh0gLdxw9HeNM5NEqueXWCHSCGE7mn7YcXCbCqfmsQyyxgQwTCGQ3kQK7fRvJpVLzrn3HZLmTEKT6-1imCy9YTSgIXTLP-IvaCTYUNTZAxtLSZx3NAyXKVnWS6MSt1kM/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.tb_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LDay4CaRRYqjzcbcfuZiuf-Wee_n0lSx1MnQhP9HW3_zVftrRA6JASEuO1v2xsu6u78aD-HVnDaPcBKIbY22Bc-5MNuPFIVnEPI8k2lrtP0FepgKs4EF8xqWn_skEFnLNyqjyfEYLH0/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.tb_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_s3qD2LEodBojOuol4LM-pyyx-xIXQ_feRC66oEf0HUsjBFhTz5K_S-qpuXCF1W_7pjVaWgwHSfysdRztRiTkbjM4Y4OoY7WrPQRfwYeaJjBwyx4NRdEfuhpGJnFzajx_akt-UCwezg/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.tb_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDKlxOeuQKIJLUxTnk27dP2lon7FDCFGwQKf8ilrK6eAhPHFjHIyg_7NfOQUWaAjkV4k_i8uFeTSFKillXlp70L1p3MX45b9w4UJGccmq8eh3Lbi3D0ojFgebj5at6S91knfOcX7QDLeI/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.tb_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMWSnS81QocRhUAkPFQUAEiTEvzIdMGUqul-cLdhjTRhpYfNi_jgeoHw2mMGMN31XuJ5Fhazxcj5QwmCWm1HKWKIPwtg1oGGgjW1_X95-cpmSagQiHGi1tygVQoFT50ucjMkndDXoiZg/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.tb_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZaMohG62GSgrRdEcNNODU1n9ELxKdnBo_3SgZQPKlxXolKOLrMddX95nhdbLlAr-gvKM_ynobQKhK-A5CWesJgnROPhTLUrrK_qT82G6mScG51JP3yaQLNMKl0_qNo29ZNqu8PWVZK3s/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="btrix_socialwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/TempatBlogging">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/TempatBlogging">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/TempatBlogging">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/117086455111922412846" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/Username">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/Nama">Watch me on YouTube</a></li>
</ul>
</div>

                                             <b:include data='blog' name='all-head-content'/>

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

• Masuk Account Blogger dengan ID kawan 
• Pada Dasbor pilih Tata Letak
• Pada Halaman Elemen pilih Tambah Gadget 
• Pilih tanda [+] pada HTML / JavaScript
• Copas Script berikut kedalamnya 

<div style="border: 1px solid #000; overflow: auto; height: 200px;">
<script style="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/Daftar-Isi.js"></script>
<script style="text/javascript">
var numposts = 100; var showpostdate = false;
var showpostsummary = false; var numchars = 80; var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Copas kode berikut diatas »  ]]></b:skin> 

.avatar-image-container img {
-webkit-transform: rotate(335deg);
-moz-transform: rotate(335deg);
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#btrix_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PH8KzJeBLXXTiTpByZwBD8X_8MlIbeUF-iXOY5TDTZSsuC1TQqSlVgRZcIx6jX25Vl5GP-8Lt0pIslWulfq0W4eSOK_opUmlSw9OofV6qNvC3QPrq-oXlgZI9AmW2tLWQXy4beHfGMs/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJoZhi84hMWt-GBaGSQhTjH4n67xYRV78ar_aoXO1x1_nZ5TQFEZhNEtfvVv_QHrx-WtMNutx2Y3Avd_1AUmBQ7hy1Bgx71vZ686whgglizTjTsFQJOqlf64ScIuJR3yDFIYHKlYyz_c/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM5MuhwJYPizjsS_UHet7WYrHI9IxAdDsaOGeRLlfBGI0CYbQOQULVxSbR6DYLwLkETJ04EBdWyfa16DcuiUMmzEMPe-uuLBNBhJfa8A78O4bppGAgItKHdBor3S_Hj-gP3GlrL09F0Oc/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-h0jWvMacyh6LLLdWCMDDFXTos25kUeO4V6cJWXdS7YJmjiy19S6v8WHDg4ceVeFDcEbUNrNoag8efof0SlMSHVAR6tzDFtOk5um9DMZenitSqN80UiQYtvhgLyphYlwXoPzL2WmbWtA/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFXGF9P572-gfU0YdBHEv5VlzCCDxOY1vROHmC_rnQ83kGK40SMuEHIguFBuY2GyaDb9dv_ATkxZPk5dXw8hU1MWOrRaOFnd6IxFSaxjFmeQOHlIajHNgeKYCCE_lFMC2pjpx-K92EWE/s1600/btrix_image5.jpg" />
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />