Cara Memodifikasi Tampilan Template Vikka Fast and Responsive Blogger Template

Selamat pagi sobat blogger, lama saya tidak menulis artikel nih. Pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana cara merubah, mengubah, memodifikasi, dan mengedit tampilan dari Templatenya mbak Arlina yaitu Vikka Fast and Responsive Blogger Template. Kenapa kita perlu mengedit template yang out of the box nya saja sudah bagus tampilannya? Hal ini dilakukan tentunya agar para sobat yang memakai template Vikka ini bisa tampil beda dari blogger lain yang memakai template yang sama. Tentunya kita dapat melakukan modifikasi pada tampilan warna standar dari Vikka ini, ya memang merubah warna template adalah salah satu point yang paling penting agar bisa tampil beda dengan warna template Vikka yang lain. Selain itu juga tujuan saya membuat tutorial ini agar dapat membantu sobat blogger yang memakai template Vikka seperti saya dapat dengan mudah mengedit tampilannya tanpa perlu melakukan eksperimen dan pencarian kode HTML yang memerlukan waktu cukup lama. Tutorial ini saya tulis berdasarkan pengalaman saya selama 2 bulan memakai template Vikka Fast and Responsive Blogger Template ini, mulai dari saya tidak tahu apa-apa tentang bagaimana cara merubah ini dan itu hingga saat ini alhamdulillah sudah sedikit lumayan tahu seluk beluk template Vikka. Template ini saya pakai sudah cukup lama sedari awal saya memulai untuk serius blogging di bulan November 2015. Tetapi masih banyak juga yang perlu saya eksplorasi dari template mbak Arlina ini, dan setiap template pasti memiliki kekurangan, nah kebetulan saat ini saya masih mencari tahu bagaimana mengatasi kekurangan dari template Vikka, kekurangannya cuma sedikit si salah satunya yaitu Widget arsip blog yang error, umm lainnya apalagi ya saya lupa hehe, nanti kalo ingat bakalan saya update sob.

Sebelum memulai melakukan pengeditan, ada baiknya template sobat di Back Up dahulu, caranya dengan masuk ke menu "Template", lalu klik "Back Up/ Restore" yang letaknya ada pada pojok atas sebelah kanan, hal ini perlu dilakukan sebagai langkah antisipasi saja jikalau terjadi error atau kesalahan yang secara tidak sengaja kita lakukan pada saat mengedit kode HTML template Vikka sobat. Ok, jika sudah siap, maka sobat cuma perlu memperhatikan gambar dan keterangan nomor yang akan saya berikan di bawah ini (Klik kanan "Open Link in New Tab" pada Gambar untuk memperbesar tampilan di tab baru):

1. Mengganti Tulisan Judul Blog

Untuk mengganti ataupun mengeditnya sobat masuk ke menu "Tata Letak/ Lay Out", kemudian pilih widget/ gadget Header blog sobat, untuk merubahnya bisa dengan mengedit Judul Blog dan keterangan blog pada kolom yang telah disediakan, atau bisa juga dengan mengganti judul blog menggunakan banner gambar yang berisi Tulisan Judul Blog dan keterangan blog. Untuk cara membuat banner pada header blog, sobat bisa ikuti tutorial ini Cara Mudah Membuat Banner untuk Judul Blog

2. Mengganti Banner Slot Iklan

Langkahnya sama seperti pada nomor 1 diatas, sobat masuk ke menu "Lay Out/ Tata Letak" kemudian pilih Widget/ gadget "Header Right", sobat bisa mengunggah gambar apapun untuk sekedar dijadikan banner iklan ataupun pemanis Header Blog sobat.

3. Mengganti warna dan ukuran  "Template Wrapper"

Namanya adalah Template Wrapper yang letaknya ada di bagian paling atas tampilan template blog Vikka, untuk mengeditnya buka menu Template lalu klik Edit HTML, sobat cari kode di bawah ini:

/* Arlina Template Wrapper */
#wrapper {background:#fff;max-width:920px;margin:auto;padding:0;overflow:hidden;border-top:4px solid #45a2db;}

Orange: Untuk mengatur panjang dan pendek Template Wrapper nya
Merah: Untuk mengatur lebar / tinggi Template Wrapper
Biru: Merupakan kode warna, ganti sesuai warna yang sobat inginkan

4. Mengganti warna Menu Navigasi
Untuk mengganti warna menu navigasi, maka pada menu Editor HTML, sobat cari kode Main Navigationnya seperti di bawah ini:

/* Arlina Main Navigation */
#navi-arlina{height:45px;text-transform:uppercase;font-size:100%;background:#45a2db;color:#fff;font-family:Oswald;margin:0 15px}
#navi-arlina ul.menus{background:#45a2db;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navi-arlina a{display:block;line-height:45px;padding:0 15px;text-decoration:none;color:#fff}
#navi-arlina ul,#navi-arlina li {margin:0 auto;padding:0;list-style:none}
#navi-arlina ul {height:45px;}
#navi-arlina li {float:left;display:inline-block;position:relative}
#navi-arlina input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#navi-arlina label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#navi-arlina label span {font-size:16px;position:absolute;left:55px}
#navi-arlina ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#navi-arlina ul.menus a {color:#fff;line-height:55px}
#navi-arlina li a:hover {background:#3a91c7}
#navi-arlina li:hover ul.menus,#navi-arlina li:hover > ul {display:block}
#navi-arlina ul.menus a:hover {background:#444;color:#fff}
#navi-arlina li ul{background:#444;margin:0;width:150px;height:auto;position:absolute;top:45px;left:0;z-index:10;display:none}
#navi-arlina li li {display:block;float:none}
#navi-arlina li li:hover {background:#444}
#navi-arlina li li a:hover {background:#444;text-decoration:underline}
#navi-arlina li ul ul {left:100%;top:0}
#navi-arlina li li > a{display:block;padding:0 10px;margin:0;line-height:30px;text-decoration:none;color:#fff}

Orange: Mengubah warna Menu Navigasi
Merah: Jenis Font dari Menu Navigasi

Biru: Merupakan background warna yang akan muncul disaat kita arahkan kursor mouse ke salah satu menu kategori.

Catatan: Sebenarnya masih banyak kode yang mengatur Menu Navigasinya, sayangnya saya cuma tahu kode yang saya sebutkan diatas, kedepannya jika saya menemukan pengaturan lain akan saya update disini.

5. Mengganti Jenis, warna, dan ukuran Font Judul Postingan yang Muncul di Beranda

Untuk mengganti font dari judul postingan yang ada di beranda, maka sobat perlu mengganti font standar 'Oswald&#39 sesuai font yang sobat inginkan. Sobat perlu mencari kode di bawah ini:

/* Arlina Post Wrapper */
h1.post-title.entry-title,h2.post-title.entry-title {font-family:'Oswald';font-size:16px;text-transform:uppercase;font-weight:500}
h1.post-title.entry-title a,h2.post-title.entry-title a{color:#222;}
h1.post-title.entry-title a:hover,h2.post-title.entry-title a:hover{color:#338bc0;}

Orange: Merupakan kode font dari judul postingan yang tampil di beranda blog, sobat bisa menggantinya dengan jenis font yang lain.

Merah: Merupakan ukuran font judul postingan yang muncul di beranda
Biru: Merupakan warna font

Merah Muda: Merupakan warna yang muncul ketika kita arahkan kursor mouse kita ke judul postingan yang ada di beranda blog.

6. Mengubah Ukuran Font dari keterangan artikel blog yang muncul di beranda

Kita hanya akan mengubah ukuran font nya saja, bukan mengganti jenis font. Jika ingin mengganti jenis font nya, akan saya jelaskan nanti ya sob. Jika sobat mengubah ukuran font ini, maka ukuran font yang ada di halaman artikel juga akan ikut berubah. Untuk mengganti ukurannya, sobat cari kode di bawah ini:

/* Arlina Post Wrapper */
.post-body {margin:0;line-height:1.6em;text-align:left;font-size:14px;}

Orange: Untuk mengatur spasi jarak antar baris atas dan baris bawah kalimat

Merah: Untuk mengatur besar kecil ukuran font yang ada di keterangan artikel beranda dan di halaman artikel.

7. Mengganti warna, dan ukuran dari post Info: Author, Date, dan Label

/* Arlina Post Wrapper */
.post-info{display:block;padding:5px 0;color:#888;line-height:1.6em;font-size:11px;overflow:hidden;margin:5px 0}

Orange: Untuk mengganti warna dari post info
Merah: Untuk mengubah ukuran font nya

8. Mengganti Warna Garis Bawah Pembatas Widget

/* Arlina Sidebar Wrapper */
#sidebar-wrapper h2,#sidebar-wrapper h3,#sidebar-wrapper h4{position:relative;margin:0 0 10px;text-transform:uppercase;padding:10px 0;font-size:15px;color:#343434;font-family:'Oswald';border-bottom:2px solid #333333;font-weight:500;letter-spacing:1px;}
#sidebar-wrapper h2:before,#sidebar-wrapper h3:before,#sidebar-wrapper h4:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#FF6600;width:60px;height:2px}

Merah: Untuk mengganti warna pada garis kedua
Orange: Ganti kode warnanya sesuai dengan selera sobat pada garis pertama

9. Mengganti Type dan Warna Label

Pada Widget Label terdapat dua jenis type tampilan, tampilan pertama yaitu type "Cloud" dan type yang kedua adalah "List", jika sobat ingin merubah penampakan labelnya seperti contoh gambar no.9 diatas, maka sobat tinggal menuju ke menu "Tata Letak/ Lay Out", kemudian pilih widget label blog sobat, maka akan muncul jendela browser baru, pada "Display" pilih "Cloud". Sementara untuk mengganti warna pada labelnya, sobat perlu mencari kode di bawah ini:

/* Arlina Label */
#sidebar-wrapper .label-size{background:#333333;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#ff6600;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}

Orange: Mengubah warna pertama Label type Cloud
Merah: Mengubah warna kedua Label type Cloud

10. Menghilangkan widget dan formulir kontak

Sebenarnya ini cukup mudah caranya sob, sobat tinggal menuju ke "Lay Out/ Tata Letak", kemudian pilih widget yang letaknya ada dibagian paling bawah, klik Edit lalu Remove.

11. Mengganti Copyright Tahun

Sebelumnya saya memohon kepada sobat untuk tidak mengganti kredit si pembuat template, yaitu Mbak Arlina sebagai pembuat template Vikka ini. Mbak Arlina sendiri membagikan template Vikka ini secara gratis, dan untuk menghargai hasil kerja keras beliau tolong tetap cantumkan kredit link Arlina Design (Jangan dihapus). Untuk mengedit list copyright tersebut sobat cari kode ini:

<div class='cpleft'>
  Copyright &#169; 2011-2016 <a expr:href='data:blog.homepageUrl' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'><data:blog.title/></span></a> All Right Reserved
</div>

Orange: Untuk mengganti kata copyright dan tahun
Merah: Ganti jika diperlukan

12. Mengganti Warna Background dari Menu Navigasi Home

Jika sobat menginginkan warna yang berbeda pada menu Navigasi Home dengan warna kategori menu lainnya/ istilahnya warna tunggal, maka sobat perlu menambahkan sedikit sentuhan kode. Buka menu Template sobat seperti biasa, pilih Edit HTML, kemudian ketikkan CTRL+F pada keyboard sobat untuk mencari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> tersebut.

#navi-arlina li span.home {display:block;background:#ff6600}

Orange: Ganti kode warna dari background menu navigasi Home sesuai dengan yang sobat inginkan.

 13. Mengganti warna huruf dari Menu Navigasi

Untuk mengganti warna dari huruf/nama kategori yang ada pada menu navigasi sangat mudah sob, kita tinggal menyisipkan atau membungkus Kata dari Kategori Menu navigasi sobat dengan kode:

<span style="color: orange;">NAMA-KATEGORI-MENU-SOBAT</span>

Maka contohnya akan seperti ini:

<li><a href='#' itemprop='url'><span itemprop='name'><span style="color: orange;">NAMA-KATEGORI-MENU-SOBAT</span></span></a></li>

Ganti kode "orange;" dengan kode warna lain. Jika sobat kebingungan untuk menemukan nama dari menu kategori blog sobat, sobat tinggal ketikkan CTRL+F pada keyboard sobat untuk mencari nama kategori, misal nama kategorinya "Lifestyle", maka ketikkan saja nama kategori tersebut pada kolom pencarian editor HTML template sobat, lalu tekan Enter. Maka akan muncul deretan kategori menu navigasi blog sobat.

14. Mengganti Ukuran Judul Postingan Artikel

Sebenarnya jika kita sudah melakukan langkah nomor 5, maka otomatis judul postingan artikel kita akan ikut berubah ukuran dan jenis fontnya. Namun untuk merubah warnanya saya masih belum tahu caranya, hehe.

15. Mengganti Format Penanggalan

Jika sobat ingin mengganti format penanggalannya, maka sobat tinggal menuju ke menu Blogger sobat, lalu pilih "Settings/ Pengaturan", kemudian pilih "Language and Formatting/ Bahasa dan Format", atur format penanggalan yang cocok sesuai dengan selera sobat.

16. Mengubah Jenis dan Ukuran Font Postingan Artikel

Untuk mengatur ukuran font nya langkahnya sama dengan poin nomor 6, namun jika sobat ingin mengganti jenis font nya sobat perlu mencari kode ini:

//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");
//]]>

Orange: Merupakan alamat URL dari font Google Apis yang ada di template Vikka ini, ikuti tutorial ini Cara Mengganti Jenis Font Postingan Artikel

Catatan: Saya sendiri belum pernah mencoba untuk mengganti jenis font bawaan template Vikka sob, biasanya saya cukup mengganti jenis font nya lewat editor postingan artikel.

17. Mengatur Kolom Pencarian "Search"

/* Arlina Search Form */
.menusearch{display:block;margin:15px 0 0 15px;padding:0}
.searchform{padding:10px;margin:0;background:#333333;overflow:hidden;border:1px solid #e0e0e0;transition:all .3s}
.searchform:hover,.searchform:active{border-color:#bbb}
.searchform input{color:#999;padding:0;margin:0;transition:all .6s}
.searchform input:focus{color:#ff6600;}
.searchform .searchfield{background:transparent;border:0;outline:none;width:100%;}

Orange: Mengatur jarak kolom search dengan border garis pembatas postingan
Merah: Mengatur kode warna background kolom search
Biru: Mengatur ketebalan garis / border kolom search
Pink: Mengganti warna input kata

Sementara untuk mengganti tulisan yang ada pada kolom searchnya, sobat cari saja tulisan "Type and Click Enter..." pada editor HTML template sobat, maka penampakannya akan seperti di bawah ini:

<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Type and Click Enter...'/>

Edit tulisan yang saya beri tanda warna orange diatas dengan kata yang sobat inginkan.

18. Mengatur Posisi atau Menghilangkan Border/ Garis pembatas antara postingan artikel dan widget

/* Arlina Post Wrapper */
#main-wrapper{width:66%;float:left;padding:0;word-wrap:break-word;overflow:hidden;border-right:1px solid #e9e9e9;}

Orange: Kurangi atau tambahkan presentasenya sesuai dengan kebutuhan sobat
Merah: Ganti ke 0px jika sobat ingin menghilangkan garis bordernya

19. Mengatur/ Menggeser Posisi Widget/ Gadget yang ada di Sidebar

Mengatur posisi widget di side bar ini berfungsi agar iklan adsense sky scrapper bisa tampil penuh, tidak ada bagian yang terpotong. Kasus ini saya alami beberapa waktu yang lalu, maka solusinya kita harus mengatur posisi side bar widget kita sampai posisi iklan adsense terlihat sepenuhnya. Sobat cari kode di bawah ini

/* Arlina Sidebar Wrapper */
.sidebar {line-height:1.5em;padding:0 0 0 8px}

Orange: Kurangi atau tambahkan nominal angka 8px

20. Mengubah Background Warna Related Article/ Related Post

/* Arlina Related Post */
#related_posts h4{color:#fff;background:#333333;padding:10px;margin:0 0 5px;font-size:120%;}

Orange:Ganti kode warnanya sesuai dengan warna keinginan sobat

21. Mengganti Warna Judul Postingan yang Tampil Pada Related Post/ Related Article

/* Arlina Related Post */
#related_img li a{color:#e55b00;}

22. Mengganti Warna Kolom Komentar "0 Comments"

/* Arlina Comment Post */
#comments h4,.comments .continue a{background-color:#333333;font-weight:700;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ff6600;border-right:20px solid transparent;width:0;height:0;line-height:0}

Orange: Untuk mengganti warna pertama
Merah: Untuk mengganti warna kedua

23. Mengganti Warna Tombol Navigasi Back to Top

/* Arlina Back to top */
.back-to-top{visibility:hidden;background-color:#ff6600;color:#fff;vertical-align:middle;width:42px;height:42px;line-height:42px;text-align:center;position:fixed;bottom:30px;right:30px;z-index:90;cursor:pointer;border-radius:1px;opacity:0;-webkit-transform:translateZ(0);transition:all .6s}
.back-to-top:hover{background-color:#333;opacity:1}

Orange: Untuk merubah warna background
Merah: Warna font tulisan "TOP"
Biru: Warna yang akan muncul ketika kursor mouse diarahkan ke Tombol Navigasi Back to Top

24. Mengganti Warna dan Ukuran Background Footer Wrapper 1

/* Arlina Footer Wrapper */
#footer-wrapper{text-align:left;overflow:hidden;background:#ff6600;margin:auto;max-width:960px;padding:15px 0 0;}

Ganti kode warna yang saya beri warna orange, jika sobat ingin mengganti ukuran panjangnya edit saja nominal 960px nya.

25. Mengganti Warna Background Footer Wrapper 2

/* Arlina Footer Wrapper */
#footer-last{overflow:hidden;background:#333333;text-align:center;padding:20px;margin:auto;border-top:1px solid #464646;text-transform:uppercase;}

Ganti kode warna yang saya beri warna orange

TAMBAHAN:

26. Mengubah Format Huruf Pada Judul Postingan

Jika sobat perhatikan, semua judul postingan yang ada di template Vikka ini memakai huruf besar/ kapital semua, jika sobat ingin merubahnya ke huruf biasa (Hanya huruf pertama yang kapital pada setiap kata), maka sobat perlu merubah kode di bawah ini:

/* Arlina Post Wrapper */
h1.post-title.entry-title,h2.post-title.entry-title {font-family:'Oswald';font-size:16px;text-transform:uppercase;font-weight:500}

Ganti "Uppercase" menjadi "Capitalize"

27. Mengedit warna, ukuran, dan format Breadcrumbs yang tampil diatas judul postingan artikel. 
Saya sendiri tidak tahu apa arti dari istilah Breadcrumbs, jika sobat sendiri kebingungan yuk kita lihat saja gambar di bawah ini:

Nah Breadcrumbs yang saya maksudkan nampak seperti diatas yang ada di dalam kolom orange sob, maka untuk mengeditnya sobat perlu cari kode di bawah ini:

/* Arlina Post Wrapper */
.breadcrumbs{padding:0px 1px;color:#FF6600;background:#fafafa;margin:10px 0;font-size:11px;text-transform:capitalize}
.breadcrumbs a{color:#333}
.breadcrumbs a:hover{color:#444;text-decoration:underline}

Orange: Warna dari Tulisan Breadcrumbs, ganti sesuai dengan yang sobat inginkan

Biru: Jika sobat menginginkan breadcrumbs yang memiliki background maka ganti kode warna tersebut.

Merah: Ukuran font breadcrumbs

Pink: Ganti ke "Uppercase" jika sobat menginginkan font breadcrumbsnya memakai huruf besar semua.

28. Mengubah Ukuran Lebar Template

Template Vikka ini memiliki ukuran lebar halaman 920px, jika sobat merasa ukurannya terlalu kecil ataupun kelebaran, maka sobat cari kode di bawah ini untuk mengatur ukuran lebarnya:

/* Arlina Template Wrapper */
#wrapper {background:#fff;max-width:920px;margin:auto;padding:0;overflow:hidden;border-top:10px solid #333333;}

Ganti nominal angka 920px nya sesuai selera sobat.

29. Mengganti Warna Background Halaman Template

Jika sobat perhatikan pada sebelah kiri dan kanan halaman template blog sobat, maka akan kita jumpai sisi halaman blog yang tidak terpakai, jika sobat ingin mengganti warnanya sobat tinggal cari kode di bawah ini:

/* Layout */
body {background:#333333;font-family:'Open Sans';font-size:13px;font-weight:400;text-align:left;color:#222;margin:0;padding:0;}

Ganti kode warna yang saya tandai dengan warna orange.

30. Menghilangkan Garis Border dan Mengubah Ukuran Thumbnail Gambar di Postingan Beranda

Jika sobat pergi ke beranda/ home, pada thumbnail gambar postingan artikel blog sobat ada garis yang membatasi di sekeliling thumbnail, untuk menghilangkan garis border tersebut, sobat cari kode di bawah ini:

/* Arlina Global Responsive */
.post-thumbnail{background:#fff;width:100px;height:auto;float:left;padding:3px;margin:0 15px 0 0;border:1px solid #ccc;transition:all .3s}

Ubah border:1px menjadi 0px untuk menghilangkan border thumbnailnya, sementara untuk merubah ukuran thumbnail gambarnya lakukan edit pada width:100px

Umm mungkin ini saja dulu, jika ada update terbaru akan saya tulis disini. Semoga artikel ini dapat membantu sobat untuk mempercantik tampilan template Vikka nya. Jika ada kesalahan dan kekeliuran, mohon koreksi saya dengan mengisikan komentar di bawah artikel ini. Begitupun sebaliknya, jika sobat ada pertanyaan, bisa tanyakan juga di kolom komentar yang telah saya sediakan. Terima Kasih.

31. Mengubah Warna Background Pada Comment Admin

/* Arlina Comment Post */
.comments .comments-content .icon.blog-author{position:absolute;right:10px;top:-4px;width:50px;height:20px;font-size:85%;font-weight:700;text-transform:uppercase;background-color:#333333}

Ubah kode warna #333333 sesuai kode warna yang sobat inginkan.

32. Mengubah Warna Background Comment

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #ff6600;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #999999;}</style>

Ganti #f2f2f2 jika sobat menginginkan background warna lain.

33. Memberikan Background Gambar pada body blog

Sobat perlu cari kode seperti ini di Tag "Lay Out":

/* Layout */
body {background:#333333;font-family:'Open Sans';font-size:13px;font-weight:400;text-align:left;color:#222;margin:0;padding:0;}

Lalu ganti semua kode diatas dengan kode ini:

/* Layout */
body {background:#333333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9Hxhyphenhyphen0Xrr5XmZVisqWqeEIzWDVD29ZoJWvOPNESk1oHWGVpqujsQNhnU-8k5XpgcNNat7o9N-Bm7SwlvWf_FBJ8Wl68b-wfHoJPt7tPoWlsSNNWdy1LaypdSuQfQfxL8twPNAgOQisk/s1600/background.jpg') center top no-repeat fixed;font-family:'Open Sans';font-size:13px;font-weight:400;text-align:left;color:#222;margin:0;padding:0;}

Ganti kode yang saya beri warna orange dengan link gambar background yang sobat telah persiapkan, resolusinya sekitar 2000x1460 pixel. Ukuran file gambarnya usahakan dibawah 200kb, agar loading blog sobat tidak lambat.

34. Cara Menambahkan Garis Horizontal Pada Bagian Bawah Menu Navigasi
Seperti sobat lihat di bagian bawah menu navigasi blog saya terdapat sebuah garis horizontal berwarna silver, jika sobat ingin membuat garis tersebut, ikuti langkah dibawah ini ya:

Sekarang sobat cari kode seperti ini:

/* Arlina Main Navigation */
#navi-arlina{height:41px;text-transform:uppercase;font-size:100%;background:#333333;color:#fff;font-family:Oswald;margin:0 15px;}

Tambahkan kode di bawah ini tepat setelah kode margin:0 15px (yang saya warnai orange).

border-bottom:4px solid #999;

Jika sudah digabungkan akan menjadi seperti:

#navi-arlina{height:41px;text-transform:uppercase;font-size:100%;background:#333333;color:#fff;font-family:Oswald;margin:0 15px;border-bottom:4px solid #999;}

35. Cara Menampilkan Kolom Komentar Saat Blog Dibuka  Pada Versi Mobile
Masalah ini sudah sangat lama saya alami pada template Vikka ini, dan saya rasa ini merupakan salah satu kekurangan yang ada pada template Vikka. Jadi pada saat kita membuka blog di HP/ Mobile, kolom komentarnya hilang/ tidak ditampilkan. Berikut cara untuk menampilkan kolom komentar pada template Vikka. Sobat hanya perlu mencari kode di bawah ini:

/* Arlina Global Responsive */
@media screen and (max-width:380px) {
.comments {display:none}}

Pada kode "display", ganti "none" (yang saya beri tanda warna orange) menjadi "block". Beres deh.