cara menghilangkan judul bawaan widget Pagelist pada template Essentials

Pengguna template Essentials? Itu lho template versi terbaru blogspot yang sedang saya modifikasi. Kali ini saya ingin berbagi tentang cara membuang judul bawaan widget atau Gadget Page secara parmanen. 

Saya katakan parmanen adalah Anda tidak perlu lagi menghapusnya karena tampilan pagelist yang kita jadikan topnav atau top navigasi blog akan tampak aneh kalau tidak bisa di bilang jelek kalau di atasnya ada judul: Page atau apapun, yang jelas itu bisa dihapus melalui pengaturan blogger bagian layout atau tataletak

1. Masuk ke pengaturan blogger
2. Pilih Layout atau Tataletak
3. Pilih widget atau gagdet Pagelist.

Jika Anda mengklik tanda pensil seperti yang di tunjukan pada gambar maka akan keluar tampilan berikut di bawah ini dan untuk menampilkan suatu widget pada template terbaru kita harus mencentang kolom 'Show Pages'

Configure Page List

Visible	Show Pages

Title (optional)

Pages to show

+ Add external link

• Select all
•  

List Order

Drag and drop to change ordering

• Beranda

Tip: In Design, reposition the gadget to change its appearance.

 

Tabs — move gadget under header

 

List of links – move gadget to side column

Save Cancel Remove

Anda dapat menghapus judul 'page' secara opsional, akan tetapi bagi sebagian pengguna bisa saja menjadi kebingungan mengapa setiap kali memasang widget selalu muncul judul tersebut dan harus menghapusnya melalui pengaturan untuk menghilangkannya.

Untuk menghapusnya secara permanen, kita harus melalui pengaturan blogger:

Pilih pengaturan

Pilih tema

Pilih edit HTML

Cari kode ]]></b:skin> dan letakan kode berikut tepat di atasnya:

.blog-name .PageList h3.title{
display:none;
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}

Sebenarnya cara di atas hanyalah kode overrade, artinya menindih kode yang telah ada dengan kode baru yang telah modifikasi dengan tambahan kode yang saya tulis merah.

Kalau ingin belajar, ketika berada di halaman editor HTML blogger, kita dapat memencet tombol CTRL+CTRL sekaligus pada keyboard atau papan ketik lalu akan muncul kota dialog pencarian di atas kiri halaman masukan saja kode: .blog-name .PageList h3.title{ dan tekan ENTER.

Maka akan muncul (ditemukan) kode seperti pada gambar:

Pada gambar di atas Anda jadi tahu dimana harus meletakan kode : display: none tersebut yang di gunakan untuk menyembunyikan judul dari widget pagelist tersebut.

Demikianlah cara menghilangkan judul bawaan widget Pagelist pada template Essentials. Pada template lain juga sama hanya saja pendeklarasian kodenya saja yang berbeda.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Cara membuat back to top ringan ala editblogtema

Back to top adalah sebuah tombol yang pada umumnya di letakan di bagian kiri paling bawah halaman blog, tepatnya di sebelah ujung paling kiri bagian footer paling bawah. Kegunaan atau fungsinya adalah untuk menscrool halaman kembali ke bagian atas dengan cepat hanya dengan cara mengklik tombol tersebut.

Jadi benar benar jelas dia berfungsi membantu menavigasi halaman agar lebih cepat kembali ke halaman awal yang letaknya di bagian bawah header blog. 

Terutama jika menimbang untuk membantu pengunjung kembali dengan cepat ke atas hanya dengan cara mengklik sebuah tombol alih alih menscrolling halaman kembali ke atas menggunakan mouse atau menggeser di layar sentuh yang membutuhkan waktu lama, khususnya pada sebuah artikel atau konten yang di tulis sangat panjang.

Gambar di atas adalah tombol yang di pergunakan oleh halaman blog ini, yakni back to top ala editblogtema yang di buat dan di ramu berdasarkan contoh contoh tombol back to top yang telah ada, namun di sederhanakan, di ringkas agar lebih ringan dan fast loading. Misalnya membuang ikon font awesome berikut link pemanggilnya, membuang link img dan menggantikannya dengan SVG icon yang lebih alami jika di embed ke dalam HTML.

Cara membuatnya:

Tambahkan kode ajax berikut ke atas kode </head> jika belum ada di dalam template Anda (abaikan jika sudah ada):

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

1. Tambahkan CSS

Copy CSS berikut dan letakan di atas tag penutup </head> di dalam pengaturan editor HTML blogger blogspot Anda.

<style> /* Tombol kembali ke atas*/

#back-to-top{background:transparent;color:#CC00CC;padding:0px 0px;font-size:10px}

.back-to-top{position:fixed!important;position:absolute;bottom:0px;right:1px;z-index:9000}</style>

Keterangan: Kita dapat merobah warna dengan mengganti kode warna yang di merahkan.

2. Tambahkan HTML /JS

Copy kode berikut dan letakan di atas tag penutup </body> masih di dalam pengaturan editor HTML blogger blogspot Anda.

  <div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>kembali ke atas

<svg style='width:24px;height:18px' viewBox='0 0 24 18'>

    <path d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z' fill='currentColor'/>

</svg>

</a></div>

<script>            

$(window).scroll(function() {

if($(this).scrollTop() &gt; 200) {

$(&#39;#back-to-top&#39;).fadeIn();

} else {

$(&#39;#back-to-top&#39;).fadeOut();

}

});

$(&#39;#back-to-top&#39;).hide().click(function() {

$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);

return false;

});

</script>

Lalu save template.

Anda juga bisa membuat tombol back to top atau tombol kembali ke atas menggunakan CSS, HTML dan JS dengan mudah tanpa menggunakan link eksternal seperti contoh yang telah kami lakukan di atas. Contoh pembuatan scrolling back top ini juga dapat di pelajari di w3school. Namun bagaimana tampilannya (desainnya) itu tergantung daya kreativitas Anda sendiri.

Sebenarnya cara pembuatannya sama saja dengan cara pembuatan tombol back to top template viomagz-nya Mas Sugeng.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Cara memasang navigasi menu pada sidebar blogger terbaru

Template blogger terbaru ada empat varian utama: Contempo, emporio, Soho dan Notable. Di luar itu adalah template lama, bahkan jauh sebelum template lama di buat Blogger pernah menggunakan satu satunya desain template, yakni template blogger klasik, yang jauh dari kata responsif.

Adapun perbedaan template lama dengan baru adalah sebagai berikut:

1. Template-template lama tidak responsif apalagi mobile, ada tujuh varian utama: (1)simple, (2)dymanic view, (3)picture window, (4)aswesome inc, (5)watermark, (6)ethereal, dan (7)travel. Para desainer mendesain ulang dan lalu menambahkan elemen elemen dan fitur responsif dan dinamis untuk kemudian di jual atau di bagikan secara gratis kepada pengguna. 
Sedangkan template terbaru, itu responsif dan mobile friendly serta lebih mudah di kustomisasi. Template lama sulit di view dari layar hape dan tablet, sedangkan template terbaru itu memang di desain untuk segala ukuran layar, terutama mobile.
2. Template lama memiliki sidebar di kiri atau di kanan yang langsung di tampilkan penuh pada tampilan homepage dan halaman postingan.
Sedangkan template zaman baru memiliki sidebar tersembunyi pada lebar layar tertentu menurut pengaturan CSS dan Jquerrynya. Untuk menampilkan sidebar kalian harus mengklik ikon menu (menu hamburger) pada bagian atas kiri (pada contempo dan soho) atau kanan (pada template notable) sehingga memang sangat mobile friendly.
3. Template lama mengikuti gaya desain yang hampir mirip untuk masa masa ke emasan tampilan web zaman layar PC desktop dan laptop.
Sedangkan Template terbaru masing masing telah mengusung gaya desain yang berbeda beda: Misalnya contempo bergaya aliran 'indie', Soho bergaya aliran 'fancy', emporio menganut faham aliran 'vegeclub' sedangkan Notable menganut gaya aliran 'rockpool'. Sehingga setiap pengembang dapat mematok gaya desain mereka sendiri berdasarkan ke empat aliran desain tersebut. 
4. Desain template lama masih mengusung layout versi ke 2, sedangkan  4 Template terbaru telah mengusung layout versi ke 3. 

Jadi jangan heran jika banyak trik yang dapat berjalan pada template lama namun tidak bisa di terapkan pada template terbaru

Template terbaru lebih banyak memiliki pengaturan CSS jika dibanding dengan template yang lebih lama.

Nah template terbaru ini sangat cocok jika dilengkapi dengan menu navigasi samping atau sidebar menu. Kalian dapat memanfaatkan widget kami berikut:

UNTUK TEMPLATE CONTEMPO

1. Masuk kepengaturan blogger
2. Pilih tataletak atau layout.
3. Pilih tambahkan widget/gagdet.
4. Pilih tambahkan HTML/Javascript

Pada blanko kosong widget HTML/Javascript yang muncul masukan saja semua kode berikut:

<style>
body {
font-family: &quot;Lato&quot;, sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 300px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: indigo;
border-radius: 5%;
overflow-x: hidden;
padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #D8D8D8;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}

/* Main content */
.main {
margin-left: 2px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 0px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 10px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>

<div class="sidenav">
<a href="#privasi">Privasi</a>
<a href="#services">Servis</a>
<a href="#clients">Klien</a>
<a href="#contact">Disclaimer</a>
<button class="dropdown-btn">JENIS TEMPLATE:
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</path></svg>
</button>
<div class="dropdown-container">
<a href="#">Contempo</a>
<a href="#">Soho</a>
<a href="#">Emporio</a>
<a href="#">Notable</a>
<a href="#">Masonry</a>
</div>
<a href="https://youtu.be/ShZuW2uWXhY">Demo Video</a>

</div>

<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

UNTUK TEMPLATE NOTABLE

Memasukan kodenya sama dengan cara di atas hanya kode pengaturan CSSnya sedikit berbeda masalahnya sidebar Notable tidak di kiri, tapi di kanan, maka pada blanko kosong yang muncul masukan seluruh kode berikut:

<style>

     body {

  font-family: &quot;Lato&quot;, sans-serif;

}

/* Fixed sidenav, full height */

.sidenav {

  height: 100%;

  width: 300px;

  position: relative;

  z-index: 1;

  top: 0;

  right: 0;

  background-color: blue;

         border-radius: 1%;

  overflow-x: hidden;

  padding-top: 20px;

}

.sidenav a, .dropdown-btn {

  padding: 6px 8px 6px 16px;

  text-decoration: none;

  font-size: 20px;

  color: #FFFFFF;

  display: block;

  border: none;

  background: none;

  width: 100%;

  text-align: left;

  cursor: pointer;

  outline: none;

}

/* On mouse-over */

.sidenav a:hover, .dropdown-btn:hover {

  color:purple;

}

/* Main content */

.main {

  margin-left: 2px; /* Same as the width of the sidenav */

  font-size: 20px; /* Increased text to enable scrolling */

  padding: 0px 10px;

}

/* Add an active class to the active dropdown button */

.active {

  background-color: pink;

  color: white;

}

.dropdown-container {

  display: none;

  background-color: indigo;

  padding-right: 0px;

}

.fa-caret-down {

  float: left;

  padding-left: 10px;

}

/* Some media queries for responsiveness */

@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

</style>

<div class="sidenav">

  <a href="#privasi">Privasi</a>

  <a href="#services">Servis</a>

  <a href="#clients">Klien</a>

  <a href="#contact">Disclaimer</a>

  <button class="dropdown-btn">JENIS TEMPLATE: 

   <svg style="width:24px;height:24px" viewbox="0 0 24 24">

    <path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />

</path></svg>

  </button>

  <div class="dropdown-container">

    <a href="#">Contempo</a>

    <a href="#">Soho</a>

    <a href="#">Emporio</a>

 <a href="#">Notable</a>

 <a href="#">Masonry</a>

  </div>

  <a href="https://youtu.be/ShZuW2uWXhY">Demo Video</a>

</div>

<script>

var dropdown = document.getElementsByClassName("dropdown-btn");

var i;

for (i = 0; i < dropdown.length; i++) {

  dropdown[i].addEventListener("click", function() {

  this.classList.toggle("active");

  var dropdownContent = this.nextElementSibling;

  if (dropdownContent.style.display === "block") {

  dropdownContent.style.display = "none";

  } else {

  dropdownContent.style.display = "block";

  }

  });

}

</script>

Lihat demo:

 

Kedua navigasi menu di atas memiliki fitur dropdown, pasti kerenlah...kalian bisa merobah judul menu berikut linknya menurut kebutuhan blog kalian sendiri...

Mengapa kami pisah caranya padahal sama sama template terbaru blogger? Alasannya:

1. sidebar contempo posisinya di kiri halaman blog
2. sedangkan sidebar notable berada di sisi kanan halaman blog.

Jadi mau tidak mau pengaturan CSS-nya beda dong.

Selamat mencoba.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

CARA PALING MUDAH MENINGKATKAN NILAI INTERNAL LINK YANG BURUK DI BLOGGER

Pernah periksa dan melihat internal link halaman blogger kalian terlihat sangat buruk?  Mungkin nilainya merah di bawah 5, dan sedikit banyaknya hal tersebut akan mempengaruhi performa blog secara keseluruhan.

Tidak semua blog mengalaminya, namun bagi yang mengalaminya hanya perlu memeriksa satu hal: Apakah widget label telah terpasang pada blog? Jika sudah seharusnya skor atau nilai internal link tidaklah buruk. Namun jika belum, pemasangan gagdet atau widget label ini akan membantu memperbaiki skor internal link blog kita.

be a good and strong link

Di bawah ini adalah tampilan internal link editblogtema sebelum diperbaiki:

Internal link buruk

Seperti yang kita lihat, nilai internal link  diatas berada pada skor dibawah 5 saja. Dan tentu saja itu buruk. Setelah saya menemukan cara memperbakinya nilainya meningkat drastis walau masih dengan catatan untuk saran perbaikan :

Skor untuk nilai internal link membaik drastis 

Walaupun skor membaik menjadi 90 namun tetap dengan beberapa catatan perbaikan

BAGAIMANA CARA MELAKUKANNYA? 

Sederhana sekali. Jika kalian belum menambahkan widget label, maka tambahkan widget tersebut tempatkan saja pada sidebar atau bagian bawah widget konten.

Masuk kepengaturan blogger >> Pilih Tata Letak>>Pilih tambahkan gagdet>>Pilih Gagdet Label.
Jika sudah terpasang trik ini dapat di abaikan, artinya interlink blog kalian tidak memiliki banyak masalah dengan internal link.

Mudah sekali bukan?

SHARE YA:

Download template SOHO dan berikut cara membuat tombol subscribe keren

Template soho custom

• DEMO  DOWNLOAD

Disamping membuat menu navigasi yang responsif pada bagian header template blogger (berbasis HTML), para pembuat template blog juga (termasuk Wordpress yang berbasis Php) harus memikirkan sebuah desain yang baik untuk menampilkan informasi penting dan "abadi" atau selamanya di bagian footer template blog mereka.

Itulah mengapa sebabnya saat memberikan tutorial seperti ini saya lebih menyukai halaman yang di buat berbasis HTML. Itu bukan berarti Wordpress tidak mumpuni, saya memilih template berbasis HTML hanya semata semata karena kesederhaannya, tidak harus menggunakan add on dan begitu banyak ekstensi.

Sekarang mari membuat widget Follow By Email atau tombol Subscription untuk bagian kaki bloggger kalian! Perhatian contoh pertama berikut sebelum masuk ke "DEMO" yang telah saya buat:

• Facebook
• Twitter
• Google+
• Pinterest
• RSS

Subscribe to my Newsletter

Cobalah isikan data kalian, karena form kontak diatas bukanlah sebuah gambar , melainkan sebundel kode HTML-CSS yang saya tanamkan lewat opsi HTML. Kalian dapat mengisikan alamat email dan mengetuk tombol 'send' atau kirim.

Cara menerapkannya adalah sebagai berikut:

1. Masuk ke dasbor / pengaturan blogger
2. Pilih Layout atau Tataletak
3. Pilih Add Gagdet atau Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Pada halaman atau form kosong HTML/Javascript yang telah terbuka copy dan lalu paste-kan kode berikut ke dalamnya:

<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}
.hbzemailform {
    width: 240px;
    margin: 10px auto;
}
#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}
#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}
#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}
.hbzsignup-form {
    margin-top: 15px;
}
.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}
.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}
.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}
.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}
.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}
.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}
.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998;
}
.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}
.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced;
}
.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}
.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39;
}
.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}
.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027;
}
.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}
.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12;
}
</style>
<center><div class="hbzsub">
<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div></center>

SAVE dan lalu geser widget ke bagian paling bawah template blog  Kalian bisa melihat demonya langsung disini:

Kelebihan template ini sekalipun di banding dengan template premium adalah:

• Tidak memiliki footer kredit
• Basisnya asli bawaan blogger (SOHO) dengan kostumisasi dan peningkatan fitur premium
• Lebih aman, karena tidak memiliki script tersembunyi.
• Memiliki hampir semua fitur dasar dan tambahan blogging

Atau: Jika kalian hanya ingin menggunakan tombol subscriber bawaan blogger namun dengan tampilan berbeda cukup dengan cara:

1. Masuk ke dasbor / pengaturan blogger
2. Pilih Layout atau Tataletak
3. Pilih Add Gagdet atau Tambahkan Gadget
4. Pilih tambahkan "FollowBy Email"

   

   Follow by Email widget
   
   

   Lalu Geser widget tersebut ke bagian footer tataletak template. Save.
5. Tambahkan kode CSS berikut tepat di atas tag penutup </style> di dalam opsi editor "edit HTML" template blogger kalian:

#FollowByEmail1 {background: #ccc; 14px;margin-left:1px;width:100%;color:#666}

Kalian dapat menerapkan ini pada template SOHO dan Contempo yang telah kalian "customisasi" buat saja sebuah blog "ecek ecek" alias "dummy" sebagai percobaan.

Peringatan!

• Template dapat kalian pergunakan dengan bebas, tanpa kredit, bebas memodifikasi dengan tujuan pembelajaran semata mata. Template telah di lengkapi dengan meta tag seperlunya. 
• Selama Algoritma Google terus berubah template membutuhkan pembaharuan, jika terjadi kesalahan itu bukan kesalahan editblogtema karena template ini telah dibuat pada awal tahun 2019. Versi terbaru masih dalam pengujian.
• Kami tidak menyediakan template secara khusus, biasanya hanya di pergunakan untuk penggunaan personal dan untuk di sumbangkan kepada yang membutuhkannya.
• Semua template berbasis template default. (Bahkan jika kalian membeli sebagian template premium sekalipun melakukan hal yang sama)

Salam, Anissa.

SHARE YA:

Percobaan membuat profile penulis tampil diatas postingan

Kalau anda pengguna template bawaan blogger Notable profile penulis berada diatas postingan adalah fitur bawaan template tersebut, akan tetapi bagaimana jika anda ingin agar fitur tersebut ada pada template yang lain selalin notable? Bisakah kita menempatkan profile penulis diatas setiap postingan, misalnya diterapkan pada template SOHO?, ini hanya langkah percobaan, tetapi yang penting ternyata: BISA:

author profile example

Sumber kode dibawah ini misalnya saya pasang dibawah di atas kode <data:post.body/>, (kalau tidak ada mungkin sudah di parse menjadi: &lt;data:post.body/&gt;):
<div style="background-color: white; box-sizing: inherit; color: rgba(0, 0, 0, 0.8); font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: medium;"><div class="kd" style="box-sizing: inherit; margin-top: 32px;"><div class="ah ag" style="align-items: center; box-sizing: inherit; display: flex;"><div style="box-sizing: inherit;"><a href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; box-sizing: inherit; text-decoration-line: none;"><img alt="Sofyan" class="l fv ke kf" height="48" src="https://4.bp.blogspot.com/-daWqoEe7uDc/XUgAkRpMO8I/AAAAAAAAni4/d-LmOKXWQtYWx7iFWSmMdc0rwtdLwv-gACK4BGAYYCw/s113/IMG_20190805_102151.jpg" style="border-radius: 50%; box-sizing: inherit; display: block; height: 48px; vertical-align: middle; width: 48px;" width="48" /></a></div><div class="kg ac l" style="box-sizing: inherit; margin-left: 12px; width: 620px;"><div class="ag" style="box-sizing: inherit; display: flex;"><div style="box-sizing: inherit; flex: 1 1 0%;"><span class="aw b ax ay az ba l dz ce"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.84); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.84);"><div class="kh ag ah ki" style="align-items: center; box-sizing: inherit; display: flex; margin-bottom: 2px;"><span class="aw ec ed ay cp kj ef eg kk ei dz"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https//www.editblogtema.net" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">sofyan</a></span><div class="kl l au h" style="box-sizing: inherit; flex: 0 0 auto; margin-left: 8px;"><button class="km dz ce bu kn ko kp kq bm dv kr ks kt ku kv kw bx aw b ax kx fq ba by bz af ca cb bp" style="-webkit-tap-highlight-color: transparent; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border-color: rgba(0, 0, 0, 0.54); border-radius: 4px; border-style: solid; border-width: 1px; color: rgba(0, 0, 0, 0.84); fill: rgba(0, 0, 0, 0.84); font-family: medium-content-sans-serif-font, &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, &quot;Lucida Sans&quot;, Geneva, Arial, sans-serif; font-size: 15px; letter-spacing: 0px; line-height: 18px; margin: 0px; overflow: visible; padding: 0px 8px;">Ikuti</button></div></div></span></div></div><span class="aw b ax ay az ba l cf cg"    style="box-sizing: inherit; display: block; fill: rgba(0, 0, 0, 0.54); letter-spacing: 0px; line-height: 20px;font-family:,;font-size:15.8px;color:rgba(0 , 0 , 0 , 0.54);"><span class="aw ec ed ay cp kj ef eg kk ei cf"  style="-webkit-box-orient: vertical; -webkit-line-clamp: 1; box-sizing: inherit; display: -webkit-box; line-height: 20px; max-height: 20px; overflow: hidden; text-overflow: ellipsis;font-size:16px;"><div style="box-sizing: inherit;"><a class="dr ds bf bg bh bi bj bk bl bm ji bp bq dv dw" href="https://www.editblogtema.net/" style="-webkit-tap-highlight-color: transparent; border: inherit; box-sizing: inherit; fill: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0px; padding: 0px; text-decoration-line: none;">Aug 16</a> · 2 min read</div><div><br /></div></span></span></div></div></div></div>

Hasilnya seperti gambar jika di terapkan pada template SOHO:

profile pengarang diatas postingan

Dan tentu saja trik ini dapat diterapkan pada template manapun. Kelihatannya ini adalah alternatif yang bagus buat blog  dengan banyak penulis. Selain gambar profile pengarang atau penulis yang langsung terhubung ke profile blogger, juga terdapat tombol follow atau ikuti yang rencana saya akan dapat di isi dengan link halaman medsos atau Follower blogger
www.editblogtema.net

SHARE YA:

Cara membuat widget recent post di bawah header blog

Gambar widget recent posts editblogtema

Widget recent post yang saya bagikan ini memiliki keunggulan:

1. Responsive dapat menyesuaikan diri dengan ukuran layar perangkat
2. Kompatibel dapat diterapkan pada template versi lawas dengan layout versi 2 hingga template blogger terbaru dengan layout versi 3.
3. Dapat di pasang di bagian bawah header atau di atas footer blog

Cara memasang:

Masuk kepengaturan blog:

1. Pilih layout atau tetaletak
2. Pilih dan klik Add gagdet atau tambahkan gadget
3. Pilih gagdet HTML/Javascript
4. Klik gagdet HTML/JavaScript sampai terbuka blanko kosong, lalu copy kode berikut dibawah dan pastekan ke dalam blanko HTML/JavaScript tadi:

<center><h2>Artikel Terkini:</h2><style>
/* CSS Recent Post Gallery Widget */.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:12px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3; border-radius: 50px;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;border-radius: 50px;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
var recentpost_thumbs = 79;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=6&amp;alt=json-in-script&amp;callback=gallerygrid"></script></center>

Save Template

Selanjutnya anda tinggal menggeser widget pakai mouse ketempat yang di inginkan.

DEMO 1 (template layout versi 2)
DEMO 2 (template layout versi 3)

www.editblogtema.net

SHARE YA:

Dua cara membuat profile keren di template editblog SOHO

Tampilan Profile penulis pada sidebar kiri halaman editblog SOHO

1. Profile blogger bawaan
Cara membuat:

1. Masuk ke pengaturan template editblog SOHO
2. Pilih layout atau tataletak
3. Pilih tambahkan gagdet 
4. Pilih gagdet profile
5. Biarkan berada paling atas sidebar

Profile ini akan muncul pada saat dibuka melalui PC dekstop, Laptop, dan tablet dalam posisi landscap, namun tidak akan muncul pada layar yang lebih kecil seperti ponsel atau hape, tablet pada saat di posisi portrait. Membuat template ini menjadi tampak professional.

Save tema.

Merobah ukuran tampilan profile
ukuran gambar atau thumbnail profile pada template editblog - SOHO dapat dirobah melalui halaman editor HTML. Masuk ke pengaturan blogger>pilih tema>pilih edit HTML, lalu cari kode berikut dibawah ini:

.widget.Profile .team .default-avatar-wrapper,.widget.Profile .team .profile-img{
border-radius:50%;
float:$startSide;
height:80px;
width:80px
Position: fixed;
}

 Robah angka 80 jadi 100, 150 atau 40 saja terserah keinginan sobat. Save template.

2. Membuat profile team

Profile team maksudnya adalah jika terdapat dua orang atau lebih yang mengelola blog anda seperti contoh blog editblogtema yang dikelola oleh Sofyan dan Anissa.

Caranya hanyalah dengan cara menambahkan penulis atau pengelola baru pada blog anda. Undang penulis melalui pengaturan atau dasbor blogger:

1. Pada pengaturan blogger pilih setting
2. Pilih basis
3. begitu masuk basis pilih tambahkan penulis:

Teman atau seseorang yang diundang akan menerima notifikasi melalui email GMAIL yang dia miliki sebagai ID blogger, begitu dia accept atau menerima dia akan menjadi penulis pada blog kita. Dan setiap kita memasang profile bawaan blogger, profilenya juga akan hadir bersama sama dengan profile kita.

Save template.

MEMBUAT WIDGET  PROFILE PADA FOOTER:

Langkah pertama letakan CSS style berikut diatas </head>

 <style>
.avatar {
vertical-align: middle;
width: 50px;
height:auto;
border-radius: 50%;
}
</style>

Lalu lalu masuk ke pengaturan/dasbor  blogger:

1. Pilih tataletak
2. Pilih tambahkan widget/gagdet
3. Pilih HTML/JavaScript
4. Pada blanko kosong widget HTML/JavaScript yang muncul pastekan kode dibawah ini kedalamnya:

<center><h>Constributors:</h></center><center><a href="#"><img src="#" alt="Avatar" class="avatar"/></a>
<small> Sofyan Ya-an & Anissa </small><a href="#"><img src="#" alt="Avatar" class="avatar"/></a></center>

Ganti lambang # yang disorot warna kuning dengan link profile blogger anda atau rekan pengelola blog anda.
Ganti lambang # yang disorot warna biru dengan link gambar profile anda atau rekan pengelola blog anda

Caranya:
Langkah ketiga Cara menambahkan URL atau link profile blogger milik sendiri:
Langsung saja akses halaman blog teman teman, pada bagian bawah konten atau artikel lihat kebagian komentar.
Klik profile anda sendiri atau rekan pengelola blog anda

contoh:

Image profile kita pada komentar blog.

Begitu profile di klik, teman teman akan masuk ke URL atau link profile milik sendiri copy alamat pada bar, contoh milik aku:

URL profile blogspot

Hapus kode # yang aku sorot kuning pada langkah kedua diatas ganti dengan alamat URL profile blogger teman teman sendiri.

Langkah selanjutnya menambahkan URL atau Link image/gambar blogspot ke kartuSelanjutnya adalah cara mengambil link atau URL image/gambar dari profile blogspot diri kita sendiri agar kartu yang kita buat memiliki gambar profile asli blogspot.

Masih melalui edit profile pada bagian bawah image atau gambar profile klik tampilkan layar ukuran penuh:

Maka akan muncul tab atau halaman baru perhatikan bagian atas bar alamat URL copy link tersebut

URL link gambar atau image disorot kuning

Perhatikan baik baik link gambar formatnya harus diawali https://1.bp.blogspot.com/...dst.... gunanya ya untuk menampilkan image profile
Ganti llambang # yang aku sorot biru diatas pada langkah kedua dengan link teman teman sendiri melalui cara ini.
Save template
Geser atau drag widget ke bagian footer atau paling bawah tataletak blogger anda.
Sekali lagi jangan lupa: Save tema.

Ingin melihat Hasilnya? Scroll blog ini hingga batas bagian footer atau paling bawah halaman dan cobalah klik ikon atau kedua avatarnya.

Selamat ngeblog: Salam dari Saya Anissa.

www.editblogtema.net

SHARE YA:

4 GAYA POPULAR POSTS DENGAN EFEK ANIMASI

Jika sobat masih menggunakan template dengan layout desain versi 2 sobat bisa memanfaatkan widget popularpost yang akan saya bagikan ini. Saya ingin mengulangi penjelasan saya kembali: Template terbaru blogger seperti: Soho, contempo, emporio dan Terkemuka adalah template blogger terbaru yang dirilis pada tahun 2017 memiliki layout desain versi ke-3.

Sedangkan template template yang lebih lama (tua) namun masih sangat baik dipergunakan seperti: Sederhana atau simple, PT.keren sekali atau Awsome, Perjalanan, Kelembutan, Tanda air dan seterusnya masih memiliki layout desain versi ke-2. Namun jangan salah kebanyakan template premium masih di desain berdasarkan layout versi 2 ini. Perhatikan perbandingan template editblog yang versi 3 dengan template viomagz yang masih versi 2"

Editblogtema:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Perhatikan Viomagz masih b:version='2'

Viomagz:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2'
expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
.........
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: VioMagz
Version: 2.7.5 (25 juli 2018)
Designer: Mas Sugeng
----------------------------------------------- */

Adapun template klasik pendahulu kedua jenis template diatas adalah satu satunya template yang memiliki desain layout versi awal atau versi pertama. Kodenya tampak sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">
............
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Date:     27 Feb 2004
----------------------------------------------- */

Jadi Popular post yang saya tawarkan adalah untuk template dengan layout versi 2 tidak bisa atau tidak cocok dipasang ke template dengan layout versi 3.

Namun sekali lagi jangan salah sampai saat ini mayoritas template premium yang sobat sobat beli atau pergunakan secara gratis masih terlihat jelas strukturnya memiliki desain layout ke 2. Untuk membuktikannya sobat bisa inspeksi elemen melalui browser. Jadi sobat bisa memasang widget popular post ini dengan mudah pada jenis jenis tema atau template blogger jenis ini. Apalagi terdapat kebanyakan templae premium hanyalah full modifikasi dari template bawaan (default) blogger.

1. Langakah pertama

Masuk kepengaturan blogger, pilih tataletak, pilih tambahkan gadget, dan pilih popularposts. Centang "thumbnail gambar", jangan centang  atau kosongkan saja "cuplikan"

2. Langkah kedua

Masuk kepengaturan blogger, pilih tema, terdapat dua pilihan pada bagian bawah preview tema: "sesuaikan" dan edit HTML", pilih sesuaikan. Begitu "sesuaidkan" dipilih dengan mengkiliknya, akan muncul halaman Desainer Tema Blogger pilih Lanjutan, akan muncul daftar menu dari atas kebawah, scroll sampai kebawah maka sobat akan berhenti pada menu paling akhir yang bernama: "tambahkan CSS"

Sesungguhnya kotak dialog "tambahkan CSS" ini sangat berguna untuk memudahkan para desainer membentuk aba aba template dan sekarang kita gunakan untuk membentuk beberapa model popularPosts.

Model 1 : Nomor berputar (animasi)

Copy kode dibawah ini dan masukan kedalam kotak "tambahkan CSS" yang kita bicarakan pada langkah ke-2 tadi.

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Save Tema  

Model 2: Abu abu animasi

Copy kode dibawah ini dan masukan kedalam kotak "tambahkan CSS" yang kita bicarakan pada langkah ke-2 tadi.

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Save template

Model 3: Memiliki heder judul

Copy kode dibawah ini dan masukan kedalam kotak "tambahkan CSS" yang kita bicarakan pada langkah ke-2 tadi.

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px 4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Save Tema

Model 4: Sederhana dengan animasi

Copy kode dibawah ini dan masukan kedalam kotak "tambahkan CSS" yang kita bicarakan pada langkah ke-2 tadi.

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Save template.
Lihat:

DEMO

www.editblogtema.net

SHARE YA:

5 widget recent posts keren, klasik dan cantik

Jika sobat ingin menampilkan Recent Post atau "Postingan Terkini" dibawah ini ada 5 cara, gaya dan style mudah dan instan yang dapat menjadi pilihan:

Style Pertama: LATAR WARNA 

• Masuk kepengaturan blogger
• Pilih tataletak
• Pilih tambahkan Gadget 
• Pilih HTML/JavaScript
  

Setelah kotak dialognya muncul copy kode dibawah ini dan pastekan kedalamnya, atur tataletaknya dengan mendrag untuk menggeser widget sesuai dengan tempat yang diinginkan pada blog:

<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = false;var posts_date = true;var post_summary = true;var summary_chars = 70;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://www.editblogtema.net/2019/05/5-widget-recent-posts-cantik-yang-masih.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover { color: #222;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}.recent-post-title {padding: 6px 0px;}.recent-posts-details a{ color: #222;}.recent-posts-details {padding: 5px 0px 5px; }</style>

Save Template

Style Kedua: LIST SIMPLE

• Masuk kepengaturan blogger
• Pilih tataletak
• Pilih tambahkan Gadget 
• Pilih HTML/JavaScript
  

Setelah kotak dialognya muncul copy kode dibawah ini dan pastekan kedalamnya, atur tataletaknya dengan mendrag untuk menggeser widget sesuai dengan tempat yang diinginkan pada blog:

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://www.editblogtema.net/2019/05/5-widget-recent-posts-cantik-yang-masih.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}</style></div>

Save template

Style Ketiga: GRID SIMPLE

• Masuk kepengaturan blogger
• Pilih tataletak
• Pilih tambahkan Gadget 
• Pilih HTML/JavaScript
  

Setelah kotak dialognya muncul copy kode dibawah ini dan pastekan kedalamnya, atur tataletaknya dengan mendrag untuk menggeser widget sesuai dengan tempat yang diinginkan pada blog:

<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = true;var posts_date = true;var post_summary = true;var summary_chars = 40;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://www.editblogtema.net/2019/05/5-widget-recent-posts-cantik-yang-masih.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.recent-posts-container a{text-decoration:none;}.recent-post-title {margin-bottom:5px;}.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}.recent-posts-details a{color: #777;}</style>

Save Template

Style Keempat: UNDERLINE TITLE

• Masuk kepengaturan blogger
• Pilih tataletak
• Pilih tambahkan Gadget 
• Pilih HTML/JavaScript
  

Setelah kotak dialognya muncul copy kode dibawah ini dan pastekan kedalamnya, atur tataletaknya dengan mendrag untuk menggeser widget sesuai dengan tempat yang diinginkan pada blog:

<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = false;var readmorelink = true;var showcommentslink = true;var posts_date = true;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="https://www.editblogtema.net/2019/05/5-widget-recent-posts-cantik-yang-masih.html">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style type="text/css">img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover{color: #4DACE3;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}.recent-post-title { margin: 5px 0px; }.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}.recent-posts-details a{ color: #888;}a.readmorelink {color: #4DACE3;}</style>

Save Template

Style Kelima: ROUND THUMBNAIL WITH CALIGRAPH

• Masuk kepengaturan blogger
• Pilih tataletak
• Pilih tambahkan Gadget 
• Pilih HTML/JavaScript
  

Setelah kotak dialognya muncul copy kode dibawah ini dan pastekan kedalamnya, atur tataletaknya dengan mendrag untuk menggeser widget sesuai dengan tempat yang diinginkan pada blog:

<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = true;var posts_date = true;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="https://www.editblogtema.net/2019/05/5-widget-recent-posts-cantik-yang-masih.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}ul.recent-posts-container {border: 2px solid #FCD6CB; }.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover { color: #222;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 14px;color: #616662;}.recent-post-title {padding: 6px 0px;}.recent-posts-details a{ color: #888;}.recent-posts-details {padding-bottom: 5px;}a.readmorelink {color: #4DACE3;}</style>

Terakhir: Jangan lupa perhatikan link berwarna abu pada setiap kode script, itu adalah link blog editblog, silahkan ganti dengan link blog sobat sendiri.

Save Template

www.editblogtema.net

SHARE YA: