Cara membuat template sendiri dengan Bootstrap sampai tahap menambahkan script related post. Script ini banyak tersedia di jagat maya dengan ulasan yang baik. Hanya saja mungkin agak bingung jika diterapkan pada theme lain. Salah satu contohnya adalah theme yang saya anut, yaitu: Bootstrap.
Untuk itu mari kita bandingkan tutorial yang beredar. Setelah itu praktekan pada template teman-teman. Apakah script yang disuguhkan tersebut berfungsi? Jika tidak berhasil kemungkinan besar template yang digunakan memang berbeda.
Kasus lainnya malah tidak ada tuh kode yang suruh dicari. Dan ini mungkin terjadi karena adanya perbedaan teknologi yang digunakan. Sebagai contoh silahkan teman-teman gunakan warasfood theme. Ini adalah theme pertama saya yang dibuat dengan Bootstrap.
Didalamnya banyak menggunakan kode dari Bootstrap seperti header, nav hingga footer. Sedangkan bagian "main" dan "sidebar" tetap seperti biasa. Itu juga saya bungkus dengan kode Bootstrap sehingga pastinya ngaruh. Maka pantas saja terkadang tutorial yang beredar tidak serta merta berhasil. Untuk itu perlu sedikit adaptasi agar tutorial yang beredar tersebut bisa kita pasang.
Teman-teman mengalami hal yang sama? Simak artikel berikut ini tentang cara menambahkan script related post. Tutorial ini ditujukan bagi yang belajar Bootstrap dengan Blogger meskipun otodidak.
Cara Menambahkan Script Related Post Theme Bootstrap
Untuk menambahkan script related post cara mudahnya cari di internet. Salah satu sumber referensi yang digunakan misalnya dari BungFrangki. Di sana ada tahapan bagaimana menempatkan kode-kode tersebut. Contohnya:"Letakkan kode berikut ini di atas kode </main>" (lihat sumber).
Kemudian di bawahnya dijelaskan bahwa:"Sebetulnya kode tersebut bisa diletakkan dimana saja, asalkan tidak di dalam Blog1 atau b:section dan masih di dalam kode <body>. Anda juga bisa meletakkannya di atas kode <aside id='sidebar-wrapper’> atau yang mirip dengannya".
Dari penjelasan di atas kita tahu ada catatan khusus yang lebih rinci. Sehingga jika kita tidak menemukan kode </main> tentunya ada baris kode lain yang memiliki fungsi yang sama. Lalu bagaimana penerapannya pada theme yang menggunakan Bootstrap?
Berikut ini contoh praktek menambahkan script related post pada theme Bootstrap. Jangan lupa! cadangkan theme terlebih dahulu.
1. Login ke dashboard Blogger.
2. Klik Tema, klik icon ▼ di sebelah tulisan SESUAIKAN kemudian klik Edit HTML.
3. Copy baris kode berikut.
4. Tempatkan setelah tag penutup </main> atau </article> atau </main-wrapper>. Pada contoh template yang saya gunakan (lihat screenshot dibawah) ini saya bungkus <main>.....</main> dan <sidebar>....</sidebar> menjadi satu baris yaitu class='row". Sehingga penempatan script related post setelah tag penutup dari sidebar dan main.
5. Copy baris kode berikut:
6. Tempatkan setelah tag penutup <div class='post-footer'>.....</div>.
7. Tempatkan baris kode berikut sebelum tag penutup </body>.
9. Letakan kode css berikut diantara tag pembuka <b:skin><![CDATA[/* dan tag penutup ]]></b:skin>.
10. Simpan theme.
11. Penerapan script related post bisa dilihat seperti pada link demo di bawah ini.
Kesimpulan
Cara membuat template blogger sendiri dengan bootstrap sedikit berbeda. Keunikan tersebut bergantung dari jenis theme yang dihasilkan. Apakah theme landing page untuk profil perusahaan, curiculum vitae atau untuk blog.
Dua contoh pertama yang disebut bisa menggunakan bootstrap seluruhnya. Namun theme blog tetap harus melibatkan sintaks dari blogger. Oleh karena itu mau tidak mau untuk section main atau article dengan widget blog-post dan sidebar tetap digunakan.
Meskipun dalam prakteknya saya bungkus dengan container, row dan col dari Bootstrap. Hal ini tentu saja agar responsif tanpa perlu banyak menulis konfigurasi script css.
Nah, untuk script related post juga harus menyesuaikan. Karena penempatan script tersebut terkait section main atau article tadi. Dan pada kali ini kita berhasil menempatkan script related tersebut. Lalu bagaimana dengan pengalaman teman-teman?
Selamat mencoba.
Tidak ada komentar:
Posting Komentar