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