EDITBLOGTEMA: popularposts

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

EDITBLOGTEMA

4 GAYA POPULAR POSTS DENGAN EFEK ANIMASI

Juli 07, 2019

1. Langakah pertama

2. Langkah kedua

Model 1 : Nomor berputar (animasi)

Model 2: Abu abu animasi

Model 3: Memiliki heder judul

Model 4: Sederhana dengan animasi

Halaman

cari di blog ini

Entri yang Diunggulkan

MENGAPA TABLET DAN IPAD LEBIH BAIK PILIH WIFI KETIMBANG WIFI PLUS SELULER?

Postingan Populer

Popular Tags

Ads