4 GAYA POPULAR POSTS DENGAN EFEK ANIMASI

bysufyan Yaan -
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"
jangan centang 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)

contoh popularposts 1
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

popularposts2
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

popularposts model3
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

popularposts style4
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
Tags

6 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Blogger Surabaya | Rey - reyneraea.comJuli 07, 2019

    Saved dulu!

    Mau praktek di blog yang nggak kepake saya.
    Yang model 2 keren tuh :)

    Utak atik blog ini paling menyenangkan buat saya, sayang waktunya nggak cukup hahahaha

    BalasHapus
  2. I Gede Suta KastawanJanuari 17, 2021

    Kalau berkenan, tolong dong bagikan kode widget populer seperti pada blog ini. Saya pilih yang simple saja:) tq

    BalasHapus
    Balasan
    1. sufyan YaanJanuari 17, 2021

      Itu salah satu widget diatas yang di modifikasi dan dihilangkan Imah nya, mas.

      Hapus
    2. I Gede Suta KastawanJanuari 17, 2021

      Saya mumet kalo soal koding mas, mut -mutan. Baiklah, terimakasih sudah berbagi, sangat bermanfaat.

      Hapus
    3. sufyan YaanJanuari 17, 2021

      sebenarnya popularpost pada template ini di atur melalui pengaturan CSS sebagai berikut:

      .PopularPosts article{counter-increment:Popular;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap}
      .PopularPosts article:not(:last-child){margin-bottom:3px;padding-bottom:3px;border-bottom:1px dashed #ccc}
      .PopularPosts article:before{content:counter(Popular);font-size:24px;font-weight:200;font-style:italic;color:#555;margin-right:15px;background:#fff}
      .PopularPosts a{color:#666;font-size:13px;line-height:24px}
      .PopularPosts a:hover{color:$(.main.color)}
      .PopularPosts .thumbnail{line-height:10px;margin-bottom:10px}
      .PopularPosts img{width:100%}
      .PopularPosts .snippet{margin-bottom:20px;font-size:12px;color:$(posts.icons.color)}
      .Label a{font-size:18px;color:#66FF00;display:inline-block}
      .Label a:hover{color:$(.main.color)}
      .Label a:before,.BlogArchive ul.flat li

      Hanya saja mungkin beberapa variablenya tidak cocok pendeklarasiannya pada jenis template yang berbeda, jadi perlu di edit lagi, mas...

      Hapus
    4. I Gede Suta KastawanJanuari 18, 2021

      Memang keren widget populernya, izin praktek dan utak-atik. Terima kasih banyak..:)

      Hapus
Lebih baru Lebih lama

Formulir Kontak