SEPESER.COM

Cara Membuat Navigasi Menu Dropdown di Blogger

#menunavku{margin:0;padding:0;background-color:black;width:100%;height:40px;overflow:hidden;text-transform:uppercase;font-family:calibri}

#menunavku #menuku{list-style-type:none;margin:0;padding:0;width:100%;height:40px}

#menuku li{display:inline-block;float:left;margin-left:1px}

#menuku li a{display:block;height:30px;text-align:center;line-height:30px;color:#fff;background:#2f3036;text-decoration:none;padding:5px 10px}

#menuku ul li ul li a{min-width:140px}

#menuku .hiddenku{display:none}

#menuku li .hiddenku li a{min-width:170px;background-color:#5d5e63}

.hiddenku{width:170px;margin:0;padding:0;position:absolute;z-index:999}

.hiddenku li a{display:inline-block}

/*menuku hover*/

#menuku li a:hover{background-color:red}

#menuku li .hiddenku li a:hover{background-color:red}

/*memunculkan menu*/

#menuku li:hover .hiddenku{display:block;min-width:140px;float:none}

\*menu checkbox*\

#show-menuku{width:100%;height:20px;cursor:pointer}

input[type=checkbox]{display:none;-webkit-appearance:none}

input[type=checkbox]:checked ~ #menuku{display:block}

.show-menuku{text-decoration:none;color:#fff;background-color:#1946c5;text-align:center;padding:10px 0;display:none}

/*Responsive Styles*/

@media screen and (max-width:800px){#menunavku{width:100%;height:auto}#menuku{width:100%;display:none}#menunavku #menuku{position:relative;height:0}#menuku li{display:inline-block;margin:0;width:100%}#menuku li a{display:inline-block;margin-left:1px;width:100%;padding:5 0;margin:0}#menuku .hiddenku{position:relative;width:100%;padding:0}.show-menuku{display:block;cursor:pointer}}

 <nav id='menunavku'>

 <label for="show-menuku" class="show-menuku">Show Menu</label>

 <input type="checkbox" id="show-menuku" role="button"/>

 <ul id="menuku">

  <li><a href="#">Home</a></li>

  <li>

   <a href="javascript:void(0)">Pages &#65516;</a>

   <ul class="hiddenku">

    <li><a href="#">About</a></li>

    <li><a href="#">Contact</a></li>

 <li><a href="#">Disclaimer</a></li>

    <li><a href="#">Privacy Police</a></li>

   </ul>

  </li>

    <li>

   <a href="javascript:void(0)">Belajar Microscoft Office &#65516;</a>

   <ul class="hiddenku">

    <li><a href="#">Microsoft Word</a></li>

    <li><a href="#">Microsoft Excel</a></li>

    <li><a href="#">Microsoft Power Point</a></li>

   </ul>

  </li>

 </ul>

</nav>

<div id='sepesergulir'></div>

Cara 2: Membuat Indikator Persen di Widget Blogger

<style>

#sepesergulir {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}

#sepesergulir:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}

</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<script type='text/javascript'>

//<![CDATA[

var scrollTimer = null;

$(window).scroll(function() {

var viewportHeight = $(this).height(),

scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,

progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#sepesergulir').height() / 2;

$('#sepesergulir')

.css('top', distance)

.text(' (' + Math.round(progress * 100) + '%)')

.fadeIn(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#sepesergulir').fadeOut();

}, 1500);

});

//]]>

</script>

<div id='sepesergulir'></div>

Cara memasang Iklan Sendiri di Blogger

HTML / JavaScript

Masukan kode dibawah ini.

<div style="background: none; border: none; height: 250px; margin: 0; padding: 0; width: 300px;">
<a href="https://www.sepeser.com/" target="_blank" title="blog banner"><img alt="iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRNSRYJn3nehLooPIz4vVSgCkJCRTVt9vwtfgmz1IODYj0W_7SMhyDVbU2ttf1ZDz4wdrNzFanTnxK1ACwEybGaq3-0t3e0COn8eDkqSWmMwiH_AXYoNBUzq1ovitCz-TIPlNWlZMhpxi-Li9iWfPMlA3Wii2qD_jGGvHMZWlKkJoJUoNDued1jsFYLoN/s320/contoh-baner-iklan.jpg" title="title image iklan" /></a>
</div>

Keterangan:

• Warna merah: Link tujuan ketika gambar di klik (Misalnya link postingan kamu yang menjelaskan promosi iklanmu )
• Warna biru : Link gambar yang kamu upload tadi (di atas hanya contohnya saja, ubah saja ganti link gambarmu)
• Warna hijau : ukuran gambar, width adalah ukuran lebar gambar (bisa kamu ubah dan sesuaikan) dan height adalah tinggi gambar (bisa juga kamu ubah dan sesuaikan),

Jangan lupa Save untuk menyimpan hasil buatanmu.

Cara di atas tadi seandainya lebar sidebar, atau tempat kotak iklan di blog kamu berukuran 300px (ukuran umumnya sih dan paling sering di template Blogger), tapi jika kamu ingin mencoba yang responsive dan menyesuaikan dengan lebar template yang kamu gunakan bisa coba gunakan kode di bawah ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.sepeser.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRNSRYJn3nehLooPIz4vVSgCkJCRTVt9vwtfgmz1IODYj0W_7SMhyDVbU2ttf1ZDz4wdrNzFanTnxK1ACwEybGaq3-0t3e0COn8eDkqSWmMwiH_AXYoNBUzq1ovitCz-TIPlNWlZMhpxi-Li9iWfPMlA3Wii2qD_jGGvHMZWlKkJoJUoNDued1jsFYLoN/s320/contoh-baner-iklan.jpg" width="100%" /></a></div>

Ok gays, cara mengeditnya adalah seperti di atas tadi.

Penutup

Dilarang copy paste

Anti Copy Paste di Blog

Cara 1: Memasang Css Anti Copy Paste kecuali pada bagian tertentu di Template Blogger

Edit HTML Template

.post { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -ms-user-select:none; -moz-user-select:none; }

.post blockquote,.post pre,.post code { -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -ms-user-select:text; -moz-user-select:text; }

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

Cara Penerapan

Blockquote di Blogger

Tampilan HTML