Latest 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 !!!!

Download JINGGAMAGZ Blogger Template 2020 Gratis


Download JINGGAMAGZ Blogger Template 2020 Gratis
Download JINGGAMAGZ Blogger Template 2020 Gratis

Saya memberinama template ini Jinggamagz ini saya desain dengan style Magazine dan Responsive, yang full style gambar namun saya menjadikannya template dengan LOADING SPEED MAKSIMAL meski desain style-nya magazine. Saya mentargetkan speed loading diatas 90% di GMETRIX untuk semua desain yang saya buat, dan Alhamdullilah semua itu bisa dicapai sesuai keinginan pengguna di era kecepatann saat ini.

Template ini banyak menggunakan javascript  tentunya, karena model atau style magazine yang umum menggunakan banyak widget. Namun saya bisa membuat LOADING SPEED JINGGAMAGZ TEMPLATE ini menjadi diatas 90% ( A ) atau sesuai keinginan penggunanya. ( cek tabel bawah )

Untuk lebih detailnya Sobat bisa lihat tabel dibawah postingan dan cek ..


Free Version

  • Remove Footer Credits
  • Blog Setup Service
  • No Encrypted Scripts
  • Premium Support
  • For Unlimited Domains
  • Lifetime Template Updates
  • Download Now
    Free Version

Premium Version

Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
Mobile Friendly True Cek
Speed Loading True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button ( CSS only ) True -
Responsive  Menu True -
Shortcodes True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Download PRASASTI Blogger Template 2020

Download PRASASTI Blogger Template 2020

Saya memberinama template ini PRSASTI-V20 ini saya desain dengan style Magazine dan Responsive, yang full style gambar namun saya menjadikannya template dengan LOADING SPEED MAKSIMAL meski desain style-nya magazine. Saya mentargetkan speed loading diatas 90% di GMETRIX untuk semua desain yang saya buat, dan Alhamdullilah semua itu bisa dicapai sesuai keinginan pengguna di era kecepatann saat ini.

Template ini banyak menggunakan javascript  tentunya, karena model atau style magazine yang umum menggunakan banyak widget. Namun saya bisa membuat LOADING SPEED TEMPLATE PRASASTI ini menjadi diatas 90% ( A ) atau sesuai keinginan penggunanya. ( cek tabel bawah )

Untuk lebih detailnya Sobat bisa lihat tabel dibawah postingan dan cek ..


Free Version

  • Remove Footer Credits
  • Blog Setup Service
  • No Encrypted Scripts
  • Premium Support
  • For Unlimited Domains
  • Lifetime Template Updates
  • Download Now
    Free Version

Premium Version

Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
Mobile Friendly True Cek
Speed Loading True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive  Menu True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

DOWNLOAD G-FRENZY Blogger Template 2020

DOWNLOAD G-FRENZY Blogger Template 2020

Template G-FRENZY 2020 ini saya desain dengan style Magazine dan Responsive, yang full style gambar namun saya menjadikannya template dengan LOADING SPEED MAKSIMAL meski desain style-nya magazine. Saya mentargetkan speed loading diatas 90% di GMETRIX untuk semua desain yang saya buat, dan Alhamdullilah semua itu bisa dicapai sesuai keinginan pengguna di era kecepatann saat ini.

Template ini banyak menggunakan javascript  tentunya, karena model atau style magazine yang umum menggunakan banyak widget. Namun saya bisa membuat LOADING SPEED TEMPLATE GFRENZY ini menjadi diatas 90% ( A ) atau sesuai keinginan penggunanya. ( cek tabel bawah )

Untuk lebih detailnya Sobat bisa lihat tabel dibawah postingan dan cek ..


Free Version

  • Remove Footer Credits
  • Blog Setup Service
  • No Encrypted Scripts
  • Premium Support
  • For Unlimited Domains
  • Lifetime Template Updates
  • Download Now
    Free Version

Premium Version

Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
Mobile Friendly True Cek
Speed Loading True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive  Menu True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

DOWNLOAD DGZTISM Super Faster Blogger Template 2020

DOWNLOAD DGZTISM Super Faster Blogger Template 2020

Template ini saya buat dengan desain sederhana dengan meminimalkan kode javascript dan resize gambar agar memaksimalkan loading dari template ini sendiri. JAMAN NOW ! Blog atau Website membutuhkan KECEPATAN LOADING agar meminimalkan terjadinya BOUNCE RATE.

Dan saya memberikan judul template ini dengan DGZTISM dan template ini saya sajikan dalam  dua versi yaitu FREE dan PREMIUM.

Template ini saya buat dengan memaksimalkan kecepatan LOADING tanpa mengurangi tampilan dan kesan elegan sebuah template.

Di dalam template tersedia system komentar DISQUS namun memungkinkan penggunjung dengan mudah memberikan komentarnya dari akun yang sedang mereka gunakan baik twitter,facebook,G+, jika Anda ingin mencobanya silahkan download versi gratis-nya...

Free Version

  • Remove Footer Credits
  • Blog Setup Service
  • No Encrypted Scripts
  • Premium Support
  • For Unlimited Domains
  • Lifetime Template Updates
  • Download Now Free Version

Premium Version

Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Speed Loading True Cek
Dynamic Heading True -
Adsense Ready True -
Mobile Friendly True Cek
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive  Menu True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Download ADELWEISS Blogger Template Terbaru

Download ADELWEISS Blogger Template Terbaru 2019

Era KECEPATAN adalah era ADELWEISS Magz Fast and Responsive Blogger Template  adalah template yang saya buat dan baru saya UPDATE di JULI 2019 !

Template ini saya buat dengan memaksimalkan kecepatan LOADING tanpa mengurangi tampilan dan kesan elegan sebuah template.

Template ini tidak banyak menggunakan javascript yang umumnya membebani loading blog, jadi template ini saya buat secara umum memenuhi kebutuhan Blogger dengan tampilan template yang elegan dan kecepatan loading yang maksimal..!

Di dalam template tersedia system komentar DISQUS namun memungkinkan penggunjung dengan mudah memberikan komentarnya dari akun yang sedang mereka gunakan baik twitter,facebook,G+, jika Anda ingin mencobanya silahkan download versi gratis-nya...

Free Version

  • Remove Footer Credits
  • Blog Setup Service
  • No Encrypted Scripts
  • Premium Support
  • For Unlimited Domains
  • Lifetime Template Updates
  • Download Now
    Free Version

Premium Version

Features Availability Type
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True
Speed Loading True Cek
Dynamic Heading True -
Adsense Ready True -
Valid Schema.org True -
High CTR True -
Personal Blog True -
2 Column True -
Auto Read More with Thumbnail True -
Responsive Ad Slot True -
Breadcrumbs True -
Related Posts with Thumb True -
Search Box True -
Social Share Button True -
Whatsapp Share Button True -
Responsive  Menu True -
Shortcodes True -
Unlimited Page Numbered True -
Comments System DISQUS True -

Semoga bermanfaat.. Jangan lupa share ya Sob !!! 

Tutorial

SEO