Portfolio Blogger Template SORA CV
Beberapa hari yang lalu saya memutuskan untuk menggunakan template Sora CV dari situs Sora Templates. Keputusan saya mengubah template blog pribadi ini dari template notable (terkemuka) bawaan blogger ke template yang diunduh melalui situs www.soratemplates tersebut membuat saya merasa puas. Ada dua alasannya: Pertama skor kecepatan loading blog ini cukup tinggi dan yang kedua tampilannya sangat sederhana.
Template Sora CV yang saat ini saya gunakan diperuntukkan untuk para freelance atau pekerja lepas dengan menampilkan riwayat pekerjaan yang pernah mereka lakukan. Tapi karena saya bukanlah pekerja lepas maka fitur riwayat pekerjaan ini saya hilangkan.
Selain CV, ada beberapa template lain yang sangat saya rekomendasikan. Nama templatenya One-Job, masih dari situs Sora Template. Saya menggunakan template One-Job dari Sora untuk mendesain ulang tampilan blog seorang teman yang memang bekerja sebagai seorang pekerja lepas. Saya tidak banyak mengubah tampilan dari template One-Job karena permintaan teman. Cukup beberapa modifikasi kecil yang saya lakukan dan ia pun merasa puas dengan tampilan website pribadinya tersebut.
Saya memang belum memiliki skill yang cukup untuk membuat template pribadi. Namun saya juga tidak puas dengan hasil jadi template yang dapat digunakan secara gratis.
Seperti yang teman-teman lihat, saya melakukan beberapa perubahan pada desain tempate Sora CV.
Jika di demo template terdapat fitur map dari google, maka saya dengan berbagai pertimbangan memutuskan untuk meniadakan fitur ini.
Saya juga menghilangkan fitur formulir kontak, riwayat pekerjaan, dan pricing services.
Ada beberapa cara yang bisa kita lakukan untuk mengubah tampilan atau desain web yang kita dapatkan secara gratis tersebut. Cara yang paling cepat adalah dengan memblok semua kode yang tidak kita butuhkan tersebut kemudian menghapusnya.
Cara yang kedua yang saya lakukan adalah menjadikan kode tampilan tersebut tidak aktif. Saya merekomendasikan langkah ini jika teman-teman ingin mengaktifkannya dalam waktu dekat. Berikut cara menonaktifkan desain atau tampilan atau bagian template yang tidak kita butuhkan dalam waktu dekat.
Hal pertama yang dilakukan adalah masuk ke dalam menu Tema > Edit HTML. Di dalam editor HTML teman-teman barangkali akan menemukan kode berikut:
<!—some teks --> atau /* some koding or teks */ atau // some teks
Bentuk-bentuk diatas dikenal sebagai kolom komentar dari seorang web developer. Hal ini dilakukan (dan juga direkomendasikan untuk dilakukan) agar si pembuat template atau developer web tadi tidak lupa dengan apa yang ia kerjakan.
Teknik yang digunakan oleh web developer ini yang kemudian saya memanfaatkan untuk menghilangkan / menyembunyikan bagian-bagian yang tidak saya inginkan dari template Sora CV.
Rasanya tidak lengkap jika saya tidak memberikan contoh. Agar teman-teman bisa mengikuti langkah-langkah yang saya kerjakan dalam menghilangkan/menyembunyikan bagian template yang tidak saya inginkan dari template gratis Sora CV ada baiknya teman-teman juga membuka link demo dari template aslinya.
Saya ambil contoh satu saja. Saya ingin agar bagian pricing tidak muncul di blog. Bagian ini akan saya sembunyikan karena bagi saya bagian pricing ini belum terlalu dibutuhkan saat ini. Maka langkah yang harus kita lakukan sebagai berikut:
Didalam editor blogger (Tema > Edit HTML) kita harus mencari bagian tersebut. Caranya sangat mudah. Didalam kolom editor HTML blogger, cukup cari tulisan pricing tersebut dengan cara menekan tombol keyboard ctrl + f atau perintah find.
Didalam kotak pencarian yang ada di editor blogger ketikkan kata pricing tadi, dan nanti kita akan dibawa secara otomatis menuju koding pricing didalam template.
<div id='pricing'>
Untuk menghilangkan bagian pricing ini kita bisa menggunakan kode komen html <!—kode/teks --> sebelum dan sesudah kode tersebut.
Jadi detailnya sebagai berikut:
<!--<div id='pricing'>
<div class='price_card alpha wow fadeInLeft' data-wow-delay='0.3s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.3s;'>
<div class='price_card_wrap'>
<div class='header'>
<span class='price'>Rp. 300k</span>
<span class='name'>Starter</span>
</div>
<ul class='features'>
<li>Buy Domain for your blog</li>
<li>Set Domain to Your Blogger Account</li>
</ul>
<button>Add to cart</button>
<span class='tip'>* Great for beginners!</span>
</div>
</div>
<div class='price_card bravo wow fadeInLeft' data-wow-delay='0.5s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.5s;'>
<div class='price_card_wrap'>
<div class='header'>
<span class='price'>Rp. 500k</span>
<span class='name'>Medium</span>
</div>
<ul class='features'>
<li>Buy Domain for your blog</li>
<li>Set Domain to Your Blogger Account</li>
<li>Buy Premium Blogger Theme</li>
<li>Install & Set Premium Your New Blogger Theme</li>
</ul>
<button>Add to cart</button>
<span class='tip'>* Most popular!</span>
</div>
</div>
<div class='price_card charlie wow fadeInLeft' data-wow-delay='0.8s' data-wow-duration='1s' style='visibility: visible; animation-duration: 1s; animation-delay: 0.8s;'>
<div class='price_card_wrap'>
<div class='header'>
<span class='price'>Rp. 1,000k</span>
<span class='name'>Advance</span>
</div>
<ul class='features'>
<li>Buy Domain for your blog</li>
<li>Set Domain to Your Blogger Account</li>
<li>Buy Premium Blogger Theme</li>
<li>Install & Set Premium Your New Blogger Theme</li>
<li>Set Sitemap for Blog and Google Search Console</li>
<li>Set Email With Your Own Domain</li>
</ul>
<button>Add to cart</button>
</div>
</div>
</div>-->
Lalu setelah menambah tanda panah atau komen tadi, save perubahan pada template dan lihat perubahannya pada tab lain.
Harap diingat jika didalam kode yang akan kita hilangkan / sembunyikan ada kode komentar, maka kita harus mengubah tanda komentar tersebut. Di beberapa kesempatan dalam melakukan ujicoba dengan template yang berbeda tidak jarang saya harus mengubah kode komentar dari panah <!-- kode/teks --> menjadi /* kode/teks */.
Selain merubah tampilan awal template Sora CV dengan menghapus atau menyembunyikan beberapa bagian yang tidak saya inginkan, perubahan lain yang saya lakukan adalah menyempurnakan struktur data template. Mungkin jarang diantara kita yang melakukan pengecekan ulang terhadap struktur data template yang dipakai karena tampilannya yang begitu memukau. Ini juga terjadi pada saya, berharap tampilan template akan menambah kunjungan ke blog eh malah hasilnya bertolak belakang dengan keinginan.
Letak masalahnya seperti yang saya bilang tadi: Tidak menguji kembali struktur data template yang dipakai.
Struktur data template Sora CV menurut saya sudah bagus. Akan tetapi ketika saya melakukan pengujian di situs structure data, saya menemukan ada beberapa kesalahan yang terlihat. Kesalahan-kesalahan struktur data di template Sora CV yang saya temukan tidak banyak. Tetapi bagi saya kalau dengan mengurangi kesalahan tersebut bisa menambah sedikit perubahan dengan naiknya jumlah pengunjung, ini merupakan pertanda yang sangat bagus.
Jadi jangan lupa untuk menguji kembali struktur data template yang teman-teman gunakan. Kalau menemukan kesalahan atau kekurangan, segera perbaiki.
Perubahan ketiga yang saya lakukan pada portfolio blogger template gratisan ini adalah menambahkan iklan adsense di dua tempat. Ada dua tempat yang saya plot untuk iklan yaitu di bagian header postingan dan juga di tengah postingan. Dua tempat ini yang menurut saya paling banyak dilihat oleh pengunjung nantinya. Dan semoga saya akan membawa keberuntungan dengan tambahan iklan menjadi sangat relevan dengan konten yang saya telah terbitkan.
Untuk menempatkan iklan di bawah header artikel caranya sangat mudah. Kita tinggal cari kode judul artikel dengan inspect element (browser chrome atau mozilla firefox) lalu setelah itu kita tinggal taruh kode iklan dibawah kode artikel.
Sedangkan agar iklan bisa muncul di tengah postingan, saya mengikuti langkah-langkah yang telah diberikan oleh pembuat template sora melalui blog sorabloggingtips.com. Hanya saja saya menambahkan beberapa kode baru agar iklan yang tampil tidak hanya adsense tetapi juga iklan indodax.com dan beberapa iklan afiliasi lainnya.
Logikanya sederhana saja. Tulisan dengan kategori cryptocurrency akan memperlihatkan banner indodax, sedangkan Tulisan dengan kategori website / blogging akan memperlihatkan banner exabytes. Selain dari 2 kategori tersebut maka saya akan mengandalkan iklan adsense dan juga iklan a-ads.com.
Berikut kode pengaturan iklan di blog kandra.id saat ini
<b:if cond='data:view.isPost'> <div id='adsense-content' style='display:block;text-align: center'> <b:loop index='item' values='data:post.labels' var='label'> <b:if cond='data:item in [0] and data:label.name not in ["NAMA LABEL"]'> // KODE ADSENSE DISINI <b:elseif cond='data:item in [0] and data:label.name in ["NAMA LABEL"]'/> // KODE SELAIN ADSENSE DISINI </b:if> </b:loop> </div></b:if>
Kode diatas juga bisa digunakan untuk tidak menampilkan iklan adsense di beberapa postingan blogger. Kuncinya adalah pada label yang ditetapkan. Jika nama label huruf kecil, tulis Nama Label dengan huruf kecil dan begitupun sebaliknya. Jika nama label memiliki spasi contoh [nama] [spasi] [label], maka gunakan %20 diantara suku kata. Hasilnya nama%20label
Dari beberapa artikel tentang monetisasi blog dengan menggunakan adsense, tool terbaik yang bisa digunakan adalah doubleclick for publisher. Namun saya masih belum paham cara menggunakan tool yang bisa digunakan secara gratis tersebut. Daripada nol sama sekali lebih baik kita gunakan sumber-sumber yang masih ada bukan?
Update:
- Menambahkan sticky sidebar menggunakan skrip theiaStickySidebar.
- Menambahkan skrip buka tutup kolom komentar
