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 :)

Berbagi :