Desain Widget Popular Posts Blogger

Jika Anda menggunakan Blogger sebagai platform untuk blog pribadi atau bisnis Anda, Anda mungkin mencari cara untuk menyesuaikannya dan membuatnya menjadi milik Anda sendiri. Dengan cara ini, Anda akan membuat halaman blog Anda unik dan eye-catching dan memastikan mereka akan menonjol dari banyak halaman lainnya di internet. Anda juga akan menarik perhatian target pasar Anda, mendorong mereka untuk melihat-lihat blog Anda dan menjadi pembaca dan pengikut setia Anda.

Untungnya, ada banyak cara untuk mempersonalisasi blog Blogger Anda, dan salah satunya adalah dengan menyesuaikan widget Popular Posts Anda. Belum memasang ini? Jangan khawatir karena meletakkannya di blog anda dengan mudah.

Menambahkan Widget Popular Posts untuk Blogger

Pada dasbor blog blogger anda, akses menu "Tata Letak", klik "Tambahkan Gadget" dan pilih "Entri yang Diunggulkan". Kemudian muncul jendela popup yang akan meminta Anda untuk mengkonfigurasi widget dengan memilih posting yang akan Anda tampilkan (misalnya yang paling banyak dilihat dalam 7 hari atau 30 hari terakhir atau dari awal blog Anda). Anda juga akan diminta untuk memilih jumlah posting yang akan Anda tampilkan di widget Popular Posts dan memilih apakah Anda akan menampilkan judul posting saja atau bersama dengan thumbnail gambar dan / atau cuplikannya. (Ingatlah bahwa setiap gaya widget memiliki persyaratan yang berbeda, jadi ikuti instruksinya dengan hati-hati untuk mengetahui apakah Anda memerlukan cuplikan dan gambar thumbnail atau tidak).

Setelah mengikuti petunjuk ini, Anda akan bisa melihat versi dasar Widget Popular Posts untuk Blogger di blog Anda. Anda bisa bertahan dengan ini jika sesuai dengan desain blog Anda, tapi jika tidak sesuai selera Anda, Anda tidak perlu khawatir karena Anda bisa mempersonalisasinya. Anda dapat memilih dari desain berikut:

Desain Widget Popular Posts Blogger 1

Kode CSS

#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;
}

Konfigurasi Widget

Konfigurasikan widget hanya untuk menampilkan judul posting. Dengan cara menghilangkan tanda centang "thumbnail gambar" dan "cuplikan".

Desain Widget Popular Posts Blogger 2

Kode CSS

#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;
}

Konfigurasi Widget

Konfigurasikan widget hanya menampilkan judul posting. Dengan cara menghilangkan tanda centang "thumbnail gambar" dan "cuplikan".

Desain Widget Popular Posts Blogger 3

Kode CSS

.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}

Kode JavaScript

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Konfigurasi Widget

Konfigurasikan widget untuk menampilkan judul posting, thumbnail gambar dan cuplikan . Dengan cara memberi tanda centang "thumbnail gambar" dan "cuplikan".

Desain Widget Popular Posts Blogger 4

Kode CSS

.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px 'Oswald', sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}

Kode JavaScript

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Konfigurasi Widget

Konfigurasikan widget untuk menampilkan judul posting dan thumbnail gambar. Dengan cara memberi tanda centang "thumbnail gambar" dan menghilangkan tanda centang pada "cuplikan".

Menambahkan CSS

Pada dasbor blogger anda tuju Tema > Edit HTML
Saat editor template dibuka, klik di manapun di dalam area kode dan tekan CTRL + F untuk mencari kode </head>

Kemudian copy paste salah satu kode CSS desain widget popular posts blogger yang anda pilih, di atas kode tersebut.

Menambahkan JavaScript

Beberapa desain widget popular posts juga memerlukan penggunaan script untuk mengubah ukuran gambar / thumbnail dan memangkas cuplikan dan judul pos. Untuk menambahkan kode JavaScript, cari kode </body> dan tempelkan script yang dibutuhkan tepat di atasnya.

Catatan: jika Anda sudah memiliki script jQuery library di template Anda, hapus kode yang berwarna kuning di setiap kode javascript diatas

Setelah Anda menambahkan semua kode di tempat yang tepat, tekan tombol "Simpan tema" untuk menyimpan perubahan.

Share this post