Cara Agar Tulisan Blog Tidak Dapat Dicopy-paste Orang Lain

Assalamu'alaikum wr.wb - mencegah seseorang untuk mengambil hasil karya tulisan anda memang sangat diperlukan pada era yang serba praktis ini, untuk itu mencegah hal tersebut lebih diutamakan untuk anda para blogger jaman now.

Alasan kenapa setelah menggunakan script anti copas namun artikel tetap tercolong karena semakin canggihnya era sekarang javascript dapat dengan mudah dinon-aktifkan melalui browser.

Cara mengatasi hal tersebut kami sarankan untuk menggunakan CSS seperti yang akan kami jelaskan dibawah ini.




Cara Membuat Baca Juga di Tengah Postingan

Assalamu'alaikum wr.wb - Memasang related post di tengah artikel dapat membantu SEO On Page dalam blog anda. Cara ini cukup banyak dilakukan oleh para blogger untuk menurunkan 'Bounce Rate' dan menawarkan artikel yang memiliki bahasan serupa kepada pengunjung.


Memasang baca juga ditengah postingan memberikan kesan bahwasanya blog anda memiliki konten yang unggul dengan topik dan tujuan pengguna, lalu bagaimana cara memasang baca juga ditengah postingan ?

Cara Memasang Artikel Terkait Di Tengah Postingan


Pertama silahkan anda buka dashboard blogger -> Tema -> Edit HTML dan letakkan kode dibawah ini tepat sebelum </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* Related Post Edited Fellcia */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify 

h4{background:#f24a4a;background:linear-gradient(to left,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 5s ease infinite;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #E6E6FA}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#F0FFF0;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#F0FFFF}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Selanjutnya ganti kode <data:post.body/> dengan kode dibawah ini

Setiap template memiliki jumlah kode <data:post.body/> yang berbeda, silahkan coba satu persatu hingga artikel terkait tampil di dalam postingan

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<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+4);}
</script>

Simpan template, selesai.

Nah itulah cara membuat artikel terkait secara otomatis ditengah postingan. Kode saya dapat dari arlina dan sudah didesain sesuai gaya Fellcia. Perlu diketaui bahwa ini sudah responsive menyesuaikan template yang anda pakai. Akhir kata wassalamu'alaikum wr.wb


Cara Memperbaiki Eror Breadcrumb Di Google Search Console

Assalamu'alaikum wr.wb - Beberapa waktu lalu banyak blogger telah mendapati pesan eror breadcrumb pada google search console.

Breadcrumb adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website.

Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, kategori, tag, dan arsip website.


Cara Memperbaiki Error Breadcrumb Di Google Search Console


Silahkan ganti breadcrum versi lama anda dengan versi berikut ini

1. Buka menu dashboard blogger -> Pilih Tema dan klik Edit HTML -> Tambahkan kode dibawah ini tepat diatas <b:includable id='comment-form' var='post'>

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
                  <span itemprop='name'>Home</span></a>
                  <meta content='1' itemprop='position'/>
               </span>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

2. Supaya rapi, tambahkan kode CSS dibawah ini tepat sebelum </head>

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>

3. Tambahkan kode berikut tepat dibawah <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

4. Simpan tema, selesai.

Selanjutnya masuk pada akun google search console anda di: https://search.google.com/search-console lalu pilih Breadcrumb -> Silahkan Validate Fix dan tunggu hasilnya



Nah itulah Cara Memperbaiki Error Pada Breadcrumb Google Search Console. Semoga tutorial ini bermanfaat, akhir kata Wassalamu'alaikum wr.wb


Cara Memasang Tombol Back to Top di Blog Ala Arlina

Assalamu'alaikum wr.wb - Pada artikel kali ini Fellcia akan berbagi ilmu tentang Cara Memasang Tombol Back to Top menggunakan SVG.

Fungsi dari fitur Back To Up ini untuk memudahkan pengunjung kembali keatas tanpa harus men-scroll secara manual.


Cara Memasang Tombol Back To Top Di Blog

Pertama buka, Blogger -> Pilih Tema -> Edit HTML kemudian tambahkan kode berikut sebelum </head>

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Kemudian tambahkan kode berikut sebelum </body>

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Terakhir simpan template, dan lihat hasilnya.

Akhir kata wassalamu'alaikum wr.wb

Sumber: Arlina