-->
Cara Memperbaiki 10 Item Template Evo Magz
4/ 5 stars - "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 be...

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 goresan pena 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 kalau judul artikel ini tidak sesuai, penulis binggung memberi judul yang cocok alasannya membahas 10 point.

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


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

a. Cari isyarat 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 alasannya 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 dapat 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 isyarat 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 ketika 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 ibarat isyarat di bawah
width:74px;
height:74px;

Kode berikut ini akan mulai mengubah tampilan thumbnail/gambar ketika 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 ibarat di bawah ini:
width:74px;
height:74px;

2. Hapus Add komentar dan label

Pada halaman home blog memakai template evo magz, kalau label dalam satu artikel lebih dari satu biji akan memakan ruang ketika pengunjung memakai seluller ibarat 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 isyarat 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 bab 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 ibarat 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 dapat melihat garis warna - warni di bawah menu

Cari dan hapus Kode
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikAcdCFOSPyAOdrpXpj0yd1p1RnZNrbQ4NFHFpeoiEwZoRw9cxbx5zXcOezkCkk1AgzHEZBqbCCFn2z-8qT8wxqymjIzhUSXyev9q6bsECG-_n6-jP4GBIi81qEP5M_rbT3sEIPuKy_VFn/s1600/line.png);

6.Cara Mengganti Warna Widget Popular Post

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

Cari isyarat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpFmrHWk5iSqWRwe-m5OfyVC3y_Ey2SMr8vMP-3KlfaUtQGgzMIkC0Ksq16hyphenhyphencqyryxFMg6VU-iiyjzJNe8X2XYlXtT6ZbFOFYNOqqNNz5ru50POlDbsuTDjJIRUb-3SjgiTLp29fvL9S/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 biar membantu.