Cara Memasang Page-Level Ads Adsense di Blog

Cara Memasang Page-Level Ads Adsense di Blog - Viham Blog, Semua pasti tau akan Google Adsense (Ads). Kali ini yang akan dibahas adalah cara membuat, menampilkan, dan memasang Page-Level Ads Adsense di Blog. Caranya cukup mudah kok Sobat untuk memasang, membuat, dan menampilkan Page-Level Ads ini di blog kamu, namun syarat utama adalah Sobat harus punya akun GA (Google Adsense) yah.

Question?

Apa itu Page-Level Ads? adalah sebuah unit iklan yang tidak punya batasan pada aturannya seperti 3 unit iklan yang di khusus kan untuk tampilan dekstop. Iklan ini ditampilkan karena untuk membantu publisher GA (Google Adsense) dalam memaksimalkan penghasilan-nya. Unit iklan ini tampil di smartphone saja, jadi Sobat tenang saja karena tidak akan trouble dengan iklan lainnya.

Fitur Utama

Format Iklan

Baca Juga : Cara Membuat Slot Iklan Adsense di Tengah Postingan

Cara Memasang Page-Level Ads Adsense di Blog

Masuk ke akun Google Adsense ↣ My Ads ↣ Content ↣ Page-Level Ads ↣ Terlihat text "Iklan Tingkat Laman" seperti gambar dibawah ini:

Lalu, silakan Sobat klik salah satu tombol Format Page-Level Ads itu atau dua-dua nya untuk lebih maksimal.

Sekarang, silakan Sobat scroll ke bawah. Di situ terdapat tombol dengan tulisan "Dapatkan Kode" ? Klik tombol itu dan salin semua kode yang ada.

Kemudian, jika sudah di salin. Sobat masuk ke akun Blogger ↣ Template ↣ Edit HTML ↣ letakan kode yang sudah di salin tadi, tepat diatas kode </head>

Kemudian ganti kode "async" diatas, seperti dibawah ini:

Jika di template Sobat sudah ada kode Ads, Sobat cukup tambahkan kode no. 2 diatas

Simpan perubahan template dan lihat hasilnya.

Contoh Iklan

Hmm. cukup demikian ya, tutorial dan tips  Cara Memasang Page-Level Ads Adsense di Blog. Semoga bermanfaat.

Read more

Cara Memasang Tombol Smooth Back To Top di Blog

Cara Membuat dan Memasang Tombol Smooth Back To Top di Blog - Viham Blog, Mungkin cara ini sudah ada di tahun yang lalu. Namun dengan berkembangnya para pengguna Blogger, saya sengaja membuat kembali tips Cara Memasang Tombol Smooth Back To Top di Blog dengan mudah dan cepat.

Pertanyaan "Apa sih fungsi tombol back to top ini untuk pengguna blogger?" Ya, fungsi dari tombol back to top ini di blog. Sebagai langkah cepat atau navigasi saat kita membaca artikel yang panjang tentunya ke bawah kan ya? otomatis kita akan kembali lagi ke atas menggunakan keyboard atau mouse.

Dengan adanya tombol back to top ini di blog, akan memudahkan pengguna (Audiens) juga pemilik blognya. Secara, dengan sekali klik saja sobat sudah bisa kembali ke halaman content atas artikel tanpa ribert-riber menggunakan mouse dan jari tangan.

Tombol yang simpel tapi manfaatnya banyak, jika Sobat mau memasang tombol back to top ini, silahkan ikuti langkah-langkah dibawah ini.

Cara Memasang Tombol Smooth Back To Top di Blog

1. Login ke akun Blogger ↣ Template ↣ Edit HTML ↣  Kemudian letakan kode dibawah ini tepat sebelum

2. </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

3. </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#22A7F0;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

4. </body>

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-angle-double-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

Kalau sudah semua, Sobat simpan perubahan template dan lihat hasilnya.

• Demo

Gimana? keren kan? Ya, kalau Sobat mau ada sedikit efek! silakan ganti Javascript (4) diatas dengan Javascript dibawah ini.

Baca juga : Cara Menghilangkan atau Menghapus Atribusi di Blog 

Bounce Effect Contents

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-angle-double-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

• Demo

Hemm, akhirnya selesai juga ^_^, untuk color bisa Sobat sesuaikan dengan selera Sobat sendiri. Dan kali ini, sekian disini dulu ya Sobat untuk tutorial Cara Memasang Tombol Smooth Back To Top di Blog, Semoga bermanfaat.

Read more

Cara Menghilangkan atau Menghapus Atribusi di Blog

Cara Menghilangkan atau Menghapus Atribusi di Blog - Atribusi ini sering sekali kita jumpai pada waktu awal membuat blogger, karena saat membuat blog baru secara otomatis dari template bawaan blogger akan memasang atribusi secara sendirinya.

Kalau sekarang kebanyakan template yang di pakai oleh para kalangan blogger, adalah template pihak ketiga. Namun tetap saja biasanya pada template ketiga pun tertentu, masih ada atribusinya. Pertanyaan "Kalau di hilangkan apa bisa mas?" | Bisa, caranya pun banyak dari disembunyikan atau dihapus secara permanen. Tapi kita bisa juga menambahkan atribusi lagi kalau mau, karena di pengaturan Tata Letak fitur menambahkan atribusi bawaan ada.

Sebagai seorang manusia, pasti selera masing-masing orang berbeda. Ada yang atribusi-nya dibiarkan saja, namun ada juga yang dari awal lihat langsung ingin menghapusnya. Mungkin mereka atau kamu Sobat memiliki alasan tertentu akan hal ini, dengan begitu Viham Blog akan memberi tahu tips Cara Menghilangkan atau Menghapus Atribusi di Blog dengan mudah  dan cepat.

Contoh tampilan Atribusi Blogger

Cara Menghilangkan atau Menghapus Atribusi di Blog

Cara I: Dengan menambahkan kode CSS

Login ke akun Blogger ↬ Template ↪ Edit HTML ↬ Kemudian tambahkan kode dibawah ini, tepat sebelum kode </style>

#Attribution1 {

height:0px;

visibility:hidden;

display:none

}

Cara II: Dengan merubah kode kunci widget

Login ke akun Blogger ↬ Template ↪ Edit HTML ↬ Cari kode dibawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='Atribusi' type='Attribution' visible='true'>

Lalu ubah kode "Locked='True' menjadi "Locked='false'" 

Fungsi dari True adalah aktif, dan False adalah Non Aktif. Jika sudah silakan Sobat simpan perubahan template dan masuk ke Tata Letak ↬ Cari widget Atribusi, seperti gambar dibawah

Kemudian klik Edit dan Hapus, lihat hasilnya, Gampang kan!

Baca juga: Cara Memasang Auto Like Facebook di Blogger

Akhirnya beres juga, cukup demikian tutorial Cara Menghilangkan atau Menghapus Atribusi di Blog. Semoga bermanfaat ya sobat.

Read more

Cara Membuat Gambar Otomatis SEO

Cara Membuat Gambar Otomatis SEO - Hal ini sangat perlu untuk dilakukan oleh setiap pengguna blogger, kenapa? karena gambar yang yang tidak SEO, bisa saja tidak akan mudah terindex oleh Search Engine (SE). Gambar SEO secara otomatis disini maksudnya adalah pada waktu kita memposting sebuah gambar di blog, maka secara otomatis akan mempunyai deskripsi yang sama seperti judulnya.

Memang bisa juga kita mengisinya secara manual, namun hal itu akan merepotkan dan menyita sebagian waktu untuk memposting konten blog. Dengan menggunakan tehnik gambar secara otomatis SEO, akan lebih memudahkan sobat untuk memposting gambar. Namun, jangan sampai lupa untuk memberi nama gambar yang sesuai judul artikel.

Baca juga: Cara Menghilangkan Kotak Rekomendasi Disqus di Blog

Mungkin sobat bertanya "Kenapa gambar harus SEO?" Jawabannya adalah gambar juga salah satu bagian dari SEO. Sebuah gambar bisa saja membuat trafik blog menjadi tinggi, karena pada umumnya sebagian dari audiens pada waktu browsing hanya mencari-cari dan melihat-lihat gambar internet.

Jika sobat ingin membuat blog lebih indah, tambahkan gambar yang sesuai dengan isi konten, agar bisa menarik perhatian pengunjung saat membuka blog sobat. Berikut ini cara mengoptimasi gambar otomatis SEO.

Cara Membuat Gambar Otomatis SEO

Login ke akun Blogger ↬ Template ↬ Edit HTML ↬ Kemudian copy semua kode dibawah ini, dan letakan tepat diatas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

});

//]]>

</script>

<script type='text/javascript'>

// Gambar SEO otomatis by Vihamblog

//<![CDATA[

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

});

//]]>

</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 - $('#scroll').height() / 2;

    $('#scroll')

        .css('top', distance)

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

        .fadeIn(100);

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

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

    }, 1500);

});

//]]>

</script>

Kalau sudah, simpan perubahan template dan lihat hasilnya. Dengan begitu semua gambar yang sobat pasang di sebuah artikel akan mempunyai kode SEO Friendly secara otomatis. Demikian tutorial Cara Membuat Gambar Otomatis SEO. Semoga bermanfaat.

Read more

Cara Membuat Slot Iklan Adsense di Tengah Postingan

Cara Membuat Slot Iklan Adsense di Tengah Postingan - Adsense? siapa sih yang tidak tau Google Adsense. Semua para kalangan blogger tau akan hal ini, karena salah satu tujuan mereka bermain blogger, ya bisa bekerja sama dengan Gogle Adsense, hihi.

Dengan ini, Viham Blog akan membahas dalam tata letak slot iklan adsense? salah satunya ya, gimana sih cara memasang dan membuat iklan adsense ada di tengah postingan artikel? Sebenarnya caranya cukup mudah kok Sobat, cukup dengan menambahkan beberapa kode. Tapi kalau tidak tau ya sulit kan? hehe. Baiklah cukup sampai disini saja basa-basinya, silakan SObat ikuti tips dan trik Cara Membuat Slot Iklan Adsense di Tengah Postingan berikut ini.

Cara Membuat Slot Iklan Adsense di Tengah Postingan

1. Login ke akun Blogger ↦ Pilih Template ↦ Edit HTML ↦ kemudian tekan tombol CTRL+F ↦ Ketik di kolom dengan kode <data:post.body/>

Di dalam template, pasti ada beberapa kode <data:post.body/> tersebut, namun SObat bisa pilih salah satu dan ganti-ganti sampai iklan-nya tampil di tengah halaman postingan

 2. Salin kode diatas dengan kode dibawah ini

<div expr:id='&quot;ads1&quot; + data:post.id'/>

<div class='googleads'>

<!-- pasang kode iklan yang sudah diparse di sini -->

</div>

<div expr:id='&quot;ads2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;ads1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;ads2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}

</script>

Silakan SObat tambahkan kode iklan pada kode yang ditandai diatas

3. Tambahkan kode CSS berikut ini tepat di atas kode </style>. Fungsinya agar iklan bisa terlihat rapi dan bagus.

.googleads{margin:65px auto;text-align:center}

Jika sudah, simpan perubahan dan ndelok en dewe hasilnya.

Baca juga: Cara Menyembunyikan Icon Tang dan Obeng di Blog

Kelebihan dari kode diatas, tidak hanya untuk iklan Google Adsense. Namun bisa juga untuk merek  iklan-iklan lainnya. Salam Hebat! Terimakasih ya, sudah membaca tutorial Cara Membuat Slot Iklan Adsense di Tengah Postingan.

Read more

Cara Menghilangkan Rekomendasi Disqus

Cara Menghilangkan Rekomendasi Disqus - Hallo gengs Blogger! kabarnya gimana? tentunya baik-baik saja kan? ya, kali ini di artikel kedua saya akan membahas tentang disqus. Seperti yang kita lihat disaat kita memasang komentar disqus pada blog, di bawah komentar akan muncul kotak rekomendasi. Baik itu iklan atau artikel yang sudah dipublish pada blog masing-masing.

Dan semua itu akan muncul di setiap postingan artikel, ya kalau dibilang menggangu. Selera setiap orang kan? berbeda, iyakan! Jadi kalau SObat tertarik ya biarkan saja, namun kalau SObat merasa risih silahkan ikuti beberapa petunjuk dari Viham Blog dibawah ini.

Cara Menghilangkan Rekomendasi Disqus

Langkah pertama, silahkan SObat kunjungi halaman http://disqus.com/. Kemudian login dengan akun yang SObat gunakan.

Kalau sudah masuk, silahkan SObat pilih menu Admin.

Langkah kedua, silahkan SObat pilih blog yang akan di setting.

Kemudian pilih menu General  yang terletak disebelah kiri hadapan SObat.

Nah,langkah inilah yang paling inti dari semua gambar diatas, cara untuk menghilangkan kotak rekomendasi disqus-nya silahkan SObat hilangkan centang pada Discovery : Enable recommendations for your site. seperti contoh gambar diatas.

Kalau sudah silhakan tekan tombol save dan ndelok en dewe hasilnya. Mungkin cukup sekian dari artikel tips Cara Menghilangkan Kotak Rekomendasi Disqus. Mantap Jiwa, terimakasih ya sudah baca artikel saya :-).

Read more