CH MIKO: BLOGSPOT

Showing posts with label BLOGSPOT. Show all posts

8/20/18

Hide Div on Desktop, Show On Mobile

Seribu Ilmu August 20, 2018

Code ini digunakan untuk menyembunyikan suatu div, foto, widged di mode dekstop dan hanya muncul di mode mobile.

<style type="text/css">
#mobileshow { 
display:none; 
}
@media screen and (max-width: 500px) {
#mobileshow { 
display:block; }
}
</style>

<div id="mobileshow">//Masukan code/tulisan kesini</div>

8/18/18

Blogger Dynamic Slider by Label and Recent Posts

Seribu Ilmu August 18, 2018

Pertama buka dulu Blog > Edit Template / Widged > Paste code berikut > Simpan.

<!--Recent Slider-->

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2ZePaolbF6-Y09P2g9-wPs47HMCD4fOakkM_9dB-yEbgEYn8DJ5WnTlPg8YVmKcRRJn9escUB0o_NnGU4EfuFdqDVRQVsxbj0xPJbI_gZWFYpwfgUSGQ-WVPb6Uv0vRlLimcdaN99dB3/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>


<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Image width in px value
        imageHeight: 398, // Image height in px value
        maxItem: 6, // Max number of Slider Image to show
        animation: "slide", // Select your animation type, "fade" or "slide"
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
    });
});
</script>

<script>
$("#slider1").BloggerDynamicSlider({
    blogURL: "https://www.seribuunduh.com/", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog
    labelName: "SOFTWARE", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
    maxItem: 6, // Max number of Slider Posts to show
    showPostTitle: true, // Show post title as Caption ? (true/false)
    postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
    imageWidth: 544, // Image width in px value
    imageHeight: 280, // Image height in px value
    animation: "fade", // Select your animation type, "fade" or "slide"
    controlNav: true, // Navigation for paging control of each slide? (true/false)
    directionNav: true, // Previous/next navigation? (true/false)
    pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
    slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, // Set the speed of animations, in milliseconds
    animationLoop: true, // Should the animation loop? (true/false)
});
</script>

<!--Recent Slider-->

Ganti https://www.seribuunduh.com/ dengan Url bro semua.

8/15/18

Cara Membuat Custom Page Not Found ! 404

Seribu Ilmu August 15, 2018

Digunakan untuk mengatasi blog saat tidak menemukan halaman dan akan otomatis muncul pemberitahuan ini.

Masuk Blog > Setting > Search Preferences > Edit Custom Page Not Found > Paste code berikut

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404">
404
</div>
<h2 class="large-heading" style="text-align: center;">
Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">
Sorry, the page you were looking for on this blog does not exist.
You will be redirected shortly to the homepage.</h3>
<script type="text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>

Selesai. Terimakasih telah berkunjung ke blog kami dan jangan lupa untuk share ke teman-teman.

7/28/18

Cara Membuat Teble Responsiv di Blogspot

Seribu Ilmu July 28, 2018

Kali ini saya akan berbagi Cara Membuat Teble Responsiv di Blogspot, ini digunakan untuk membuat tampilan jadi lebih menarik dan mudah dibaca. Pertama buka terlebih dahulu Blog > Edit HTML > Copast Code berikut dan letakan tebat di bawah kode <head>.

<!--table-->
<style>
#customers {
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
<!--table-->

Cara memanggil code dengan berikut.

<table id="customers"><tbody>
<tr><th colspan="2"><center>SPESIFIKASI GENERAL </center></th></tr>
<tr><td><b>Display</b></td>              <td>5.99" IPS LCD capacitive touchscreen, 16M colors</td>       </tr>
<tr><td><b>Resolution</b></td>           <td>720 x 1,440 pixels, 269ppi</td>                             </tr>
<tr><td><b>Processor</b></td>            <td>octa-core 2.0GHz Cortex-A53 ; Adreno 506 GPU</td>           </tr>
<tr><td><b>Processor Make</b></td>       <td>Snapdragon 625 chipset</td>                                 </tr>
<tr><td><b>Front camera</b></td>         <td>5-megapixel</td>                                            </tr>
<tr><td><b>Rear camera</b></td>          <td>12MP F/2.2</td>                                             </tr>
<tr><td><b>RAM</b></td>                  <td>3/4GB</td>                                                  </tr>
<tr><td><b>Storage</b></td>              <td>32/64GB</td>                                                </tr>
<tr><td><b>Support Micro SD</b></td>     <td>Up 256GB</td>                                               </tr>
<tr><td><b>Battery capacity</b></td>     <td>3080mAh</td>                                                </tr>
<tr><td><b>OS</b></td>                   <td>Android 8.1 Oreo; MIUI 9.5</td>                             </tr>
<tr><td><b>Dimensions (mm)</b></td>      <td>160.7 x 77.3 x 8.1 mm</td>                                  </tr>
<tr><td><b>Weight (g)</b></td>           <td>170 g</td>                                                  </tr>
</tbody></table>

Code dasar table.

<table id="customers"><tbody>
<tr><th colspan="2"><center>SPESIFIKASI GENERAL </center></th>  </tr>
<tr><td><b>ISI</b></td>           <td>ISI Disini</td>           </tr>
<tr><td><b>ISI</b></td>           <td>ISI DIsini</td>           </tr>
</tbody></table>

Keterangan :
<tr></tr> = Digunakan Utuk sepasi table kebawah
<td></td> = Digunakan untuk kolom baru.

7/24/18

Cara Membuat Youtube Responsive Post Blog

Seribu Ilmu July 24, 2018

Youtube Responsive - Digunakan untuk membuat video youtube sesuai dengan divace pengguna sehingga membuat tampilan menjadi cantik dan bagus.

Buka terlebih dahulu Blog > Edit HTLM > Copast Code berikut dan letakkan kode ini di bawah <head>

<!--Youtube Responsiv-->
<style>
/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
</style>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
<!--Youtube Responsiv-->

Untuk cara menggunakanya tinggal meletakkan code ini di Post HTML dan ganti url dengan url Youtube yang ingin di ganti semisal code berikut GMbjYnj5k50 diganti degan code mbPO4FPAX1Y

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/GMbjYnj5k50">
</div>
</div>
</div>

7/22/18

Cara Reset Template Blog

Seribu Ilmu July 22, 2018

Hal ini dilakukan untuk memasang template baru agar tidak menyisakan widged yang lama sehingga tidak mempengaruhi template yang baru. Yang pertama masuk ke Blog > Edit HTML > Paste Code berikut ini

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html>
<html>
<head>
<title>Judul Blog Anda</title>
<b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
<b:section id='contoh'/> 
</body>
 </html>

Simpan dan instal tamplate baru / copast code xml ke dalam HTML

7/20/18

Cara Membuat Lable Tag Pada Blogger

Seribu Ilmu July 20, 2018

Tag biasaya digunakn untuk menunjukan suatu pos berada dalam kategori tertentu, semisal games, tutorial, photoshop, blogger dll. Tag ini merupan penanda untuk memasukan pos kehalaman kategori tersebut.

Pertama buka terlebih dahulu Blog > Edit HTLM > Paste code berikut ini di bagian post yang ingin kalian letakkan. Semisal dibawah penerbit, seperti milik saya ini.

<!--Lable Tag-->
<style>
.label-wrap{display:block;color:#666;padding:10px 15px;border-bottom:1px solid rgba(0,0,0,0.14);overflow:hidden}
.label-info{position:relative;margin:auto}
.label-info a,.label-tags{float:left;display:inline-block;position:relative;font-size:10px;margin-left:8px;padding:5px 6px;background:#5c7dc2;color:#fff;text-decoration:none;border:1px solid;text-transform:uppercase;border-radius:3px}
.label-tags{background:#fff;color:#f39c12;font-family:fontawesome;}
.label-info a:hover{background:#fff;color:#5c7dc2;border-color:inherit;text-decoration:none}
</style>

<div class='label-wrap'>
<span class='label-tags'><i CLASS='fa fa-tags' aria-hidden='true'/></span>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div class='label-info'>
<a class='label-block' expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'> <data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</div>
</b:loop>
</b:if>
</div>
<!--Lable Tag-->

Kemudia Simpan

7/18/18

Cara Membuat Tombol Load Disqus

Seribu Ilmu July 18, 2018

Cara Membuat Tombol Load Disqus - Hal ini berfungsi untuk meringankan load page suatu post. Agar tidak berat dan cepat kalian dapat mengikuti langkah berikut ini.

Edit Html > Temukan code ini dan ganti

<b:includable id='comments' var='post'>
</b:includable>

Ganti code tersebut dengan code berikut

<b:includable id='comments' var='post'>
  <div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;DISQUS_SHORTNAME&#39;; //Add your ID Disqus
var disqus_url = disqus_blogger_current_url;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;; }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
function disqus() {
    if (!disqus_loaded)  {
        disqus_loaded = true;
        var e = document.createElement(&quot;script&quot;);
        e.type = &quot;text/javascript&quot;;
        e.async = true;
        e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
        .appendChild(e);
        //Hide the button after opening
        document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
    }
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
    if (hash.substring(0, 8) == &quot;comment-&quot;) {
        disqus();
    }}}
</script>
  </div>
</b:includable>

Penting Ganti DISQUS_SHORTNAME dengan Id Disqus yang kalian daftarkan

Letakan code berikut tepat seperti gambar diatas

<!--Load Disqus-->
<style>
/* Disqus comment onclik load button – by Bungfrangki.com */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:30px;}
.comments-blocks button{display:block;margin:25px auto 0;width:300px;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#3371d6;border-radius:2px}
.comments-blocks button:hover{background:#214682}
    </style>

<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>
<!--Load Disqus-->
      <br/>

Hasil Code Di atas

7/16/18

Cara Membuat Thumnail Uplod Youtube Di Blog

Seribu Ilmu July 16, 2018

Pertama buka Blog > Edit HTML > Copast code berikut di bawah <head>

<!--thumnail youtube-->
<style>
.youtubeBorder{
    background:none repeat scroll 0 0 #fff;
    border:1px solid #e0e0e0;
    border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);
    margin:10px 0 20px;
    padding:4px
}
.youtubeBorder p.post-video{
    margin:0!important
}
.youtube{
    background-color:#000;
    max-width:100%;
    overflow:hidden;
    position:relative;
    cursor:hand;
    cursor:pointer;
    height:330px;
    width:100%
}
.youtube .thumb{
    bottom:0;
    display:block;
    left:0;
    margin:auto;
    max-width:100%;
    position:absolute;
    right:0;
    top:0;
    width:100%;
    height:auto;
    opacity:.8;
}
.youtube .play{
    opacity:.9;
    height:77px;
    left:50%;
    margin-left:-38px;
    margin-top:-38px;
    position:absolute;
    top:50%;
    width:77px;
    background:url(http://1.bp.blogspot.com/-UxHkp1GZmYI/VEpXsS2YAeI/AAAAAAAAHH0/kgw4wjcrOvw/s1600/play.png) no-repeat}
.play:hover {
    opacity:1;
}
</style>

<script>
$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});
</script>

<!--<div  class='youtube' data-id='mbPO4FPAX1Y'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class='thumb' src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>-->
<!--thumnail youtube-->

Untuk menggunakan code ini agar berfungsi caranya Copast code ini dipost blog kalian. Kemudia ganti code ini mbPO4FPAX1Y dengan alamat youtube yang ingin di upload di blog

<div class="youtube" data-id="mbPO4FPAX1Y">
<iframe allowfullscreen="" frameborder="0" height="330" id="add" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" style="display: none;" width="100%"></iframe>
<div id="remove">
<a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class="thumb" src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg" /></a>
<div class="play" id="play">
</div>
</div>
</div>

Contoh Youtube Thumnail

Cara Cepat dan Mudah Membuat Site Map Blogspot

Seribu Ilmu July 16, 2018

1. Pertama buatlah Gadget HTML

2. Paste Code berikut ini kedalam Gadget HTML

<script src="https://dl.dropbox.com/s/7rstzqspa99y3u9/sitemap.js"></script> 
<script src="https://catatanharianmiko.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Rubahlah alamat URL dengan milik agan agan semuanya

7/12/18

Plasa Hosting - Domain Mulai 35 Ribu per Tahun

Seribu Ilmu July 12, 2018

Plasa Hosting adalah Satu-satunya Web Hosting di Indonesia yang mendaftarkan Domain dan membuat Hosting secara Otomatis (Instant) tanpa campur tangan Plasahosting dan dilakukan langsung oleh members sendiri sesuai pilihan Nama Domain yang diinginkan. Dapatkan harga domain dan hosting paling murah. Domain Mulai Rp. 35.000,- /tahun.

Beli Domain Baru 1 Menit Langsung aktif!! dan langsung bisa diakses dari Internet Explorer Dijamin!! Semua members plasahosting sudah membuktikan sendiri. Dulu anda perlu waktu minimal 1 hari untuk aktif, sekarang tidak lagi!! 1 Menit saja. Sangat cocok untuk orang yang tidak sabar :) atau keperluan Websites mendesak harus aktip saat itu juga

Daftar Domain yang Membeli Hosting di Plasa Hosting

acctranslation.com
lfpinky.com
suppliersapibali.com
autocarreleases.com
andanatiket.com
tegalratusakti.com
carsportone.com
thebalidolphin.com
theastationary.com
airpurifier.co.id

Keunggulan menggunakan Plasa Hosting

Domain dan Hosting Aktip hanya 1 Menit

Domain BARU yang anda beli akan aktip dalam 1 Menit saja, begitu juga Hosting di buat secara otomatis, tidak perlu menunggu waktu sampai berjam-jam. Langsung dapat diakses dari Browser Internet Explorer anda, dan sekaligus anda dapat mentransfer file-file HTML anda ke Server.

Plasahosting satu-satunya webhosting di Indonesia yang mendaftarkan Domain dan Hosting secara otomatis tanpa campur tangan kami dan semua dilakukan oleh customer sendiri.

Dimana anda bisa memperoleh layanan cepat dan otomatis seperti ini di Indonesia, cuma di Plasahosting.

Harga Paling murah!!

Dibandingkan dengan Web Hosting yang ada di Indonesia yang menggunakan teknologi komputer terbaru dan Fasilitas seperti adanya backup data, Plasahosting menawarkan harga yang paling murah dengan fasilitas diatas

Domain Milik Anda!!

Kami pastikan Domain yang anda beli menjadi milik anda. Domain bisa anda modifikasi kepemilikannya, mengganti DNS, memperpanjang masa aktip, ataupun menghapus dari database kami. Kami tidak campur tangan dalam kepemilikan Domain anda. 100% milik anda!!

Free DNS, Gratis DNS

Kami memberikan gratis DNS Server bila anda membeli Domain saja, gunakan ns1.plsahosting.com sampai ns4.plasahosting.com

silahkan request DNS gratis agar kami bisa menambahkan Domain anda di server DNS kami, yang diperlukan hanya IP server anda.

Untuk pembelian Hosting sudah otomatis mendapatkan DNS Server. Top Page

Bebas Biaya Setup

Anda TIDAK AKAN dikenakan biaya apapun selain biaya Hosting dan Domain, bahkan anda bisa mendapatkan discount dari kami tanpa pemberitahuan.

Free Trial

Anda diberikan kesempatan untuk mencoba server kami dengan menggunakan menu Demo Hosting, atau anda bisa kami buatkan user baru untuk melihat kemampuan server kami

Top Page

Layanan cepat dan otomatis

Tidak seperti penyedia layanan Web Hosting lainnya di Indonesia, Plasahosting menyediakan layanan yang cepat dan otomatis dalam melakukan transaksi pembelian domain dan hosting. Anda tinggal memilih domain yang anda beli, tekan tombol OK, dan transaksi anda akan sukses tanpa campur tangan kami. Domain akan langsung didaftarkan di Internet saat itu juga dan Hosting langsung dibuat saat itu juga, Jadi.. suka-suka anda. Tinggal tunggu beberapa menit langsung dapat anda akses.

Network aktip 99.9%

Kami jamin Networking/Jaringan kami aktip selama 99.9% karena selama ini belum pernah Down/Mati dalam kondisi apapun, karena didukung Backup UPS dan Generator

Akses Cepat

Darimanapun Web anda akan mampu diakses, tidak terkecuali dari Indonesia. kecepatan akses dari indonesia hampir mendekati web yang ditempatkan di server yang berlokasi di Indonesia. Anda bisa buktikan dengan membuka halaman ini.

Dukungan 24/7 Support

Kami selalu mendukung customer kami dalam 24/7 jam/hari dengan Hotline Telepone kami yang tersedia, atau bisa juga menggunakan fasilitas Yahoo Messager (jam 8 pagi - jam 2 malam) dan support email.

Daily Backup

Layanan Hosting yang terpenting adalah Backup Harian. kami jamin bila terjadi kerusakan pada pada media penyimpanan (hardisk), data anda tidak akan hilang karena sudah dilakukan backup setiap harinya

Full Fantastico Script

Kami menyediakan Script-script yang siap pakai untuk membangun websites anda yang dibundel dalam Paket Fantastico, Jadi anda tidak perlu susah-susah upload ke server, tinggal install langsung dari Paket Pantastico di cpanel Hosting. Tersedia Puluhan Script yang bisa langsung anda install seperti mambo open source, joomla, wordpress, oscommerce, phpnuke, postnuke, phpBB, Zencart, Coppermine Photo Gallery, dll

Unlimited Database

Anda bisa membuat database MySQL tidak terbatas sesuai dengan keperluan websites anda. Juga mampu anda akses dari Luar Server.

Unlimited Email

Anda bisa membuat email sebanyak mungkin tidak terbatas, selama space yang anda beli mencukupi

Free Search Engine Submit

Anda bisa menggunakan fasilitas submit di 380 Search engine sekaligus, anda tidak perlu mengunjungi situs-situs search engine yang ada. cukup menggunakan fasilitas submit kami. (akan diinformasikan lewat mail bila transaksi anda sukses)

Top Page

Garansi 30 Hari Uang Kembali

Kami memberikan garansi 30 Hari uang kembali 100% untuk paket Hosting bila anda merasa tidak puas dengan layanan kami.

Garansi tidak berlaku untuk hosting yang melakukan tindakan spam, mengirim 200 email/jam dan tidakan yang melanggar ketentuan. Top Page

7/8/18

Memasang Tombol Emot Icon Reaction

Seribu Ilmu July 08, 2018

1. Buka terlebih dahulu web Share This
2. Klik tombol Get Share Buttons

3. Sign Up dengan akun Facebook, Google+ Atau Email
4. Masukan halaman URL anda.
5. Klik Share Button > Sticky Share Buttons > On > Atur Button yang ingin kita tampilkan

6. Klik Inline Share Buttons > On > Copy Code > Paste sesudah <head>

<div class="sharethis-inline-share-buttons"></div>

7. Klik Reaction Buttons > On > Copy Code > Paste Sesudah <head>

<div class="sharethis-inline-reaction-buttons"></div>

7/6/18

Widget Popular Post Berwarna

Seribu Ilmu July 06, 2018

Pertama buatlah gadget pospopuler

Buka Blogger Theme > Edit HTML > kemudian letakan code dibaah ini tepat diatas kode </body>

<!--Post Popular-->
<style>
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
</style>

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>
<!--Post Popular-->

Code yang berwarna kuning merupakan code warna dari post populer 1 hingga 6.
Kemudian klik simpan.

7/4/18

Membuat Post Populer Berbintang atau Reting

Seribu Ilmu July 04, 2018

Buatlah terlebih dahulu post widget dengan klik Layout > tambahkan Gadget pilih Post Populer

Hari ini saya berbagi cara membuat post populer yang memiliki bintang atau reting.

Yang pertama buka Template Blog > Edit . Letakan code berikut setelah code <head>

Style Pertama

<!--Post Popular-->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
</style>
<!--Post Popular-->

Style Kedua

<!--Post Popular-->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
</style>
<!--Post Popular-->

Style Ketiga

<!--Post Popular-->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
</style>
<!--Post Popular-->

6/30/18

Merubah Ukuran Iklan dari Adsense

Seribu Ilmu June 30, 2018

Kali ini saya berbagi cara mengganti ukuran adsense. Pertama buka code adsense yang anda letakkan kemudian ganti code yang ada pada gambar berikut. P adalah panjang iklan dan t adalah tinggi dari iklan tinggal menyesuaikan ukuran panjang yang ingin anda sesuaikan dengan mengganti 930px dengan ukuran lain semisal 910px

Sekian dari saya dan sampai jumpa dipost berikutnya.

6/29/18

Membuat Menu Navigasi Mirip Jalan Tikus

Seribu Ilmu June 29, 2018

Hari ini saya ingin berbagi bagai mana cara membuat navigasi mirip dengan jalan tikus yang dapat kalian gunakan di blog kalian.

Pertama, buka terlebih dahulu Templat Blog > Edit Template. Letakan code berikut ini sebelum

<style>
/* Menu Jalan Tikus Created by www.idblanter.com */
body{backgorund:#f5f5f5}a:link{text-decoration:none!important}#headerblanter{height:65px;font-family:'Bitter',Roboto,Arial;width:100%;position:fixed;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);top:0;right:0;left:0;z-index:11;transition:all .5s ease-in-out;background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}.mega-wrapper{background:#fff;overflow:hidden;left:0;right:0;top:65px;position:absolute;padding:20px;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;-webkit-box-shadow:0 12px 50px rgba(0,0,0,0.17);box-shadow:0 12px 50px rgba(0,0,0,0.17);transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#navigation ul li:hover .mega-wrapper{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showkacatikus{color:#fff;position:fixed;top:12px;right:10px;display:none}#showjalantikus{color:#fff;position:fixed;top:12px;left:10px;display:none}#showkacatikus i,#showjalantikus i{font-size:35px}.megamenu{width:1100px;max-width:100%;margin:0 auto}.mega-wrapper li{width:205px;height:150px;margin-bottom:15px;margin-right:15px;border-radius:7px;overflow:hidden;position:relative}.mega-wrapper li:after{content:'';background:-webkit-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-o-linear-gradient(top,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:-webkit-gradient(linear,left bottom,left top,color-stop(40%,rgba(0,0,0,.5)),color-stop(68%,hsla(0,0%,100%,0)));background:-o-linear-gradient(bottom,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);background:linear-gradient(0deg,rgba(0,0,0,.5) 40%,hsla(0,0%,100%,0) 68%);position:absolute;transition:all .3s ease-in-out;top:0;bottom:0;left:0;right:0}.mega-wrapper li:hover:after{opacity:.8}.mega-wrapper ul li a{font-size:13px!important;padding:0!important;z-index:9}.mega-wrapper ul li a:hover{background:transparent!important}.mega-wrapper ul li a:nth-child(2){position:absolute;width:195px;bottom:0;text-shadow:0 3px 6px #000;text-transform:none!important;padding:10px!important}.mega-wrapper li img{height:150px;width:220px}#search-blanter{position:fixed;background:#ffeddf;left:0;right:0;top:65px;padding:15px 15px 18px;text-align:center;transform:scaleY(0);transition:all .3s ease-in-out;-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0)}#search-blanter.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#search-blanter:after{content:'';height:4px;background:linear-gradient(90deg,#ce0a46,#e98125);position:absolute;bottom:0;left:0;right:0}#bsearchbox{width:850px;max-width:100%;margin:0 auto;position:relative;overflow:hidden}#bsearchbox:before{content:'';background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPKD7975EC7BGC5J8dgzR5bGPSw5GVaMBXlaCQ-RbIlwqRJetmSYvcKfUmkl071mZm13r0-erM6x1poLf6CQ7RGZPHODn22t0p-4xGBPh-s8FUzEDOIFYd1X9tLv13xtyMXhQlw_yP6_k/s35/searchblanter.png)no-repeat;position:absolute;width:33px;height:35px;left:17px;top:13px}input#searchteks{font-size:18px;padding:20px 20px 20px 70px;border:1px solid #e69f65;border-radius:4px;width:100%;outline:none;color:#666}button.bsearchbtn{position:absolute;top:1px;background:linear-gradient(0deg,#e3642d,#f5743c 56px,#fff);font-weight:700;background:-webkit-linear-gradient(bottom,#e3642d,#f5743c 56px,#fff);font-family:'Roboto',Arial;text-transform:uppercase;color:#fff;border-radius:0 4px 4px 0;border:none;font-size:20px;width:150px;height:61px;right:0;outline:none;cursor:pointer}button.bsearchbtn:hover{opacity:.9}button.bsearchbtn:before{bottom:0;border-top:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after{top:1px;border-bottom:10px solid hsla(0,0%,100%,0)}button.bsearchbtn:after,button.bsearchbtn:before{position:absolute;height:30px;left:0;content:"";border-left:10px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9}#navigation ul li a.blanter-nav:hover:after{bottom:-1px;border-bottom:7px solid #fff}#navigation ul li a.blanter-nav:after{position:absolute;bottom:-7px;width:14px;left:50%;margin-left:-7px;content:"";-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:7px solid hsla(0,0%,100%,0);border-left:7px solid hsla(0,0%,100%,0);border-right:7px solid hsla(0,0%,100%,0);-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#navigation ul li a:hover{background:rgba(255,255,255,.14)}#navigation ul li{float:left}#navigation ul li a.blanter-nav{position:relative}#navigation ul li a{color:#fff;font-size:15px;text-transform:uppercase;padding:23px;font-weight:600;display:block}#navigation ul{margin:0;padding:0;list-style:none}#header2{float:left;font-size:160%;text-transform:uppercase;font-weight:300;line-height:57px;margin-top:8px;margin-right:50px}#header2 img{margin:0;padding:0;max-width:240px;max-height:50px}.titlewrapper{margin:0;padding:0}.header h1.title,.header p.title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.4px;margin:5px 0}.header .description{display:none}.header a,.header a:hover{color:#fff}.logo{float:left;font-size:160%;text-transform:uppercase;font-weight:300;max-height:70px}.logo a{color:#fff;text-decoration:none;margin-top:-5px}.logo a:hover{color:#fff;text-decoration:none}.logo img{top:0;left:0!important}#jtheadermenu{font-family:'Bitter',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:100px;top:45px;padding:10px 15px 5px;width:18px;height:1px;transition:all .3s ease-in-out;z-index:9;overflow:hidden;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);opacity:0;border-radius:4px;overflow:hidden}#jtheadermenu li{width:100%;border-bottom:1px solid #ddd}#jtheadermenu li a{padding:11px 0;display:block;color:#444;font-weight:700;font-size:14px!important}#jtheadermenu li a:hover{color:#e56f2a}#jtheadermenu.shows{visibility:visible;height:167px;opacity:1;width:180px}a.blanter#showmenu i.material-icons{line-height:.6;font-size:35px;margin-top:5px}#menu-kiri{margin-right:30px}a.blanter#showsearch i.material-icons{line-height:.6;font-size:40px;margin-top:5px}#showsearch.aktif{background:#ffeddf;color:#e87e25!important}a.blanter i.fa{margin-top:5px}a.blanter{font-size:22px;color:rgba(255,255,255,0.73)!important;padding:15px 8px;text-align:center;float:right;margin-right:5px}a.blanter:hover{color:#fff!important}
@media screen and (max-width:1024px){#menu-kiri{display:none}}
@media screen and (max-width:768px){#headerblanter li a{width:100%;text-align:left;color:#fff}#headerblanter li{width:100%}.nav-menu2{width:100%}#search-box .fa-arrow-left,.blanter-back{display:block}#header2{width:220px;height:60px;overflow:hidden;float:none;margin:8px auto}a#showsearch{visibility:hidden}.mega-wrapper li{width:47%!important;height:120px}#search-blanter{background:#fff;padding:0}#bsearchbox{width:auto}input#searchteks{width:75%;font-size:15px;border:none}#bsearchbox:before{background-size:25px}#menu-wrapper{width:100%;position:absolute;top:60px;transform:scaleY(0);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear;overflow:hidden}#menu-wrapper,.mega-wrapper{background:#ce0a46;background:-webkit-linear-gradient(left,#ce0a46,#e98125);background:-o-linear-gradient(right,#ce0a46,#e98125);background:-webkit-gradient(linear,left top,right top,from(#ce0a46),to(#e98125));background:-o-linear-gradient(left,#ce0a46,#e98125);background:linear-gradient(90deg,#ce0a46,#e98125)}#menu-wrapper.aktif{transform:scaleY(1);-webkit-transform:scaleY(1);-ms-transform:scaleY(1)}#showjalantikus,#showkacatikus,#menu-kiri{display:block}.mega-wrapper li:nth-child(2),.mega-wrapper li:nth-child(4),.mega-wrapper li:nth-child(6){margin-right:0}.mega-wrapper{z-index:1;top:0}a:link{text-decoration:none}#jtheadermenu{right:80px;top:initial;bottom:70px}#jtheadermenu li a{color:#555}.mega-wrapper li img{height:120px}li.clearfix:nth-child(n+7),button.bsearchbtn,#navigation ul li a.blanter-nav:after{display:none}}
</style>

Kemudian copy code berikut ini dan paste code tersebet sebelu code </head>

<script>
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://fonts.googleapis.com/css?family=Bitter");
$(document).ready(function(){$("#showsearch,#showkacatikus").click(function(){$("#showsearch,#search-blanter").toggleClass("aktif");});});
$(document).ready(function(){$("#showjalantikus").click(function(){$("#menu-wrapper").toggleClass("aktif");});});
$(document).ready(function(){$("#showmenu").click(function(){$("#jtheadermenu").toggleClass("shows");});});
</script>

Kemudia ganti navigasi kalian dengan mengganti code berikut ini. Carilah code berikut ini dan ganti div terebut dengan code di bawah ini <header> atau div header

<header id="headerblanter" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<a href="javascript:void" id="showjalantikus" title="Show Navigation"><i class="material-icons"></i></a>
<a href="javascript:void" id="showkacatikus" title="Show Search"><i class="material-icons"></i></a>
<div class="header2 section" id="header2"><div class="widget Header" data-version="1" id="Header1">
<div id="header-inner">
<h1 style="text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;">
(Editor) Anzrosone
</h1>
<a href="http://anzrosone.blogspot.co.id/" style="display: block">
<img alt="(Editor) Anzrosone" height="61px; " id="Header1_headerimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqNFTmMewHU8pMUK2d52B_PRDTYokeiALXrzn3zOvkJSVRhh8xZ959AAUMtDww_duf8QT3f22sw764yYSfN2F1Rcef3H6Dg7wycPgOL56dEKpWZzrRSnvRBXuPTIHl8XiZK2u2Y5Y8cI/s1600/JalanTikus.png" style="display: block" width="298px; ">
</a>
</div>
</div></div>
<div id="menu-wrapper">
<div id="jtheadermenu">
<li><a href="#" itemprop="url" title="Pasang Iklan"><span itemprop="name">Pasang Iklan</span></a></li>
<li><a href="#" itemprop="url" title="Hubungi Kami"><span itemprop="name">Hubungi Kami</span></a></li>
<li><a href="#" itemprop="url" title="Tentang Kami"><span itemprop="name">Tentang Kami</span></a></li>
<li><a href="#" itemprop="url" title="Kerjasama"><span itemprop="name">Kerjasama</span></a></li>
</div>
<div id="navigation">
<ul>
<li><a class="blanter-nav" href="#" itemprop="url" title="Apps"><span itemprop="name">Apps</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://www.idblanter.com/feeds/posts/default/-/Template?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://www.idblanter.com/2017/06/masign-andromeda-responsive-blogger-template.html"><img alt="Masign Andromeda Responsive Material Design Blogger Template" title="Masign Andromeda Responsive Material Design Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqPbwDjzsu8bT33lK88TFNri9dLramzNUnXNrTUkbmdELNrZzAod24f2RoRqbGiV7gxfvI5GFMLmbIDsyKk8onSrEnDZ_xvXM5Rwhqy1D7UrY_5f2uFMgW3WmPYcCqV76ZFs0kUVyws8/w215-h150/Masign+Andromeda.png"></a><a href="https://www.idblanter.com/2017/06/masign-andromeda-responsive-blogger-template.html" title="Masign Andromeda Responsive Material Design Blogger Template">Masign Andromeda Responsive Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/blanter-octa-responsive-blogger-template.html"><img alt="Blanter Octa Responsive Blogger Template with Messenger Emoji" title="Blanter Octa Responsive Blogger Template with Messenger Emoji" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AQXIrtXSowWIXefaWIexxNpJ9kM12Fu44ZOnaoB-lMDkRl7P3m7CtXL-vktNrZZhX35s2ESoeFk2WLLvfGa8tyQnUL5ZRSxgrs_rOMvf6vGQlWkvGbTrWj7t9qKeEtFSXcSvfWYRSVQ/w215-h150/Blanter+Octa.png"></a><a href="https://www.idblanter.com/2017/08/blanter-octa-responsive-blogger-template.html" title="Blanter Octa Responsive Blogger Template with Messenger Emoji">Blanter Octa Responsive Blogger Template with Messenger Emoji</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/02/masign-magz-premium-responsive-blogger-template.html"><img alt="Masign Magz Premium Material Design Colored Blogger Template" title="Masign Magz Premium Material Design Colored Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkLkTi_4RO77_tRDxOPlJo1WhAoIG0hu649KH63G4200UJ3So9Jn5NomZuSplAs3-KdSDrSHz0Q6Z0HhT2SM52c9nZxvx3ZkGbJWa6WyuAD3TLLaU7ZajzaaI9vp-nCRWtYlzr8h2ajE/w215-h150/Masign+Magz.png"></a><a href="https://www.idblanter.com/2017/02/masign-magz-premium-responsive-blogger-template.html" title="Masign Magz Premium Material Design Colored Blogger Template">Masign Magz Premium Material Design Colored Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2018/02/blanter-swift-responsive-blogger-template.html"><img alt="Blanter Swift Responsive Fast Load Blogger Template" title="Blanter Swift Responsive Fast Load Blogger Template" class="tagpost_thumb" src="https://2.bp.blogspot.com/-g0fYA8eywXI/WofJW0ZkYzI/AAAAAAAAJdg/DvAZe49i_5wKn462PKj6VEUjCKAsvUkEwCLcBGAs/w215-h150/Blanter%2BSwift%2BBlogger%2BTheme.png"></a><a href="https://www.idblanter.com/2018/02/blanter-swift-responsive-blogger-template.html" title="Blanter Swift Responsive Fast Load Blogger Template">Blanter Swift Responsive Fast Load Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2018/02/masign-alpha-premium-blogger-template.html"><img alt="Masign Alpha Premium Special Material Design Blogger Template" title="Masign Alpha Premium Special Material Design Blogger Template" class="tagpost_thumb" src="https://1.bp.blogspot.com/-blXrVmBIqMc/WnZHs1cGaYI/AAAAAAAAJH0/iZO5alJMrb076hAE5t-SxkDZSwpSKFF3ACLcBGAs/w215-h150/Masign%2BAlpha%2BTheme.png"></a><a href="https://www.idblanter.com/2018/02/masign-alpha-premium-blogger-template.html" title="Masign Alpha Premium Special Material Design Blogger Template">Masign Alpha Premium Special Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/07/masign-clean-premium-responsive-blogger-template.html"><img alt="Masign Clean Premium Material Design Blogger Template" title="Masign Clean Premium Material Design Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXf-8Hp-A5ZSfcV6VlSBDS0d0PaubksTXtAgPaXFGHHi6TSJTXH_iz60y2xBs3EV31Ggg6-5x-TBcfX6T4r86afEXl5vAGT2O98Pl7A5oaJg1QtVBDh7RQT7R_0VgmSw7A51F3gkCk18/w215-h150/Masign+Clean+Blogger+Template.png"></a><a href="https://www.idblanter.com/2017/07/masign-clean-premium-responsive-blogger-template.html" title="Masign Clean Premium Material Design Blogger Template">Masign Clean Premium Material Design Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/11/blanter-nova-responsive-blogger-template.html"><img alt="Blanter Nova Responsive Blogger Template" title="Blanter Nova Responsive Blogger Template" class="tagpost_thumb" src="https://2.bp.blogspot.com/-I4WpFJmbSmQ/Who9ItsfqpI/AAAAAAAAH0c/DwfPkLQdnwobsvTvJSXuJx8d6Uf0SUCfQCLcBGAs/w215-h150/Blanter%2BNova%2BTemplates.png"></a><a href="https://www.idblanter.com/2017/11/blanter-nova-responsive-blogger-template.html" title="Blanter Nova Responsive Blogger Template">Blanter Nova Responsive Blogger Template</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/blanter-premium-safelink-blogger-template.html"><img alt="Blanter Premium Safelink Blogger Template With Material Design" title="Blanter Premium Safelink Blogger Template With Material Design" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhjhK0Hkf2_9yEVc03DLFKgHXEJgr2_QKp9zBAr2vugI-koBsLupg2ICaNzHCnMaftONp6XlZBmiwoFJ0aFd6uVp-CoxoyG6YQsgOqod-WiDr6I84JXUG9c8S9MC_BXmwnJQrmXJUcPM/w215-h150/BlanterSafelink.png"></a><a href="https://www.idblanter.com/2017/08/blanter-premium-safelink-blogger-template.html" title="Blanter Premium Safelink Blogger Template With Material Design">Blanter Premium Safelink Blogger Template With Material Design</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2015/04/membuat-safelink-sendiri-di-blog.html"><img alt="Cara Membuat Safelink Sendiri Menggunakan Blogger" title="Cara Membuat Safelink Sendiri Menggunakan Blogger" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_z4E5C5MyWV5xZp2p3VcCeQIExGcok7JEHfq7UJ_gK2R0BxMl2vix7xrLddMVaT0jl67QgJj0I7kNi7xWv0esXAwL6w4mNFVg8VuKAHCjuAIEcOyofwcfro4tMHWO-z4s8O3daqylRhc/w215-h150/STRATEGI+Safelink.png"></a><a href="https://www.idblanter.com/2015/04/membuat-safelink-sendiri-di-blog.html" title="Cara Membuat Safelink Sendiri Menggunakan Blogger">Cara Membuat Safelink Sendiri Menggunakan Blogger</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2016/04/magna-one-premium-blogger-template.html"><img alt="Magna One Premium Responsive Blogger Template" title="Magna One Premium Responsive Blogger Template" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8HRcLacrVGAvrRHymz9ObqKh2lhZsZY2Z8RwgNPlkRqL4lCAMxeToJsbhEgHYtjZUluk7OoD4_ZA1CvLihgHBt5M93JdMGIgCj6hZGG5AY-UBsIZz8lT4gR4gBLE4U_bX9F64f2Xvk0/w215-h150/Magna+One+Premium.png"></a><a href="https://www.idblanter.com/2016/04/magna-one-premium-blogger-template.html" title="Magna One Premium Responsive Blogger Template">Magna One Premium Responsive Blogger Template</a><br><br></li></ul>
</div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Games"><span itemprop="name">Games</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://askblanter.blogspot.com/feeds/posts/default/-/Game?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/aov-arena-of-valor-blanter-nova.html"><img alt="AOV Arena Of Valor Blanter Nova" title="AOV Arena Of Valor Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrrjr4NAuDANoXCKznBifbBcw1TBYU1ZDO4XWN6NTPWIohoWD6BZMP6Da0IQspKsNEVsuBGfiOR9Mc9UHOsY0ZSvMvQzBjP_skC-F-ATxgQKRzEl9glLLCqbf5oEFYq_FfseVC2g1tm4/w215-h150/AOV.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/aov-arena-of-valor-blanter-nova.html" title="AOV Arena Of Valor Blanter Nova">AOV Arena Of Valor Blanter Nova</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/mobile-legends-bang-bang-blanter-nova.html"><img alt="Mobile Legends Bang Bang Blanter Nova" title="Mobile Legends Bang Bang Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVMEW1bMa6-wCRftvHjl72ihcOFKfZr0NfUbdVGmLR_kjLto9X-MQa4VKeyWDVVbms9ZHXmhdnkSsqQADzDniBClbB2MThIyVP8BAeDnelO7N-UazYvueDFWb7mWMCOKv_y1_ITqQYhU/w215-h150/MobileLegends.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/mobile-legends-bang-bang-blanter-nova.html" title="Mobile Legends Bang Bang Blanter Nova">Mobile Legends Bang Bang Blanter Nova</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/diao-chan-arena-of-valor.html"><img alt="Diao Chan Arena Of Valor" title="Diao Chan Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-E2mYfNlzmbF_IRgvZ9AIsmg6YJI60lPQ0PFBFkL_qnjChQ0-34Bu8i8gzCl2ugPW82Kw7vuQcNM3mSXQsVjiQKJhJ-9AjopkvTgZxs217GWWaDJR6hmz_K4KcEhZaIJfs-f2ZnFueiSv/w215-h150/Diao+Chan.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/diao-chan-arena-of-valor.html" title="Diao Chan Arena Of Valor">Diao Chan Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/freya-mobile-legends-bang-bang.html"><img alt="Freya Mobile Legends Bang Bang" title="Freya Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQj5y7wFji_fKM-sQ4oqqOrXPZTRu3N8jtYmixwdxuWxtW1vfHr6zX_OI6ShjMWz1L-MDH_NIoFaSnkcYCkAbiywhpfG7VM20b0_Fa1s_J_CDSHkZqkybZfrBIm1Y9UVUJvXqrAhI6dL9v/w215-h150/Freya.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/freya-mobile-legends-bang-bang.html" title="Freya Mobile Legends Bang Bang">Freya Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/diao-chan-crystal-of-lotus-arena-of.html"><img alt="Diao Chan The Crystal Of Lotus Arena Of Valor" title="Diao Chan The Crystal Of Lotus Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInuj0WYln1iKzqmAHMg_jhDpM0lvfIjC8yjIYoJcwyzWXr0eTn3NpOBDmQvNj-mUCb1u5qla6bT4dp1TJRtj974QzpvqSohXQfrrfx65tVfqdav2RZrOBZZFy7GR9xX0FBAQB4QpxJAfe/w215-h150/Diao+Chan+The+Crystal+Lotus.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/diao-chan-crystal-of-lotus-arena-of.html" title="Diao Chan The Crystal Of Lotus Arena Of Valor">Diao Chan The Crystal Of Lotus Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/rafaela-mobile-legends-bang-bang.html"><img alt="Rafaela Mobile Legends Bang Bang" title="Rafaela Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZUy9oI3UNA9NUhwkJQxal72UwmhS4qX94y2pkBMfyYdn4hToj7OeNwyU4hvBxmas5ZIph4565anluvVQV3Vi-jQkbd5UiNFS-5rJDCOsGPKB-CcKX7tKpLMvYdPHFBLHMiy_emWbxMC1/w215-h150/Rafaela.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/rafaela-mobile-legends-bang-bang.html" title="Rafaela Mobile Legends Bang Bang">Rafaela Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/ilumia-arena-of-valor.html"><img alt="Ilumia Arena Of Valor" title="Ilumia Arena Of Valor" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AOT7kdukbUL8BBrlg2Pyu7V17cc0xwr-1DEtVPmANoeyNZqxoDxpSlWG5kZEPu4x6-mNWy_Z_H2gz3MYnCeMSxBhvpGGaKngYctQXnmqPi3sNivkGDTPej2NubqYDpz6_uceCaIUhI0n/w215-h150/Ilumia.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/ilumia-arena-of-valor.html" title="Ilumia Arena Of Valor">Ilumia Arena Of Valor</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/fanny-mobile-legends-bang-bang.html"><img alt="Fanny Mobile Legends Bang Bang" title="Fanny Mobile Legends Bang Bang" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vXIJWntdsXBfiCs-dH7upYxXChyphenhyphenblnxvct5aCDq7l8joXDOYV8aJ1iVtV1zIpNq4sbT_IsObhKIAg0dAXlHBa5P31rG3fCl6Fli69tiERr5grLhGTdzByU2xeBTlheeHrY5Im-x36NGw/w215-h150/Fanny.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/fanny-mobile-legends-bang-bang.html" title="Fanny Mobile Legends Bang Bang">Fanny Mobile Legends Bang Bang</a><br><br></li><li class="clearfix"><a href="https://askblanter.blogspot.com/2017/11/kagura-cherry-witch-mobile-legends-with.html"><img alt="Kagura Cherry Witch Mobile Legends with Blanter Nova" title="Kagura Cherry Witch Mobile Legends with Blanter Nova" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsS4lZ6AeoDgPlXa1HnXGRd5rIAPCKq6tqx0TkvRWtGAO9mt9o8ZDhSFaQ-NcAtwdV_jNebNCBNRgZ0T0b1KMO1Cb08CaO7Nx4ZZ7M-RFhMJQj6KV7KWnfhEHK5cvoWRaqvorankBkZYAE/w215-h150/Kagura+Cherry+Witch.jpg"></a><a href="https://askblanter.blogspot.com/2017/11/kagura-cherry-witch-mobile-legends-with.html" title="Kagura Cherry Witch Mobile Legends with Blanter Nova">Kagura Cherry Witch Mobile Legends with Blanter Nova</a><br><br></li>
</ul></div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Tips &amp; Trik"><span itemprop="name">Tips &amp; Trik</span></a>
<div class="mega-wrapper"><div class="megamenu">
<script src="https://www.idblanter.com/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=jalanblanter" type="text/javascript"></script><ul class="taglabel"><li class="clearfix"><a href="https://www.idblanter.com/2018/04/membuat-menu-navigasi-ala-jalan-tikus.html"><img alt="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog" title="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjq51etSoENLgDAiBwLugE-_CM5qU560G1UskE6Qwk2AhJYmzWRSxVBMs8wgDBkM_4ii5bPWx_2hKx3vgXqyaFwxPkw5St9pRwxnjIkuUpSvYsidpK31fsNf7THQ2MzXkPvWPgIt7La5o/w215-h150/Menu+Ala+Jalan+Tikus.png"></a><a href="https://www.idblanter.com/2018/04/membuat-menu-navigasi-ala-jalan-tikus.html" title="Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog">Cara Membuat Menu Navigasi Ala Jalan Tikus di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/12/membuat-pagination-di-postingan-blog.html"><img alt="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog" title="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBA7lIKZtZW-O_rxSNx8eBprB9VGWTquOaQ5kOLxJXPQVZNRFu2JDwSe0BCpTQilBxWLSpXs-3PB-5_SP0gbCjIuhY7OryFTOdCoOcLeaZreHlPiPqzaeTwOBT1fOPZQauQG0aCgzvLWg/w215-h150/Blogger+Pagenation+Post.png"></a><a href="https://www.idblanter.com/2017/12/membuat-pagination-di-postingan-blog.html" title="Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog">Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/12/membuat-material-design-recent-post-by-label.html"><img alt="Membuat Material Design Recent Post Berdasarkan Label di Blog" title="Membuat Material Design Recent Post Berdasarkan Label di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge02XbQIAd6Qq0MxTJ1ysmFuN2ylPsVZcPz5kSPuBErz9D1k3NTLLIF3pe3MprqNJLIWt_7-HGrxM1K1oyILVfyvAnYl1jj-rBYePW9Za9dODA7onWtc_XM3sUHQRRbTVRue7PlTrq0lY/w215-h150/Material+Design+Recent+Post.png"></a><a href="https://www.idblanter.com/2017/12/membuat-material-design-recent-post-by-label.html" title="Membuat Material Design Recent Post Berdasarkan Label di Blog">Membuat Material Design Recent Post Berdasarkan Label di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/10/memasang-widget-popular-post-di-bawah-post.html"><img alt="Cara Memasang Widget Popular Post di bawah Postingan" title="Cara Memasang Widget Popular Post di bawah Postingan" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMRhT97peAG0HQaegWjV38u64j4MDTE8v1o_qlJyJPohrocU6rC4U4VHOZWB9yfJZIOPuT-7XaMnQO5NBIhUg8TsWPiEQuCE0br1yIPfVoajcd6WvsjoHF9PwEoK8jglVH707UrCGSco/w215-h150/PopularPost+Special.png"></a><a href="https://www.idblanter.com/2017/10/memasang-widget-popular-post-di-bawah-post.html" title="Cara Memasang Widget Popular Post di bawah Postingan">Cara Memasang Widget Popular Post di bawah Postingan</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/01/membuat-autoload-page-navigation-on-scroll.html"><img alt="Membuat Autoload Page Navigation on Scroll di Blog" title="Membuat Autoload Page Navigation on Scroll di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIQhJyO7kV16GU9sWiUHeyJHBG1FSSlfF_x_ingcgVfsWLTzwIXXAwgmcc77G_hyphenhyphencVub7b-Vu5ioLwwQhn7E6BF7BWItMKz9DYmSZV3YY7U_qtI1s_enMqqqbLygm8eiXpywVSRS0pTM/w215-h150/Autoload+Post.png"></a><a href="https://www.idblanter.com/2017/01/membuat-autoload-page-navigation-on-scroll.html" title="Membuat Autoload Page Navigation on Scroll di Blog">Membuat Autoload Page Navigation on Scroll di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/08/membuat-material-design-dialog-box.html"><img alt="Membuat Material Design Dialog Box dengan jQuery di Blog" title="Membuat Material Design Dialog Box dengan jQuery di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWr2rmZ-cGeWdcm61eyapRolagQduim3LFOvkJh0RsEeZe2RIwWFLZ_9y1RDG4r-fYQqHpuipeUsJ4vgoSygG8zru6Ftj9NJ-IX5ywwxfbYy_EVD47dvX9Kka3ni4v4YuilpoymlHOv1I/w215-h150/Material+Design+Dialog+Box.png"></a><a href="https://www.idblanter.com/2017/08/membuat-material-design-dialog-box.html" title="Membuat Material Design Dialog Box dengan jQuery di Blog">Membuat Material Design Dialog Box dengan jQuery di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2016/05/membuat-material-design-menu-navigation.html"><img alt="Membuat Material Design Menu Navigation di Blog" title="Membuat Material Design Menu Navigation di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVp0TnWzoWDnW6q-qJS5jTL8MU0epAnO7q7z5MzuF041CugfP-ppe7DpXPLgyHZzn0W2ZpoJLg43kwHrt_ZBgiklnAHTqjojJnhyWmHg9CSrlxvuk6drwqjmCWqW07h_FVHotYP8O7CuA/w215-h150/Material+Design+Menu+Navigation.png"></a><a href="https://www.idblanter.com/2016/05/membuat-material-design-menu-navigation.html" title="Membuat Material Design Menu Navigation di Blog">Membuat Material Design Menu Navigation di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/06/membuat-quote-box-yang-berubah-warna.html"><img alt="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog" title="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CpfmRFu0cmGx007x_XZHeBwnQFpHToBezRqaFEdQ6mq3J3XqzWex_4owk8sXoQkAhA8lkEhKh9_WOIxS1PvIZimUgqkCt_TRhlWxVwsYkqNhWR8Ie0vJ-_03Nuj9K3G20jIxRin9KEg/w215-h150/Quote+Box+Unik.png"></a><a href="https://www.idblanter.com/2017/06/membuat-quote-box-yang-berubah-warna.html" title="Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog">Cara Membuat Quote Box Yang Berubah-ubah Warna di Blog</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/05/membuat-notifikasi-show-hide-dengan-animasi.html"><img alt="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe" title="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq0Fi70C9PC9elves_su9pPzHp_MVmArVRyKTp-fABNTzjLNzkeKcRBlXX9rEIw0wCFMi6oqjNHHReGM8BLGFk8ltL75rSxUm1aiymV721bhQQOiovrQB6_SlLAtbLkBvjBwaRlJ5jb8/w215-h150/NotifikasiKeyframe.png"></a><a href="https://www.idblanter.com/2017/05/membuat-notifikasi-show-hide-dengan-animasi.html" title="Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe">Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe</a><br><br></li><li class="clearfix"><a href="https://www.idblanter.com/2017/03/membuat-related-post-material-design.html"><img alt="Cara Membuat Related Post Material Design di Blog" title="Cara Membuat Related Post Material Design di Blog" class="tagpost_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-M03J48Wm_Ol9kjGw2o14xsTbUbjzS4GhIUKK8xZofmNtbSmZhIWD6lqgJFTPtj30YizrydLpoZfZc83SAqEdfHsuO07crZQ7W8MRK7Aw4x9-ZEodn4NVgPGONJiFschJcVL62Q13PE/w215-h150/RelatedPostMaterialDesign.png"></a><a href="https://www.idblanter.com/2017/03/membuat-related-post-material-design.html" title="Cara Membuat Related Post Material Design di Blog">Cara Membuat Related Post Material Design di Blog</a><br><br></li></ul>
</div></div></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Gadget"><span itemprop="name">Gadget</span></a></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Gokil"><span itemprop="name">Gokil</span></a></li>
<li><a class="blanter-nav" href="#" itemprop="url" title="Tech News"><span itemprop="name">Tech News</span></a></li>
</ul>
</div>
<div id="menu-kiri">
<a class="blanter" href="javascript:;" id="showsearch" target="_blank" title="Show Search"><i class="material-icons"></i></a>
<a class="blanter" href="javascript:;" id="showmenu" target="_blank" title="Show More"><i class="material-icons"></i></a>
<a class="blanter" href="https://plus.google.com/+RhinokageRio" itemprop="sameAs" target="_blank" title="Google Plus"><i aria-hidden="true" class="fa fa-google-plus"></i></a>
<a class="blanter" href="https://twitter.com/RhinokageRio" itemprop="sameAs" target="_blank" title="Twitter"><i aria-hidden="true" class="fa fa-twitter"></i></a>
<a class="blanter" href="https://www.facebook.com/DuniaBlanter" itemprop="sameAs" target="_blank" title="Facebook"><i aria-hidden="true" class="fa fa-facebook"></i></a>
</div>
</div>
<div id="search-blanter" itemprop="mainEntity" itemscope="itemscope" itemtype="http://schema.org/WebSite">
<meta content="http://anzrosone.blogspot.co.id/" itemprop="url">
<form action="/search" id="bsearchbox" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" method="get">
<meta content="/search?q={q}" itemprop="target">
<input id="searchteks" itemprop="query-input" name="q" placeholder="Cari Tips, Apps dan Games..." required="required" type="text" value="">
<button class="bsearchbtn" type="submit">Cari</button>
</form></div>
</header>

Gantilah berapa url dengan url blog sobat, kalian dapat melihat contoh dibawah ini.

6/28/18

Cara Membuat Tombol Up and Down di Blogspot

Seribu Ilmu June 28, 2018

Pertama buka Temple Blog > Edit

Letakkan code berikut ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Lanjutkan dan letakan code berikut tepat di bawah code di atas sesuai versi yang kalian suka.

Versi 1

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

Versi 2

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>

Kemudian letakan kode berikut ini sebelum code </body>

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

8/20/18

8/18/18

8/15/18

7/28/18

7/24/18

7/22/18

7/20/18

7/18/18

7/16/18

7/12/18

Keunggulan menggunakan Plasa Hosting

7/8/18

7/6/18

7/4/18

6/30/18

6/29/18

6/28/18

Newsletter

Statistics

Trending Posts

Labels

Partner

Recent Posts

Formulir Kontak

Featured