Cara memperbaiki 10 Item Template Evo magz

Template Evo Magz adalh template yang sangat menarik dan SEO dan di bagikan secara gratis oleh pemilik, penulis akan sedikit membagikan beberapa cara senderhana, pada pembahasan ini tidak mengurangin fungsi dasar template tersebut hanya sedikit otak-atik saja oleh penulis, pada pembahasan ini, cara hapus description tampilan home, hapus tulisan Add comment dan label di home, hapus Read more, garis warna - warni di bawah navigasi/menu, mengganti warna dan angkah pada widget popular post, sebelum ikut panduan ini silakan lihat Demo

Mohon maaf jika judul artikel ini tidak sesuai, penulis binggung memberi judul yang cocok karena membahas 10 point.

1. Cara menghapus description pada halaman depan blog pada template evo magz

Mungkin anda sebagai admin blog yang menggunakan template evo magz, pada home, ingin tampil gambar, judul artikel menampilkan gambar dan judul di home blog nya.

a. Cari kode di bawah ini yang di berika warna merah silakan di hapus.

Kode warna merah dihapus

Sesudah dihapus description akan gambar besar dan ruang kosong di bawah judul, akan kelihatan sangat kurang menarik, oleh karena hal tersebut dilakukan pengaturan gambar.

b. Mengatur gambar/tumbnail tampilan desktop dan seluller

Hapus Kode ini

.img-thumbnail img {
width:200px;
height:150px;
}

Ubah lebah dan tinggi gambar, Anda bisa menyesuaikan ukuran gambarnya.

Ganti dengan Kode ini

.img-thumbnail img {
width:177px;
height:90px;
}

Langkah berikut masih dalam mengantur lebih dan tinggi gambar di tampilan halaman depan

Cari dan Hapus kode

.img-thumbnail {
background:#f0f0f0;
position:relative;
float:left;
width:200px;
height:150px;
margin:3px 15px 3px 0;
}

Ganti dengan kode ini

.img-thumbnail {
background:#f0f0f0;
position:relative;
float:left;
width:177px;
height:117px;
margin:3px 15px 3px 0;

Kode berikut ini akan mulai mengubah tampilan thumbnail/gambar saat lebar viewport berada pada maksimal 480 piksel dan di bawahnya:

Cari Kode

@media only screen and (max-width:480px){
.img-thumbnail, .img-thumbnail img {
width:120px;
height:90px;

Ubah lebar dan tinggi gambar menjadi seperti kode di bawah
width:74px;
height:74px;

Kode berikut ini akan mulai mengubah tampilan thumbnail/gambar saat lebar viewport berada pada maksimal 320 piksel dan di bawahnya:

Kode

@media screen and (max-width:320px){
.img-thumbnail, .img-thumbnail img {
width:100px;
height:80px;
}

Ubah lebar dan tinggi seperti di bawah ini:
width:74px;
height:74px;

2. Hapus Add komentar dan label

Pada halaman home blog menggunakan template evo magz, jika label dalam satu artikel lebih dari satu biji akan memakan ruang saat pengunjung menggunakan seluller seperti gambar di atas.

Cari dan hapus kode

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

<i class='fa fa-comments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if></a></span></b:if></b:if></b:if>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

</b:loop></span></b:if>

<b:include data='post' name='postQuickEdit'/>

</div>

Ganti dengan kode ini

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<i class=''/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'></b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if></a></span></b:if></b:if></b:if>
<b:if cond='data:post.labels'>
<span class='label-info'>
<i class=''/>
<b:loop values='data:post.labels' var='label'>

3. Hapus ikon Read more

Setela menghapus deskripsi, masih tersisa tombol read more.

Cari dan hapus kode

4. Cara Menghapus Multi Tabs Sidebar Widget pada Template Evomagz

Pada bagian sidebar widget ada tiga tab, memang multi tabs tersebut sangat menarik dan menghemat ruang pada sidebar, yang menjadi permasalahan bila anda hanya ingin memasang hanya satu widget saja seperti artikel terbaru.

Cari dan hapus Kode

5. Menghilangkan Garis Warna Warni Template Evo Magz

Anda bisa melihat garis warna - warni di bawah menu

Cari dan hapus Kode

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewgW0IinDBQ9LXW6Olw-1a_DrNhBm8p9ipC80HwS0NnPnhwHGuQ1iHKeYCCQY3VTUbmBM3tGa2T_k2LygH-w5Ui28V9rNNDRwfiEaLw9xeJc4VQWJ0yL4j0KgwBlnUnbkKkJg2k5PE0xV/s1600/line.png);

6.Cara Mengganti Warna Widget Popular Post

Tahapan ini cara ubah warna widget popular post, pada kode warna yang di tandai merah silakan di ubah sesuai dengan ke ingin anda, misalnya warna putih kode #FFFFFF

Cari kode dan ubah

7. Cara Menghapus Hitungan Angka Widget Popular Post

Jika anda memasangan widget popular post maka akan muncul angkah di samping judul, angkah - angkah tersebut kita akan hapus.

Cari dan hapus Kode

.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}

Ganti dengan Kode ini

.PopularPosts ul li {
margin:0 0 0 0 !important; padding:10px 20px 10px 10px !important; border-bottom:1px solid #dcdcdc; list-style: none; }
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#00af03 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:none !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}

8. Ikon
content:"\f061";
hapus dikasih warna merah

9. Hapus gambar pleas sharing

samping tombol sharing anda akan melihat gambar yang bertulis pleas sharing.

Cari dan hapus kode

.share-buttons-box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJvAcPsLUH-gzEglelufCK7JGdN2SjxLVOuIVR9Wo0ParPDHjZCZkmBVYqTLrMYi_Qa4awwI0DgMGJGf5HH4hQTrz9f6Wou6GDxx9InfHAogN-snfmCu7OfgcE5NSnXw0hUQLYWZ1BfLT/s1600/share.png) no-repeat 330px 10px;

10. Perbaiki tombol sharing twitter

Tombol bagikan twitter tidak sejajar dengan tombol yang lain

Cari kode
.share-buttonsx .tweet {
margin-top: 41px;

Ubah
margin-top: 0px;

Demikian semoga membantu.