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

    Cara Setting Robots.txt di Blogger agar Postingan Cepat Terindex

    Cara Agar Postingan Cepat Terindex - Banyak cara yang dapat dilakukan untuk optimasi SEO onpage agar postingan lebih ramah dengan mesin pencari salah satunya adalah dengan setting robot.txt dengan benar.

    Dengan menerapkan trik ini maka blog akan lebih SEO friendly, postingan akan mudah terindex oleh serp Google. Melakukan setting robot.txt yang benar maka akan terhindar bahaya tidak terindek untuk perkembangan blog kedepannya.

    Baca Juga: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

    Cara Setting Robots.txt di Blogger

    Berikut langkah-langkah yang dapat dilakukan untuk memasang robot.txt di blogspot blogger. Silahkan buka menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan lalu masukkan kode berikut: 


    User-agent: Mediapartners-Google
    Disallow:

    User-agent: *
    Allow: /

    Sitemap: https://www.bloggerjepara.net/feeds/posts/default?orderby=UPDATED

    Keterangan:
    Ganti URL yang berwarna merah dengan URL blog Kamu.
    Kurang lebihnya seperti gambar dibawah ini:
    Cara Setting Robots.txt di Blogger

    Cara Setting Tag Tajuk Robot di Blogspot

    Caranya sama seperti yang diatas yaitu melalui menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan tepat dibawah robot.txt. Silahkan melakukan setting seperti gambar berikut:
    Cara Setting Tag Tajuk Robot di Blogspot


    Dengan melakukan setiing robot diatas, maka postingan blog akan semakin mudah terindek. Dan jangan lupa selalu membuat konten yang berkualitas dan bermanfaat untuk para pembaca setia.
    Baca Juga: Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly 
    Semoga bermanfaat dan selamat mencoba. Salam blogger Jepara.

    Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

    Cara Membuat Gambar di Blog Lebih SEO Friendly - Gambar merupakan salah satu komponen penting sebagai pelengkap artikel postingan agar lebih SEO. Terlebih sebuah blog atau website tutorial, gambar akan menjadi pilihan terbaik untuk menjelaskan tutorial tersebut agar mudah untuk dipahami.

    Dalam pencarian Google, gambar juga harus di optimasi agar mampu bersaing dengan kata kunci yang dibidik. Dengan optimasi gambar postingan maka akan banyak mendatangkan visitor dari Google image.

    Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

    Selain gambar yang dioptimasi, kamu juga harus melakukan optimasi pencarian dengan membuat deskripsi penelusuran pada blog dan postingan agar lebih mudah dikenal search engine. Tutorialnya sudah saya buat, silahkan baca: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

    Cara Membuat Gambar Artikel Menjadi SEO

    1. Masuk postingan dan silahkan tambahkan gambar.
    2. Kemudian klik pada gambar lalu pilih "Properties"
      Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly
    3. Setelah itu masukkan title text dan alt text (title: sesuaikan dengan keyword artikel, alt text: isi dengan deskripsi gambar) Kalau saya pribadi antara title dan alt saya samakan.
      optimasi gambar postingan agar lebih seo friendly
    4. Selesai.
    Sekian tutorial optimasi gambar postingan agar lebih seo friendly, gunakan cara diatas untuk semua gambar yang dimasukkan pada postingan. 

    Selamat mencoba dan semoga pengunjung blog semakin banyak. Salam Blogger Jepara

    Cara Memasang HTTPS (SSL) di Blogger Custom Domain

    Cara Memasang HTTPS (SSL) di Blogger Custom Domain - Platform Blogger (blogspot) kini kembali lagi berinovasi di awal tahun 2018 dengan memunculkan fitur HTTPS untuk blogger custom domain. Seperti yang diketahui sebelumnya, custom domain di blogger tidak bisa dipasang dan aktifkan fitur SSL tapi sekarang sudah bisa dilakukan.

    Apa itu Blogger Custom Domain?

    Blogger custom domain adalah blog dari platform blogger yang sudah dipasang domain TLD (seperti domain .com, .net, .org dll) lebih jelasnya seperti dibawah:

    https://www.bloggerjepara.net/ (domain TLD menggunakan .net)
    https://bloggerjepara.blogspot.co.id/ (default domain blogger yaitu blogspot.co.id)

    Saya sediri lebih suka dengan SSL (Secure Socket Layer) karena sesuai yang direkomendasikan google untuk membuat sambungan aman dengan browser web pengguna. Dengan memasang SSL (HTTPS) kita bisa mendapatkan banyak manfaat diantaranya yang paling penting adalah sangat disukai oleh mesin pencari google (diprioritaskan dalam pencarian).

    Untuk website saya yang sudah hosting sendiri di wordpress self hosting, semuanya sudah saya pasang SSL dan memiliki kemajuan yang sangat pesat dan untuk iklan adsense juga memiliki perkembangan yang baik. Jadi intinya memasang HTTPS di blog sangat diperlukan untuk perkembangan blog atau website.
    cara memasang https di blogger

    Cara Memasang HTTPS (SSL) di Blogger Custom Domain dengan Mudah

    Berikut langkah-langkah yang harus dilakukan untuk mendapatkan SSL gratis dari blogger dan memasangnya di blogspot custom domain.
    1. Silahkan masuk terlebih dahulu di link berikut draft.blogger.com
    2. Setelah itu silahkan pilih menu "Setelan" lalu pilih "General" silahkan pilih "YA" pada pilihan ketersedian HTTPS (silahkan tunggu proses pengalihan ke https dengan waktu kurang lebih 1 menit, untuk cek reload aja browsernya, kalau sudah tidak ada peringatan berarti sudah berhasil)
      Cara Memasang HTTPS (SSL) di Blogger Custom Domain
    3. Selanjutnya jangan lupa untuk melakukan pengalihan HTTPS (redirect) dengan redirect ini akan mengarahkan otomatis dari http ke https. Caranya seperti diatas pada pengalihan HTTPS pilih "YA"
      redirect http ke https di blogger
    4. Selesai dan lihat hasilnya, contohnya seperti blog Komunitas Blogger Jepara ini.
      cara memasang https di blogger

    Demikian cara cepat dan mudah untuk memasang SSL gratis dari blogger agar muncul HTTPS di blogger custom domain. 

    Semoga dapat bermanfaat dan memberikan perkembangan positif dalam pencarian Google dan perkembangan iklan Google Adsense yang lebih baik. Selam Blogger Jepara.

    Cara Mengubah Warna Link di Blog dengan Mudah

    Cara Mengubah Warna Link di Blog dengan Mudah - Sebuah blog atau website tidak akan pernah meninggalkan link (link internal maupun eksternal). Hal ini bertujuan untuk memberikan informasi yang lebih lengkap. 

    Warna link pada blogspot atau blogger bisa diganti dengan warna yang diinginkan, karena terkadang warna link pada template yang kita gunakan tidak sesuai yang kita inginkan. 

    Yang perlu diperhatikan adalah warna link yang ingin kita ganti jangan sampai tidak sesuai dengan warna dasar template sehingga dapat mengganggu tampilan blog. untuk mengetahui kode warna HTML silahkan baca: Kode Warna HTML Lengkap untuk Blog dan Website

    Cara Mengubah Warna Link di Blog

    Berikut cara mengubah warna link pada blog yang harus diikuti langkah-langkahnya sampai selesai.
    1. Masuk akun blogger terlebih dahulu
    2. Kemudian pilih menu "Tema" lalu pilih "Edit HTML"
      Cara Mengubah Warna Link di Blog dengan Mudah
    3. Cari kode a:link untuk lebih cepatnya silahkan menggunakan tombol kombinasi Ctrl+F lalu masukkan code a:link kemudian tekan enter.
      Cara Mengubah Warna Link di Blog
    4.  Maka akan muncul kode HTML warna link seperti berikut, silahkan ganti warna sesuai yang diinginkan: 
    a:link{color:#859ce6;text-decoration:none}
    a:visited{color:#859ce6;text-decoration:none}
    a:hover{color:#333;text-decoration:none}


    Keterangan:
    a:link : Warna link pada blog
    a:visited : Warna link yang sudah diklik atau dikunjungi
    a:hover : Warna link ketika kursor diarahkan pada link.

    Jika sudah diganti warna linknya, jangan lupa simpan template dan lihat hasilnya.

    Sekian tutorial cara mengganti warna link pada blog, semoga tampilan blog atau websitenya semakin menarik dan sedap dipandang mata. Jika Sahabat Blogger Jepara masih kesulitan, silahkan tinggalkan pesan melalui kolom komentar atau melalui halaman kontak yang sudah tersedia. Salam Sukses dari Komunitas Blogger Jepara.

    Cara Membuat Popular Post Keren Berwarna di Blogger

    Cara Membuat Popular Post Keren Berwarna di Blogger - Popular post adalah widget yang menampilkan artikel paling populer atau sering dibaca oleh pengunjung. Widget ini biasanya dipasang pada sidebar blog, popular post berfungsi untuk memberikan informasi kepada pengunjung tentang artikel apa saja yang sering dibaca, tentu dapat menarik perhatian pengunjung untuk membaca artikel tersebut.

    Widget popular post secara default memiliki tampilan yang sederhana dan simple, namun ternyata banyak para blogger yang sudah memodifikasi tampilan popular post dengan sentuhan warna-warni. Tentu ini akan terlihat sangat menarik dimata pengunjung sehingga berpeluang besar mengundang klik untuk membaca artikel popular post.

    Koleksi Popular Post Keren Berwarna di Blogger

    Kali ini saya akan berbagi beberapa macam tampilan popular post keren dan cantik untuk menghiasi tampilan blog kita. walaupun banyak variasinya, tampilan popular post ini tidak membuat blog menjadi lambat sehingga aman untuk seo blog anda.

    1. Popular Post Warna-Warni Paling Populer Keren

    Popular Post Warna-Warni Paling Populer Keren di blog
    Kode Popular Post

    /*Popular Post SEO Indigo*/
    .PopularPosts ul,.PopularPosts li,
    .PopularPosts li img, .PopularPosts li a,
    .PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}
    .PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}
    .PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
    .PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}
    .PopularPosts ul li:before,
    .PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#444 !important;text-decoration:none;}
    .PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}
    .PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
    .PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
    .PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
    .PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
    .PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
    .PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
    .PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
    .PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
    .PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
    .PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
    .PopularPosts .item-thumbnail {margin:0 0 0 0;}
    .PopularPosts .item-snippet {font-size:11px;}
    

    Widget popular posts yang pertama ini terlihat kalem namun elegan dengan kontras warna yang sedap dipandang mata. Jika ingin warna yang lebih mencolok silahkan pilih versi yang kedua dibawah ini.

    2. Widget Popular Post Berwarna di Blogspot 

    Widget Popular Post Berwarna di Blogspot
    Kode Popular Post
    /*Popular Post SEO Indigo*/
    .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
    .PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
    .PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
    .PopularPosts ul li a{color:#fff!important}
    .PopularPosts ul li a:hover{color:#2c3e50!important}
    .PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
    .PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
    /* Pengaturan Warna */
    .PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
    .PopularPosts ul li:nth-child(2){background-color:#f39c12;}
    .PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
    .PopularPosts ul li:nth-child(4){background-color:#27ae60;}
    .PopularPosts ul li:nth-child(5){background-color:#e67e22;}
    .PopularPosts ul li:nth-child(6){background-color:#d35400;}
    .PopularPosts ul li:nth-child(7){background-color:#3498db;}
    .PopularPosts ul li:nth-child(8){background-color:#2980b9;}
    .PopularPosts ul li:nth-child(9){background-color:#ea6153;}
    .PopularPosts ul li:nth-child(10){background-color:#c0392b;}
    .PopularPosts .item-thumbnail{margin:0 0 0 0}
    .PopularPosts .item-snippet{font-size:11px}
    
    Popular post yang kedua ini lebih dominan menggunakan warna terang dan mencolok, sangat cocok untuk meramaikan tampilan blog agar lebih menarik.

    3. Popular Post Keren Berwarna di Blogger (evo magz)

    Popular Post Keren Berwarna di Blogger

    Kode Popular Post
    /*Popular Post SEO Indigo*/
    .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}
    .PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}
    .PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
    .PopularPosts ul li {background-color:#eee;margin:0 0 0 0 !important;padding:10px 20px 10px 10px !important;counter-increment:num;position:relative;}
    .PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:bold;color:#000 !important;text-decoration:none;}
    .PopularPosts ul li:before {content:counter(num) !important;font-family:arial, sans-serif !important;
    font-size:12px;font-weight:bold !important;display:block;position:absolute;top:-5px;right:-5px;border-radius:16px;background-color:#333;color:#fff !important;width:28px;height:28px;line-height:28px;text-align:center;padding-right:0px !important;border:2px solid #fff;}
    .PopularPosts ul li:nth-child(1) {background-color:#A51A5D;}
    .PopularPosts ul li:nth-child(2) {background-color:#F53477;}
    .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;}
    .PopularPosts ul li:nth-child(4) {background-color:#FF9201;}
    .PopularPosts ul li:nth-child(5) {background-color:#FDCB01;}
    .PopularPosts ul li:nth-child(6) {background-color:#DEDB00;}
    .PopularPosts ul li:nth-child(7) {background-color:#89C237;}
    .PopularPosts ul li:nth-child(8) {background-color:#44CCF2;}
    .PopularPosts ul li:nth-child(9) {background-color:#01ACE2;}
    .PopularPosts ul li:nth-child(10) {background-color:#94368E;}
    .PopularPosts .item-thumbnail {margin:0 0 0 0;}
    .PopularPosts .item-snippet {font-size:11px;}
    
    Popular post ini adalah hasil buat pemikiran Mas Sugeng yang dituangkan pada templatenya yang cukup terkenal yaitu Evo Magz. Jika anda suka, popular post keren ini bisa menjadi pilihan.

    4. Popular Post Keren Modifikasi Warna-Warni

    cara membuat popular post warna warni di blogspot

    Kode Popular Post
    /*Popular Post SEO Indigo*/
    #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} 
    #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; margin: 0; min-height: 30px; orphans: 2; padding: 0px 0 0 40px; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
    #PopularPosts1 ul li:first-child:after, 
    #PopularPosts1 ul li:first-child + li:after, 
    #PopularPosts1 ul li:first-child + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} 
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:100%} 
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:100%} 
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
    #PopularPosts1 ul li:first-child + li{background:#ff764c; width:100%} 
    #PopularPosts1 ul li:first-child + li:after{content:"2"} 
    #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:100%} 
    #PopularPosts1 ul li:first-child:after{content:"1"} 
    #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} 
    #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}


    Cara Memasang Popular Post Keren Berwarna di Blog

    1. Masuk akun blogger anda
    2. Masuk menu Tema kemudian edit HTML
    3. Kemudian cari kode ]]></b:skin> lalu letakkan kode yang sudah anda pilih tepat di ATAS kode ]]></b:skin>.
    4. Setelah memasang kode diatas, selanjutnya masuk halaman Tata Letak >> Tambahkan Gadget >> pilih Entri Populer. "Hilangkan centang pada thumbnail gambar dan cuplikan"
      Cara Memasang Popular Post Keren Berwarna di Blog
    5. Terakhir simpan template dan lihat hasilnya.
    Bagaimana mudah bukan memasang popular post keren di blog? tapi namanya manusia sudah pasti kadang belum paham, jika kurang jelas silahkan tinggalkan pessan pada kolom komentar yang sudah tersedia. 

    Selamat mencoba. GRATIS!!!

    Cara Memasang Recent Post Fast Loading di Blog

    Cara Memasang Recent Post Fast Loading di Blog - Widget recent post atau yang lebih dikenal dengan artikel terbaru, merupakan widget yang bertujuan untuk menampilkan beberapa postingan atau artikel terbaru di blog yang biasanya dipasang pada bagian sidebar.

    Pada tutorial kali ini saya akan membagikan kode untuk widget recent post yang lumayan fast loading, jadi tidak mempengaruhi loading blog anda. Seperti yang diketahui bersama membuat blog fast loading merupakan sebuah pilihan yang harus diambil untuk menjaga kenyamanan agar lebih mudah dan cepat untuk akses halaman blog. 


    Cara Memasang Widget Recent Post Fast Loading di Blogger

    Berikut kode dan cara memasang recent post di sidebar blogspot.

    Screenshot:
    Cara Memasang Recent Post Fast Loading di Blog

    Kode Widget Recent Post 

    <script type="text/javascript">
    function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
    </script><ul>
    <script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="https://www.bloggerjepara.net/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

    • Ganti https://www.bloggerjepara.net dengan URL blog anda.
    • numposts = 10 :  jumlah judul post yang ditampilkan, atur sesuai yang anda inginkan.

    Cara Memasang Pada Sidebar Blog

    1. Login dulu ke akun blogger anda.
    2. Kemudian pilih "Tata Letak" >> "Tambah Gadget" >> pilih "HTML/JavaScript"
    3. Silahkan masukkan kode widget recent post diatas pada kolom html java script yang sudah tersedia, jangan lupa diberi judul "Recent Post", "Artikel Terbaru" atau "Latest Post". 
      cara memasang recent post fast loading pada sidebar blog
    4. Terakhir klik Simpan dan lihat hasilnya. 
    Baca Juga: Cara Membuat Popular Post Keren Berwarna di Blogger

    Demikian cara memasang widget recent post, semoga dapat bermanfaat.

    Selamat Mencoba.

    Cara Memasang Label Cloud Keren di Blogger

    Cara Memasang Label Cloud Keren di Blogger - Label atau kategori adalah cara mengelompokan jenis artikel berdasarkan pembahasan yang berkaitan. Pada blog atau website sudah pasti memiliki beberapa label yang terdiri dari beberapa artikel sesuai dengan keinginan pemiliknya. Jika anda memiliki blog gado-gado sudah pasti memiliki banyak label.

    Nah, kali ini saya akan memberikan tutorial untuk mempercantik tampilan label cloud pada blogspot. Secara default tampilan label cloud akan biasa saja dengan tampilan khasnya yaitu putih, untuk memberikan kesan beda dengan yang default, saya akan memberikan beberapa koleksi saya untuk modifikasi tampilan label cloud agar keren dan cantik.

    Cara Memasang Label Cloud Keren di Blog

    Memiliki tampilan blog yang elegan dan enak dipandang sudah pasti menjadi tujuan setiap blogger yang bertujuan agar pengunjung bisa dengan enak menikmati blog kita. Tentu dengan dukungan artikel yang berkualitas maka blog akan menjadi populer.

    Cara Membuat Label Cloud Keren dan Cantik di Blog

    Berikut beberapa kolesi label cloud yang bisa anda pilih dan mencobanya di blog, semua tampilan segar dan tidak mempengaruhi kecepatan loading blog.

    Kode Label Cloud Keren

    Cara Memasang Label Cloud Keren di Blogger

    /* label cloud seo indigo*/ 
    .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } 
    .cloud-label-widget-content{ text-align:left } 
    .label-size { background:#2ea9da; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } 
    .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } 
    .label-size:hover { background:#333333; } 
    .label-size { line-height:1.2 }
    .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }

    Keterangan:
    Untuk mengganti warna silahkan ganti kode warna yang berwarna merah diatas. Silahkan sesuaikan konfigurasi label seperti ini:
    memasang label cloud di blog

    • Pilih tampilkan Cloud
    • Centang pada tampilkan jumlah entri per label

    Kode Label Cloud Flat UI

    Cara Membuat Label Cloud Keren dan Cantik di Blog

    /* label cloud seo indigo*/
    .Label a{padding-left: 5px;padding-right: 31.5px;color: #fff!important;height: 32px;background: #1abc9c;margin-right: 2px;line-height: 32px;
    text-decoration: none;border: none !important;-webkit-transition: all .3s ease-in-out !important;float: left;margin-top: 2px;font-size: 13px;text-align: left; }
    .Label a:hover{color:#fff !important;background:#16a085; }
    .Label a:after{content: "";position: absolute;width: 0px;height: 0px;border-width: 16.5px;border-style: solid;border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

    Keterangan:
    Untuk mengganti warna silahkan ganti kode warna yang berwarna merah diatas.

    Lakukan konfigurasi label seperti gambar dibawah ini:
    membuat label cloud keren
    • Pilih tampilkan Cloud
    • Hilangkan centang pada tampilkan jumlah entri per label

    Membuat Label Cloud Super Keren di Blog Versi 3

    memasang label cloud keren di blogspot

    /* label cloud*/ 
    .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10;float:left;width:48%;}
    .cloud-label-widget-content{text-align:left}
    .label-size{border-radius:3px;display:block;float:left;line-height:normal;margin:0 3px 3px 0;color:#ffffff;font-size:12px;max-width:100%;text-transform:capitalize;}
    .label-size:hover{background:#337DAE;transition:.5s}
    .label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:500;}
    .label-size a{background:#337DAE;border-radius:3px;font-weight:400;}
    .label-size a:hover{font-weight:500;transition:.5s}
    .label-count{float:right;white-space:nowrap;border-radius:3px;padding-right:3px;margin-left:-3px;background:#E0492C;color:#fff !important;}

    Lakukan konfigurasi seperti dibawah:
    memasang label cloud di blog

      Cara Memasang Label Cloud Keren di Blogger

      1. Silahkan login dahulu ke akun blogger anda.
      2. Kemudian pilih Template  lalu Edit HTML
      3. Cari Kode ]]></b:skin> untuk mempercepat pernacarian gunakan CTRL + F
      4. Copy Code yang sudah anda pilih diatas tadi, kemudian letakkan tepat diatas Kode ]]></b:skin> 
      5. Jangan Lupa Simpan, selanjutnya pasang label cloud di sidebar blog anda. jika belum bisa ikuti petunjuknya dibawah ini:

      Memasang Label Cloud di Sidebar

      1. Masih pada dasbor blogger.
      2. Pilih Tata Letak lalu pilih Tambahkan Gadget
        cara menambah gadget di blogger
      3. Kemudian pilih Label, lakukan konfigurasi seperti pada keterangan diatas.
        cara memasang widget label di blog
      4. Selesai.
      Bagaimana mudah bukan? silahkan cermati tutorial diatas untuk memasang label cloud keren di blog. Perhatikan mulai dari kode label dan melakukan konfigurasi label pada widget.

      Semoga bermanfaat, jika masih kesulitan silahkan tinggalkan pesan.