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.
    <style type="text/css">
    .tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
    position:relative;color:#333;border: 1px solid #9C9C9C;}
    .tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
    color:white;}
    .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
    .tabbed-toc .toc-tabs {width:20%;float:left;}
    .tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;
    height:41px;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
    padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
    .tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
    z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
    .tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
    .tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
    .tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;height: 40px;padding: 10px 12px;
    text-decoration:none;outline:none;overflow:hidden;}
    .tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
    .tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
    border-bottom:4px solid #275827;overflow:hidden;}
    .tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
    width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
    .tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
    .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
    background-color:#333;color:white;outline:none;}
    .tabbed-toc .panel li.bold a:hover,
    .tabbed-toc .panel li.bold a:hover time {background-color:#222}
    @media (max-width:700px) {
    .tabbed-toc {border:2px solid #333}
    .tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
    .tabbed-toc .toc-tabs li {display:inline;float:left;}
    .tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
    .tabbed-toc .toc-content {border:none}
    .tabbed-toc .toc-line,
    .tabbed-toc .panel li time {display:none}
    .tabbed-toc .panel li a{height: auto;}}
    </style>
    <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

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.