logo blog

Cara Mengetahui Zodiak Kita Lewat Tanggal Lahir Dengan Tools

Cara Mengetahui Zodiak Kita Lewat Tanggal Lahir Dengan Tools
cara mengetahui zodiak lewat tanggal lahir

cara mengetahui zodiak dan shio lewat tanggal lahir menggunakan tools.

Cara melihat zodiak lewat tanggal lahir dengan tools

Apa sih Zodiak itu?
diambil dari wikipedia, Zodiak (dari kata Yunani Zoodiacos Cyclos yang artinya Lingkaran Hewan) adalah sebuah sabuk khayal di langit dengan lebar 18° yang berpusat pada lingkaran ekliptika, tetapi istilah ini dapat pula merujuk pada rasi-rasi bintang yang dilewati oleh sabuk tersebut, yang sekarang berjumlah 13.
Maca macam nama zodiak 


Akuarius Aries Cancer Gemini
Kaprikornus Leo Libra Ofiukus
Pises Sagitarius Scorpio Taurus Virgo

Nah bagi kalian yang ingin melihat zodiaknya, silahkan gunakan tools dibawah ini. Tinggal sesuaikan tanggal dan bulan lahirmu terus klik cek

Tools untuk melihat zodiak lewat bulan dan tanggal lahir


CEK ZODIAK MU DISINI
BulanTanggal

Gimana dengan toolnya? mantav n tamvan bukan :) , Sekarang kalian sudah tau zodiak masing masing, untuk melihat keperibadian kalian hari ini berdasarkan zodiak, silahkan search di googlle biasanya udah banyak yang share.

jangan lupa mampir ke primbon lainnya ya gan :)



Cukup sekian artikel dari mas tamvan tentang cara melihat zodiak kita menggunakan tools ini, semoga bermanfaat. Jangan lupa share ke yang lainnya ya.

Membuat Widget Random Post Di Blogger Simple

Membuat Widget Random Post Di Blogger Simple
Membuat Widget Random Post Di Blogger Simple

Cara Membuat Widget Random Post Di Blogger Simple

Cara Membuat Widget Random Post Simple Di Blogger

Kali ini saya akan memberikan tutorial cara membuat widget popular post atau randompost simple di bloger. Biasanya widget popular post sudah disediakan di default bloggernya sendiri dan bisa juga diatur untuk menampilkan image, title, dan deskripsi dari postnya sendiri. Tapi di widget random post yang mas tamvan bagikan ini hanya menampilkan title atau judulnya saja supaya tampil lebih simple dan elegan ditambah juga title untuk menambah seo pada linknya sendiri, kalau bawaan dari bloggernya tidak ada title pada link ketika di short oleh cursor / pointer.

Apa sih widget random post itu ? widget random post adalah widget yang menampilkan postingan di blog secara acak atau berdasarkan artikel paling popular di baca oleh para pengunjung.

Nah untuk melihat tampilan widget random post yang akan mas tamvan bagikan ini, silahkan lihat demonya di link bawah ini.

Baca juga tutorial menarik lainnya di blog saya ini :)



Untuk tutorial cara pemasangannya, silahkan ikuti langkah demi langkah dibawah ini.

Cara Membuat Widget Random Post Di Blogger Simple

  • Login ke Blogger.com
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Contoh, Lihat gambar dibawah!!

banner blogger kiri kanan
  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Widget Random Post dibawah ini ke dalam HTML/Javascript.


<style type='text/css'>


#random-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

#random-posts li {
  padding: 0 0 5px 0;
  font-size: 90%;
  margin: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#random-posts li a {
  color: #333;
}

</style>
<ul id="random-posts"></ul>
<script type='text/javascript'>
//<![CDATA[
var homePage = "http://mastamvan.blogspot.com/",
numPosts = 10;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>



Keterangan Script di atas
[1]-> Silahkan Ganti URL http://mastamvan.blogspot.com dengan url blog kalian.
[2]-> Jika template kalian belum mempunyaj ajax jquery libs, silahkan masukan script ini //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js di atas </head>

  • Jika semuanya sudah di edit, silahkan save dan lihat hasilnya, semoga bermanfaat salam TAMVAN.

Cukup sekian artikel dari mas tamvan tentang Cara Membuat Widget Random Post Simple di Blog ini, semoga bermanfaat. Seperti biasa, jika ada kesulitan dalam pemasangannya, silahkan bertanya dikolom komentar ya :)

New Best 5 Style Widget Popular Post Blogger

New Best 5 Style Widget Popular Post Blogger
New Best 5 Style Widget Popular Post Blogger

New Best 5 Style Widget Popular Post Blogger

Cara Merubah Tampilan Widget Popular Post Di Blogger

Cara membuat widget popular post for blogger dengan style terbaru 2016, pada kesempatan kali ini mas tamvan akan berbagi desain 5 style widget popular post untuk bloger, bagi kalian yang suka mendesain blognya supaua tampil rapih dan elegan sepertinya cocok untuk dipasang beberapa widget popular post yang sudah mas tamvan sediakan ini.

Contoh Tampilan Best 5 Style widget popular post for blogger

Baca Juga tutorial menarik lainnya dari blog mas tamvan.





Sebelum mendesain atau merubah code css pada blogger kalian, sebaiknya setting terlebih dahulu pada bagian widget popular post di bagian tataletak, sebagai contoh lihat gambar dibawah ini.

popular post

Nah Kalo sudah di atur seperti itu, sekarang kita lanjut ke pemasangan CSS dan Javascriptnya, ikuti langkah demi langkah tutorial memasng widget popular post di bawah ini.

Cara Membuat Widget Popular Post Terbaru


Silahkan Pilih Salah Satu CSS style Popular post dibawah ini

.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}


.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}


.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}


.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}


.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}

Setelah kalian menentukan style popular post mana yang mau dipilih, silahkan copy semua cssnya lalu.
  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • Lalu masukan CSS yang sudah tadi di pilih tepat diatas salah satu kode ]]></b:skin> atau </style> 
  • Langkah terakhir, Silahkan cari </body>
  • Lalu masukan javascript dibawah ini, tepat diatas kode tadi


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

  • Simpan Template dan Lihat Hasilnya :) Semoga berhasil Salam Tamvan B|
Keterangan
Tanda Merah pada Javascript. Jika di blog kalian sudah ada script ajax jquery libisnya maka yang itu tidak usah dimasukan lagi.
Ok, dikarenakan saya sudah nguantuk pengen tidur maka dengan ini saya menyatakan :

Cukup sekian artikel dari mas tamvan tentang cara membuat widget popular post dengan 5 style terbaru, semoga bermanfaat.

Jika ada yang bingung cara pemasangannya, silahkan bertanya dikolom komentar ya :)


Cara Membuat Widget Pop Up Card Di Blogger

Cara Membuat Widget Pop Up Card Di Blogger
facebook pop up widget for blogger

Cara Membuat Widget Pop Up facebook like di blogger

Tutorial Membuat Widget Pop Up Card Di Blogger

Widget pop up card seperti popup facebook, pop up card ini menggunakan script yang biasanya digunakan untuk menampilkan pop up facebook like atau follow, cuma disini tidak menggunakan embed facebook like, disini hanya menampilkan image pembertiahuan contact saja. Jadi kalian bisa mengganti pemberitahuan tersebut sesuai keinginan kalian.

Bisa berupa subcibe email, pemberitahuan maintenance, pemberitahuan kalau anda menerima iklan bisa juga contact.

Widget pop up card ini tidak akan memberatkan proses loading halaman blog karena widget ini akan tampil pada saat blog berhasil di load baru setelah proses load blog selesai widget pop um ini akan tampil seperti halnya pada pop up facebook.

Bagi kalian yang ingin melihat tampilan widget poup ini, silahkan klik link dibawah ini.

Untuk tutorial cara pembuatannya, silahkan simak di bawahm tapi jangan lupa baca juga tutorial lainnya yang sudah mas tamvan sediakan.




Cara Membuat Widget Pop Up Card Seperti facebook


  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari


/*Widget Pop Up Card*/
#mstamvan {
    z-index: 1000;
    position: fixed !important;
    top: 100px;
    left: 50%;
    width: 700px;
    margin-left: -350px;
}
#belakang {
    left: 0px;
    background: #000 none repeat scroll 0% 0%;
    opacity: 0.6;
    position: fixed;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
}
.tulisan {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
  collor:#344;
  return:false;
}
.isinya {
      border-radius: 3px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 700px;
    height: 400px;
    border: 4px solid #FFF;
}

  • Sekarang Masukan Javascript Dibawah Ini Tepat Diatas Kode </BODY>


<script type='text/javascript' >
$(document).ready(function() {
  $('#mstamvan').click(function() {
 $('#mstamvan').fadeOut('500');
  });
});
</script>
  • Save Template. 
  • Lanjut Ketahap Selanjutnya
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Contoh, Lihat gambar dibawah!!

banner blogger kiri kanan

  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Widget Pop Up yang dibawah kedalamnya.


<div id='mstamvan'>
<div id='belakang'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
<div class='isinya'><a href='http://fb.com/tejasukmana99' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='LINK IMAGE'/></a>
  </div>
</div>
</div>

  • Ok, sekarang tinggal save templatenya and DONE, Salam Tamvan

Silahkan Ganti Kata LINK IMAGE dengan link image buatan agan
Ganti Juga Link Fb ini sengan link kalian
http://fb.com/tejasukmana99


Ok, cukup sampai disini artikel tutorial tentang cara memasang widget pop up seperti facebook di blogger ini, semoga artikel ini bermanfaat, salam tamvan dan salam jumpa lagi di artikel tutorial selanjutnya.

Cara Baru Membuat Banner Iklan Blog Melayang Kiri Kanan

Cara Baru Membuat Banner Iklan Blog Melayang Kiri Kanan
iklan blog melayang kanan dan kiri

Cara Membuat Banner Iklan Melayang Dikiri Dan Kanan Blog

Cara Membuat Banner Iklan Melayang di Kanan dan Kiri Blog

Cara Terbaru Memasang 2 banner iklan di blog berada di kanan dan kiri secara melayang ditambah dengan tombol clos / exit, bagi kalian yang ingin agar ada yang memasang iklan di blog sebaiknya pasang banner untuk memberi tahu bahwa blog agan menerima pemasangan iklan, contohnya pasang banner iklan ini.
Banner ini akan berada di bagian kanan dan kiri blog sobat tapi jangan takut akan mengganggu postingan yang akan menyulitkan para pengunjung untuk membacanya, karena di dalam script iklan kiri kanan ini sudah disediakan tombol untuk menghilangkan banner itu [tombol klos] supaya tidak menghalangi pada saat sedang membaca artikel.

Untuk melihat demo tampilan iklan kanan dan kiri silahkan klik link dibawah ini.

Jangan lupa tuk baca tutorial lainnya di blog mas tamvan ini ya :)



Untuk tutorial cara membuat banner melayang kanan kiri di blog, silahkan ikuti langkah demi langkah dibawah ini.

Cara Mudah Membuat Banner Iklan Kanan Dan Kiri Melayang Dengan Tombol Klos / exit.

  • Login ke Blogger.com
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Contoh, Lihat gambar dibawah!!

banner blogger kiri kanan
  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Iklan Melayang Kanan Kiri yang dibawah kedalamnya.


<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div class='iklan-kiri' style="position:absolute; z-index:9999; ">
  <div id="tamvan1" style="width:autopx;height:autopx; text-align:left; display:scroll;position:fixed; bottom:0px;left:4px;">
    <div>
      <a href="#" id="close-teaser" onclick="document.getElementById('tamvan1').style.display = 'none';" style="cursor:pointer;">
        <center><img src='https://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' /></center>
      </a>
    </div>
    <!--Mulai Iklan Kiri [www.mastamvan.blogspot.com] -->
    <div class="separator" style="clear: both; text-align: center;">
      <a title=='mastamvan' href="http://tkjdikensasi.blogspot.com/p/iklan.html"><img alt='mastamvan' src="https://i.imgur.com/d8z3C8d.png" /></a>
    </div><br /></div>
</div>
<!--Akhir Iklan Kiri-->
<div class='iklan-kanan' style="position:absolute; z-index:9999;">
  <div id="tamvan2" style="width:autopx; height:autopx; text-align:right; display:scroll;position:fixed; bottom:0px;right:4px;">
    <!--Tombol Exit Iklan Kanan [www.mastamvan.blogspot.com] -->
    <div>
      <a href="#" id="close-teaser" onclick="document.getElementById('tamvan2').style.display = 'none';" style="cursor:pointer;">
        <center><img src='https://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' /></center>
      </a>
      <!--Mulai Iklan Kanan-->
      <div class="separator" style="clear: both; text-align: center;">
        <a title='mastamvan' href="http://mastamvan.blogspot.com/"><img alt='mastamvan' src="https://i.imgur.com/fViE0R4.png" /></a>
      </div><br /></div>
  </div>
  <!--Akhir Iklan Kanan [www.mastamvan.blogspot.com]-->
</div>

  • Sekarang coba Save dan lihat hasilnya.

Nah sekarang tinggal tunggu orang yang mau pasang iklan pada blog sobat.

Cukup sekian dan terimakasih, semoga artikel dari mas tamvan tentang cara membuat banner iklan melayang kiri dan kanan ditambah dengan tombol clos ini bermanfaat. Apabila ada kesulitan atau ada kata yang tidak dimengerti silahkan untuk bertanya dikolom komentar ya.

Cara Mudah Membuat Video Di Blog Responsive

Cara Mudah Membuat Video Di Blog Responsive
video blog responsive

Cara Mudah Membuat Video Youtube Di Blog Responsive

Cara Mudah Membuat Video Di Blog Responsive

Membuat video youtube responsive di blog, bagi kalian yang suka membuat tutorial lewat video dan menguploadanya ke youtube lalu dipasang pada blog, sebaiknya video youtube tersebut dibikin responsive. Supaya ketika ada pengunjung yang menggunakan handpone dan iningin memutar video di blog kalian tidak susah atau terpotong karena resolusi video dengan layar berbeda.

Keuntungan membuat vudeo youtube responsive, memudahkan pengunjung yang menggunakan resolusi layar yang kecil untuk melihat video tanpa terpotong, google menyarankan agar tampilan blog responsive atau mobailfriendly.

Nah untuk tutorial cara membuat video youtube responsive di blog, silahkan ikuti tutorialnya di bawah, tapi jangan lupa untuk membaca tutorial lainnya di blog mas tamvan ini.




Langsung ke tutorialnya.

Cara Mudah Membuat Video Di Blog Responsive

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML
  • Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.


/* CSS Video Responsive */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
 

  • Tambahkan Jquery di bawah ini sebelum atau diatas </body>


<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>
 

  • Save template
  • Pemasangan CSSnya sudah selesai, sekarang kita masuk ke tahap pemasangan video di blognya, supaya tampil responsive.
  • Untuk menambahkan video responsive ke postingan, gunakan Code dibawah ini.


<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK EMBED VIDEO">
</div>
</div>
</div>

  • Silahkan ganti kata LINK EMBED VIDEO dengan link video yang mau dipasang pada blog.
  • Contoh pengambilan URL EMBED Video Youtube.

Cara Mudah Membuat Video Di Blog Responsive
  • Nah sekarang tainggal save dan publikasikan dan lihat hasilnya. Mudah bukan :)
Cukup sekian tutorial dari mas tamvan tentang cara membuat video youtube di blog tampil respinsive, semoga bermanfaat.
Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya :)

Cara Cek Dan Mengatasi Broken Link Di Blog

Cara Cek Dan Mengatasi Broken Link Di Blog
broken link checker

Cara Cek Dan Mengatasi Broken Link Di Blog

Cara Mengatasi Link Blog Broken 404 checker online

Apa sih broken link itu? Broken link adalah link yang ada pada blog kita tapi tidak bisa di akses atau ada kesalahan dalam penulisannaya yang nanti akan menuju ke halaman 404 Link Not Found. Link yang rusak ini bisa kalian cek di Online Broken Link checker, disana juga kalian bisa liat pada halaman apa link tersebut rusak.

Nah disini mas tamvan akan memberikan tutorial cara cek dan juga mengatasi broken link pada blog kalian. Cara fix broken link pada blog bisa dengan cara di hapus kalau link itu menuju ke web lain yang sudah tidak bisa di akses, bisa juga dengan cara memperbaiki url tersebut apa bila terdapat kesalahan dalam pengetikannya.

Link Broken yang terdapat di blog bisa berbeda - beda.
Bisa dari orang yang berkomentar pada blog kita tapi akunnya sudah tidak ada [dihapus]
Spam link aktif pada komentar, kalau linknya masih aktif tidak masalah, nah kalo link dah found atau di hapus itu yang akan jadi masalah.

Emang kenapa kalau ada broken link?
Search engine tidak suka sama yang namanya broken link pada blog kita yang biasanya terdapat pada postingan / komentarnya, jadi sebaiknya sering cek broken link dan memperbaikinya segera mungkin.

Jangan lupa baca tutorial Blogger lainnnya ya :)



Nah untuk tutorialnya, silahkan simak dan ikuti langkah demi langkah di blog mas tamvan ini.

Tutorial Cara Cek Dan Mengatasi Broken Link Pada Blogger

  • Tampilannya seperti gambar dibawah ini, masukan url kalian lalu klik Find broken links

checker broken link blogger
Online Broken Link Checker
  • Setelah masuk agan isi Security codenya
  • Setelah diisi, centang / klik pada Report all occurrences of each dead link (may be slower) nya

broken link checker
mengatasi broken link
  • Selanjutnya klik pada Find broken links now !
  • Tunggu Proses Scaner, Kalau sudah hasilnya seperti gambar dibawah.

mengatasi broken link
hasil cek broken link pada blog
  • Nah sampai disini agan sudah tau, link yang bad, rusak atau broken. Tinggal di perbaiki.
  • Caranya, klik pada bagian src
  • nanti akan membuka tab baru, disi kita akan diberitau dimana letak kesalahan link tersebut, contoh pada gambar dibawah ini.

mengatasi broken link
mengetahu dimana link broken berasal
  • Nah disitu kita tau kalau link broken berasal dari sebuah postingan, Jadi untuk memperbaikin link rusak itu, kita harus membuka blogger.com dan masuk ke salah satu postingan yang didalamnya terdapat link yang rusak 404 not found.
  • Silahkan kalian perbaiki, entah iitu dihapus, d ganti atau cara penulisannya ada yg salah. Untuk melihat hasil apaah link sudah benar atau tidak, silahkan ulangi langkah-langkah diatas.

Cukup sekian dan terimakasih, semoga artikel dari Mas Tamvan tentang cara mengetahui dan mengatasi broken link pada blog ini bermanfaat.

Jika ada kata yang kurang dipahami silahkan bertanya dikolom komentar ya :)
Salam Tamvan




Membuat Menu Bar Blog Plus Icon With CSS

Membuat Menu Bar Blog Plus Icon With CSS
menu bar css icon

Cara Membuat Menu Bar Blogger Plus Icon With CSS

Membuat Menu Bar Beserta Icon Dengan CSS

Bagaimana membuat menubar yang ada iconnya atau gambar di dalamnya? Nah disini Mas Tamvan akan memberikan tutotial cara membuat menubar beserta icon hanya menggunakan css tidak perlu javascript atau font awesome. 

Menu bar berfungsi untuk memudahkan para pengunjung untuk mencari sebuah categori yang diinynkan pada sebuah website atau blog, jadi bagi kalian yang di blognya terdaptata banyak categori sebaiknya dipasang menubar agar memudahkan para pembaca blog menelusuri artikel yang diinginkan.
Bagi kalian yang ingin melihat Contoh menu barnya, silahkan klik link result dibawah ini. 


Untuk cara pemasangan menu bar ini sangat mudah, kalian tinggal ikuti langkah-langkah membuatanya di blog Mas Tamvan ini.

Jangan lupa untuk membaca artikel menarik lainnya di bawah ini.



Untuk tutoril cara membuat menu barnya silahkan simak dibawah ini.

Cara Membuat Menu Bar Di Blogger Plus Icon With CSS

  • Login ke Blogger.com
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Contoh, Lihat gambar dibawah!!

menu bar blogger
membuat menu bar
  • Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script menu bar yang dibawah ini kedalamnya.


<style type='text/css'>
#menu{display:inline-block;height:128px;margin:100px 5% 0;text-align:center;white-space:nowrap;width:90%}
#menu ul{margin:0;padding:0;position:relative}
#menu ul:after{clear:both;content:"";display:block}
#menu li{background-position:50% center;display:block;float:left;font-size:18px;font-weight:bold;height:128px;line-height:210px;margin-right:1%;position:relative;white-space:nowrap;width:13%;z-index:2}
#menu li:after{background:url("https://www.script-tutorials.com/demos/415/images/bg.png") repeat scroll 0 0;content:"";height:100%;position:absolute;right:-10%;top:0;width:10%}
#menu li:nth-child(1):before{background:url("https://www.script-tutorials.com/demos/415/images/1.png") repeat scroll 0 0;content:"";height:100%;left:-10%;position:absolute;top:0;width:10%}
#menu li:nth-child(1){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center;margin-left:1%}
#menu li:nth-child(2){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu li:nth-child(3){background:url("https://www.script-tutorials.com/demos/415/images/3.png") no-repeat center}
#menu li:nth-child(4){background:url("https://www.script-tutorials.com/demos/415/images/4.png") no-repeat center}
#menu li:nth-child(5){background:url("https://www.script-tutorials.com/demos/415/images/5.png") no-repeat center}
#menu li:nth-child(6){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center}
#menu li:nth-child(7){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu a{color:#eee;display:block;height:100%;text-decoration:none}
.current{height:158px;left:7.5%;margin-left:-50px;position:absolute;top:-13px;width:100px;-webkit-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-moz-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-o-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-ms-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);transition:all 400ms cubic-bezier(0,1.1,0.5,1.1)}
.cback{background-color:#aadd33;border-bottom:2px solid rgba(0,0,0,0.5);border-radius:10px;height:100%;position:absolute;width:100%}
.ctoparr{height:12px;left:0;overflow:hidden;position:absolute;top:13px;width:100%;z-index:2}
.ctoparr:before{border-radius:20%;box-shadow:0 0 15px #000;content:"";height:10px;left:5%;position:absolute;top:-10px;width:90%}
.ctoparr:after{border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #aadd33;content:"";height:0;left:50%;margin-left:-8px;position:absolute;top:0;width:0}
.cbotarr{bottom:17px;height:12px;left:0;overflow:hidden;position:absolute;width:100%;z-index:2}
.cbotarr:before{border-radius:20%;bottom:-10px;box-shadow:0 0 15px #000;content:"";height:10px;left:5%;position:absolute;width:90%}
.cbotarr:after{border-bottom:12px solid #aadd33;border-left:8px solid transparent;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-8px;position:absolute;width:0}
#menu li.selected:nth-child(1) ~ .current{left:7.5%}
#menu li.selected:nth-child(2) ~ .current{left:21.5%}
#menu li.selected:nth-child(3) ~ .current{left:35.5%}
#menu li.selected:nth-child(4) ~ .current{left:49.5%}
#menu li.selected:nth-child(5) ~ .current{left:63.5%}
#menu li.selected:nth-child(6) ~ .current{left:77.5%}
#menu li.selected:nth-child(7) ~ .current{left:91.5%}
#menu li:nth-child(1):hover ~ .current{left:7.5%}
#menu li:nth-child(2):hover ~ .current{left:21.5%}
#menu li:nth-child(3):hover ~ .current{left:35.5%}
#menu li:nth-child(4):hover ~ .current{left:49.5%}
#menu li:nth-child(5):hover ~ .current{left:63.5%}
#menu li:nth-child(6):hover ~ .current{left:77.5%}
#menu li:nth-child(7):hover ~ .current{left:91.5%}
</style>


<nav id="menu">
    <ul>
      <li><a href="http://mastamvan.blogspot.co.id/">Home</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">HTML5</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">jQuery</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">PHP</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Javascript</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Design</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Other</a></li>
      <div class="current">
        <div class="ctoparr"></div>   
        <div class="cback"></div>
        <div class="cbotarr"></div>
      </div>
    </ul>
  </nav>



  • Tinggal Save Dan Lihat Hasilnya.
Keterangan
Silahkan ganti link http://mastamvan.blogspot.co.id/ dengan link yang sobat mau!!


Okeh cukup sampai disini penjelasan atau cara membuat menu bat yang ada iconnya hanya menggunakan css ini, semoga bermanvaat salam Tamvan.

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya itung-itung penyemangat saya dalam membuat artikel yang menarik, berkualitas dan tentunya asli, NO COPAS :)

Cara Mengatasi Widget Blog Tidak Bisa diHapus Atau diPindah

Cara Mengatasi Widget Blog Tidak Bisa diHapus Atau diPindah
widget blogger tidak bisa dihapus dan dipindah

Cara Mengatasi Widget Blog Tidak Bisa diHapus Atau diPindah 

 Ini Dia Cara Mengatasi Widget Yang Tidak Bisa Dihapus Atau Dipindah

Bagaimana cara mengatasi widget atau gadget blogger yang terkunci atau tidak bisa di hapus dan dipindah ?, pada kesempatan kali ini saya admin blog mas tamvan akan berbagi tutotial blog tentang cara agar widget blogger yang tadinya tidak bisa dipindah atau di hapus menjadi bisa dipindah juga bisa dihapus, tutorialnya sangat mudah, ikuti saja langkah demi langkah di blog yang sangat tamvan ini :) .
Tentunya jangan lupa juga untuk membaca tutorial blogger lainnya di blog masa tamvan ini, silahkan pilih artikel pilihan ini.



Nah untuk tutorialnya, silahkan ikuti caranya dibawah ini!!

Mengatasi Widget atau gadget bloger yang tidak bisa dipindah dan dihapus.


  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari widget yang tidak bisa dihapus / dipindah
  • contoh disini saya akan memperbaiki widget TIDAK BISA DIPINDAH

widget blogger tidak bisa dihapus

  • Nah kalo sudah ketemu tinggal ganti kata true menjadi fales
  • Save template, lalu masuk lagi ke tataletak.
  • Kalau belum ada perubahan, coba reload browser kalian.
  • Selamat mencoba dan semoga beruntung, salam tamvan :)


Cukup sekian artikel dati mastamvan tentang cara mengatasi widget atau gadget blogger yang tidak bisa dipindah atau dihapus ini, emoga bermanfaat. Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya :)
Jika artikel ini membantu kalian, jangan lupa untuk di share ya :)



Cara Memasang Adblock Killer Di Blogger

Cara Memasang Adblock Killer Di Blogger
adblock killer blogger

Cara Membuat Adblock Killer Pada Blog

Script Untuk Memasang Anti Adblock Di Blog

AdBlock adalah ekstensi untuk memblokir iklan di blog atau website yang membuat si pengunjung lebih nyaman dari iklan - iklan pop up / yang ada pada widget, tapi buat para publisher iklan di blog hal ini akan merugikan karena tidak akan ada pemasukan dari iklan tersebut. Jadi buat kalian para publisher iklan sebaiknya menggunakan adblock kiler di blog kalian. 

Cara kerja adblock killer ini sangat simple, jika seseorang menggunakan adblock di web browsernya maka blog / web tidak bisa di buka. Tapi setelah extensi adblock di disable pada webbrowsernya maka blog akan bisa di buka. 

Baca juga Artikel Terbaru Tentang Adblock..
Cara Membuat Adblock Killer Detection Pengguna Iklan Adsense

Cara Memasang Adblock Killer Di Blogger, Script Simple Untuk Memasang Anti Adblock atau Adblock Kiler Di Blog. 

Untuk melihat demonya, silahkan pasang adblock di web browser kalian lalu buka link result dibawah ini.





Cara Memasang Adblock Killer Di Blog

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • </body>
  • (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
  • Lalu masukan script di bawah ini tepat di atas kode </body>

<noscript><div id='kc56' oncontextmenu='return false;'><p>Please enable JavaScript! Harap aktifkan JavaScript!</p></div></noscript>

<script type='text/javascript'>
//<![CDATA[
// Adblock
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
(function(w,u){var d=w.document,z=typeof u;function kc56(){function c(c,i){var e=d.createElement('div'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('kc56')){c('<p>Please disable your ad blocker to access this site! Harap nonaktifkan Ad blocker Anda untuk mengakses situs ini! <a href="JavaScript:window.location.reload()">Klik Refresh</a></p>','kc56')}};(function(){var a=['ad_300x250_m_c','hp-store-ad','inner-top-ads','mod_ad','ps-vertical-ads','row2AdContainer','systemad_background','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;setTimeout(function(){for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}},250)}());(function(){var t=g(0,'img'),a=['/adcde.js','/admez/ad','/adsales/ad','/adsenceSearch.','/adtools2.','/adv2.','/partner_ads_','/rcolads1.','_ads.html','.468x60-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]===u){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',kc56,false)}else{w.attachEvent('onload',kc56)}})(window);};
//]]>
</script>
  • Selanjutnya, cari kode </style>
  • Lalu masukan CSS di bawah ini tepat diatasnya.

/* CSS Ad block */
#kc56{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.98;display:block;z-index:9999;overflow:hidden}
#kc56 p{color:#000;text-align:center;margin:15% auto;font-size:2rem;max-width:750px;display:table;line-height:1.5;}
#kc56 p:before{content:&#39;\f023&#39;;font-family:fontawesome;background:#ff675c;color:#fff;text-align:center;display:block;padding:0;width:2em;height:2em;line-height:2em;font-size:2.5rem;clear:both;border-radius:100%;margin:0 auto 3%;font-weight:normal;box-shadow:inset 0 0 5px rgba(0,0,0,.1)}
#kc56 p:hover:before{content:&#39;\f13e&#39;}
#kc56 p a,#kc56 p i{font-size:12px}
#kc56 ~ *{display:none}

  • Kalo Sudah. Tinggal Save Templatenya dan Lihat Hasilnya.



Terimakasih Sudah membaca artikel tentang cara memasang anti adblock atau adblock kiler pada blog, semoga artikel yang mas tamvan bagikan ini bermanfaat bagi kita semua :)

Apabila script adblock kiler ini tidak aktif / bingung ara pemasangannya, silahkan bertanya di kolom komentar saja.

Cara Memasang Adblock Killer Di Blogger

Cara Memasang Adblock Killer Di Blogger
adblock killer blogger

Cara Membuat Adblock Killer Pada Blog

Script Untuk Memasang Anti Adblock Di Blog

AdBlock adalah ekstensi untuk memblokir iklan di blog atau website yang membuat si pengunjung lebih nyaman dari iklan - iklan pop up / yang ada pada widget, tapi buat para publisher iklan di blog hal ini akan merugikan karena tidak akan ada pemasukan dari iklan tersebut. Jadi buat kalian para publisher iklan sebaiknya menggunakan adblock kiler di blog kalian. 

Cara kerja adblock killer ini sangat simple, jika seseorang menggunakan adblock di web browsernya maka blog / web tidak bisa di buka. Tapi setelah extensi adblock di disable pada webbrowsernya maka blog akan bisa di buka. 

Baca juga Artikel Terbaru Tentang Adblock..
Cara Membuat Adblock Killer Detection Pengguna Iklan Adsense

Cara Memasang Adblock Killer Di Blogger, Script Simple Untuk Memasang Anti Adblock atau Adblock Kiler Di Blog. 

Untuk melihat demonya, silahkan pasang adblock di web browser kalian lalu buka link result dibawah ini.





Cara Memasang Adblock Killer Di Blog

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • </body>
  • (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
  • Lalu masukan script di bawah ini tepat di atas kode </body>

<noscript><div id='kc56' oncontextmenu='return false;'><p>Please enable JavaScript! Harap aktifkan JavaScript!</p></div></noscript>

<script type='text/javascript'>
//<![CDATA[
// Adblock
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
(function(w,u){var d=w.document,z=typeof u;function kc56(){function c(c,i){var e=d.createElement('div'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('kc56')){c('<p>Please disable your ad blocker to access this site! Harap nonaktifkan Ad blocker Anda untuk mengakses situs ini! <a href="JavaScript:window.location.reload()">Klik Refresh</a></p>','kc56')}};(function(){var a=['ad_300x250_m_c','hp-store-ad','inner-top-ads','mod_ad','ps-vertical-ads','row2AdContainer','systemad_background','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;setTimeout(function(){for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}},250)}());(function(){var t=g(0,'img'),a=['/adcde.js','/admez/ad','/adsales/ad','/adsenceSearch.','/adtools2.','/adv2.','/partner_ads_','/rcolads1.','_ads.html','.468x60-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]===u){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',kc56,false)}else{w.attachEvent('onload',kc56)}})(window);};
//]]>
</script>
  • Selanjutnya, cari kode </style>
  • Lalu masukan CSS di bawah ini tepat diatasnya.

/* CSS Ad block */
#kc56{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.98;display:block;z-index:9999;overflow:hidden}
#kc56 p{color:#000;text-align:center;margin:15% auto;font-size:2rem;max-width:750px;display:table;line-height:1.5;}
#kc56 p:before{content:&#39;\f023&#39;;font-family:fontawesome;background:#ff675c;color:#fff;text-align:center;display:block;padding:0;width:2em;height:2em;line-height:2em;font-size:2.5rem;clear:both;border-radius:100%;margin:0 auto 3%;font-weight:normal;box-shadow:inset 0 0 5px rgba(0,0,0,.1)}
#kc56 p:hover:before{content:&#39;\f13e&#39;}
#kc56 p a,#kc56 p i{font-size:12px}
#kc56 ~ *{display:none}

  • Kalo Sudah. Tinggal Save Templatenya dan Lihat Hasilnya.



Terimakasih Sudah membaca artikel tentang cara memasang anti adblock atau adblock kiler pada blog, semoga artikel yang mas tamvan bagikan ini bermanfaat bagi kita semua :)

Apabila script adblock kiler ini tidak aktif / bingung ara pemasangannya, silahkan bertanya di kolom komentar saja.

Cara Memasang Adblock Killer Di Blogger

Cara Memasang Adblock Killer Di Blogger
adblock killer blogger

Cara Membuat Adblock Killer Pada Blog

Script Untuk Memasang Anti Adblock Di Blog

AdBlock adalah ekstensi untuk memblokir iklan di blog atau website yang membuat si pengunjung lebih nyaman dari iklan - iklan pop up / yang ada pada widget, tapi buat para publisher iklan di blog hal ini akan merugikan karena tidak akan ada pemasukan dari iklan tersebut. Jadi buat kalian para publisher iklan sebaiknya menggunakan adblock kiler di blog kalian. 

Cara kerja adblock killer ini sangat simple, jika seseorang menggunakan adblock di web browsernya maka blog / web tidak bisa di buka. Tapi setelah extensi adblock di disable pada webbrowsernya maka blog akan bisa di buka. 

Baca juga Artikel Terbaru Tentang Adblock..
Cara Membuat Adblock Killer Detection Pengguna Iklan Adsense

Cara Memasang Adblock Killer Di Blogger, Script Simple Untuk Memasang Anti Adblock atau Adblock Kiler Di Blog. 

Untuk melihat demonya, silahkan pasang adblock di web browser kalian lalu buka link result dibawah ini.





Cara Memasang Adblock Killer Di Blog

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • </body>
  • (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
  • Lalu masukan script di bawah ini tepat di atas kode </body>

<noscript><div id='kc56' oncontextmenu='return false;'><p>Please enable JavaScript! Harap aktifkan JavaScript!</p></div></noscript>

<script type='text/javascript'>
//<![CDATA[
// Adblock
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
(function(w,u){var d=w.document,z=typeof u;function kc56(){function c(c,i){var e=d.createElement('div'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('kc56')){c('<p>Please disable your ad blocker to access this site! Harap nonaktifkan Ad blocker Anda untuk mengakses situs ini! <a href="JavaScript:window.location.reload()">Klik Refresh</a></p>','kc56')}};(function(){var a=['ad_300x250_m_c','hp-store-ad','inner-top-ads','mod_ad','ps-vertical-ads','row2AdContainer','systemad_background','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;setTimeout(function(){for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}},250)}());(function(){var t=g(0,'img'),a=['/adcde.js','/admez/ad','/adsales/ad','/adsenceSearch.','/adtools2.','/adv2.','/partner_ads_','/rcolads1.','_ads.html','.468x60-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]===u){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',kc56,false)}else{w.attachEvent('onload',kc56)}})(window);};
//]]>
</script>
  • Selanjutnya, cari kode </style>
  • Lalu masukan CSS di bawah ini tepat diatasnya.

/* CSS Ad block */
#kc56{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.98;display:block;z-index:9999;overflow:hidden}
#kc56 p{color:#000;text-align:center;margin:15% auto;font-size:2rem;max-width:750px;display:table;line-height:1.5;}
#kc56 p:before{content:&#39;\f023&#39;;font-family:fontawesome;background:#ff675c;color:#fff;text-align:center;display:block;padding:0;width:2em;height:2em;line-height:2em;font-size:2.5rem;clear:both;border-radius:100%;margin:0 auto 3%;font-weight:normal;box-shadow:inset 0 0 5px rgba(0,0,0,.1)}
#kc56 p:hover:before{content:&#39;\f13e&#39;}
#kc56 p a,#kc56 p i{font-size:12px}
#kc56 ~ *{display:none}

  • Kalo Sudah. Tinggal Save Templatenya dan Lihat Hasilnya.



Terimakasih Sudah membaca artikel tentang cara memasang anti adblock atau adblock kiler pada blog, semoga artikel yang mas tamvan bagikan ini bermanfaat bagi kita semua :)

Apabila script adblock kiler ini tidak aktif / bingung ara pemasangannya, silahkan bertanya di kolom komentar saja.

Cara Membuat Readmore Otomatis Di Blog

Cara Membuat Readmore Otomatis Di Blog
readmore blogger

Cara Membuat Readmore Otomatis Di Blog

Readmore atau Baca selengkapnya, sangat dibutuhkan untuk membuat post di homepage blog tidak terlalu panjang [ menapilkan semua isi post ] yang akan membuat proses loading blog semakin berat apakagi di dalamnya ada beberapa post yang menampilkan Image. Nah di sini saya akan memberikan tutorial cara membuat readmorenya otomatis. Saya bikin post ini karena waktu utu ada temen saya yang bertanya.

[Teman] Mas gimana cara agar tampilan awal blog postnya supaya ga terlalu panjang?
[Si Tamvan]Untuk membuat readmore bisa menggunakan Inset Jump Break yang ada pada menu postingan blog.
[Teman] Tapi kalo pake itu tidak rata dan harus manual emang ga bisa yang otomatis?
[Si Tamvan] Nanti saya carikan caranya, follow aja blog saya nanti kalo ada post baru ada pemberitahuannya.
[Teman] Ah si akang, Oke lah. Kalo bisa sama videonya biar nanti tidak bertanya-tanya lagi.
[Si Tamvan] Tut tut tut terputus RTO
Jangan lupa baca tutor lainnya di :





Nah untuk tutorial cara membuat readmore otomatis, silahkan simak tutorial di bawah ini.

Cara membuat readmore otomatis di blog

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • </head>
  • (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
  • Lalu masukan script di bawah ini tepat di atas kode </head>


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

  • Selanjutnya, cari kode <data:post.body/>
  • Biasanya lebih dari satu, Tergantung templatenya.
  • Coba aja Satu per satu. Ganti dengan Script di bawah ini.
  • Ingat, Bukan Di Tambah Tapi Di Ganti!!


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

  • Kalo Sudah. Tinggal Save Templatenya dan Lihat Hasilnya.

Kalo ada yang tidak jelas, silahkan Untuk lebih jelasnya, lihat di video tutorial cara membuat readmore otomatis ini.

Video Tutorial Membuat Readmore Otomatis Di Blog



Ok, selamat mencoba. Apabila ada kata yang tidak di mengerti atau membingungkan, silahkan bertanya di kolom komentar saja ya.

Cukup sekian dan terimakasih artikel tentabf tutorial cara membuat readmore otomatis ini dari Mas Tamvan, semoga bermabfaat.