How to : Customize Popular Post Widget to Grid Style

Tolong abaikan saja thumbnailnya :'v. Itu cuma cogan Chicago yang barusan graduate dari SMRookies, doain dia cepet debut ya :3 ((oy itu oot oy)) Jadi sekarang, saya akan membagikan tutorial kepada kalian berupa cara menkustomisasikan widget popular post. Menjadi grid style. Sebelum itu perlu diinformasikan bahwa original code dari tutorial ini berasal dari http://helplogger.blogspot.co.id/

preview

Pertama, mari buka Blogger, lalu Template kemudian Edit HTML. Setelah itu cari kode </head> dengan menggunakan ctrl+f agar lebih mudah.

Kemudian setelah kode tadi ketemu copy kemudian pastekan kode dibawah ini tepat DIATAS kode </head> itu

<style type="text/css"></p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> padding: 0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul li:first-child{</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> width: 100%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> max-height: 100%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> opacity: 0.9;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul li:nth-child(even){</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> margin-right: 2%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul li {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> box-sizing: border-box;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> position: relative;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> padding: 0px !important;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> width: 49%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> max-height: 120px;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> opacity: 0.4;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> overflow:hidden;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> float: left;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> margin-bottom: 2%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> -webkit-transition: all 0.5s ease 0s;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> -moz-transition: all 0.5s ease 0s;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> -ms-transition: all 0.5s ease 0s;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> -o-transition: all 0.5s ease 0s;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> transition: all 0.5s ease 0s;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul li:hover {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> opacity: 1;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts .item-thumbnail {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> margin: 0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> width: 100%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts ul li img {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> box-sizing: border-box;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> width: 100%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> height: 100%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> object-fit: cover;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> padding:0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts .item-content:hover .item-title a,</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> visibility: visible;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> opacity: 1;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts .item-title a {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> color: #fff;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> 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%);</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> text-decoration: none;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> position: absolute;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> text-align: center;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> font: 13px 'Oswald', sans-serif;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> left: 0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> right: 0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> bottom: 0%;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> padding: 100px 10px 10px;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> opacity: 0;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> visibility: hidden;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> .sidebar .PopularPosts .item-snippet {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> display: none;</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p> </style></p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         <script type='text/javascript'></p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         $(document).ready(function() {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>           $("a[href^='http://']").each(</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>             function(){</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>              if(this.href.indexOf(location.hostname) == -1) {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>                 $(this).attr('target', '_blank');</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>               }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>             }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>           );</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         $("a[href^='https://']").each(</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         function(){</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         if(this.href.indexOf(location.hostname) == -1) {</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         $(this).attr('target', '_blank');</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         }</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         );</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         });</p> </div> <div data-blogger-escaped-style="text-align: justify;" style="text-align: justify;"> <p>         </script></p> </div>

Setelah itu Save. Barulah pasang widget Popular Post diblogmu. Nanti akan tampak seperti preview yang telah saya suguhkan diatas. Selamat mencoba^^