4 Bentuk Populer Post Keren

Sahabat Ngonline06 ingin membentuk widget populer postnya keren, seperti pada gambar di atas? Jangan khawatir, pada kesempatan ini, Ngonline06 akan berbagi tips mengubah tampilan widget populer post menjadi lebih indah dan menawan.

Mengapa Perlu Dirubah dan Dipercantik?

Pertanyaan seperti ini sebenarnya mudah dijawab, namun agar semakin mantap, maka Ngonline06 akan sedikit sharing tentang alasan mempercantik tampilan. Yups, blog harus dirawat dan dipercantik. Ini mutlak dan harus dilakukan oleh pemilik blog. Terlebih jika blog tersebut adalah blog kesayangan. Blog dipercantik selain memberi semangat tersendiri pada pemilik blog, juga memberi nilai plus kepada pengunjung blog. Mereka akan berlama-lama untuk membaca, memperhatikan, atau bahkan hanya melihat-lihat tampilan blog kita. Jika ini terjadi, tentu sangat menggembirakan buat kita selaku pemilik blog bukan? Maka jangan ragu untuk mempercantik blog.

Cara Merubah Tampilan Widget Popular Post menjadi Keren

OK, langsung saja setelah sahabat mengetahui maksud dan tujuan mempercantik widget, maka sekarang kita akan mengetahui cara merubahnya. Cara yang Ngonline06 ajarkan ini insya Allah tidak sulit, apalagi untuk sahabat yang tidak ingin atau tidak paham tentang kode HTML. Mereka kadang 'menjauhi' jika tutorialnya harus merubah-ubah html blog. Maka mengantisipasi itu, Ngonline06 akan memberikan trik merubah tampilannya tanpa otak-atik html blog. Silahkan ikuti saja langkah demi langkah berikut:

1. Masuk ke dashboard blog.
2. Pilih menu template
3. Klik 'Sesuaikan' (samping Edit HTML)

4. Pilih 'Sesuaikan lebar' hingga muncul tulisan 'Tambahkan CSS'
5. Isikan kode CSS widget popular post keren dari 4 bentuk yang akan diuraikan di bawah ini ke dalamnya.

Kode CSS dari 4 Bentuk Popular Post Keren

#Style Pertama

Kode CSSnya adalah sebagai berikut: (Sahabat cukup mengeklik kotak dan silahkan copy atau tekan ctrl+c)

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

#Style Kedua

Kode CSSnya adalah sebagai berikut:

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

#Style Ketiga

Kode CSSnya adalah sebagai berikut:

#PopularPosts1 h2{<br /> position:relative;<br /> right:-2px;<br /> padding:8px 63px 6px 17px;<br /> width:100%;<br /> margin:0;<br /> font-size:16px;<br /> background:#4F4F4F; /* Background color */<br /> color:#f2f2f2; /* Color of the widget's title */<br /> text-align:left;<br /> text-indent:18px;<br /> }<br /> #PopularPosts1 h2:before{<br /> position:absolute;<br /> content:"";<br /> top:36px;<br /> right:0px;<br /> width: 0px;<br /> height: 0px;<br /> border-bottom:12px outset transparent;<br /> border-left:12px solid #000000;<br /> }<br /> #PopularPosts1 h2:after{<br /> position:absolute;<br /> content:"";<br /> top:-6px;<br /> left:-5px;<br /> width: 0px;<br /> height: 0px;<br /> border-bottom:24px outset transparent;<br /> border-top:24px outset transparent;<br /> border-left:24px solid #ffffff; /* Arrow background color on the left */<br /> }<br /> #PopularPosts1 ul{<br /> list-style:none;<br /> counter-reset:li;<br /> padding:10px;<br /> left:-8px;<br /> width:100%;<br /> }<br /> #PopularPosts1 li{<br /> width:100%;<br /> position:relative;<br /> left:0;<br /> margin:7px 0 16px 12px;<br /> padding:10px  4px 0 5px;<br /> }<br /> #PopularPosts1 ul li:before{<br /> content:counter(li);<br /> counter-increment:li;<br /> position:absolute;<br /> top:-2px;<br /> left:-20px;<br /> font-size:35px;<br /> width:20px;<br /> color:#888888;<br /> }<br /> <br /> #PopularPosts1 ul li a{<br /> display:block;<br /> font-size:16px; /* Font size of the links */<br /> color: #666; /* Color of the links */<br /> text-decoration:none;<br /> transition: all .1s ease-in-out;font-weight: bold;<br /> }<br /> #PopularPosts1 ul li a:hover{<br /> color:#3366FF;<br /> margin-left:3px;<br /> }

#Style Keempat

Kode CSSnya adalah sebagai berikut:

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

Demikian 4 bentuk widget popular post yang keren dan tentunya akan mempercantik tampilan blog sahabat Ngonline06. OK, semoga berhasil ya.