Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Menambahkan Gadget Popular Post Di Blogger.

Cara Menambahkan Gadget Popular Post Di Blogger.

By Lutfie Post a Comment

Cara Menambahkan Gadget Popular Post Di Blogger.
Ada banyak hal yang harus Anda lakukan untuk menarik perhatian pengunjung Anda sehingga tingkat bouncing akan berkurang dan tayangan halaman atau tampilan halaman meningkat ke blog blogger Anda. Hari ini kita akan mempelajari salah satu teknik di mana kita akan menampilkan posting blog yang paling disukai dan dilihat di sidebar blog blogger kita.

Blogger menyediakan fitur menambahkan Gadget untuk menampilkan daftar popular post dari blog BlogSpot.com Anda. Pembaca blog Anda mungkin menemukan satu artikel yang bermanfaat atau informatif bagi mereka setelah melihat postingan blog dari widget popular post sehingga bisa saja mereka berlangganan blog Anda untuk postingan mendatang. Widget default ini memiliki empat opsi berbeda berikut untuk menampilkan popular post hingga 10 artikel.

  • Hanya menampilkan judul Postingan. 
  • Tampilkan judul Postingan dan gambar mini.
  • Tampilkan judul dan cuplikan Postingan.
  • Tampilkan judul Postingan, gambar mini dan cuplikan.

Namun, widget bawaan ini tidak terlihat profesional dan eye catching untuk menarik pembaca blog Anda. Dengan bantuan beberapa kode CSS3 dinamis, kami dapat mengubah atau memprioritaskan gaya default widget popular post.


Cara Menambahkan Gadget popular post di Blogger.

Langkah 1: 

Masuk ke akun blogger dan navigasikan Dashboard blog khusus Anda di mana Anda ingin menambahkan widget Popular Post. 

Langkah 2: 

Buka tab Tata Letak blog blogger Anda dan masuk ke tata letak. 

Langkah 3: 

Sekarang, gulir ke bawah sedikit dan pilih gadget Popular Post untuk menambahkannya ke blog Anda. 

Langkah 4: 

Anda dapat mengonfigurasi widget Popular Post Anda untuk menampilkan ubin posting, gambar mini dan cuplikan sesuai keinginan Anda. Anda juga dapat memilih untuk menampilkan pos yang paling banyak dilihat selama 7 hari atau 30 hari.

Terakhir, klik tombol simpan . Anda dapat menyimpan widget Popular Post di lokasi yang diinginkan. 


Cara Menambahkan Widget SWT Popular Post ke Blog Blogger Anda 

Jika Anda telah menambahkan gadget Popular Post di blog Anda, ikuti petunjuk yang diberikan di bawah ini untuk mengatur gayanya, jika tidak, tambahkan widget Popular Post terlebih dahulu. Setelah berhasil memasang widget Popular Post default, sekarang kami akan menata widget popular post dengan bantuan beberapa kode CSS dan JavaScript unik untuk menarik pengunjung blog.

Langkah 1: 

Arahkan Tab Template blog Anda dari sidebar kiri dan klik tombol Edit HTML.

Langkah 2: 

Pilih PopularPosts1 dari tombol menu drop-down Langsung ke widget. Anda juga dapat mengklik di mana saja di jendela editor HTML yang terbuka dan mencari PopularPosts1. 

Sekarang cari kode dibawah:

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>…</b:widget>
Lalu ganti dengan kode dibawah ini:
 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <div class='swtPopularPostsBox'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://4.bp.blogspot.com/-B4UAGrCevX4/U_xsVpBDq7I/AAAAAAAAAEY/4S7YL7ehYHg/s1600/No-Thubnail.png'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://img.superwebtricks.com/files/Posts-Thumbnail.png'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> </div> </div><div class='swtright'><center><a href='http://www.superwebtricks.com/'><img alt='SWT' height='15' src='http://img.superwebtricks.com/files/SWT-logo.png' title='Powred by Showeblogin' width='15'/></a></center></div> &lt;script type='text/javascript'&gt;var _0xb48a=["\x73\x72\x63","\x73\x37\x32\x2D\x63","\x73\x31\x36\x30\x30","\x72\x65\x70\x6C\x61\x63\x65","\x61\x74\x74\x72","\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x69\x6D\x67","\x72\x65\x61\x64\x79","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x22\x20\x3E\x3C\x69\x6D\x67\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x6F\x77\x72\x65\x64\x20\x62\x79\x20\x53\x68\x6F\x77\x65\x62\x6C\x6F\x67\x69\x6E\x22\x20\x61\x6C\x74\x3D\x22\x53\x57\x54\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x31\x35\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x31\x35\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x6D\x67\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x66\x69\x6C\x65\x73\x2F\x53\x57\x54\x2D\x6C\x6F\x67\x6F\x2E\x70\x6E\x67\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x68\x74\x6D\x6C","\x2E\x73\x77\x74\x72\x69\x67\x68\x74","\x6C\x65\x6E\x67\x74\x68","\x2E\x73\x77\x74\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F"];var _0xb715=[_0xb48a[0],_0xb48a[1],_0xb48a[2],_0xb48a[3],_0xb48a[4],_0xb48a[5],_0xb48a[6],_0xb48a[7],_0xb48a[8],_0xb48a[9],_0xb48a[10],_0xb48a[11],_0xb48a[12],_0xb48a[13],_0xb48a[14]];var _0x7c12=[_0xb715[0],_0xb715[1],_0xb715[2],_0xb715[3],_0xb715[4],_0xb715[5],_0xb715[6],_0xb715[7],_0xb715[8],_0xb715[9],_0xb715[10],_0xb715[11],_0xb715[12],_0xb715[13],_0xb715[14]];$(document)[_0x7c12[6]](function (){$(_0x7c12[5])[_0x7c12[4]](_0x7c12[0],function (_0xba10x3,_0xba10x4){return _0xba10x4[_0x7c12[3]](_0x7c12[1],_0x7c12[2]);} );} );$(document)[_0x7c12[6]](function (){$(_0x7c12[9])[_0x7c12[8]](_0x7c12[7]);setInterval(function (){if(!$(_0x7c12[11])[_0x7c12[10]]){window[_0x7c12[13]][_0x7c12[12]]=_0x7c12[14];} ;} ,2500);} );&lt;/script&gt; </b:includable> </b:widget>

Langkah-3: 

Cari kode </head> dan tempel kode JavaScript dibawah ini tepat di atas/sebelumnya dan klik tombol Simpan template. 
 <script type='text/javascript'> var _0xb48a=["\x73\x72\x63","\x73\x37\x32\x2D\x63","\x73\x31\x36\x30\x30","\x72\x65\x70\x6C\x61\x63\x65","\x61\x74\x74\x72","\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x69\x6D\x67","\x72\x65\x61\x64\x79","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x22\x20\x3E\x3C\x69\x6D\x67\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x6F\x77\x72\x65\x64\x20\x62\x79\x20\x53\x68\x6F\x77\x65\x62\x6C\x6F\x67\x69\x6E\x22\x20\x61\x6C\x74\x3D\x22\x53\x57\x54\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x31\x35\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x31\x35\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x6D\x67\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x66\x69\x6C\x65\x73\x2F\x53\x57\x54\x2D\x6C\x6F\x67\x6F\x2E\x70\x6E\x67\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x68\x74\x6D\x6C","\x2E\x73\x77\x74\x72\x69\x67\x68\x74","\x6C\x65\x6E\x67\x74\x68","\x2E\x73\x77\x74\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F"];var _0xb715=[_0xb48a[0],_0xb48a[1],_0xb48a[2],_0xb48a[3],_0xb48a[4],_0xb48a[5],_0xb48a[6],_0xb48a[7],_0xb48a[8],_0xb48a[9],_0xb48a[10],_0xb48a[11],_0xb48a[12],_0xb48a[13],_0xb48a[14]];var _0x7c12=[_0xb715[0],_0xb715[1],_0xb715[2],_0xb715[3],_0xb715[4],_0xb715[5],_0xb715[6],_0xb715[7],_0xb715[8],_0xb715[9],_0xb715[10],_0xb715[11],_0xb715[12],_0xb715[13],_0xb715[14]];$(document)[_0x7c12[6]](function (){$(_0x7c12[5])[_0x7c12[4]](_0x7c12[0],function (_0xba10x3,_0xba10x4){return _0xba10x4[_0x7c12[3]](_0x7c12[1],_0x7c12[2]);} );} );$(document)[_0x7c12[6]](function (){$(_0x7c12[9])[_0x7c12[8]](_0x7c12[7]);setInterval(function (){if(!$(_0x7c12[11])[_0x7c12[10]]){window[_0x7c12[13]][_0x7c12[12]]=_0x7c12[14];} ;} ,2500);} ); </script>

Langkah-4: 

Pergi ke tata letak dan klik tombol Tambahkan Gadget dari bilah sisi kanan/kiri. Pilih HTML/JavaScript dan pastekan code dibawah ini:
 <style> .swtPopularPostsBox .item-content{ /* SWT Popular Posts Box by Showeblogin */ width:100%; height:auto; background:transparent; } #PopularPosts1 ul li {font: italic 13px/21px Georgia, "Times New Roman", sans-serif;color: #000 !important; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} #PopularPosts1 ul li a {font-weight:bold;color: #fff !important;} #PopularPosts1 ul li:hover{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #PopularPosts1 ul li img { width:200px; height:200px; display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 3px 2px 1px rgba(0.4, 0.3, 0.2, 0.1); border:2px solid #ccc; margin: 0 10px; padding:2px } #PopularPosts1 ul li:first-child{background:#853a4a} #PopularPosts1 ul li:first-child+li{background:#853a7a} #PopularPosts1 ul li:first-child+li+li{background:#3a3a85} #PopularPosts1 ul li:first-child+li+li+li{background:#3a8485} #PopularPosts1 ul li:first-child+li+li+li+li{background:#3a8554} #PopularPosts1 ul li:first-child+li+li+li+li+li{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#856b3a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li{background:#f59095} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:#85513a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background:#c0c44c} #PopularPosts1 ul li:first-child:hover{background:#3a3a85} #PopularPosts1 ul li:first-child+li:hover{background:#3a8485} #PopularPosts1 ul li:first-child+li+li:hover{background:#3a8554} #PopularPosts1 ul li:first-child+li+li+li:hover{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li:hover{background:#856b3a} #PopularPosts1 ul li:first-child+li+li+li+li+li:hover{background:#f59095} #PopularPosts1 ul li:first-child+li+li+li+li+li+li:hover{background:#85513a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li:hover{background:#c7f25f} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:hover{background:#853a4a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li:hover{background:#853a7a} .swtright img { width:15px; height:15px; float:right } .swtPopularPostsBox .item-title a, .swtPopularPostsBox .item-snippet { width:100%; /* Tutorial at https://blog.galaxyxploiter.my.id*/} </style>
Terakhir, klik tombol simpan untuk membuat widget popular post Anda lebih menarik. Tidak perlu memberi judul pada gadget ini.

Thanks for reading Cara Menambahkan Gadget Popular Post Di Blogger.. Please share...!

Post a Comment for "Cara Menambahkan Gadget Popular Post Di Blogger."