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

Ajian Tepuk bantal Bikin Wanita Pujaan Hati Bertekuk Lutut
Gambar
Cerita Naskah Drama 6 Tokoh   “ Anak Durhaka ”
Mengapa Faktor Ekonomi Dianggap Sebagai Penyebab Utama Meningkatnya Angka Putus Sekolah
Makalah Observasi Ojt Alfamart 2019
Gambar
Tugas Kliping Tarian Nusantara Lengkap Langsung Print
Mengapa para ahli banyak melakukan penelitian manusia purba di bantaran sungai
Kesan awal kunjungan ke toko alfamart Observasi toko
TUGAS  PRAKARYA BUDIDAYA HEWAN KESAYANGAN