Cara Membuat Widget Popular Post Keren di Blogger
Cara Membuat Widget Popular Post keren di Blogger - Popular post menjadi hal yang harus kalian miliki saat kalian membangun blog baru,kenapa ? ambil sample begini kalau blog kalian sudah memiliki beberapa artikel dan ada salah satu artikel pula yang page one di hasil mesin penelusuran google sehingga dapat memberikan trafik ke dalam blog kalian maka saat pengunjung membuka dan mambaca di blog kalian pastinya akan membaca sampai tuntas,nah pada saat melakukan scroll ke bagian bawah halaman blog kalian maka mereka akan di suguhkan dengan beberapa daftar artikel lain yang ada di dalam popular post tersebut.Sehingga bisa di ambil kesimpulan kalau kalian memasang widget popular popular post maka bisa menarik perhatian pengunjung untuk menjelajah artikel lain yang ada di dalam popular post selain dari artikel yang sedang di bacanya.
Widget popular post juga sangat berpengaruh dalam keperluan SEO blog yang kalian miliki,seperti pada artikel sebelumnya yaitu Cara Membuat Widget Random Post di Blog,Fungsi dari Popular post juga mirip dengan fungsi dari widget random post.
Cara Membuat Widget Popular Post keren di Blogger
Kali ini Syatemauni akan membahas bagaimana cara membuat widget popular post di blog yang bisa kalian coba sendiri di blog masing masing.Langsung saja ke langkah langkah nya.Namun sebelum itu sebenarnya ada beberapa desain widget popular post yang akan systemauni bagikan pada artikel kali ini.Simak langkah langkah berikut.
Cara membuat widget popular post ala arlina design di blog
1.Login blogger
2.Buka Dashboard>>Tema>>Edit HTML
3.Cari kode ]]></b:skin> dan copy paste kode berikut tepat di atasnya
/* POPULAR POST */ .popular-posts {background: linear-gradient(127deg, #de0985, #f18241);} .PopularPosts ul li:hover{background: #3333330f;} .popular-posts ul li a {color:#fff;} .popular-posts ul li a:hover {color:#fff;} .PopularPosts h2 {text-indent: 20px;border-top: 2px solid #df0d83;margin-bottom: 0px;border-bottom: none;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;} .PopularPosts h2 span {margin-left:20px} .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;} .PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;} .PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;} .PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px solid rgba(0,0,0,0.08);border-top: 1px solid rgba(255,255,255,0.12);} .PopularPosts ul li:last-child {margin-bottom: 0px;} .PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;} .PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: bold;} .PopularPosts .item-thumbnail {float: left;margin-right: 8px;} .PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;} .PopularPosts ul li > a {font-weight: bold; font-size: 14px;} .PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 28px;} .PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;} .PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}
Note: Bagi template viomagz untuk menghapus Number Count widget popular post kalian bisa mencari kode Numberedpopularposts dan kalian bisa menghapus seluruh CSS style yang terdapat di dalam kode tersebut.Setelah di hapus maka coba kalian lihat apakah masih muncul.Jika tidak kalian bisa melanjutkanya.
4.Lompat ke Widget Popular Post dan cari kode <data:title/> lalu kalian copy paste kan kode berikut tepat di bawah kode tersebut
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#FFD15C" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /> </svg>
Note: Ubah kode warna #FFD15C sesuai keinginan
5.Simpan tema dan juga nonaktifkan thumbnail gambar dan cuplikan di widget popular post nya.
Cara membuat widget popular post keren warna warni di blog
1.Login blogger
2.Buka Dashboard>>Tema>>Edit HTML
3.Cari kode .popular-posts atau .popular posts { dan kalian ganti dengan kode CSS berikut.Ada dua desain atau style kalian bebas mau gunakan yang mana
Desain 1
/* Custom CSS for Blogger Popular Post Widget */ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; } .PopularPosts ul { margin:.5em 0; list-style:none; color:black; counter-reset:num; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0 !important; padding:.5em 1.5em .5em .5em !important; counter-increment:num; position:relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a { font-weight:bold; color:#000 !important; text-decoration:none; } .PopularPosts ul li:before { content:counter(num) !important; display:block; position:absolute; background-color:#333; color:#fff !important; width:22px; height:22px; line-height:22px; text-align:center; top:0px; right:0px; padding-right:0px !important; } /* Set color and level */ .PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important} .PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:1% !important} .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:1% !important} .PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:1% !important} .PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:1% !important} .PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:1% !important} .PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:1% !important} .PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:1% !important} .PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:1% !important} .PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:1% !important} .PopularPosts .item-thumbnail { margin:0 0 0 0; } .PopularPosts .item-snippet { font-size:11px; } .profile-img{ display:inline; opaciry:10; margin:0 6px 3px 0; }
Desain 2
.popular-posts { max-width: 400px; margin: 0 auto; } .f-title { background-color: #eeeeee; padding: 15px 0px; margin-bottom: 20px; text-align:center; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } h1 { margin: 0px; color: #212121; font-weight:100; } .f-website { position: fixed; bottom: 0px; right: 0px; } .f-website h2{ margin:0; font-size: 24px; font-weight: 100; padding: 5px 10px; font-style: italic; color: #EEE; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.98), 2px 2px 0px rgba(0, 0, 0, 0.96), 3px 3px 0px rgba(0, 0, 0, 0.94), 4px 4px 0px rgba(0, 0, 0, 0.92), 5px 5px 0px rgba(0, 0, 0, 0.9), 6px 6px 0px rgba(0, 0, 0, 0.88), 7px 7px 0px rgba(0, 0, 0, 0.86), 8px 8px 0px rgba(0, 0, 0, 0.84), 9px 9px 0px rgba(0, 0, 0, 0.82), 10px 10px 0px rgba(0, 0, 0, 0.8), 11px 11px 0px rgba(0, 0, 0, 0.78), 12px 12px 0px rgba(0, 0, 0, 0.76), 13px 13px 0px rgba(0, 0, 0, 0.74), 14px 14px 0px rgba(0, 0, 0, 0.72), 15px 15px 0px rgba(0, 0, 0, 0.7), 16px 16px 0px rgba(0, 0, 0, 0.68), 17px 17px 0px rgba(0, 0, 0, 0.66), 18px 18px 0px rgba(0, 0, 0, 0.64), 19px 19px 0px rgba(0, 0, 0, 0.62), 20px 20px 0px rgba(0, 0, 0, 0.6), 21px 21px 0px rgba(0, 0, 0, 0.58), 22px 22px 0px rgba(0, 0, 0, 0.56), 23px 23px 0px rgba(0, 0, 0, 0.54), 24px 24px 0px rgba(0, 0, 0, 0.52), 25px 25px 0px rgba(0, 0, 0, 0.5), 26px 26px 0px rgba(0, 0, 0, 0.48), 27px 27px 0px rgba(0, 0, 0, 0.46), 28px 28px 0px rgba(0, 0, 0, 0.44), 29px 29px 0px rgba(0, 0, 0, 0.42), 30px 30px 0px rgba(0, 0, 0, 0.4), 31px 31px 0px rgba(0, 0, 0, 0.38), 32px 32px 0px rgba(0, 0, 0, 0.36), 33px 33px 0px rgba(0, 0, 0, 0.34), 34px 34px 0px rgba(0, 0, 0, 0.32), 35px 35px 0px rgba(0, 0, 0, 0.3), 36px 36px 0px rgba(0, 0, 0, 0.28), 37px 37px 0px rgba(0, 0, 0, 0.26), 38px 38px 0px rgba(0, 0, 0, 0.24), 39px 39px 0px rgba(0, 0, 0, 0.22), 40px 40px 0px rgba(0, 0, 0, 0.2), 41px 41px 0px rgba(0, 0, 0, 0.18), 42px 42px 0px rgba(0, 0, 0, 0.16), 43px 43px 0px rgba(0, 0, 0, 0.14), 44px 44px 0px rgba(0, 0, 0, 0.12), 45px 45px 0px rgba(0, 0, 0, 0.1), 46px 46px 0px rgba(0, 0, 0, 0.08), 47px 47px 0px rgba(0, 0, 0, 0.06), 48px 48px 0px rgba(0, 0, 0, 0.04), 50px 50px 0px transparent; } /*-------------------------*/ .popular-posts ul { padding: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; } .popular-posts ul li { box-sizing: border-box; list-style-type: none; margin: 0; padding: 10px 10px 10px 72px !important; min-height: 68px; line-height: 1.5rem; height: inherit; position: relative; } .popular-posts ul li:nth-child(1) { background-color: #dB7093; } .popular-posts ul li:nth-child(2) { background-color: #00bcd4; } .popular-posts ul li:nth-child(3) { background-color: #009688; } .popular-posts ul li:nth-child(4) { background-color: #9932cc; } .popular-posts ul li:nth-child(5) { background-color: #cddc39; } .popular-posts ul li:nth-child(6) { background-color: #00ff00; } .popular-posts ul li:nth-child(7) { background-color: #ffc107; } .popular-posts ul li:nth-child(8) { background-color: #ff9800; } .popular-posts ul li:nth-child(9) { background-color: #dc143c; } .popular-posts ul li:nth-child(10) { background-color: #808000; } .popular-posts ul li:hover { background-color: #757575; } .popular-posts ul li a { color: #FFF; text-decoration: none; } .popular-posts ul li a:hover { color: #EEE; } .popular-posts ul li img { width: 42px; height: 42px; position: absolute; padding: inherit; border-radius: 50%; overflow: hidden; left: 15px; border: 0; display: inline-block; vertical-align: middle; }
Note: Ganti kode warna sesuai keinginan
4.Simpan Tema
5.Jangan lupa kalian harus sudah memasang widget popular post di sidebar melalui tata letak
Cara memasang Widget Popular Post Desain Grid Layout di Blog
1.Login blogger
2.Buka Dashboard>>Tema>>Edit HTML
3.Cari kode ]]></b:skin> dan kalian pastekan kode berikut tepat di atasnya
.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;}
4.Klik simpan tema
5.Jangan lupa kalian juga harus memasang widget popular post di sidebar
Kesimpulan
Kalian bisa memilih dari beberapa script di atas yang menurut kalian keren dan cocok di pasang di template blog kalian.
Sekian artikel Cara Membuat Widget Popular Post keren di Blogger.
test
BalasHapus