Cara Merubah Tampilan Viomagz v.2.2 Menjadi seperti tampilan Viomagz v.2.4

Saya yakin  jika kamu telah membeli template viomagz  mas sugeng, maka kamu akan dapat pembaruan atau update secara gratis. Template ini memang populer dikalangan blogger, sehingga banyak dinanti update terbaru dan versi viomagz terbaru dari mas sugeng.

Jika ingin tahu lebih banyak tentang template Fenomenal ini dan juga tutorial lainnya mengenai cara mengedit Viomagz, bisa anda baca di >>Viomagz ! Template Blogger Responsive Yang Sangat Populer

Pada saat ada pembaharuan maka tentu kamu akan mendownload secara legal versi barunya dari mas sugeng . Tapi bagaimana cara upgrade versi template blog kita ke versi terbaru update dari mas sugeng? Misalnya begini, versi viomagz v.2.2 sudah kita pakai di blog, sudah kita edit bagian navigasi, kode verifikasi adsense, kode webmaster google dan segala kode yang kita tambahkan ke template kita.

Pada pertengahan bulan template viomagz ada pembaruan menjadi v.2.3 karena design tampilan yang hampir gak berubah kita tetap gak mengupgrade. Lalu tiba tiba ada pembaruan menjadi versi 2.4 dimana pada versi ini menu header menggunakan warna biru gradient, desain post populer pun ada perubahan.

Tampilan VioMagz v.2.2

Melihat tampilan viomagz yang berubah ini, tentu sebagian blogger di beri kebimbangan dan dilema antara upgrade dan tidak.  Padahal sudah kepincut dengan tampilan baru viomagz v.2.4. Jika Upgrade ke versi viomagz v.2.4 maka semua perubahan yang dilakukan akan kembali seperti semula.

Tapi jika tetap ingin mempertahankan template yang ada, maka template kita jadi kelihatan tidak update. Lalu bagaimana caranya tempalte kita kelihatan mengikuti design terbaru viomagz v.2.2 menjadi kelihatan seperti viomagz v.2.4.

Sebenarnya caranya cukup gampang, oke mari kita coba ubah tampilan viomagz v.22 menjadi tampilan viomagz v.2.4

pertama tama pada menu edit template>Html cari kode berikut, letaknya ada dibawah #header-container

{
background: $(header.background.color);
    color: #fff;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
    position: fixed;
top: 0;
left: 0;
right: 0;
    width: 100%;
    z-index: 999;

lalu hapus kode tersebut dan ganti dengan kode dibawah ini

{
background: #5b86e5;
background: linear-gradient(to right, #5b86e5, #36d1dc);
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}

Lalu selanjutanya kemudian cari lagi kode Popular post, lalu hapus dan ganti semua kode dibawahnya

.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
border-left:1px solid #efefef;
border-right:1px solid #efefef;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 0 0 !important;
counter-increment: num;
position: relative;
border-top:1px solid #efefef;
padding: 8px 10px;
}
.PopularPosts ul li:last-child {
border-bottom:1px solid #efefef;
}
.PopularPosts li:nth-child(odd) {
background: #efefef;
}
.PopularPosts li:nth-child(even) {
background: #f8f8f8;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: $(link.hover.color);
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: $(link.color);
}
.PopularPosts .item-title {
    line-height: 1.6;
}
.PopularPosts .item-thumbnail {
float: left;
margin: 3px 8px 0 0;
}
.PopularPosts .item-snippet {
    line-height: 1.7em;
    color: #888;
font-size: 14px;
margin-top: 8px;
}

ganti kode tersebut diatas dengan kode berikut ini

.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 10px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: #444444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
content: counter(num) !important;
font-size: 30px;
font-weight: 500;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(#49ACE1, #fff);
color: #fff !important;
width: 30px;
padding-top: 10px;
text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
margin-left: 34px;
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
}

lalu save dan simpan hasil edit html yang kita buat.
dan lihat hasilnya.

Bandingkan dengan gambar pertama diatas dan lihat perubahannya. semoga tips ini bisa membantu yang ingin merubah tampilan blognya tapi tidak mau upgrade template baru karena takut kehilangan perubahan yang sudah dibuat.