TRIK SIMPLE

Perbedaan Antara Seo Onpage dan Offpage - Dalam proses pengembangan sebuah blog sangat membutuhkan teknik SEO ini, banyak juga yang masih mendebatkan apakah SEO ini penting untuk masa perkembangan blog dan belum ada titik terangnya. Banyak blog - blog besar yang menggunakan teknik SEO untuk mempopulerkan blognya dimata search engine google untuk berjuang ke pajwan (Page One). Sebelum ke topiknya apakah sobat sudah pada tau apa itu SEO (Search Engine Optimization)

SEO adalah cara meningkatkan traffic blog pada mesin pencarian, untuk lengkapnya sudah saya buat di postingan sebelumnya.

Baca Juga : Apa Itu SEO (Search Engine Optimization)

Perbedaan Antara Seo Onpage dan Offpage

Apakah sobat pernah dengar istilah Seo Onpage dan Seo offpage? yap Seo terdiri dari 2 bagian yaitu On page dan Offpage, banyak blog yang masih dalam proses pengembangan menggunakan teknik seo ini untuk bisnis online maupun juga hanya sekedar meningkatkan traffic saja, teknik SEO ini masih dibilang gratis cara untuk meningkat blog yang banyak akan pengunjung.

SEO Onpage

Seo Onpage adalah teknik atau upaya pemilik blog yang dilakukan didalam blog itu sendiri, juga mengikuti aturan kaidah SEO. Dibawah ini saya akan paparkan apa yang dibutuhkan dalam melaksanankan teknik SEO Onpage ini.

1. Artikel Yang Berkualitas

Konten is King ada yang pernah dengar kata - kata itu? yap buatlah artikel yang bermnfaat bagi para pengunjung, Google pun begitu google adalah search engine yang menjebatani antara pengunjung dan blog jadi misalkan pengunjung menemukan artikel yang sobat buat dan pengunjung menemukan apa yang dia cari dan betah di blog sobat dengan waktu yang lama maka bisa disimpulkan blog sobat akan diberi nilai positif dari google. Google sendiri pun tidak main - main untuk mencari artikel yang berkualitas untuk pengunjungnya dan menyajikan dengan baik dan berkualitas.

Dengan menerapkan Tenik SEO Onpage ini google dapat dengan mudah mengindex artikel yang sobat sudah buat dan juga dapat meningkatkan traffic yang begitu pesat dalam blog sobat sendiri dan sesuai target yang diinginkan yaitu memiliki blog yang traffic yang banyak.

2. Judul Mengandung Keyword

Gimana sih maksudnya, gini sob misakan sobat membuat artikel dengan Keyword Nasi Goreng maka judulnya menjadi Cara Memasak Nasi Goreng Paling Enak nasi gorenya disipkan dalam judul yang nanti akan dibuat. Dengan meletakkan Keyword pada judul yang menarik, berdampak mendapatkan banyak pengunjung dan juga dapat dengan mudah dikenali oleh Serach Engine Google.

3. Postingan Mengandung Keyword

Jangan hanya memasang keyword pada judul saja sob diawal disetiap paragraf maupun diakhir tentunya sangat baik untuk dipasangi keyword banyak sekali yang mengatakan meletakan keyword pada postingan itu berdampak baik. Juga diingat jangan juga memasang keyword yang terlalu banyak dalam postingan akan berdapampak diangap spam oleh Search Engine Google.

4. Memilih Template Yang SEO Friendly

Banyak sekali template sekarang yang mengandung seo atau menerapkan Meta Tag SEO dalam template yang dibuatnya perbayar maupun gratisan, tapi saya sarankan untuk membeli template yang premium dan beli dari pemilik templatenya. diantaranya template yang SEO Friendly menurut saya Viral Go - Arlina Design, VioMagz - Mas Sugeng, Masign Clean - IdBlanter.

5. Kecepatan Loading Blog

Tidak bisa dipungkiri kecepatan loading blog juga merupakan teknik seo untuk meningkatkan traffic pada blog, banyak disimpulkan saya tanya nih kepada sobat yang baca artikel ini apakah sobat sobat senang dengan blog/website dengan loading yang lambat? 80% akan langsung mengclose blog tersbut bener nggak sobat? nah maka dari itu meningkatkan kecepatan loading blog juga sangat berpengaruh dimata search engine google. Menigngkatkan kecepatan loading blog juga banyak caranya diantaranya Cara Optimasi Loading Blog Dengan Memasang Plugin LazyLoad, Cara Mempercepat Loading Blog Dengan Menghapus Kode Bawaan Blogger dan sobat bisa mengecek tinggak cepatan loading blog.

Baca Juga : 3 Tools Untuk Mengetahui Tingkat Kecepatan Loading Blog

6. Struktur URL Postingan

URL postingan yang jelas juga dapat dianggap bagus dimata serach google, maksudnya yang jelas gimana sob? jadi misalkan nih sob kamu buat artikel yang judulnya memiliki kata yang panjang saya misalkan Perbedaan Antara Seo Onpage dan Offpage Yang perlu di Ketahui nah pasti tautan otomatisnya berantakan ada yang berakhiran di yang.html rubah jadi lebih jelas saja misalkan https://www.triksimple.com/2018/11/perbedaan-seo-onpage-dan-offpage-pada-blog.html, jadi sobat benahi supaya struktur URL jadi lebih jelas agar mudah dikenali oleh Search Engine Google.

7. Terdapat Sitemap

Disetiap blog/website seharusnya memiliki sitemap ini, sitemap adalah link tautan yang berisi all post pada blog jadi mempermudahkan pengunjung mencari artikel yang dia inginkan melalui sitemap ini.

Baca Juga : Cara Membuat Sitemap Responsive di Blog

8. Memberikan ALT Text Pada Gambar

Disetiap postingan akan lebih indah dengan disisipkan pada artikel tersebut gambar juga dapat menyakinkan pengunjung dalam isi blog tersebut jadi lebih baik gambar yang dipasang tersebut diberikan propertis ALT agar mudah dikenali oleh Search Engine Google.

9. Meta Tags

Beriakanlah meta tag seo pada template blog sobat jika blog sobat blm dipasangi meta tag seo seperti description, keyword dan author agar mudah dikenali dan dirayapi sesuai keyword pada blog sobat.

Baca Juga : Meta Tag Seo Friendly Blogger Terbaru Valid HTML5

10. Terdapat Internal Link Setiap Artikel

Kaitkan artikel yang kita buat ke artikel lainnya yang saling berkaitan tentunya, internal link dianggap baik dimanat serach engine dibandingkan eksternal link yang mengarah ke blog luar. Menerapkan internal link ini juga dapat menurunkan bounce rate blog.

Baca Juga : 20 Cara Paling Efektif Menurunkan Bounce Rate Pada Blog

Nah itu 10 cara yang juga saya gunakan untuk meningkatkan seo onpage pada blog saya jika sudah mengetahui seo onpage sekarang beralih ke offpage.

SEO Offpage

Teknik Seo yang dilakukan di luar blog yang dibuatnya, pada teknik ini yang mementingkan backlink dari situs - situs yang sudah besar, banyak juga yang terkena banned karena dapat dianggap spam berikut ini saya paparkan cara yang bagus untuk optimasi teknik seo offpage dibawah ini.

1. Menanam Backlink

Menanam backlink banyak sekali caranya diantaranya berkomentar dan juga bisa menjadi artikel tamu di blog lain dengan menanamkan backlink pada postingan tersebut dan backlink tersebut akan menuju ke blog sobat atau postingan sobat, backlink juga cara meningkatkan ranking pada search engine, alexa maka dari itu menanam backlink itu sangat diperlukan dalam teknik seo offpage ini.

2. Mempromosikan Artikel di Sosmed

Cara kedua ini yang banyak dilakukan pada para blogger tapi tidak pada tau bahwa mempromosikan artikel pada media sosial merupaka teknik seo offpage tapi banyak yang bilang seo tidak penting tapi masih mempromosikan artikel di media sosial whahaha. Promosikan artikelmu diantaranya di Facebook, Google+, Grub Whatsapp dll sehingga juga dapat menigkatkan traffic pada blog.

Nah itulah yang saya terapkan juga pada blog saya ini teknik seo offpage.

Oke sekian yang bisa saya jelaskan tentang Perbedaan Antara Seo Onpage dan Offpage Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Perbedaan Antara Seo Onpage dan Offpage

Majid JM Sunday, November 18, 2018

Meta Tag Seo Friendly Blogger Terbaru Valid HTML5 - Pada dasarnya sebagai sobat blogger harus mengetagui apa itu meta tag blogger, ada blm tau apa itu meta tag? oke saya jelaskan Meta Tag adalah deretan baris kode yang dapat mendeskripsikan yang berupa metadata yang terkandung dari html tersebut dan biasanya meta tag blogger ini diletakkan di bawah kode </head> pada Template.

Baca Juga : Meta Tag Kondisional Blogger Terbaru

Banyak sekali yang bertanya apakah meta tag seo ini mempengaruhi pada serp diantara seperti Google di mesin pencariannya, banyak sekali yang tidak percaya yang dapat ditimbulkan dari pemasangan meta tag seo ini pada template, saya sarankan pada template sobat untuk memasang meta tag seo ini, meta tag seo ini sangat mempengaruhi serp google sob. Ini kembali kepada sobat sendiri tentukan pilihan sobat apakah seo ini benar adanya atau hanya mitos tidak bisa dibuktikan.

Pada Tutorial kali ini meta tag seo friendlynya sudah Valid HTML5 sob banyak sekali tutorial tapi rata rata blm Valid HTML5, oke langsung saja ke caranya.

Meta Tag Seo Friendly Blogger Terbaru Valid HTML5

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode <head> atau </head>.

<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-aKZzSAygVKk/VYPkX_nAwrI/AAAAAAAACeo/cgQTs8nR5Rg/s1600/Arlina%2BLogo.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>

Yang bertanda merah diisi sesuai data sobat sendiri. Jika sudah klik Simpan.

Baca Juga : Tag Kondisional Simpel Widget Pada Blogger

Oke sekian yang bisa saya sampaikan tentang Meta Tag Seo Friendly Blogger Terbaru Valid HTML5 Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Meta Tag Seo Friendly Blogger Terbaru Valid HTML5

Majid JM Monday, November 12, 2018

Cara Mudah Membuat Iklan Parallax Adsense di Blog - Oke pada kesempatan kali ini saya akan share kepada kalian cara memasang iklan parallax di dalam postingan, pada postingan sebelumnya saya sudah singgung cara membuat iklan ditengah postingan blog.

Sudah pada tau apa itu parallax? parralax ada lah desain blog yang dimana objek latar paling belakang bergeraknya akan lebih lebih lambat dari pada ddidepannya parallax ini juga dapat diaplikasikan terhadap iklan adsense saat sobat scroll kebawah atau keatas iklan tersebut akan terlihat diam pada tempatnya.

Baca Juga : Cara Membuat Slot Iklan Link Mirip Adsense di Blog

Biasanya ukurannya pada iklan parallax ini 300x320 pemasangan iklan parallax ini sangat membantu bagi blog sobat kekurangan widget untuk pemasangan iklan.

Oke langsung saja ke caranya..

Cara Mudah Membuat Iklan Parallax Adsense di Blog

1. Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini dan pastekan tepat diatas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 99;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

2. Cari kode <div class='post-body entry-content' pada template sobat biasanya terdapat banyak kode tersebut kemudian copy kode dibawah ini dan pastekan tepat diatas kode <div class='post-body entry-content'

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="KODE ADSENSE DISINI" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

3. Klik simpan pada template.

Bagi yang bertanda merah bisa diganti dengan kode adsense sobat sendiri.

Baca Juga : Cara Memasang Iklan Adsense di Tengah Postingan Artikel

Oke sekian yang bisa saya sampaikan tentang Cara Mudah Membuat Iklan Parallax Adsense di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Adsense CSS Tutor Blogger

Cara Mudah Membuat Iklan Parallax Adsense di Blog

Majid JM Sunday, November 11, 2018

Cara Mudah Menghilangkan Kotak Rekomendasi Disqus - Halo ma pren oke kali ini saya akan share bagaimana cara menghilangkan kotak rekomendasi disqus yang bisanya tampil pada setiap postingan.

Baca Juga : Cara Menampilkan Fitur Terbaru Tombol Reaksi Disqus di Blog

Oke langsung saja kecaranya sob

Cara Mudah Menghilangkan Kotak Rekomendasi Disqus

1. Pertama sobat masuk terlebih dahulu ke https://disqus.com/ lalu pilih site yang akan dihilankan kotak rekomendasinya.

2. Masuk ke menu Setting > General kemudian hilangkan centang dalam menu Recovery

3. Scroll kebawah lalu klik save.

4. Jangan lupa juga menghilangkan ceklis pada gambar dibawah ini Mauk ke menu General

5. Jika sudah Klik Save.

Oke sekian yang bisa saya sampaikan tentang Cara Mudah Menghilangkan Kotak Rekomendasi Disqus Terima Kasih yang sduah berkunjung semoga bermanfaat bagi kalian semua.

Disqus Tutor Blogger

Cara Mudah Menghilangkan Kotak Rekomendasi Disqus

Majid JM Sunday, November 11, 2018

Cara Memasang Komentar Disqus di Blog Terbaru

Cara Mudah Memasang Komentar Disqus di Blog Terbaru - Disqus adalah platform yang digunakan atau difungsikan untuk berkomentar salah satunya bisa berkomentar diblog menggunakan disqus ini, banyak sekali situs - situs besar yang memakai komentar disqus ini karena dengan tampilannya menarik dan seo friendly nyaman untuk pengunjung.

Baca Juga : Cara Membuat Fungsi Onclick Load Pada Komentar Disqus

Pada blog ini saya juga menggunakan komentar disqus dengan tampilan yang minimalis dan juga banyak yang sudah menerapkan komentar disqus di era sekarang ini biasanya para blogger, dengan menganti komentar disqus juga banyak manfaatnya tapi sekarang saya tidak membahas tentang apa manfaatnya komentar disqus, yang saya jelaskan sekarang cara memasangnya di blog.

Banyak sekali sekarang ini yang memakai komentar disqus untuk blognya, sobat belum punya silahkan daftar sekarang di https://disqus.com/.

Cara Mudah Memasang Komentar Disqus di Blog Terbaru

Pertama sobat masuk terlebih dahulu ke Blogger > Tata Letak > Tambahkan Gadget > HTML/JavaScript dan pastekan kode dibawah ini pada tempat yang sudah disediakan.

Catatan: Blog sobat harus sudah terpasang sistem komentar disqus

<style scoped="scoped" type="text/css">
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://triksimple.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

Jika sudah klik simpan.

Baca Juga : Cara Memasang Recent Comment Disqus di Blog dengan Mudah

Oke sekian yang bisa saya sampaikan tentang Cara Mudah Memasang Komentar Disqus di Blog Terbaru Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Disqus Tutor Blogger Widget

Cara Mudah Memasang Komentar Disqus di Blog Terbaru

Majid JM Saturday, November 10, 2018

Cara Menampilkan Reading Time Pada Setiap Artikel di Blog - Dengan menambahkan fitur Reading Time ini sobat bisa tau perkiraan artikel sobat akan dibaca sampai selesai, semakin lama semakin bagus apalagi pengunjung mengunjungi halaman lain pada blog sobat ini juga bisa menurunkan bounce rate pada blog sobat.

Baca Juga : 20 Cara Paling Efektif Menurunkan Bounce Rate Pada Blog

Reading Time ini juga tidak terlalu penting bagi blog tapi setidaknya akan menambah fitur saja pada blog sobat untuk disajikan oleh pengunjung, jadi buatlah pengunjungmu betah di blogmu sobat.

Oke langsung saja ke caranya..

Cara Menampilkan Reading Time Pada Setiap Artikel di Blog

Pertama, jika blog sobat belum dipasang Font Awesome silahkan pasang terlebih dahulu Blogger > Tema > Edit HTML copy kode dibawah ini pastekan diatas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Catatan: Jika blog sobat sudah terdapat Font Awesome silahkan lewati langkah diatas

Kemudian copy kode dibawah ini dan pastekan tepat diatas kode </style> atau ]]></b:skin>

span.right {float:right;display:inline-block;padding:10px 5px;}

Copy juga kode di bawah ini dan pastekan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});
//]]>
</script>

Kode terakhir adalah penempatan reading timenya misalkan sobat terapkan diantara awal postingan copy kode dibawah ini dan pastekan sesuai selera sobat sendiri.

<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>

Jika sudah klik simpan.

Oke sekianyang bisa saya sampaikan tentang Cara Menampilkan Reading Time Pada Setiap Artikel di Blog Terma Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

CSS JavaScript Tutor Blogger Widget

Cara Menampilkan Reading Time Pada Setiap Artikel di Blog

Majid JM Friday, November 9, 2018

Cara Mudah Membuat Tampilan Under Maintance di Blog - Maintance adalah sebuah tindakan yang dapat diartikan memperbaiki, pemeliharaan barang dan menjaga agar lebih baik kondisinya bisa artikel sebuah blog/website, apa sobat sudah pada tau atu pernah menemukan website dengan tampilan maintance? dalam keadaan tersebut website lagi masa pebaikan pada websitenya sob.

Dengan memasang background maintance ini juga bisa menandaan kepada pengunjung setia sobat bahwa blog/website sobat masih dalam tahap perbaikan (maintance) dan juga supaya pengunjung tidak tau bahwa blog/website masih mengalami error yang berat.

Nah jika blog/website sobat masih thap perbaikan boleh memasang background ini oke langsung kecaranya saja.

Cara Mudah Membuat Tampilan Under Maintance di Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini lalu pastekan tepat diatas kode ]]></b:skin> atau </style>

html {
height: 100%;
background: url(https://cdn.dribbble.com/users/49067/screenshots/3710403/maintenance-panel800600.gif) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

Jika sudah klik simpan.

Oke sekian yang bisa saya sampaikan tentang Cara Mudah Membuat Tampilan Under Maintance di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

CSS Tutor Blogger

Cara Mudah Membuat Tampilan Under Maintance di Blog

Majid JM Friday, November 9, 2018

Cara Optimasi Loading Blog Dengan Memasang Plugin LazyLoad - Memperhatikan kecepatan loading blog itu merupakan lah yang penting bagi kalian seorang blogger dengan mengoptimasikan blog sobat sobat supaya pengunjung segan atau betah mengunjungi blog sobat, jika sobat mengecek kecepatan loading blog di pagespeed pasti gambar sobat harus di compress agar blog sobat kecepatan loadingnya meningkat banyak efeknya diantaranya gambar akan menjadi buram.

Baca Juga : Cara Mempercepat Loading Blog Dengan Menghapus Kode Bawaan Blogger

Pada kesempatan kali ini saya akan share kepada sobat cara memasang plugin JQuery LazyLoad pada blog sobat untuk optimasi loading pada blog sobat akan meningkat, oke langsung ke caranya.

Cara Optimasi Loading Blog Dengan Memasang Plugin LazyLoad

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit Html kemudian copy kode dibawah ini dan pastekan tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Jika sudah klik simpan.

Oke sekian yang bisa saya jelaskan tentang Cara Optimasi Loading Blog Dengan Memasang Plugin LazyLoad Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

HTML SEO Tutor Blogger

Cara Optimasi Loading Blog Dengan Memasang Plugin LazyLoad

Majid JM Thursday, November 8, 2018

Cara Mempercepat Loading Blog Dengan Menghapus Kode Bawaan Blogger - Menghapus kode bawaan blogger dan menggantinya supaya mempercepat loading blog sobat, banyak sekaliyang share tentang menghapus kode bawaan blogger seperti Arlinadzgn, Kompiajaib, Mastamvan oke gk papa lah setidaknya saya juga mau share pengalaman ku ini juga kepada sobat - sobat ini.

Kenapa harus menghapus kode bawaan blogger ? yang memberatkan seperti widget_css_bundle.css, widget.js yang biasanya sering muncul pada saat sobat mengecek kecepatan loading pada blog sobat.

Baca Juga : 3 Tools Untuk Mengetahui Tingkat Kecepatan Loading Blog

Setidaknya sobat memperhatikan kecepatan loading pada blog sobat, supaya pengunjung juga senang berkunjung di blog sobat. Survey pengunjung suka loading pada blog itu cepat cari untuk para blogger seperti sobat ini juga memperhatikan kecepatan loading pada blog sobat.

Catatan : Backup Sebelum Eksekusi.

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML.

1. Cari kode </head> ganti dengan kode dibawah ini

&lt;head&gt;

2. Cari kode <b:skin><![CDATA[ ganti dengan kode dibawah ini

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

3. Cari kode ]]></b:skin> ganti dengan kode dibawah ini

</style>

4. Cari kode </head> ganti dengan kode dibawah ini

&lt;/head&gt;&lt;!--<head/>--&gt;

5. Cari kode </body> ganti dengan kode dibawah ini

&lt;!--</body>--&gt;&lt;/body&gt;

Lalu klik simpan tema.

Nah jika sobat sudah menghapus dan mengubah kode bawaan blogger coba sobat cek pagespeed template sobat pasti ada perbedaan antara sebelum dan sesudah mengubah kode bawaan blogger ini.

Baca Juga : 3 Tips Mudah Cara Mempercepat Loading Blog

Oke sekian yang bisa saya jelaskan tentang Cara Mempercepat Loading Blog Dengan Menghapus Kode Bawaan Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

SEO Tutor Blogger

Cara Mempercepat Loading Blog Dengan Menghapus Kode Bawaan Blogger

Majid JM Wednesday, November 7, 2018

Cara Membuat Sitemap Responsive di Blog - Sitemap / Daftar Isi blog dapat memudahkan pengunjung menemukan yang pastinya pengunjung inginkan nah pada tutorial kali ini sitemapnya memiliki banyak fitur diantaranya memfilter dari artikel yang terbaru , kategorinya bisa juga mencari dengan kata kuncinya pengunjung juga dapat melihat totalberapa postingan di blog sobat.

Pada postingan sebelumnya saya juga sudah share recent post yang bisa juga dijadikan sitemap.

Baca Juga : Cara Membuat Recent Post Ala Arlinadzgn

Sitemap juga banyak fungsinya sob dalam masalah pengindekan sitemap ini harus di index dalam google webmaster supaya artikel yang sobat buat terindex oleh google.

Oke langsung saja kecaranya sob oceee.

Cara Membuat Sitemap Responsive di Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Halaman > Halaman Baru, Kemudian copy kode dibawah ini pastekan dalam mode HTML bukan Compose .

<div id="sitemap-blog">
  <table>
    <tbody>
      <tr>
        <td>
          <label for="feed-order">Urutkan artikel berdasarkan:</label>
        </td>
        <td>
          <select id="feed-order">
            <option selected="" value="published">Artikel terbaru</option>
            <option value="updated">Artikel yang terakhir di update</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>
        </td>
        <td>
          <select disabled="" id="label-sorter">
            <option selected="">Loading....</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <label for="feed-q">Cari artikel dengan kata kunci:</label>
        </td>
        <td>
          <form id="post-searcher">
            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
          </form>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav">
</div>
 
<script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style); 
</script>

<script type='text/javaScript'>
document.write;
var loadToc, loadCategories, _toc = {
    init: function() {
        var cfg = {
                homePage: window.location.origin,
                maxResults: 10,
                numChars: 270,
                thumbWidth: 140,
                thumbHeight: 95,
                navText: "Tampilkan artikel selanjutnya &#9660;",
                resetToc: "Kembali ke Awal",
                noImage: "//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/no-thumbnail.png",
                loading: "<span>Memuat...</span>",
                counting: "<div>Memuat artikel...</div>",
                searching: "<span>Mencari...</span>"
            },
            w = window,
            d = document,
            el = function(id) {
                return d.getElementById(id);
            },
            o = {
                a: el('feed-order'),
                b: el('label-sorter').parentNode,
                c: el('post-searcher'),
                d: el('feed-q'),
                e: el('result-desc'),
                f: el('daftar-isi-blog'),
                g: el('feed-nav'),
                h: d.getElementsByTagName('head')[0],
                i: 0,
                j: null,
                k: 'published',
                l: 0,
                m: ""
            },
            fn = {
                a: function() {
                    old = el('temporer-script');
                    old.parentNode.removeChild(old);
                },
                b: function(param) {
                    var script = d.createElement('script');
                    script.type = "text/javascript";
                    script.id = "temporer-script";
                    script.src = param;
                    if (el('temporer-script')) fn.a();
                    o.h.appendChild(script);
                },
                c: function(mode, tag, order) {
                    o.i++;
                    o.e.innerHTML = cfg.counting;
                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
                    if (mode === 0) {
                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
                    } else if (mode == 1) {
                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
                    }
                    o.j = (tag !== null) ? tag : null;
                    o.l = mode;
                    o.a.disabled = true;
                    o.b.children[0].disabled = true;
                },
                d: function(json) {
                    var _h;
                    o.g.innerHTML = "";
                    o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';
                    if ("entry" in json.feed) {
                        var a = json.feed.entry,
                            b, c, _d, e = "0 Komentar",
                            f = "",
                            g;
                        for (var i = 0; i < cfg.maxResults; i++) {
                            if (i == a.length) break;
                            b = a[i].title.$t;
                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {
                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
                            }
                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {
                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
                                    e = a[i].link[k].title;
                                    break;
                                }
                            }
                            _h = d.createElement('li');
                            _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';
                            o.f.appendChild(_h);
                        }
                        _h = d.createElement('a');
                        _h.href = '#load-more';
                        _h.innerHTML = cfg.navText;
                        _h.onclick = function() {
                            fn.c(o.l, o.j, o.k);
                            return false;
                        };
                    } else {
                        _h = d.createElement('a');
                        _h.href = '#reset-content';
                        _h.innerHTML = cfg.resetToc;
                        _h.onclick = function() {
                            o.i = -1;
                            o.e.innerHTML = cfg.counting;
                            o.f.innerHTML = "";
                            fn.c(0, null, 'published');
                            o.a.innerHTML = o.a.innerHTML;
                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
                            return false;
                        };
                    }
                    o.g.appendChild(_h);
                    o.a.disabled = false;
                    o.b.children[0].disabled = false;
                },
                e: function(json) {
                    var a = json.feed.category,
                        b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';
                    for (var i = 0, len = a.length; i < len; i++) {
                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
                    }
                    b += '</select>';
                    o.b.innerHTML = b;
                    o.b.children[0].onchange = function() {
                        o.i = -1;
                        o.f.innerHTML = "";
                        o.g.innerHTML = cfg.loading;
                        fn.c(0, this.value, o.k);
                    };
                }
            };
        loadToc = fn.d;
        loadCategories = fn.e;
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
        o.a.onchange = function() {
            o.i = -1;
            o.f.innerHTML = "";
            o.g.innerHTML = cfg.counting;
            o.b.children[0].innerHTML = o.b.children[0].innerHTML;
            fn.c(0, null, this.value);
            o.k = this.value;
        };
        o.c.onsubmit = function() {
            o.i = -1;
            o.f.innerHTML = "";
            o.m = o.d.value;
            fn.c(1, o.d.value, o.k);
            return false;
        };
    }
};
_toc.init();
</script>

Yang saya tandai merah bisa diganti sesui kebutuhan sobat.

Jika sudah klik publikasikan.

Baca Juga : Cara Membuat Fungsi Onclick Load Pada Komentar Disqus

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Sitemap Responsive di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.