-->
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Mengatasi Error Breadcrumbs ( data-vocabulary.org schema deprecated ) di Google Search Console

Mengatasi Error  Breadcrumbs ( data-vocabulary.org schema deprecated ) di Google Search Console

Saya mendapati email tentang Error Breadcrumbs  data-vocabulary.org schema deprecated sekitar tanggal 14 Maret 2020.Dan masalah ini menjadi  ISU hangat di 2020 di para kalangan pakar SEO untuk mengatasi masalah migrasi dari data-vocabulary.org ke schema.org.

Kita semua tahu bahwa data-vocabulary.org merupakan layanan yang memberikan property untuk suatu website/laman sehingga website tersebut memiliki informasi struktur data yang sesuai menurut mesin pencari, sehingga website kita akan lebih mudah dikenali. Akan tetapi beberapa waktu lalu beredar informasi mengenai penutupan sepenuhnya markup data-vocabulary.org oleh Google dengan alasan untuk meningkatkan penggunaan dan popularitas dari schema.org serta orientasi pada pengembangan Struktur Data Tunggal. Oleh karena itu, markup data-vocabulary.org tidak lagi memenuhi syarat dan akan ditutup sepenuhnya dari Google rich result mulai tanggal April 6, 2020.

Semua Blogger di 2020 ini akan mengalami hal yang sama seperti saya ketika masih menggunakan data-vocabulary.org di dalam Breadcrumbs. Memang Google masih akan mengakhiri masa aktif data-vocabulary.org di April 2020, namun sebagai langkah antisipasi bagi para penggunanya Google memberikan informasi agar para Blogger untuk beralih menggunakan atau migrasi ke schema.org.

Saya sempat kebingungan  melakukan migrasi dari data-vocabulary.org ke schema.org setelah beberapa kali gagal melakukan VALIDASI di Google Structure Data Testing Tool dan Google Rich Results Test artinya berkali kali ERROR ketika melakukan beberapa perubahan kode kode di dalam Breadcrumbs.


Alhamdullilah usaha saya membawa hasil, saya berhasil migrasikan Breadcrumbs  data-vocabulary.org di template saya ke schema.org dengan sukses !!! ( No error ).

Fix Problem Error Breadcrumbs data-vocabulary.org schema deprecated

Jika Anda pengguna Template ber platform BLOGGER dan mendapati masalah yang sama silahkan ikuti Tutorial bagaimana mengganti Breadcrumbs data-vocabulary.org ke schema.org.

1.  Anda lebih dahulu harus mengganti kode CSS Breadcrumbs yang sebelumnya terpasang di template Anda. Dengan kode CSS dibawah ini :

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. Cari kode seperti dibawah ini

<b:includable id='breadcrumb' var='posts'>

3. Lalu hapus semua kodenya
<b:includable id='breadcrumb' var='posts'>
.....................................
.....................................
.....................................
</b:includable>

3. Kemudian ganti dengan kode dibawah ini :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='itemscope' itemtype='schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<meta content='1' itemprop='position'/>
<span itemprop='name'>Home</span></a>
</span>
</span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='itemscope' itemtype='schema.org/ListItem'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4.Setelah itu Simpan template..... Selesai

Belumlah komplit jika Sobat Blogger tak melakukan cek terlebih dahulu di  Rich Results Testing Tool  dan  Structured Data Testing Tool  Silahkan Sobat cek terlebih dahulu di kedua site validasi Google.

Semoga berhasil.....

Membuat Tabel Keterangan Responsive pada Postingan Blog

Membuat Tabel Keterangan Responsive pada Postingan Blog

Kali isi saya ingin berbagi cara membuat TABEL, sebenernya saya juga bingung mau memberi nama apa pada TABEL yang sebenernya iseng saya buat. TABEL ini sebenernya terinspirasi setelah saya melihat sebuah TABEL keterangan pada sebuat website jual Template.

Lalu saya mencoba membuatnya dengan versi yang sangat sederhana agar mudah diterapkan oleh Sobat Blogger semuanya. Sebenernya TABEL ini bisa Sobat aplikasikan sesuai kebutuhan dan tidak harus seperti apa yang saya buat. Untuk lebih jelasnya silahkan lihat demo dibawah ini


Dan jika Sobat ingin menerapkan, silahkan ikuti tutorial dibawah ini :

1. Silahkan simpan kode dibawah ini setelah kode <style> dan atau <style type='text/css'>
/* Demo Tabel */
#main .dgz-tabel ul{margin:5px 0;list-style:none;background:#FAFAFA;border:1px solid #FDD761;padding:3px}
#main .dgz-tabel ul h3{position:relative;margin:0;background:#FDD761;color:#555;font:normal 700 16px sans-serif;padding:15px;overflow:hidden}
#main .box_content{text-align:justify;padding:15px;background:#fff;color:#595959;margin:1px;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
#main .dgz-tabel ul li{position:relative;margin:0 0 5px;padding:0 5px;line-height:25px;color:#1B1B1B;font-size:13px;font-weight:600;overflow:hidden}
#main .dgz-tabel ul li b{position:relative;font-weight:600;background:#FDD761;color:#444;line-height:25px;font-size:18px;display:block;padding:5px 10px;margin-right:6px;float:left;min-width:20px;border-right:2px solid #FAFAFA;overflow:hidden;text-align:center;white-space:nowrap;margin-left:-5px}
#main .dgz-tabel ul li a{position:absolute;font-weight:300;color:#444;line-height:25px;font-size:18px;padding:5px 10px;overflow:hidden;width:100%;background:#EEEFF0}
@media (max-width: 640px){
#main .box_content{position:relative;float:none;padding:5px;width:100%;overflow:hidden;}
#main .dgz-tabel ul li{position:relative;float:none;width:100%;overflow:hidden;}
#main .dgz-tabel ul li b,#main .dgz-tabel ul li strong{display:inline-block;font-size:15px;float:none;width:15%}
#main .dgz-tabel ul li a{display:inline-block;float:none;width:85%;font-size:15px;}
}
2. Kemudian letakkan kode dibawah ini didalam kotak Postingan Blog pada menu HTML dan bukan Compose
<div class="dgz-tabel">
<ul><h3>FEATURED</h3>
<div class="box_content">
<li><b>1</b><a href="Link Tester" rel="nofollow" target="_blank" title="Responsive">Responsive</a> </li>
<li><b>2</b><a href="Link Tester" rel="nofollow" target="_blank" title="Google Testing Tool Validator">Google Testing Tool Validator</a> </li>
<li><b>3</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Mobile Friendgz-tabely">Mobile Friendgz-tabely</a> </li>
<li><b>4</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Custom 404 Page">Custom 404 Page</a> </li>
<li><b>5</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Fast Loading">Fast Loading</a> </li>
<li><b>6</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Seo Friendgz-tabely">Seo Friendgz-tabely</a> </li>
<li><b>7</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Ads Ready">Ads Ready</a> </li>
<li><b>8</b> <a href="Link Tester" rel="nofollow" target="_blank" title="HTML5 and CSS3">HTML5 and CSS3</a> </li>
<li><b>9</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Social Sharing">Social Sharing</a> </li>
<li><b>10</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Clear Design">Clear Design</a> </li>
</ul>
</div>
</div>

Catatan :
Ganti tulisan yang saya tandai Link Tester dengan link tester milik sobat

Selesai...mudah bukan? Semoga bermanfaat dan jangan lupa share ya Sob !!!!

Cara Share Postingan Blog ke Facebook Otomatis

Cara Share Postingan Blog ke Facebook Otomatis

Dulu ada banyak cara share artikel langsung ke Akun Facebook kita, namun saat ini cara cara share artikel melalui pihak ke tiga sudah tidak bisa lagi digunakan. Dan jika menggunakan cara manual tentu akan menghabiskan banyak waktu untuk melakukan itu. Terkadang Facebook-pun akan menganggap spam jika URL artikel yang dilampirkan tidak sesuai dengan kebijakan ( Term of Service ) pihak Facebook.

Cara ini sebenernya sedikit ribet, namun hanya sekali dilakukan dan untuk seterusnya artikel blog akan secara otomatis share ke akun Facebook kita dan cara ini masih UPDATE di 2018 artinya masih WORK ! untuk share artikel Blog secara otomatis. Cara yang kita lakukan adalah membuat artikel share ke Twitter terlebih dahulu kemudian men-setting Twitter agar secara otomatis artikel tersebut share juga langsung ke Akun Facebook kita.

Cara Share Postingan Blog ke Facebook Otomatis

Langkah pertama : Silahkan aktifkan FeedBurner Blog Sobat dengan mendaftarkan feed blog Anda.

Feed blog URL seperti kode berikut: http://NamaBlogAnda/feeds/posts/default

Setelah FeedBurner blog Sobat aktif, silahkan pilih tab Publicize lalu pilih menu Socialize, aktifkan fitur ini lalu hubungkan akun Twitter Sobat. Dengan begitu FeedBurner akan otomatis share update post ke akun Twitter Sobat.

Cara Share Postingan Blog ke Facebook Otomatis


Langkah kedua, kemudian silahkan hubungkan akun Facebook pada akun Twitter agar ketika update post masuk dari FeedBurner ke Twitter, maka Twitter akan otomatis meneruskan postingan ke Facebook.

Silahkan masuk ke Setting akun Twitter Sobat lalu pilih menu Apps dan kemudian hubungkan akun Facebook Sobat.

Cara Share Postingan Blog ke Facebook Otomatis

Selesai... selamat mencoba dan semoga bermanfaat.

Cara Membuat Content Pagination di Blogger seperti Wordpress

Cara Membuat Content Pagination di  Blogger seperti Wordpress

Content Pagination berfungsi membagi sebuah konten menjadi beberapa halaman dengan menampilkan pager angka sesuai banyak halaman yang dibuat ( umumnya tampilan ini banyak digunakan oleh Template berplatform Wordpress ) sehingga memudahkan navigasi pengunjung untuk melihat konten selanjutnya.

Content Pagination yang diterapkan di blogger ini menggunakan Javascript, tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog. Ketika pengunjung mengklik pager untuk membaca konten selanjutnya, maka selain konten yang berganti juga otomatis mereload halaman sehingga otomatis konten berikut iklan yang ada di halaman juga ikut berganti.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan gunakan ( masukkan ) kode berikut ini pada postingan mode HTML untuk membuat postingan dengan content pagination ini.

 <style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Kontent untuk halaman 1 tulis di sini......
</div>

<div id="page2">
Kontent untuk halaman 2 tulis di sini......
</div>

<div id="page3">
Kontent untuk halaman 3 tulis di sini......
</div>

<div id="page4">
Kontent untuk halaman 4 tulis di sini......
</div>

<div id="page5">
Kontent untuk halaman 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Silahkan sesuaikan pembagian konten halaman dan tombolnya sesuai keinginan. Namun Sobat juga bisa menyimpan style CSS dan javascript-nya pada edit HTML agar lebih simple ketika membuat postingannya.

Semoga bermanfaat.

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !


Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :
 /* 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:#888;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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 


Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<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'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' 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#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' 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> 

3. Terakhir, simpan template...
Selamat mencoba dan semoga bermanfaat.

Tutorial

SEO