Cara Membuat Kotak Spoiler Simple di Blog

Cara Membuat Kotak Spoiler Simple di Blog

CSS Javascript

Kotak Spoiler sangat penting di dalam blogger, karena kotak spoiler ini berfungsi sebagai tombol buka tutup untuk menyembunyikan sebuah konten yang berisikan spoiler. Maka dari itu kotak tombol ini dinamakan Spoiler Box.

Fungsi dari kotak spoiler ini tidak hanya menyembunyikan konten seperti teks, gambar maupun video melainkan fungsi lain dari spoiler box ini adalah berfungsi sebagai menghemat space artikel agar artikel yang ditampilkan tidak terlalu banyak dan panjang pada postingan blogger.

Jika sobat blogger penasaran dengan cara pemasangannya, langsung saja sobat simak tutorialnya di bawah ini.

Membuat Spoiler Box Simple di Blog
Seperti biasa hal pertama yang harus sobat lakukan adalah login terlebih dahulu ke akun blogger sobat masing-masing, dan jika sudah klik pada bagian menu Tema dan klik Edit HTML. Lalu tambahkan kode CSS di bawah ini dan letakkan tepat di atas kode ]]></b:skin> atau kode </style>

/* Spoiler Button by Cara Terkini */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

Kemudian tambahkan kode Javascript di bawah ini dan letakkan tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

Dan juga sobat tambahkan kode JQuery di bawah ini dan letakkan tepat di atas kode </body>

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Terakhir tinggal sobat klik Simpan Tema dan selesai.

Pemanggilan Script
Untuk pemanggilan script Spoiler box sobat salin kode di bawah ini dan letakkan di postingan atau halaman mana saja yang ingin sobat tambahkan.

<div id='soore-spoiler'>
<button>Lihat Spoiler</button>
</div>
<div id='soore-spoiler-content'>
••••••••••••
</div>

Untuk demo dan hasilnya sobat bisa lihat link di bawah ini:

• Result

Cara Terkini

Cara Menonaktifkan Link Hidup pada Komentar Blog

Cara Menonaktifkan Link Hidup pada Komentar Blog

Javascript

Tutorial atau pembahasan kali ini adalah bagaimana Cara Menonaktifkan Link Hidup pada Komentar Blog. yang bertujuan agar menghindari tautan yang berisikan spam dan promosi dari user atau visitor blogger lain. Karena jika banyak sekali yang mempromosikan atau menaruh link sembarangan dan banyak spam di kolom komentar akan membuat kita menjadi buruk dan sangat tidak rapih.

Biasanya pengunjung menaruh link atau url tersebut berupa link promosi, backlink dan sebagainya. menurut saya pribadi boleh lah promosi blog sendiri di suatu tempat tetapi tahu aturan dan jangan membuat blog orang lain menjadi terkena spam dan semacamnya.

Menonaktifkan link hidup ini bisa dilakukan hanya dengan memasang beberapa script seperti Javascript agar blog kita aman dari spam link di kolom komentar.

Langsung saja saya menulis artikel ini ingin memberitahukan beberapa sobat blogger agar bisa menerapkannya di blog sobat sendiri karena caranya cukup mudah dan simple.

Cara Menonaktifkan Link Hidup di Komentar Blog
Langkah pertama masuk ke akun Blogger sobat masing-masing lalu buka menu Tema - Edit HML dan terapkan kode di bawah ini di atas kode </body>

<script>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

Cara Kedua: disini saya memberikan script yang lainnya dengan sebuah peringatan

script>
//<![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) {
content[i].innerHTML = "<mark>Dilarang Menyertakan Link Hidup Disini ya!!</mark> Karena membuat blog menjadi SPAM!";
content[i].className = "spammer-detected";
} } }
blockLinks('comment-holder', 'p');
//]]>
</script>

Terakhir tambahkan kode CSS ini di atas kode </style> atau ]]></b:skin>

.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;border-radius:4px;display:inline-block;padding:10px 15px!important}

Penutup, Simpan Template dan lihat hasilnya di kolom komentar blogger sobat yang ada link aktifnya.

Mungkin segini saja yang dapat saya tulis pada artikel kali ini silahkan di coba dan semoga bermanfaat.

Cara Terkini

Cara Mudah Mengatasi Thumbnail Blur di Blogger Versi Terbaru

Cara Mudah Mengatasi Thumbnail Blur di Blogger Versi Terbaru

Blogger Javascript

Akhir-akhir ini banyak sekali pengguna atau user yang merasakan resah terhadap tampilan blogger yang berubah secara total semenjak ada update dari versi klasik ke versi terbaru. Pasalnya banyak sekali yang berpendapat bahwa blogger versi terbaru mempunyai banyak bug salah satu contohnya adalah bug di Thumbnail Post yang menjadi buram dan kurang jelas.

Tujuan saya menulis artikel ini adalah ingin memberitahukan kepada beberapa sobat blogger yang memiliki masalah tersebut pada blogger versi Terbaru. Maka dari itu langsung saja kita ke praktek dan tutorialnya.

Cara Mudah Mengatasi Thumbnail Post yang Blur di Blogger Versi Terbaru
Seperti biasa langkah yang paling pertama adalah, buka Blogger sobat dan klik pada bagian Menu Tema - Edit HTML. Kemudian cari kode yang mirip seperti kode di bawah ini (Perlu diketahui juga setiap tema atau template blogger berbeda jadi tinggal sesuaikan saja dengan tema yang sobat pakai atau gunakan):

<script type='text/javascript'>
   document.write(lunarSummaryThumb(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script>

Setelah itu ganti kode Javascript di atas dengan kode Javascript di bawah ini:

<b:if cond='data:post.thumbnailUrl'>
   <a class='thumb' expr:href='data:post.url'>
   <img class='lazy' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>
   </a>
   <b:else/>
   <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url' expr:title='data:post.title'><img class='lazy' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></a>
      <b:else/>
      <a expr:href='data:post.url' expr:title='data:post.title'>
         <div class='postthumb'><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFs22ghZne6v5djZcXbWOzedJQFdXyzPmWcBWwPa8BraMVnwNKMKj01r6aPBmIu-niuDGETbGtCfLv_9MyvS1jpTiY7xej4hfPwD7GcDn9VQrsULm0TYEebXsejw4s8_YOeRRqnaKcYaJ/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

Keterangan:

Angka 280 Menunjukkan dimensi gambar yang akan di tampilkan,
300:200 menunjukkan rasio gambar dengan format landscape. Yang dimana 300 untuk lebar dan 200 untuk tinggi. Sobat pun bisa mengganti rasio tersebut dengan format lain contohnya seperti 1:1 4:3
dan 16:9. Namun sayang sekali format gambar blogger belum mendukung untuk rasio gambar dengan format potrait. Sehingga ukuran tinggi gambar tidak akan bisa melebihi lebar gambar.

Ada baiknya juga sobat ingin mempersingkat tulisan, sobat masih tetap menyimpan kode snippet seperti ini:

<script>
snippet_count = 120;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
</script>

Dan untuk pemanggilan kodenya seperti ini:

<b:if cond='data:view.isMultipleItems'>
   <div itemprop='description articleBody'>
      <div expr:id='&quot;summary&quot; + data:post.id'>
         <data:post.body/>
      </div>
      <script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
   </div>
</b:if>

Jika sudah klik Simpan Tema dan selesai. Silahkan lihat hasilnya di blog sobat.

Itulah Cara Mudah Mengatasi Thumbnail Blur di Blogger Versi Terbaru. Mungkin segini saja Artikel yang saya tulis dan saya bagikan semoga bermanfaat dan membantu untuk sobat blogger yang mengalami masalah tersebut.

Cara Terkini