Cara Menyembunyikan Link Aktif Pada Komentar Blogger

Diversan Blog - Selamat datang kawan di blog sederhana saya ini. Pada artikel kali ini saya akan berbagi sedikit tutorial mengenai Cara Agar Link Aktif Tidak Muncul Di Komentar. Hal ini dimaksudkan untuk mencegah spammer yang nakal dan sengaja menaruh link aktif guna mendapatkan backlink ke url yang dipasang pada komentar. Tentu hal ini cukup menganggu karena si spammer berkomentar tidak sesuai isi artikel yang kita sampaikan.

Nah, bagaimana cara menyembunyikan atau menghilangkan link aktif pada komentar blog? mari kita ikuti tutorial yang saya jelaskan berikut ini.

Cara Menyembunyikan Link Aktif pada Komentar Blog

1. Masuk ke akun Blogger kamu, kemudian klik Template, dan klik Edit HTML. Setelah itu masukan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Block Link Comments
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) {
            content[i].innerHTML = "Dilarang menambahkan link aktif bro!";
            content[i].className = "spammer-detected";
        }
    }
}
blockLinks('comment-holder', 'p');
//]]>
</script>

Kata yang ditandai di atas bisa kamu ganti sesuai selera kamu.

2. Nah, untuk mempercantik tampilan warna peringatan kode di atas, tambahkan kode CSS berikut ini di atas kode  ]]></b:skin> atau </style>

p.spammer-detected {
  background: #9eb2c0;
  position: relative;
  display: table;
  margin: 10px 0;
  padding: 10px 15px;
  color: #fff;
  font-size: 95%;
  border-radius: 2px;
}

3. Langkah terakhir, simpan template kamu. Lihat hasilnya jika ada komentar dengan link aktif yang ada pada blog kamu.

Contoh:

Jika Javascript masih tidak berfungsi, coba ganti kode eksekusi blockLinks('comment-holder', 'p') menjadi blockLinks('cm_block', 'p') atau blockLinks('comment_block', 'p') atau blockLinks('comment-body', 'p')

Demikian itu tadi sedikit tutorial yang saya bagikan untuk kamu terkait Cara Menyembunyikan Link Aktif pada Komentar Blog. Semoga bermanfaat. Terimakasih.

Memberikan Efek Rating Bintang pada Popular Post dengan Font Awesome

Diversan Blog - Apakabar sobat? semoga baik baik saja untuk kamu yang sedang membaca artikel ini. Nah pada kesempatan kali ini saya akan berbagi sedikit tutorial yang saya kutip dari blog arlina design, yakni mengenai cara memberikan efek rating bintang pada popular post dengan font awesome. tentu kamu sudah tahu fungsi dari tutorial yang akan saya bagikan ini.

Penambahan efek rating bintang ini terinspirasi dari widget popular post pada platform wordpress. Berfungsi untuk menampilkan voting yang diberikan pengunjung pada artikel tertentu.

Bagi kamu yang ingin mencoba tutorial ini, ikuti langkah langkah yang saya berikan. Mari kita mulai menambahkan efek rating bintang pada popular post dengan font awesome.

Baca Juga : Memperbaiki Struktur Blog Agar SEO

Memberikan Efek Rating Bintang pada Popular Post dengan Font Awesome

Widget yang akan saya berikan ini menggunakan font awesome, jadi silahkan pasang script kode CSS di bawah ini di atas tag </head>

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

Jika Kode CSS Diatas sudah ada di template blog anda, abaikan step diatas

1. Login ke akun blogger kamu, kemudian buka template editor, dan tambahkan kode di bawah ini sebelum tag  ]]></b:skin> atau </style>
Style 1

/* 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 2

/* 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 3

/* 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';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\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}

2. Selanjutnya, simpan template kamu dan lihatlah hasilnya.

Demikian informasi yang saya berikan mengenai cara Memberikan Efek Rating Bintang pada Popular Post dengan Font Awesome. Semoga bermanfaat.

Cara Mudah Membuat Tabel Pada Blog

Cara Membuat Tabel Pada Blog

Cara Membuat Tabel

Halo Sobat , pada kesempatan kali ini saya akan membagikan Cara Membuat Table pada Blog. Mungkin ada yang bertanya bagaimana sih caranya membuat tabel? Bagi yang belum tahu caranya langsung cek aja disini!!

#Langkah 1, Silahkan sobat masuk ke dasbor Blogger >> Template, setelah masuk ke Template silahkan tambahkan kode dibawah ini diatas </b:skin>

Masuk Ke Template

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

Akan Terlihat seperti gambar

Setelah itu jangan lupa untuk menyimpannya

#Kedua Setelah selesai menambah kode, silahkan anda Paste kode tabel dibawah ini pada psotingan sobat. yang past menambahkannya lewat HTML yah

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Fitur</th> <th>Ketersediaan</th> </tr>
<tr> <td>Responsive</td> <td>Yes</td> </tr>
<tr> <td>Seo</td> <td>Yes</td> </tr>
<tr> <td>Custom Threaded Comment</td> <td>Yes</td> </tr>
<tr> <td>2 Column</td> <td>Yes</td> </tr>
<tr> <td>Green Light Theme Color</td> <td>Yes</td> </tr>
<tr> <td>Top Navigation</td> <td>Yes</td> </tr>
<tr> <td>Stcky Navigation</td> <td>Yes</td> </tr>
<tr> <td>Main Navigation </td> <td>Yes</td> </tr>
<tr> <td>PopUp Button</td> <td>Yes</td> </tr>
<tr> <td>Auto Read More with Thumbnail </td> <td>Yes</td> </tr>
<tr> <td>Responsive Ad Slot</td> <td>Yes</td> </tr>
<tr> <td>Breadcrumbs</td> <td>Yes</td> </tr>
<tr> <td>Related Posts with Thumb </td> <td>Yes</td> </tr>
<tr> <td>Search Box </td> <td>Yes</td> </tr>
<tr> <td>Social Share Button </td> <td>Yes</td> </tr>
<tr> <td>Sidebar Tab Widget </td> <td>Yes</td> </tr>
<tr> <td>Author Box </td> <td>Yes</td> </tr>
<tr> <td>Custom 404 Page </td> <td>Yes</td> </tr>
<tr> <td>Smooth Scroll back To Top</td> <td>Yes</td> </tr>
<tr> <td>Better Print Page Layout </td> <td>Yes</td> </tr>
<tr> <td>Custom Subscribe Box Widget </td> <td>Yes</td> </tr>
<tr> <td>Well Documentation </td> <td>Yes</td> </tr>
</tbody> </table>

Sehingga nanti akan terlihat seperti ini

Fitur	Ketersediaan
Responsive	Yes
Seo	Yes
Custom Threaded Comment	Yes
2 Column	Yes
Green Light Theme Color	Yes
Top Navigation	Yes
Stcky Navigation	Yes
Main Navigation	Yes
PopUp Button	Yes
Auto Read More with Thumbnail	Yes
Responsive Ad Slot	Yes
Breadcrumbs	Yes
Related Posts with Thumb	Yes
Search Box	Yes
Social Share Button	Yes
Sidebar Tab Widget	Yes
Author Box	Yes
Custom 404 Page	Yes
Smooth Scroll back To Top	Yes
Better Print Page Layout	Yes
Custom Subscribe Box Widget	Yes
Well Documentation	Yes

Jangan lupa untuk mengganti teks nya sobat

#Penutup

Mungkin cukup sekian postingan saya kali ini semoga bermanfaat bagi anda. Trimakasih