√Permak Blog Sederhana Dengan Fiksioner V4

Hy Bybok!

MasyaAllah, Alhamdulillah. Siapa sih yang nggak senang punya rumah baru? Membayangkan bisa renovasi rumah saja udah senang banget. Nah sebelum aku mampu renovasi rumah hunian nih, aku punya kesempatan bongkar rumahku yang lain. Iya benar sekali, aku sedang berusaha merenov tampilan blog menjadi lebih keren dan nyaman. Harapannya sih supaya blogku menjadi tempat ternyaman untuk mengukir memori lewat 2000 kataku. Sama seperti ketika sibuk menghias rumah, begitupun tampilan blog butuh sekali sentuhan keindahan. Kali ini aku akan permak blog sederhana dengan fiksioner V4.

Dalam coaching blogspedia materi ke 8 suprisingly, aku mendapat materi tentang cara mengutak-atik tampilan blog. Wah ini materi yang aku tunggu sih. Karena setiap blogwalking nggak bisa dipungkiri aku selalu memperhatikan tampilan blognya. Kalau nyaman dan enak dipandang jadi poin plus untuk berlama-lama menyelam didalamnya. Yang mengejutkan lagi, pengalaman kali ini mengharuskanku berkutat dengan kode HTML. Hehehe. Seorang iboksaurus yang biasanya sibuk dengan gawean rumah, kini harus belajar ngoding dong. Bagaimana keseruannya?

Bongkar Tampilan di Dashboard Blogger

Kata coach Marita, langkah pertama yang harus aku lakukan adalah memantapkan basic alias dasarnya dulu. Aku habiskan satu malam untuk mengutak atik tampilan lewat dashboard blogger. Berbekal tutorial dari coach, aku melakukan beberapa langkah ini:

1. Menambahkan Drop Down Menu

Entah karena udah larut malam atau bagaimana ya awal perjalananku terasa berat sekali. Karena nggak mudah ya memasang drop down menu. Jadi drop down menu adalah tampilan menu blog yang kalau diarahkah kursor pada tulisannya akan muncul sub menu dibawahnya. Pada awal percobaan aku berulang kali gagal. Wah nggak menyangka sekali akhirnya bisa membuat yang seperti itu. Bagaimana caranya?

Buka dashboard blogger, lalu pilih Tata Letak > Pilih bagian Menu, lalu pilih tanda pensil untuk mengedit > Copy kode HTML yang ada di bawah ini, lalu paste di bagian konten (isian dalam konten sebelumnya dihapus ya) > Jangan lupa klik simpan.

</div>

Tulisan bertanda warna pink, ku isi dengan nama blogku. Sedang yang berwarna biru isi dengan nama menu yang aku inginkan.

2. Menambahkan Tombol Back To Top

Perjalanan selanjutnya adalah memasang tombol back to top. Apa tuh? Tombol back to top adalah gambar arah panah ke atas yang melayang di halaman blog. Gunanya agar ketika membaca sampai bawah lalu ingin kembali keatas nggak perlu scroll terus-terusan. Sekali klik auto kembali ke halaman atas. Pengeditan kode HTML kali ini pun harus berulang dengan sabar, karena entah mengapa eror terus. Akhirnya aku berinisiatif mencari dan menemukan website Cara Manual. Begini caranya…

Masuk ke dashboard Blogger > Klik Tema > Edit HTML > Letakkan kode css ini sebelum kode ]]></b:skin> atau </style>

/* Back to top button caramanual.com */

visibility: hidden;text-align: center;

background-color: #777777;

width: 50px;line-height: 48px;bottom: 30px;padding-top: 2px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;-webkit-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;

background-color: #888888;

.scroll-top-wrapper.show {cursor:pointer;.scroll-top-wrapper i.fa {}

.scroll-top-wrapper {overflow: hidden;z-index: 99999999;height: 48px;border-bottom-left-radius: 10px;-moz-transition: all 0.5s ease-in-out;}}

opacity: 1.0;line-height: inherit;position: fixed;

color: #eeeeee;

-o-transition: all 0.5s ease-in-out;visibility:visible;

opacity: 0;right: 30px;.scroll-top-wrapper:hover {}

> Kemudian tambahkan kode ini sebelum kode </body>

$(function(){ $(document).on( 'scroll', function(){$('.scroll-top-wrapper').addClass('show');$('.scroll-top-wrapper').removeClass('show');$('.scroll-top-wrapper').on('click', scrollToTop);verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');

</script>

element = $('body');

offset = element.offset();}

if ($(window).scrollTop() > 100) {function scrollToTop() {offsetTop = offset.top;</span>

<script>} else {});

</div>

});}

> Klik simpan Tema

3. Menambahkan Banner Komunitas

Namanya juga sebuah blog yang akan banyak sekali di kunjungi orang. Dan rerata seorang pembaca blog tujuannya adalah mencari informasi atau ilmu. Maka itu perlu adanya pajangan banner komunitas. Gunanya untuk meyakinkan pembaca kalau pemilik blog adalah orang yang kompeten di bidangnya. Kali ini pun masih berkutat dengan kode HTML. Bagaimana caraku memasangnya?

Tetapi sebelum memasukkan kode HTML, aku memasukkan gambar logo komunitas dalam draft postingan. Nantinya aku perlu Copy Images Address dengan mengklik kanan gambar logo. Setelah itu masuk ke dalam langkah memasangnya.

Layout/Tata Letak > Aside > Tambahkan/Add gadget > HTML/JavaScript Gadget > isi title/judul dan content/konten dengan kode di bawah ini > simpan

Untuk tulisan berbackground pink, aku isi dengan alamat website komunitas. Untuk tulisan berbackground biru, aku isi dengan alamat logo yang aku cpoy dari draft postingan tadi.

4. Menambahkan Link Media Sosial

Ketika ingin berkenalan dengan seseorang pasti penasaran kan ya dengan media sosialnya. Begitupun sebuah blog, dengan menambahkan link media sosial akan lebih mudah untuk kepoin orangnya. Hehe. Orang beneran nggak nih yang punya blog? Atau akun abal-abal?

Bagaimana cara memasang link media sosial?

Layout/Tata Letak > Footertop > Social Media > klik Gambar Pensil > Isi judul dan konten dengan kode berikut ini > simpan/save

Untuk tulisan berbackground warna pink, aku ganti dengan alamat sosial mediaku.

5. Kustomisasi Tema

Selayaknya perempuan umumnya ya, aku pun juga suka dengan hal-hal lucu. Adakalanya pakai baju yang matching warnanya. Begitupun blog. Agar semangat mengisi blog, ada baiknya menghiasnya. Disinilah aku bisa memainkan tampilan warna, font, dan gambar sesuai keinginanku.

Bongkar Tampilan Dengan Tema Pihak Ketiga

Pengalaman adalah guru yang terbaik. Kalau aku tidak berusaha mengutak atik basic permak tampilan blog menggunakan tema bawaan blogger, mungkin aku akan kesulitan ketika berusaha memasang Tema dari pihak ketiga. Disini aku menggunakan tema Fiksioner V4 oleh Igniel. Aku tidak akan bercerita bagaimana aku mengedit kode HTML nya karena akan panjang sekali. Hahaha. Jadi aku akan bercerita bagaimana mendownload sampai memasang tema Fiksioner V4. Selebihnya untuk mengutak atik tidak jauh berbeda dengan cerita diatas.

Masuk web Igniel
Klik Tema (Template)
Pilih Fiksioner v4, Download
Buka dengan Zip Extractor
Pindah file terdownload ke folder yang aman, nyaman dan mudah ditemukan
Kemudian extract file
Cari file Xml dengan judul Fiksioner-v4.min.xml
Klik kanan Open With/Buka dengan "Notepad"

Cara Instal Xml Fiksioner V4

Selamatkan dulu XML tema sebelumnya dengan cara masuk ke Tema > klik tanda segitiga dekat sesuaikan/customize > klik backup/cadangkan > download. Simpan di tempat yang mudah ditemukan.

Setelah semua sudah selamat lalu. Klik Tema > klik tanda segitiga dekat sesuaikan/customize > pilih edit HTML > hapus semua HTML yang ada hingga tak bersisa secuilpun > copy paste file XML yang sudah didiamkan di notepad tadi > jangan lupa klik Upload agar tidak kabur.

Hasil Bongkar Rumah Habis-Habisan

Hamdalah, prosesi panjang demi mendapatkan tampilan blog yang aku inginkan dan SEO friendly pun selesai. Walaupun masih banyak kekurangan, semoga kedepan bisa semakin mempercantik perlahan. Dan setelah cek menggunakan Meta SEO Inspektor, masih ada 1 warning yang belum terpecahkan. Dan beginilah hasilnya....

sebelum

sesudah

Nah kan udah lumayan yaaa. Bismillah menjadi lebih semangat lagi nih ngeblognya. Ternyata permak blog dengan fiksioner V4 terkesan mudah tapi tidak. Tampilannya memang lebih sederhana, nyaman, dan SEO friendly, namun butuh usaha ekstra juga untuk memahami cara mengeditnya.

Permak Blog Sederhana Dengan Fiksioner V4