Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara merubah Thumbnail di Halaman Blog seperti Mastimon.com

Selamat Hari raya Idul fitri buat Sahabat bloger :) Kalian yang baca ini pasti masih pemula dan belum Mastah seperti mas timon yang sudah lama Meramaikan Khasanah Perbloggan di indonesia , Jika kalian membuka situs mas timon dengan mengggunkan ponsel maka tampilan thumnail/Gambar hanya berukuran kecil dan berada di samping judul seperti di bawah ini:


Untuk kali ini saya akan memaparkan ddengan jelas dan gamblang bagaimana sih cara membuat Thumnail blog seperti milik mas timon/ mastimon.com  langsung saja tanpa panjang lebar simak penjelasan berikut ini:

1. Masuk ke Blog Mas Timon 
2. Inspeksi Elemen





4. Cari Kode Seperti di bawah ini :

@media only screen and (max-width:768px){
#post-wrapper, #sidebar-wrapper {
float:none;
width:100%;
max-width:100%
}
.post-container {
padding: 0 0 20px 0;
}
}
@media only screen and (max-width:640px){
#wrapper {
padding: 70px 15px 15px;
}
#cssmenu > ul > li > a {
padding: 12px 15px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 15px;
padding-right: 15px;
}
.button {
margin-left: 15px;
}
#post-wrapper, #sidebar-wrapper {
float:none;
width:100%;
max-width:100%
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 190px;
}
.search-icon {
right: 15px;
}
}
@media only screen and (max-width:480px){
#wrapper {
padding: 70px 12px 12px;
}
#cssmenu > ul > li > a {
padding: 12px 12px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 12px;
padding-right: 12px;
}
#footer-navmenu ul li a {
margin: 0px 8px;
}
ul.nav-social li {
padding: 0px 8px;
}
.button {
margin-left: 12px;
}
.img-thumbnail {
float: right;
width: 100px;
height: auto;
margin: 3px 0px 0px 10px;
}
.img-thumbnail img {
width: 100px;
height: 67px;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 0px;
}
.post-snippet {
margin-top: 10px;
}
.post {
overflow: hidden;
}
h1{font-size:170%}
h2{font-size:150%}
h3{font-size:130%}
h4{font-size:120%}
h5{font-size:110%}
h6{font-size:100%}
h2.post-title {
font-size: 18px;
display: inline;
}
h1.post-title {
font-size: 24px;
}
.section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget, #blog-pager {
margin:0 0 20px;
}
.comments .comments-content .comment-replies{
margin-left:20px !important;
}
.comments .comment-block {
padding: 15px !important;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
iframe#comment-editor {
min-height: 270px;
}
#searchfs input[type="search"] {
font-size: 26px;
}
.FeaturedPost .post-summary h3 {
font-size: 20px;
margin: 0 10px;
}
.FeaturedPost .post-summary p {
margin: 0 10px;
}
.search-icon {
right: 12px;
}
#baca-juga {
max-width: 100%;
}
}
@media screen and (max-width:320px){
#wrapper {
padding: 70px 10px 10px;
}
#cssmenu > ul > li > a {
padding: 12px 10px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 10px;
padding-right: 10px;
}
.button {
margin-left: 10px;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 0px;
}
.search-icon {
right: 10px;
}
}
@media only screen and (max-width:480px){
#wrapper {
padding: 70px 12px 12px;
}
#cssmenu > ul > li > a {
padding: 12px 12px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 12px;
padding-right: 12px;
}
#footer-navmenu ul li a {
margin: 0px 8px;
}
ul.nav-social li {
padding: 0px 8px;
}
.button {
margin-left: 12px;
}
.img-thumbnail {
float: right;
width: 100px;
height: auto;
margin: 3px 0px 0px 10px;
}
.img-thumbnail img {
width: 100px;
height: 67px;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 0px;
}
.post-snippet {
margin-top: 10px;
}
.post {
overflow: hidden;
}
h1{font-size:170%}
h2{font-size:150%}
h3{font-size:130%}
h4{font-size:120%}
h5{font-size:110%}
h6{font-size:100%}
h2.post-title {
font-size: 18px;
display: inline;
}
h1.post-title {
font-size: 24px;
}
.section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget, #blog-pager {
margin:0 0 20px;
}
.comments .comments-content .comment-replies{
margin-left:20px !important;
}
.comments .comment-block {
padding: 15px !important;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
iframe#comment-editor {
min-height: 270px;
}
#searchfs input[type="search"] {
font-size: 26px;
}
.FeaturedPost .post-summary h3 {
font-size: 20px;
margin: 0 10px;
}
.FeaturedPost .post-summary p {
margin: 0 10px;
}
.search-icon {
right: 12px;
}
#baca-juga {
max-width: 100%;
}
}
@media screen and (max-width:320px){
#wrapper {
padding: 70px 10px 10px;
}
#cssmenu > ul > li > a {
padding: 12px 10px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 10px;
padding-right: 10px;
}
.button {
margin-left: 10px;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 0px;
}
.search-icon {
right: 10px;
}
}

5. Lalu Paste di HTML anda


  • Masuk ke Blog
  • TEMA
  • Edit HTML
  • Cari kode yang sama 



Selamat mencoba semoga berhasil termakasih sudah mampir semoga berkah :)

Posting Komentar untuk "Cara merubah Thumbnail di Halaman Blog seperti Mastimon.com"

POPULER SEPEKAN

Ayla Tabrak CBR di Purwokerto, Tawari Ganti Rugi Mobil dan Rumah, Ini Kata Saksi
Demit Masuk Google Maps, Ikuti Petunjuk Suara Google Maps Sopir Mobil Ini Malah Kesasar di Hutan
Viral Pria Tukar Mobil Avanza Dengan Bunga Jenis Ini
Jangan Coba Coba Sprite dan Insto ini Efeknya
Ajian Tepuk bantal Bikin Wanita Pujaan Hati Bertekuk Lutut
Gambar
Viral Wanita Cantik Penjual Rujak, Pria Beli 3 Kali dalam Sehari
Merinding!! VIDEO Viral Pocong Rebahan Hadang Pengendara Mobil di Cipari Cilacap
Diguyur Hujan Semalaman, 4 Desa di Cilacap Kembali Tergenang Banjir
Gambar