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
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description'>
<div><data:post.snippet/></div>

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 != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
  <span class='comment-info'>
  <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 &gt; 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='fa fa-tags'/>
  <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop></span></b:if>
<b:include data='post' name='postQuickEdit'/>
</div>

Ganti dengan kode ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 &gt; 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'>
<a expr:href='data:label.url' rel='tag'></a><b:if cond='data:label.isLast != &quot;true&quot;'></b:if></b:loop></span></b:if>
<b:include data='post' name='postQuickEdit'/>
        </div>

3. Hapus ikon Read more

Setela menghapus deskripsi, masih tersisa tombol read more.

Cari dan hapus kode
<a class='readmore' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Read More <i class='fa fa-caret-right'/></a>

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
<div class='set set-1'>
    <b:section class='panel panel-1' id='panel-1' maxwidgets='4' preferred='yes'/>
<b:section class='panel panel-2' id='panel-2' maxwidgets='4' preferred='yes'/>
<b:section class='panel panel-3' id='panel-3' maxwidgets='4' preferred='yes'/>
  </div>
  <div class='clear'/>

5. Menghilangkan Garis Warna Warni Template Evo Magz

Anda bisa melihat garis warna - warni di bawah menu

Cari dan hapus Kode
background-image:url(//2.bp.blogspot.com/-yNE4A_H3C2o/U1E6RPYNEpI/AAAAAAAADRQ/UOP1mUKaxGE/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
<Group description="Popular Post 1-5" selector=".PopularPosts">
<Variable name="popular.post.color1" description="Color 1" type="color" default="#A51A5D" value="#A51A5D"/> <Variable name="popular.post.color2" description="Color 2" type="color" default="#F53477" value="#F53477"/>
<Variable name="popular.post.color3" description="Color 3" type="color" default="#FD7FAA" value="#FD7FAA"/>
<Variable name="popular.post.color4" description="Color 4" type="color" default="#FF9201" value="#FF9201"/>
     <Variable name="popular.post.color5" description="Color 5" type="color" default="#FDCB01" value="#FDCB01"/>
   </Group>
<Group description="Popular Post 5-10" selector=".PopularPosts">
<Variable name="popular.post.color6" description="Color 6" type="color" default="#DEDB00" value="#DEDB00"/>
<Variable name="popular.post.color7" description="Color 7" type="color" default="#89C237" value="#89C237"/>
<Variable name="popular.post.color8" description="Color 8" type="color" default="#44CCF2" value="#44CCF2"/>
<Variable name="popular.post.color9" description="Color 9" type="color" default="#01ACE2" value="#01ACE2"/>
<Variable name="popular.post.color10" description="Color 10" type="color" default="#94368E" value="#94368E"/>
   </Group>

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(//3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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.
Label:
data-matched-content-ui-type="image_sidebyside" data-matched-content-rows-num="4" data-matched-content-columns-num="1"

Untuk Membaca Artikel Terbaru:

5 Responses to "Cara memperbaiki 10 Item Template Evo magz"

  1. Template kita kan sama. Emang ga berat menggunakan template ini?
    Ko kecepatan situs saya lambat di versi mobile apa yang harus d perbaiki gan terlebih di sana menjelaskan menu drip down yang membuat berat

    ReplyDelete
    Replies
    1. Di komprss lagi gambarnya gan, klau bisa di populer pos tdk usaha pakai gambar aja lumayan kurangi loading, memang itu hanya pengaruh sedikit.

      Delete
  2. Kalau untuk tombol share twitter ga work gimana gan tapi ko beda tombol sharenya ya

    ReplyDelete
  3. Gan ane pake template evo magz 4.7 kok di homepage ga kluar thumbnail nya yaa, bisa bantu?

    ReplyDelete

Syarat komentar:
1. Mohon komentar sesuai dengan topik
2. Mohon jangan masukan link atau url hidup atau mati karena di anggap Sp@m.
3. Dengan profil dari Google+ akan di kunjungi balik jadi tidak perlu masukan link blog
4. Tidak boleh promosi dalam bentuk apa pun.