Cara Menghilangkan Judul Blog di Awal/Akhir Postingan tanpa Ribet


Setiap artikel blog yang dipublikasi ke search engine secara umum akan diikuti judul dari blog kamu, baik itu di awal atau akhir artikel apabila kamu tidak men-settingnya terlebih dahulu.

Bagi sebagian orang hal ini terkesan kurang profesional terlebih nama blog yang mereka miliki sedikit rumit atau cukup panjang untuk dibaca.

Jika kamu memiliki kendala seperti yang saya sebutkan, satu - satunya cara untuk memperbaiki hal itu adalah dengan menghilangkan judul blog pada artikel di pencarian google.

Hal ini akan membuat blog kamu terkesan lebih profesional dan orang akan cenderung memilih blog yang terlihat meyakinkan untuk mendapatkan informasi yang mereka butuhkan.

Lalu bagaimana caranya menghilangkan judul blog pada pencarian google ?

Cara Menghilangkan Judul Blog di Awal dan Akhir Artikel


Nah buat kamu yang ingin menghilangkan judul blog pada awal dan akhir postingan silahkan ikuti cara berikut ini.

Sebelum melakukan settingan di bawah ini, harap backup terlebih dahulu template kamu ya gaes. Cuss lanjut.!

1. Buka Blogger -> Template -> Edit HTML lalu cari kode berikut ini.

<title><data:blog.pageTitle/></title>

2. Kemudian ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

3. Simpan template dan lihat hasilnya.

Tips: Apabila kamu kesulitan mencari kode di HTML blog, silahkan pakai (CTRL+F) untuk mempermudah pencarian kamu.

Nah ternyata sangat mudah bukan untuk menghilangkan judul blog pada awal dan akhir artikel/postingan blog.

Berikut beberapa rekomendasi artikel buat kamu dan sampai jumpa pada artikel selanjutnya, karena punya banyak ilmu itu asyik.


Cara Melihat Jumlah Artikel atau Postingan Blog Orang Lain

Assalamu'alaikum wr.wb - kali ini Fellcia akan berbagi tips tentang bagaimana cara mengetahui jumlah artikel blog kita maupun orang lain.

Mungkin rasa ingin tahu kita membuat otak mengirimkan sinyal kepada tubuh untuk mencari artikel ini. Nah adapun cara yang bisa kamu untuk melihat berapa banyak artikel yang dimiliki suatu blog, yuk simak caranya dibawah ini.




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 Memasang Lazy Load Auto Ads Terbaru 2020

Assalamu'alaikum wr.wb - Halo sobat, kali ini Fellcia akan berbagi tips tentang Cara Memassng Lazy Load Adsense Auto Ads Terbaru 2020 pada blog.

Pada postingan kemarin saya hanya membuat Lazy Load dengan kode iklan manual, anda bisa menggabungkan dengan kode sebelumnya Cara Memasang Lazy Load Adsense

Fungsi dari pada lazy load ialah menunda pemuatan iklan, lalu iklan akan tampil ketika pengguna menscroll halaman tersebut.

Memasang Lazy Load Adsense akan membuat website terasa lebih ringan saat dijelajahi, oleh karena itu menggunakan lazy load juga disarankan oleh pihak Google Adsense sendiri untuk meningkatkan page speed.


Cara Memasang Lazy Load Auto Ads Pada Blog


Pertama buka dashboard Blogger -> Tema -> pada menu Edit HTML tambahkan kode dibawah ini tepat sebelum </head>

<script type='text/javascript'>
//<![CDATA[
var lazyadsense2 = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {
(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazyadsense2 = true;
  }
}, true);
//]]>
</script>

Silahkan ganti kode yang ditandai dengan kode akun publisher anda.

Lalu simpan dan lihat hasilnya.

Nah itulah cara memasang Lazy Load Auto Ads Terbaru 2020 yang bisa anda terapkan pada blog anda. Semoga bermanfaat, akhir kata wassalamu'alaikum wr.wbl




Cara Memasang Sticky Ads Dibawah Postingan Blog

Assalamu'alaikum wr.wb - Bagi anda yang ingin menambah slot iklan pada halaman blog untuk menambah pendapatan iklan ada baiknya menggunakan salah satu cara yaitu Sticky Ads.

Bila anda publisher dari Google Adsense tidak perlu menggunakan script Stivky Ads karena pihak google sendiri sudah memfasilitasi hal tersebut pada settingan iklan otomatis.


Cara Memasang Iklan Melayang Ditepi Bawah Blog


Pertama silahkan buka Dashboard Blogger -> klik menu Tata Letak -> buat widget javascript baru dan tambahkan kode dibawah ini

<style type='text/css'>
.stickywrap{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:9999}
.stickyzone{text-align:center;display:block;max-width:970px;height:auto;overflow:hidden;margin:auto}
.stickyzone img{max-width:100%;height:auto;vertical-align:middle}
.stickyclose{cursor:pointer;text-align:center}
</style>
<script type='text/javascript'>
$(document).ready(function({$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='stickyb' class='stickywrap'>
<div><a id='close-stickyb' onclick='document.getElementById(&apos;stickyb&apos;).style.display = &apos;none&apos;;'><img alt='close' src='https://3.bp.blogspot.com/-6LAwZExOdHM/Xh7fAY_R5rI/AAAAAAAACB0/gHeIT7IiNKs51DmS34eoBwalg9tiL42AgCNcBGAsYHQ/s1600/sevenclose.png' title='Close this ad' class='stickyclose'/></a></div>
<div class='stickyzone'>
<a href='#' title='Banner iklan disini'><img alt='Banner iklan disini' src='https://3.bp.blogspot.com/-vaXxOw739bU/Xh7ZPDIeH8I/AAAAAAAACBc/vQztOaoSw6QuIb6bjQuJmxm237EyI0acwCNcBGAsYHQ/s1600/sevenn.png'/></a>
</div>
</div>

Jika ingin menambahkan kode unit iklan Adsense atau iklan lainya, silahkan ganti kode yang ditandai dengan kode unit iklan anda.

Itulah cara memasang iklan melayang dibawah postingan, semoga bermanfaat, akhir kata wassalamu'alaikum wr.wb.


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 Membuat Tulisan Berjalan Mengikuti Mouse

Assalamu'alaikum wr.wb - Ketika masih sekolah dibidang IT, terkadang ada saja tugas dari guru untuk pelatihan dasar blogging, seperti halnya pada judul artikel kali ini Cara membuat tulisan mengikuti cursor.


Cara Membuat Tulisan Mengikuti Cursor


Buka dashboard blogger -> Tema -> Edit HTML dan tambahkan kode dibawah ini tepat sebelum </style>

<style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: &#39;comic sans ms&#39;, verdana, arial;

color: #141414;


position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}


</style>

<script type='text/javascript'>

//<![CDATA[

;(function(){

// Isi Text Anda Disini.

var msg = "Isi Text Disini";

var size = "25";

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.2;

var speed = 0.3;



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;


msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :




document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},




makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +


'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},


drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},


init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},


ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};


o.id = 'outerCircleText'; o.style.fontSize = size + 'px';


if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);


};


})();

//]]>

</script>

Ganti tulisan dan angka yang berwarna merah, sesuai selera anda.

Simpan tema, dan lihat hasilnya.


Nah itulah cara membuat tulisan mengikuti cursor semoga artikel ini bermanfaat, akhir kata wassalamu'alaikum wr.wb


Cara Membuat Tabel Didalam Postingan Blog

Assalamu'alaikum wr.wb - Pada artikel kali ini Fellcia akan memberikan tips cara membuat tabel di blog. Sebenarnya cara ini cukup mudah, anda bisa menambahkan beberapa kode yang nantikan akan menjadi sebuah tabel.


Cara Membuat Tabel Didalam Postingan Blog


Untuk membuat sebuah tabel anda memerlukan kode dasar dari tabel tersebut, berikut contoh kode dasar tabel.

<table> - </table>
<th> - </th>
<tr> - </tr>
<td> - </td>

th : Berfungsi sebagai Judul/Head (Untuk kolom)
tr : Berfungsi untuk membuat baris
td : Berfungsi untuk membuat kolom

Nah dari kode diatas anda sudah bisa membuat sebuah tabel, mari kita coba.

1. Membuat tabel dengan 2 kolom kesamping


<table> 
  <tr> 
    <td> Tabel 1 </td>
    <td> tabel 2 </td>
  </tr>
</tabel>

Hasilnya seperti ini

Tabel1 Tabel2

Jika anda ingin membuat 3 kolom atau lebih tinggal tambahkan <td> - </td> sebelum kode </tr> seperti contoh diatas.

2. Membuat tabel 2 baris - 2 kolom


<table> 
  <tr> 
    <th> Judul 1 </th>
    <th> Judul 2 </th>
  </tr>
  <tr> 
    <td> Tabel 1 </td>
    <td> tabel 2 </td>
  </tr>
  <tr> 
    <td> Tabel 1 </td>
    <td> tabel 2 </td>
  </tr>
</tabel>

Maka hasilnya seperti ini

Judul 1 Judul 1
Tabel1 Tabel2
Tabel1 Tabel2


Jika anda ingin membuat lebih, anda hanya perlu menambahkan kode <tr> - </tr> sebelum kode </table> seperti contoh diatas.

Cukup mudah bukan, nah itulah cara membuat tabel dalam postingan blog yang bisa kamu pelajari. Akhir kata wassalamu'alaikum wr.wb.


Cara Membuat Tools Parse HTML Di Blogger

Assalamu'alaikum wr.wb - Bagi yang bergelut dibidang coding pasti memerlukan sebuah converter supaya kode dapat disesuikan dengan kebutuhan.

Parse HTML adalah alat untuk mengkonversi kode HTML secara otomatis supaya terbaca dalam format XML.

Contoh kode HTML yang akan berubah jika dikonversi menggunakan script HTML converter (parse)

tanda < menjadi &lt;
tanda > menjadi &gt;
tanda " menjadi &quot;
tanda ' menjadi &#039;
tanda & menjadi &amp;


Nah buat anda yang ingin memiliki converter sendiri seperti yang ada pada blog ini, silahkan simak tutorial berikut

Cara Membuat Tools Parse HTML Online Di Blog Sendiri


Silahkan salin kode dibawah ini pada halaman statis blog anda, lalu tempelkan pada tab HTML

<style scoped="" type="text/css">
#parser2{position:relative;overflow:hidden}
#parser2 .btn,#parser2 .btn:active{background-image:none}
#parser2 .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:4px;cursor:pointer;transition:all .3s}
#parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}
#parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
#parser2 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
#parser2 .btn-primary{color:#fff;background:#3e51b5}
#parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
#parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
#parser2 .btn-danger{color:#fff;background:#f39c12}
#parser2 .btn-danger:focus{color:#fff;opacity:.9}
#parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
#parser2 .btn-info{color:#fff;background:#5bc0de}
#parser2 .btn-info:focus{color:#fff;background:#31b0d5}
#parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
#parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0}
#parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
#parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
.collapse{display:none}
.alert-success{color:#222;background:#fff}
.alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
.close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0;font-size:13px;line-height:2}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px}
.alert br{display:none}
</style>
<div id="parser2">
   <textarea id="somewhere" placeholder='Write/paste the code here then click the Parse Code button'></textarea>
   <div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
      <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button> 
      <h4>Code copied to clipboard</h4>
   </div>
   <br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Code</button> 
   <div class="clear"></div>
   <button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy code to clipboard</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Clean</button> 
</div>
<script type="text/javascript">//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]></script>

Simpan dan lihat hasilnya.


Nah itulah Cara Membuat Tools Parse HTML di Blog (Responsive). Semoga artikel ini bermanfaat. 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