CARA MENGUBAH UKURAN THUMBNAIL POPULAR POSTS TERBARU

CARA MENGUBAH UKURAN THUMBNAIL POPULAR POSTS TERBARU
pada kesempatan kali ini saya akan memberikan tutorial cara mengubah ukuran thumbnail/gambar pada popular post blogger. Secara default, gambar yang dipanggil pada widget popular post berukuran tinggi 72 px dan lebar 72 px. Artinya dengan ukuran default sekecil itu ketika kita mengubah ukurannya dengan memainkan css, hasilnya akan tampak blurry. Jadi untuk mengatasi hal tersebut, kita perlu melakukan tweaking pada template blog kita.

Ada beberapa cara yang bisa kita lakukan untuk memperbesar ukuran thumbnail popular posts tanpa mengurangi kualitasnya seperti dengan menggunakan javascript dan mengedit langsung line html pada widget popular post.

#Menggunakan javascript

Kebanyakan para blogger menggunakan metode ini karena kemudahannya, cukup instal scriptnya, lakukan modifikasi pada style sheet, simpan dan selesai. Contoh javascript dengan fungsi ini salah satunya sebagai berikut
<script type="text/javascript">
//<![CDATA[
function toggle_visibility(l){var e=document.getElementById(l);"block"==e.style.display?e.style.display="none":e.style.display="block"};<br>function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("PopularPosts1",300);
//]]>
</script>

dimana PopularPost1 adalah Id widgetnya dan 300 adalah ukuran gambarnya, 300px pada tinggi dan lebarnya.

#Mengedit Langsung Struktur Html Widget Popular Post

Jika cara diatas dengan menggunakan javascript tidak berhasil, artinya popular post pada blog kalian mungkin menggunakan format baru, bisa kita lihat pada berubahnya format s1600 (umumnya) menjadi w72-h72-p-nu pada thumbnail. contohnya seperti pada alamat gambar ini: https://3.bp.blogspot.com/-PG46PArw7_8/UtqtcpovAxI/AAAAAAAAAQA/SjXLapwm3GQ/w72-h72-p-nu/fashion-king...
Nah untuk mengatasi hal ini, bisa dengan mengedit langsung pada html widget popular posts. caranya yaitu masuk ke template editor, pada tulisan lompat ke widget, silahkan cari widget popular post kalian, umumnya PopularPost1 lalu expand sampai kalian menemukan tulisan ini:
 <img alt="" border="0" expr:src="resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)" />
Perhatikan angka 72 tersebut, itu adalah yang merujuk pada ukuran tinggi dan lebarnya 72 px. Nah kalian bisa merubah angka 72 ini dengan ukuran yang kalian inginkan.

#Styling Popular Post
Jika kita sudah mengubah ukuran thumbnail popular post, hal terakhir yang perlu kita lakukan adalah styling pada css. contoh salah satu kode css yang saya ambil di helplogger:

.sidebar .PopularPosts ul {padding:0;}
.sidebar .PopularPosts ul li:first-child{width:100%!important;max-height:100%;height:150px;opacity:.9}
.sidebar .popular-posts ul li:first-child img{border:0!important}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right:2%}
.sidebar .PopularPosts ul li {
box-sizing: border-box;position: relative;
padding: 0px !important;width:49%;
max-height: 120px;opacity: 0.8;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%}
.sidebar .PopularPosts .item-thumbnail:first-child{margin: 0;width:100%;height:100%}
.sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height:100%;object-fit: cover;padding:0;border:5px solid #F6F5E9}
.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!important;
left: 0;right: 0;bottom: 0%;padding: 100px 10px 10px;opacity: 0;visibility: hidden;}
.sidebar .PopularPosts .item-snippet {display: none;}


silahkan cari atau edit kode css sesuai dengan keinginan kalian.
note: Sebaiknya dibackup dulu template kalian sebelum mengeditnya...

Blogger (4)
Disqus

4 komentar

Tulis Komentar

kalau aku yg diubah itu yg perbandingannya mas, jadi misal 1:1 aku ubah jadi 3:2

Balas

mmm rasionya ya mas, sebenarnya kalo hanya rasionya yg dirubah gambarnya jd blurry

Balas

Kebetulan saya teh sedang nyari - nyari cara mengubah ukuran thumbnail popular post,, eh akhirnya nemu juga disini,,, sekarang mah lagi nyari2 buat bikin menu floating kayak di blog ini,,,:D

Balas

kalo menu yg saya pake ini namanya reactive+ auto-hide sticky header dari osvaldas. tutornya silahkan lihat di http://osvaldas.info/auto-hide-sticky-header

Balas