Cara Mengganti Tombol Back To Top Pada Template Viomagz - WESTOIKU

Siapa sih yang nggak kenal dengan template yang satu ini..

Ya ..betul..

Template viomagz yang satu ini memang sudah sangat melegendaris di dunia internet ,, template yang satu ini adalah hasil buatan dari mas sugeng.

Hampir semua para pengguna blogger pasti sudah pernah mencobanya.

Dengan tampilan yang sangat keren dan juga menarik , di tambah lagi tampilanya sangat responsive.

Sebelum kita lanjut ke pembahasan artikel yang nantinya akan tertuju ke topik yang berjudul.. " cara mengganti tombol back to top pada template viomagz ".

Kenali dulu !

DEMO

Kelebihan :

• Responsive 100% tampilan responsive di semua ukuran layar.
• SEO Ready tidak perlu repot otak atik kode template supaya SEO karena sudah di optimalkan.
• Fast Loading loading super cepat tanpa mengorbankan desain.
• Ads Optimized terdapat fitur slot iklan otomatis di tengah artikel dan di bawah artikel untuk membantu meningkatkan CTR iklan.
• Support Fitur Desainer Template Blogger jika sobat merasa kurang suka dengan warna default template ini , sobat bisa mengubahnya melalui menu desainer tema blogger.
• Menggunakan Schema MarkUp Schema markup membantu mesin pencari untuk memahami blog sobat.
• BreadCrumb Navigation
• Auto ReadMore
• Pop-up Search Form
• Widget Sticky
• Widget Related Posts
• Tombol Berbagi Responsive Keren
• Numbered Page Navigation
• Back To Top Button
• Custom Error Page
• Tanpa Link Kredit
• Lainya akan menyusul di versi terbaru

HARGA TEMPLATE

Jika di luar Negeri, template seperti ini biasanya dibandrol dengan harga 15 sampai 25 dollar, atau sekitar 300ribu rupiah. Untuk template ini di jual 220ribu saja, tapi tidak menutup kemungkinan harganya akan di naikan pada versi-versi berikutnya.

Jika sobat tertarik dengan tema ini, silakan langsung dibeli saja daripada nanti harganya keburu naik.

PESAN SEKARANG JUGA :

Bagaimana apakah sobat tertarik.

Ok..sekarang kita lanjut ke topik pembahasanya , yaitu merubah tombol back template viomagz..

Cara Merubah Icon Back To Top Button 

1. Masuk ke akun blogger.

2. Pilih pengaturan.

3. Klik " Thema " dan " Edit HTML "

4. Silahkan Cari kode yang seperti ini dan hapus terlebih dahulu.

ini code nya gaes..

/* Back to top */
#Back-to-top {

background: #1B699D;
color: #ffffff;
padding: 6px 8px;
font-size:24px;
border-radius: 22px;
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}
.back-to-top svg {
width:24px;
height:24px;
vertical-align: middle;
margin-top: -5px;
}
.back-to-top svg path {
fill: #ffffff;
}

5. Kemudian ganti dengan kode dibawah ini

ini code nya gaes..

/* Back to top */
#back-to-top {

background:rgba(0,0,0,.4);
color:#ffffff;
padding:16px 18px;
font-size:12px;
border-radius:24px
}
.back-to-top {
position:fixed!important;
position:absolute;
bottom:23px;
right:18px;
z-index:998
}
.back-to-top svg {
width:12px;
height:12px;
vertical-align:middle
}
.back-to-top svg path {
fill:#ffffff
}

6. Selanjutnya cari kode dibawah ini dan hapus

ini code nya gaes..

<div class='back-to-top'><a aria-label='back to top' href='#' id='back-to-top' title='back to top'><svg viewBox='0 0 24 24'><path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'></path></svg></a></div>

7. Kemudian ganti dengan kode dibawah ini

ini code nya gaes..

<div class='back-to-top'><a aria-label='back to top' href='#' id='back-to-top' title='back to top'><svg viewBox='0 0 24 24'><path d='M1,21H23L12,2'></path></svg></a></div>

8. Selesai.

Proses berhasil dan tampilan tombol back to top button kini sudah berubah menjadi lebih dan menarik.

Sebenarnya tombol back to top button default pun sudah cukup keren dan menarik , apalagi dengan tampilanya yang begitu responsive.

Baca juga :

Cara Merubah Tombol Search Viomagz