Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Cara Mencegah Link Aktif Pada Komentar Blog

stop spam

Kotak komentar pada blog merupakan salah satu fitur penting yang digunakan untuk melakukan interaksi, baik antar sesama pengunjung blog maupun antar pengunjung dengan pemilik blog. Semakin banyak komentar yang diberikan pada suatu artikel blog maka merepresentasikan bahwa blog tersebut begitu aktif dalam membangun interaksi antar pengunjung dan pemilik blog.

Namun, masalah timbul saat muncul beberapa atau bahkan banyak komentar spam yang berisi link aktif yang mengarah pada suatu halaman tertentu dan kemudian tentu saja merugikan Anda sebagai pemilik blog. Biasanya link aktif disisipkan seperti ini :

<a href='http://blog-aiizahh.blogspot.com'>Link Aktif</a>
dan menjadi seperti ini :

Untuk mengatasi hal tersebut, ada beberapa cara yang dapat dilakukan. Salah satunya adalah dengan menerapkan fitur moderasi komentar serta menyeleksi otomatis siapa saja yang dapat memberikan komentar pada blog Anda.

1. Login ke blogger, pilih menu Setelan, dan sub menu Pos dan Komentar.

moderasi komentar

2. Pada bagian "Siapa saja yang dapat mengomentari", silahkan pilih "Pengguna dengan Akun Google". Lalu, pada bagian "Moderasi Komentar" pilih "Selalu".

3. Simpan.

Dengan cara diatas, Anda dapat mengontrol siapa saja yang dapat memberikan komentar, yakni hanya pengunjung yang memiliki akun google dan saat itu sedang login menggunakan akunnya. Biasanya, mereka yang memberikan komentar dengan akun google sangat jarang sekali menyisipkan link aktif. Namun, jikapun mereka tetap menyisipkan link aktif, maka masih ada fitur moderasi komentar yang tadi Anda sudah aktifkan.

Kelemahannya? Bila pada saat tertentu Anda tidak membuka blog Anda, maka komentar tersebut pun tidak akan pernah bisa muncul sehingga interaksi antar sesama pengunjung yang tadi saya katakan tidak bisa terjalin.

Untuk mengatasi hal tersebut, Anda masih bisa melakukan pencegahan dengan cara lain, yaitu menambahkan beberapa script pada template blog Anda. Ada dua cara :

I. Mengganti link aktif dengan kalimat atau link lain milik Anda sendiri.

1. Login ke blogger.

2. Pilih Template dan Edit HTML.

edit template

3. Letakkan kode berikut ini diatas kode ]]></b:skin> :

#comments p a {display:none;}
4. Letakkan kode berikut diatas kode </head> atau </body> :
    a. Untuk mengganti dengan kalimat :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Dilarang Menampilkan Link Aktif</span>");
});
</script>
   
    b. Untuk mengganti dengan link milik sendiri :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#comments p a").attr("href", "http://URL-anda.com/");
});
</script>


5. Simpan

1. Hapus kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/> bila sudah ada pada template Anda.
2. Anda dapat mengganti kode berwarna biru dengan kalimat lain.
3. Anda dapat mengganti kode berwarna ungu dengan URL tujuan Anda.

II. Menghapus link aktif tersebut dan menampilkan salinan komentar aslinya.
1. Login ke blogger.

2. Pilih Template dan Edit HTML.

3. Letakkan kode berikut ini diatas kode ]]></b:skin> :

p .spammers {background-color:#A29A9A;color:white}
textarea {
 background-color:#F8D9B5;
 width:98%;
 height:80px;
 overflow:auto;
 display:block;
 margin:10px auto}

4. Letakkan kode berikut ini diatas kode </head> atau </body> :

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            var salinan = content[i].innerHTML;
          content[i].innerHTML = "<div>Maaf, komentar Anda telah disembunyikan kemungkinan karena Anda menyisipkan link aktif yang tidak diperlukan oleh para pembaca. Berikut ini merupakan salinan dari komentar yang Anda berikan :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas perhatian Anda <div align='right'><img alt='no spam' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPm3VVPXRcn4Pw6t2EjDxbUbkvWpnMp1Ru9By8h_Vg80jAc3VGr0bVFKmMLYenbRdBdltlNWRl-IpwwxmDNRygp1_X7Dpmb76vsOLfIcTdWfMl68EbuhIls8hdNRhd4ATJYSELMxqR_seG/s50/order.gif' style='border:0;'/></div></div>";
            content[i].className = "spammers";
        }
    }
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]> 
</script>
Anda dapat mengganti tulisan berwarna ungu dengan kalimat yang Anda inginkan
Itulah 2 cara mencegah munculnya link aktif pada komentar blog. Anda dapat menggunakan salah satunya sehingga tidak ada lagi komentar-komentar spam yang muncul.
#A3

Cara Membuat Efek Loading Pratinjau Blogger Pada Blog

loader


Pernahkah Anda melihat pratinjau atau preview blogger? Misalnya saat Anda berada pada menu Tata Letak, Anda menambahkan widget tertentu dan mencoba melihat hasilnya? Atau saat Anda membuat sebuah postingan yang belum dipublikasikan dan Anda preview dahulu?

Saat menunggu halaman dimuat seluruhnya, Anda akan melihat sebuah tampilan loader semacam gear. Pada postingan kali ini, bila tertarik, Anda dapat mengikuti dan menerapkannya pada blog Anda.


1. Login ke blogger dan pilih menu Template.

tutorial

2. Pilih Edit HTML.

tutorial

3. Tambahkan kode berikut ini dibawah kode <body> :

<div id="aiizahh-loader"></div>

4. Tambahkan kode berikut diatas ]]></b:skin> :

#aiizahh-loader {
background:url(http://www.blogger.com/img/gear.gif) no-repeat center;
background-color:#ffffff;
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}

5. Letakkan kode berikut ini diatas </body> :

<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
    $('#aiizahh-loader').fadeOut(1000);
});
//]]>
</script>

6. Simpan.

Lebih lanjut, Anda bisa mengedit kode tersebut, misalnya mengganti background nya dengan gambar lain, meskipun akan jadi kurang pas dengan judul yang memberikan tutorial efek loading dengan tampilan pratinjau blogger. hehe2
#A3

Membuat Efek Zoom Pada Background Sebuah Halaman



Membuat sebuah halaman, misalnya halaman statis pada blog akan terlihat lebih menarik bila menggunakan suatu efek tertentu. Menambahkan sebuah background bisa menjadi salah satu opsi, namun pada artikel ini Anda dapat menambahkan efek zoom atau membesar pada background saat halaman tersebut di-scroll. Anda dapat melihat demonya pada halaman dibawah :


Membuat efek zoom tersebut membutuhkan tambahan kode CSS maupun Javascript yang dapat Anda tambahkan pada blog Anda.

body{padding:0;margin:0;font-family: 'Roboto', sans-serif;}
.aiiplan {
  position:fixed; 
  top:0; 
  z-index:0; 
  width:100%; 
  padding-top:50%; 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IEWvXQS7JzZGLklvqi-Jj73QX83beiUHo-HqFKOx0bwNurE2SvWdbfZifJHrMfGLfxZADBLLhtnSByxPFAoAnoJCqFkACI6xqpPphIVPNyIj_pwdUuVrT6uqHFWBnPWtD8ahW6oz5xg/s320/stars-in-the-sky-digital-art-hd-wallpaper-2560x1440-2122.jpg) center center no-repeat; 
  transform:scale(1);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.aiiorr{
  position:absolute;
  background-color:none;
  left:0;
  right:0;
  top:0;
  margin-left:auto;
  margin-right:auto;
  width:50%;
  padding: 60px 40px;
}
.aiiorr h1{
  color:#333;
}
.aiiorr p{
  color:#fff;
}

$(window).scroll(function(e) {
  var scrollSeviye = $(this).scrollTop();
    if(scrollSeviye>2400){
    scrollSeviye=2400;
  }
  var buyutme=(scrollSeviye/6000)+1;
  $('.aiiplan').css('-webkit-filter', 'blur('+scrollSeviye/120+'px)');
  $('.aiiplan').css('transform', 'scale('+buyutme+')');
});

<div class="aiiplan"></div>
<div class="aiiorr">
  <h1>Scroll Ke Bawah</h1>
  <p> Isi halaman </p>
</div>
#A3

Komentar Terbaru

Just load it!