membuat widget popular post Blogger lebih menarik – Yosh , Selamat Pagi, siang, sore, malam Sobat wahid emalution.
udah lama saya gak posting karena binggung apa yang mau di posting 😂. Tapi sekarang saya mulai Aktif lagi nih, dan kali ini saya mau membagian tutorial cara membuat widget popular post lebih menarik pada Blogger. Langsung saja kita ke Tutorialnya
- login ke Blogger.com
- lalu sobat masuk ke template lalu edit HTML, dan letakan kode dibawah ini di atas ]]></b:skin> atau </style>
.PopularPosts .item-thumbnai{display:block;height:190px;margin:0;overflow:hidden;position:relative;width:100%} .PopularPosts .item-title{position:relative} .PopularPosts img{display:block;height:auto;position:absolute;width:100%} .item-title a{background:none;color:transparent;font-family:Oswald;font-size:17px;font-weight:400;padding:10px 0;padding-right:300px;position:absolute;right:0;text-align:center;top:0;width:100%;transition:all 0.2s ease-out} .item-title a:hover{background:#f97e76;color:#fff;padding-right:0} .item-snippet{background:none;color:rgba(0,0,0,0.3);font-weight:normal;left:12%;padding:10px;position:absolute;text-align:center;top:95px;width:70%;transition:all 0.2s ease-out} .item-snippet:hover{background:#4f5a66;color:#FFFFFF} .item-content{position:relative}
3. Lalu Letakan Javascript Dibawah Diatas </body>
<script type=\'text/javascript\'> $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});}); </script> <script type=\'text/javascript\'> //<![CDATA[ // Popular Posts customization // Trim Code $(\'.popular-posts ul li .item-snippet\').each(function(){ var txt=$(this).text().substr(0,120); var j=txt.lastIndexOf(\' \'); if(j>10) $(this).text(txt.substr(0,j).replace(/[?,!\\.-:;]*$/,\'...\')); }); //]]> </script>
4. Setelah itu Simpan Template dan Lihat Hasilnya.
Sekian tutorial kali ini, Semoga Bermanfaat untuk sobat semua, dan tunggu tutorial lainnya dari Emalution.