Cara Kompres Gambar Tanpa Mengurangi Kualitas (100% Gratis)

Cara Kompres Gambar Tanpa Mengurangi Kualitas - Kompres (compress) gambar adalah suatu proses untuk mengecilkan ukuran file gambar. Sebagai contoh Anda memiliki gambar dengan size 200 KB dan ingin dikecilkan ukurannya menjadi dibawah 100 KB, maka caranya adalah dengan kompres gambar agar ukurannya menjadi kecil.

Kompres gambar ternyata sekarang ini banyak dibutuhkan, sebagai contoh siswa yang ingin mengikuti program bidikmisi maka disyaratkan dengan mengirim beberapa file gambar dan setiap gambar ukuran filenya harus dibawah 300 KB. Maka jika gambar yang didapatkan diatas 300 KB harus dikompres terlebih dahulu agar sesuai dengan aturan yang ditentukan.

Hal ini juga berguna untuk para blogger yang ingin mempercepat loading blog yaitu dengan compress gambar agar ukuran file lebih kecil sehingga blog menjadi fast loading. Jika blog fast loading maka pengunjung akan senang membuka blog kita.

Cara Kompres Ukuran Size Gambar Tanpa Mengurangi Kualitas

Tutorial kompres gambar kali ini adalah menggunakan cara online sehingga pengguna tidak lagi membutuhkan software atau aplikasi tambahan. Dan yang paling menarik Anda dapat kompres gambar setiap hari tanpa dipungut biaya alias GRATIS.

Dengan cara online ini dapat mengecilkan ukuran size gambar sampai dengan 80% dan hasilnya tidak jauh beda dengan yang aslinya (tanpa mengurangi kualitas gambar).

1. Cara Compress Gambar dengan Tiny PNG

Tiny PNG merupakan salah satu situs favorit saya untuk kompres gambar yang lebih maksimal dengan hasil kompres sampai 80% bahkan hampir 90%. Jika anda tertarik yuk ikuti tutorialnya dibawah ini.
  • Buka dulu situsnya http://tinypng.com/
  • Lalu upload gambar yang ingin dikompres dengan cara klik tombol "Drop your .png and .jpg file here!" kamu bisa upload maksimal 20 gambar dengan maksimal ukuran pergambar 5 MB.
    Cara Kompres Gambar Tanpa Mengurangi Kualitas Gratis
  • Tunggu proses Uploading dan Copressing sampai muncul tombol download.
  • Untuk mendapatkan hasil kompres silahkan tekan tombol download untuk unduh gambar hasil kompres.
    Cara Kompres Gambar Tanpa Mengurangi Kualitas
  • Selesai dan lihat hasilnya.

2. Compress Ukuran Gambar dengan iloveIMG 

  • Buka situsnya https://www.iloveimg.com/
  • Jika sudah terbuka, silahkan pilih menu Compress Image
  • Lalu pilih gambar yang ingin di kompres dengan klik tombol "Select image" atau dengan cara "drop image"
  • Setelah teruploud, lalu klik tombol "Compress Images"
    cara compress gambar tanpa mengurangi kualitas
  • Kemudian tunggu proses upload dan compress, jika sudah selesai maka akan secara otomatis muncul halaman download. 
    cara compress gambar secara online
  • Atau dengan cara tekan tombol "Download Compressed Images"

3. Mengurangi Ukuran Gambar Secara Online dengan Optimizilla

  • Silahkan buka situsnya http://optimizilla.com/
  • Upload gambar dengan cara klik tombol "Upload Files" atau drop gambar pada kolom "Drop Your Files Here"
  • Silahkan tunggu proses uploading dan compressing sampai selesai.
  • Jika sudah selesai maka akan muncul tombol download yang siap untuk mengunduh gambar hasil kompres.
    cara compress gambar tanpa mengurangi kualitas
  • Selesai dan lihat hasilnya.
Sekian tutorial kali ini semoga dapat bermanfaat. 3 cara kompres gambar diatas memiliki kualitas terbaik dengan hasil yang maksimal. Silahkan coba semuanya untuk mengetahui perbandingan hasilnya. 

Semoga bermanfaat dan salam Blogger Jepara.

Cara Memasang Iklan Adsense di Postingan Blogger

Cara Memasang Iklan Adsense di Postingan Blogger - Salah satu penghasilan blogger adalah iklan Google Adsense yang sudah terbukti membayar mahal kepada publishernya. Banyak para blogger yang berlomba untuk mendapatkan puluhan juta rupiah dari iklan Google Adsense. 

Salah satu faktor penting untuk meningkatkan penghasilan Google Adsense adalah masalah penempatan iklan. Letak iklan sangat menentukan penghasilan Anda, jadi penempatan iklan harus diperhatikan betul untuk mendapatkan hasil yang lebih maksimal.

cara memasang iklan adsense di blog

Nah, kali ini saya akan berbagi informasi tentang penempatan iklan terbaik untuk publisher Google Adsense yang sudah saya buktikan sendiri mampu mendapatkan puluhan dollar setiap harinya. Berikut letak iklan atau penempatan iklan terbaik yang perlu anda coba:

Cara Memasang Iklan Adsense di Dalam Postingan Blogger 

Berikut 3 cara memasang iklan Google Adsense di dalam postingan yang banyak digunakan oleh para blogger. Adapun penempatan iklan terdapat pada bagian atas, tengah dan akhir artikel postingan. Cara ini terbukti dapat menyumbang banyak pendapatan dari Google Adsense.

Untuk mempercepat loading iklan Google Adsense caranya cukup mudah yaitu memasang kode asinkron hanya satu saja. Jika masih bingung silahkan (Baca: Cara Agar Iklan Google Adsense Fast Loading di Blogger )

1. Memasang Iklan Adsense di Bawah Judul Postingan

Cara yang pertama ini sangat efektif dilakukan, karena pengunjung akan langsung melihat iklan anda setelah membaca judul postingan, maka kemungkinan untuk klik iklan sangat besar. Untuk cara memasangnya silahkan Baca: Cara Memasang Iklan Adsense di Bawah Judul Postingan

2. Memasang Iklan di Tengah Postingan Blog 

Cara yang kedua ini juga wajib anda coba, karena iklan akan secara otomatis tampil di tengah postingan blog, pengunjung akan dengan mudah melihat iklan disaat membaca artikel. Cara pemasangannya juga cukup mudah, silahkan simak: Cara Memasang Iklan Adsense di Tengah Postingan

3. Memasang Iklan di Akhir Postingan Blog

Cara yang terakhir yaitu meletakkan iklan diakhir postingan, cara ini juga dibilang ampuh karena setelah pengunjung membaca artikel, iklan akan langsung terlihat dan jika konten iklan cukup menarik bagi pengunjung tentu ini akan mengundang banyak klik. Cara memasangnya silahkan baca: Cara Memasang Iklan Adsense di Akhir Postingan Blog

Selain penempatan iklan diatas, saya rasa kurang begitu efektif, misalnya memasang iklan pada sidebar, header dan footer. Maka saran saya lebih baik memasang iklan pada halaman postingan saya agar loading blog juga tidak terlalu berat (Baca: Cara Mengetahui Kecepatan Loading Pada Blog Anda ).

Sekian informasi tentang penempatan iklan google adsense terbaik untuk menambah penghasilan, semoga dapat bermanfaat dan selalu update artikel blog untuk tetap menjaga traffic agar tetap naik. Salam sukses

Cara Agar Iklan Google Adsense Fast Loading di Blogger

Cara Agar Iklan Google Adsense Fast Loading di Blogger - Memasang banyak iklan google adsense di blog tentu akan mendapatkan peluang penghasilan yang lebih baik, namun jika salah dalam memasang adsense maka akan berdampak buruk pada blog karena sudah pasti loading blog semakin berat.

Setiap slot iklan google adsense terdapat satu kode javascript, jika anda memasang 3 iklan adsense maka secara otomatis memasang 3 javascript, maka ini tanpa kita sadari akan membuat loading blog tambah berat dan semakin lambat.

(Baca: Alasan Penting Blog atau Website Harus Fast Loading )

Lalu bagaimana solusinya? solusinya adalah memasang javascript async iklan google adsense hanya 1 saja dalam blog. Lalu muncul pertanyaan lagi, apakah iklan bisa berjalan normal walaupun hanya memasang 1 javascript? jawabannya bisa, karena pada dasarnya sama dengan satu panggilan javascript tetapi dengan catatan pemasangan kode javascript dilakukan dengan benar.

Cara Agar Iklan Google Adsense Fast Loading di Blogger

Cara Agar Iklan Google Adsense Fast Loading di Blogger

Berikut cara memasang kode javascrip async yang benar agar iklan Google Adsense fast loading dan blog cepat diakses agar pengunjung tidak meninggalkan blog.
  1. Perhatikan kode iklan Google Adsense berikut ini.
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Responsive -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-482765480447704"
         data-ad-slot="4102343276"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  2. Kemudian ambil code javascript Google Adsense seperti pada kode yang berwarna merah diatas.
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  3. Kemudian parse terlebih dahulu kode tersebut DISINI, setelah diparse maka menjadi seperti ini:
    &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
  4. Setelah diparse, selanjutnya masuk halaman edit HTML, kemudian cari kode </b:skin> kemudian letakkan javascript Google Adsense tepat dibawah kode </b:skin>
    mempercepat loading iklan google adsense
  5. Untuk memasang iklan Google Adsense tidak lagi menambahkan kode javascript, namun cukup kode iklannya saja. Seperti dibawah ini:
    <!-- Responsive -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-482765480447704"
         data-ad-slot="4102343276"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

Untuk mendapatkan hasil pendapatan adsense yang maksimal adalah dengan memasang iklan pada tempat yang terbaik yaitu didalam postingan. Silahkan ikuti tutorial yang sudah pernah saya buat (Baca: Cara Memasang Iklan Adsense Pada Postingan Blog)

Bagaimana mudah bukan?walaupun memasang banyak slot iklan Google Adsense namun masih tetap fast loading. Dan semoga penghasilannya pun tambah banyak dan menjadi blogger sukses.

Untuk cek loading blog silahkan simak (Baca: Cara Mengetahui Kecepatan Loading Pada Blog )

Demikian tutorial cara mempercepat loading iklan google adsense. Semoga dapat bermanfaat dan selamat mencoba.

Salam Blogger Jepara.

    Membuat Halaman About, Contact, Disclaimer, Privacy dan Sitemap di Blogger

    Membuat Halaman About, Contact, Disclaimer, Privacy dan Sitemap di Blogger merupakan hal yang wajib jika anda ingin mendaftar periklanan Google Adsense. Jika belum memasang di blog maka ikuti tutorial ini sampai selesai.

    Halaman About, Contact, Disclaimer, Privacy dan Sitemap disebut juga dengan halaman statatis blog, halaman ini tidak menyatu dengan postingan blog namun memiliki tempat tersendiri. Pengunjung tidak akan mengetahui halaman statis jika tidak memasang link di blog.

    Halaman statis ini biasa dipasang pada bagian menu header paling atas, menu footer blog juga terkadang pada bagian sidebar blog. Sebenarnya ini tergantung selera saja, karena Google sendiri tidak memberi peraturan untuk memasang halaman statis dibagian tertentu jadi bebas mau dipasang dibagian mana, yang penting pengunjung bisa membukanya dengan mudah.

    Membuat Halaman About, Contact, Disclaimer, Privacy dan Sitemap di Blogger
    Contoh Halaman Statis Sitemap di bloggerjepara.net

    Cara Membuat dan Cara Memasang Halaman Statis di Blog

    Adanya membuat halaman statis tentu bukan sembarangan membuat, karena halaman statis memang memiliki peran penting untuk kemajuan blog juga dapat mendekatkan admin dengan pengunjung blog.

    Cara membuatnya juga cukup mudah, bisa dilakukan oleh blogger pemula sekalipun. Dan memasangnya di blog setelah terdapat beberapa artikel untuk dipasang iklan.

     Cara Membuat Halaman Statis di Blog

    Berikut tutorial untuk membuat halaman statis blog (Halaman About, Contact, Disclaimer, Privacy dan Sitemap) dengan penjelasan manfaat dari halaman tersebut:

    Cara Membuat Halaman About

    Halaman about juga dikenal dengan halaman "Tentang Kami", halaman ini memberikan informasi tentang blog yang kamu bangun. Halaman ini menjelaskan tentang nama blog, deskripsi blog dan apa saja yang dibahas dalam blog atau website tersebut. 

    Contoh halaman about bisa dilihat disini About

    Cara membuatnya:
    1. Masuk menu halaman >> pilih halaman baru
      Cara Membuat Halaman About di blogger
    2. Setelah terbuka, silahkan ini judul dengan About atau Tentang Kami, isi konten dengan penjelasan tentang blog seperti yang sudah saya jelaskan diatas, terakhir klik publikasikan.
      Cara Membuat Halaman About di blog
    3. Selesai
     

    Cara Membuat Halaman Kontak atau Contact Us

    Halaman contact adalah halaman yang dapat menguhungkan pengunjung dengan admin secara langsung, di halaman ini memuat informasi kontak mulai dari email, no handphone, FB, WA, dll. Juga terdapat form untuk mengirim pesan secara langsung.

    Biasanya halaman kontak ini digunakan untuk bertanya tentang seputar blog yang dikelola (tutorial, dll) atau ingin bekerjasama untuk memasang iklan atau review produk. 

    Menurut saya pribadi halaman ini sangat wajib untuk dipasang di blog. Untuk mendapatkan peluang-peluang menarik dari pengunjung dan membuat blog semakin berkembang.

    Cara Membuatnya:
    Untuk membuatnya sangat mudah kurang lebih seperti halaman about, untuk melihat contohnya silahkan kunjungi halaman ini Contact, adapun tutorial untuk membuat halaman kontak beserta form menarik silahkan buka tutorialnya disini (Baca: Cara Membuat Halaman Contact Us (Kontak) Keren di Blog )

    Cara Membuat Halaman Disclaimer

    Halaman ini memberi informasi tentang isi konten yang ada di blog merupakan karya sendiri atau data dari beberapa sumber. Jika di blog tersebut memberikan tutorial atau informasi tentang kesehatan dll, admin tidak bertanggung jawab atas akibat dari tutorial tersebut karena admin hanya memberikan informasi saja. 

    Cara membuatnya silahkan ikuti tutorialnya berikut (Baca: Cara Membuat Disclaimer Untuk Blog Adsense

    Cara Membuat Halaman Privacy Policy

    Privacy Policy adalah semuah halaman atau dokument yang bertujuan agar blog memiliki kekuatan hukum seputar pengelolaan blog. Di halaman ini terdapat beberapa catatan tentang pengelolaan blog yang perlu diketahui oleh pembaca.

    Untuk membuat halaman privacy policy silahkan simak tutorial berikut: (Baca: Cara Membuat Privacy Policy untuk Google Adsense  )

    Cara Membuat Halaman Sitemap di Blogger

    Halaman sitemap adalah halaman peta situs yang mencantumkan semua daftar postingan yang sudah dipublikasikan. Di halaman ini pengunjung dapat memilih artikel yang di inginkan, karena semua postingan ditampilkan pada halaman ini.

    Dengan memasang sitemap di blog maka pengunjung bisa memilih artikel dengan leluasa, dan ini tentu dapat menambah page view halaman blog kita.

    Saya sudah membuatkan tutorial tentang membuat sitemap otomatis di blog dengan tampilan keren dan menarik, sitemap ini akan secara otomatis bertambah jika ada artikel baru yang dipublikasikan.


    Cara Memasang Halaman Statis di Blog

    Setelah membuat halaman statis mulai dari about, contact, disclaimer, privacy dan sitemap. Sekarang saatnya memasang di blog agar dapat diketahi oleh pengunjung.  Pada tutorial ini, halaman statis akan ditampilkan pada sidebar blog.

    Ikuti langkah-langkah berikut sampai selesai:
    1. Masuk menu Tata Letak, kemudian pilih Tambahkan Gadget
      menambahkan gadget pada sidebar blog
    2. Lalu pilih Gadget Halaman
      menambah halaman di blog
    3. Setelah terbuka, untuk menambahkan halaman yang ingin ditampilkan cukup dengan ceklist atau memberi centang pada halaman tersebut. Setelah selesai klik Simpan. Kurang lebihnya seperti gambar dibaawah ini.
      cara memasang halaman statis di blogger blogspot
    4. Jika sudah selesai menambahkan Gadget diatas jangan lupa Simpan Setelan agar bisa terlihat ditampilan blog.
    5. Tampilan pada sidebar blog kurang lebihnya seperti gambar berikut:
      memasang halaman statis di blogspot blogger
    Demikian tutorial lengkap cara membuat dan memasang halaman statis blog, semoga dapat bermanfaat dan blognya semakin berkembang sehingga bisa menjadi blogger sukses. Selamat mencoba.

    Jika masih ada kendala jangan segan untuk bertanya melalui kolom komentar yang sudah disediakan.

    Cara Membuat Contact Us (Kontak) Keren di Blog

    Cara Membuat Contact Us di Blog - Halaman kontak biasa dikenal dengan sebutan Contact Us atau Kontak Kami merupakan halaman wajib yang harus dipasang pada blog atau website. Adanya halaman kontak bertujuan untuk lebih dekat dengan pengunjung atau visitor agar lebih mudah untuk berkomunikasi.

    Halaman Contact Us biasanya dipasang pada halaman statis blog, dengan menampilkan form pesan atau hanya menampilkan info kontak saja seperti email, FB, WA, atau dengan kontak yang lainnya. 

    Pada tutorial kali ini saya akan berbagi cara membuat halaman contact us dengan form yang sangat keren dan membuatnya cukup mudah walaupun untuk pemula sekalipun. Selain kontak biasanya blog memuat halaman privacy policy dan halaman disclaimer yang merupakan halaman wajib untuk mendaftar adsense.

    Cara Membuat Contact Us (Kontak) Keren di Blog
    Contact Form Blogger

    Cara Membuat Contact Us di Halaman Statis Blogger

    1. Memasang widget formulir di sidebar, caranya login akun Blogger >> pilih  Tata Letak >> Tambahkan Gadget >> Gadget lainnya >> Formulir Kontak seperti gambar berikut:
      cara membuat halaman contact us di blog
    2. Setelah pasang wideget kontak, selanjutnya masuk menu Tema >> Edit HTML. Letakkan kode berikut tepat diatas kode </head>.
      <style type='text/css'>
      #ContactForm1{display:none}
      </style>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style type='text/css'>
      /* Contact form */
      #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
      #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0}
      #ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
      #ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;}
      #ContactForm1_contact-form-submit:hover{background-color:#3c3c3c}
      #ContactForm1_contact-form-submit:active{position:relative;top:2px;}
      #ContactForm1_contact-form-submit:focus{outline:0}
      #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
      @media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}}
      @media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}}
      </style>
      </b:if>
    3. Jika sudah memasang kode diatas, selanjutnya buka menu Halaman >> Halaman Baru >> Beri judul halaman statis dengan Contact Us, Kontak atau Kontak Kami.
      cara memasang halaman kontak keren di blogger
      Kemudian Masukkan kode berikut pada mode HTML.
      <div dir="ltr" style="text-align: justify;" >
      Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih
      <br />
      <form name="contact-form">
      <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
      <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
      <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
      <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br />
      <div class="clear">
      </div>
      <div style="max-width: 222px; text-align: center; width: 100%;">
      <div id="ContactForm1_contact-form-error-message">
      </div>
      <div id="ContactForm1_contact-form-success-message">
      </div>
      </div>
      </form>
      </div>
    PERHATIAN:
    Jika kontak form tidak berfungsi, maka langkah selanjutnya adalah masuk menu Tema >> Edit HTML kemudian memasang kode berikut ini tepat diatas kode </body>.
    <script type='text/javascript'>
    //<![CDATA[
    document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/2759014865-widgets.js\"></scr" + "ipt>");
    //]]>
    </script>
    <script type='text/javascript'>
    if (typeof(BLOG_attachCsiOnload) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;);
    _WidgetManager._RegisterWidget(&quot;_ContactFormView&quot;, new _WidgetInfo(&quot;ContactForm1&quot;, &quot;footer1&quot;, null, document.getElementById(&quot;ContactForm1&quot;), {&quot;contactFormMessageSendingMsg&quot;: &quot;Sending...&quot;, &quot;contactFormMessageSentMsg&quot;: &quot;Your message has been sent.&quot;, &quot;contactFormMessageNotSentMsg&quot;: &quot;Message could not be sent. Please try again later.&quot;, &quot;contactFormInvalidEmailMsg&quot;: &quot;A valid email address is required.&quot;, &quot;contactFormEmptyMessageMsg&quot;: &quot;Message field cannot be empty.&quot;, &quot;title&quot;: &quot;Contact Form&quot;, &quot;blogId&quot;: &quot;<data:blog.blogId/>&quot;, &quot;contactFormNameMsg&quot;: &quot;Name&quot;, &quot;contactFormEmailMsg&quot;: &quot;Email&quot;, &quot;contactFormMessageMsg&quot;: &quot;Message&quot;, &quot;contactFormSendMsg&quot;: &quot;Send&quot;, &quot;submitUrl&quot;: &quot;https://www.blogger.com/contact-form.do&quot;}, &quot;displayModeFull&quot;));
    </script>
    Sumber: Bungfangki.com

    Demikian cara membuat halaman kontak pada statis blogger, jika masih kesulitan jangan segan untuk bertanya melalui kontak komentar yang sudah tersedia. Salam Blogger Jepara.

    Cara Membuat Sitemap Blogspot Keren dan Responsive

    Cara Membuat Sitemap Blogspot - Sitemap atau daftar isi blog adalah halaman yang berisi seluruh postingan blog yang biasanya dikemas dengan perlabel. Dengan memiliki sitemap blog maka pengunjung bisa dengan mudah mencari artikel yang diinginkan.

    Sitemap yang akan saya bagikan kali ini memiliki fitur yang sangat komplit dan merupakan update terbaru support fitur HTTPS Blogger custom domain (Baca: Cara Memasang HTTPS (SSL) di Blogger Custom Domain ). Fitur sitemap blogspot ini sebagai berikut:
    1. Responsive : Sitemap ini sudah didesain responsive sehingga tetap bisa diakses melalui perangkat mobile dengan tampilan yang keren.
    2. Sederhana dan Keren: Memiliki tampilan yang sedap dipandang mata dengan warna yang segar namun tetap elegan.
    3. Fast loading : server script js terbaik sehingga loading ringan.
    4. Otomatis : Sitemap ini akan update otomatis jika ada artikel atau postingan baru yang dipublikasikan dengan tanda New!!! artinya artikel baru.
    Screenshot:
    Tampilan Desktop (Komputer atau Laptop)
    cara membuat sitemap blogspot blogger

    Tampilan Mobile (Responsive) 
    Cara Membuat Sitemap Blogspot Responsive

    Bagaimana lengkap dan keren bukan? dengan sitemap ini tentu blog akan terlihat sangat keren, untuk demo dan tampilan nanti saya jelaskan dibawah. Saya selaku admin mengucapkan banyak terima kasih kepada Mas Taufik Nurrohman admin Dte.web.id yang sudah membuat sitemap keren ini.

    Sitemap ini menampilkan sebuah susunan label blog, jika nanti di klik pada label maka akan muncul semua artikel yang ada pada label tersebut. Berikut langkah-langkah untuk memasang sitemap di blogspot.

    Cara Membuat Sitemap SEO Otomatis di Blogspot

    1. Buka akun Blogger > Pilih Blog yang ingin dipasang sitemap> Masuk Menu Halaman > Halaman Baru
      memasang sitemap otomatis blogspot
    2. Buat Judul dengan "Sitemap" atau "Daftar Isi" lalu masukkan kode berikut pada mode HTML, Jangan lupa ganti URL https://www.bloggerjepara.net/ dengan URL blog kamu.
      <link href="https://cdn.rawgit.com/penaindigo/project/d4a73206/penaindigocom.css" rel="stylesheet"></link>
      <div class="tabbed-toc" id="tabbed-toc">
      <span class="loading">Memuat…</span></div>
      <script>
      var tabbedTOC = {
      blogUrl: "https://www.bloggerjepara.net/", // Blog URL
      containerId: "tabbed-toc", // Container ID
      activeTab: 1, // The default active tab index (default: the first tab)
      showDates: false, // `true` to show the post date
      showSummaries: false, // `true` to show the posts summaries
      numChars: 200, // Number of summary chars
      showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
      thumbSize: 40, // Thumbnail size
      noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
      monthNames: [ // Array of month names
      "Januari",
      "Februari",
      "Maret",
      "April",
      "Mei",
      "Juni",
      "Juli",
      "Agustus",
      "September",
      "Oktober",
      "November",
      "Desember"
      ],
      newTabLink: true, // Open link in new window?
      maxResults: 99999, // Maximum post results
      preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
      sortAlphabetically: true, // `false` to sort posts by published date
      showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
      newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
      };
      </script>
      <script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>
    3. Kurang lebihnya seperti gambar berikut:
      memasang sitemap keren di blogspot
    4. Publikasikan dan lihat hasilnya.
    Sampai disini kamu sudah berhasil memasang sitemap blogspot keren, responsive dan otomatis. Jika ada kendala silahkan tanyakan melalui kotak komentar atau langsung menghubungi admin melalui kontak yang sudah tersedia.


    Semoga bermanfaat dan selamat mencoba. Salam Blogger Jepara