Cara mengganti back button template Contempo

Template bawaan blogger yang paling favorit adalah contempo. Meskipun saudara - saudaranya tak kalah keren, entah kenapa saya merasa terlanjur menjatuhkan pilihan padanya sehingga template soho, emporio dan notable dengan terpaksa harus diarsipkan. Nalagila pun dulu awal - awal menggunakan template default blogger tersebut setelah sebelumnya pernah pakai template yang katanya SEO friendly. Demi lolos pendaftaran Google Adsense template Contempolah yang jadi pilihan.

Setelah diterima Adsense datang kabar bahwa blog yang menggunakan tema AMP punya nilai plus dimata search engine. Karena pertimbangan ini dan itu akhirnya saya beralih ke template AMP. Di tema ini saya tak bisa bebas berekspresi dengan kode HTML, padahal tujuan ngeblog salah satunya adalah belajar HTML.

Minimnya pengetahuan tentang template AMP akhirnya saya buat blog baru yang dikhususkan untuk otak - atik tema, bisa dikatakan bahwa blog ini untuk praktek optimasi template Contempo. Kegiatan oprek template terinspirasi dari mas sofyan ( admin editemablog.net ) yang setiap hari terus bereksperiment dengan tema blog.

Mungkin ini bukanlah edit tema, karena pada dasarnya saya hanya comot  kode sana - sini dan menerapkan di template contempo. namun ada satu momment dimana cara ini saya temukan sendiri alias tidak nyontek dari google. yap benar, akhirnya saya bisa mengubah tombol back di tema contempo menjadi tombol hamburger menu.

Cara mengganti tombol kembali ke home menjadi hamburger menu

Kalau tak salah ingat saya sempat menanyakan hal ini kepada mas sofyan, namun saya paham bahwa beliau punya kesibukan luar biasa di dunia nyata. sambil menunggu jawaban beliau saya coba praktek sendiri dan alhamdulillah berhasil.

Pertama dan selalu, backup template. Caranya masuk ke menu Tema - pilih backup dan pulihkan - pilih download file.

Kedua, cari kode class='return_link',  agar tidak salah edit, silakan cocokkan css return_link' dengan kode dibawah ini :

               <b:if cond='data:view.isSingleItem'>
                  <a class='return_link' expr:href='data:blog.homepageUrl'>
                    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
                  </a>
                <b:else/>
                  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
                </b:if> 

Selanjutnya yaitu langkah ketiga adalah menghapus semua kode tersebut dan ganti dengan kode dibawah ini:

               <b:if cond='data:view.isSingleItem'>
<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
<b:else/>
                  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
                </b:if>

                
                  
                

Sekarang tekan save dan lihat hasilnya, demonya bisa sobat cek di akhir post ini. Jangan lupa test di perangkat mobile untuk memastikan bahwa tombol hamburger menu mengarah ke sidebar ( tidak mengarah halaman depan blog ).Bagaimana, mudah kan?

Reaksi:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser