Cara Mengganti Template Blog [Personal Track]

Cara memasang template blog ini saya buat untuk memudahkan bagi yang belum ngerti gimana cara pasang templatenya saja.

Kalau yang sudah ngerti ya jangan proses.

Khususnya digunakan untuk pengguna template Personal Track, atau secara umumnya buat pengguna template dari pihak ketiga baik gratisan atau berbayar.

Umumnya sih, kalau templatenya berbayar sudah dipandu penjualnya langsung.

Singkat saja kita coba caranya.

Syaratnya, kamu sudah harus punya

• Blog
• Template yang mau dipasang [Template Personal Track]

Setelah syaratnya sudah ada, kita lanjut pada tahap pertama.


#1 Instal template

Caranya akan saya mudahkan dengan screenshot agar lebih jelas.

Pertama, masuk ke edit template



Lalu pilih backup/Restore seperti yang dilingkari pada gambar



Untuk mengamankan templatemu yang lama, silahkan download dulu!

Selanjutnya tekan browse untuk mencari template yang sudah disiapkan [Template Personal Track di folder penyimpanannya]

Umumnya, formatnya bisa berupa .xml atau juga .txt.


Pilih seperti screenshot di atas,



Tekan upload, maka secara otomatis template blog berhasil terpasang.


#2 Header

Untuk template Personal Track, akan bagus jika menggunakan header berupa gambar yang ukurannya persegi.

Saya menggunakan ukuran 300 x 300px.



Caranya,masuk menu layout/tata letak

Pilih Header



Tekan browse untuk mencari gambar header di folder penyimpanan



Lalu pilih Instead of title and description untuk membuat header gambar tampil secara utuh dan menyembunyikan header title dan deskripsi blog.

Tinggal tekan save!

#3 Map-Content

Apa sih Map-Content?

Ini adalah elemen map, dimana berupa gambar atau banner [dapat difungsikan sebagai header juga] yang di dalamnya terdapat area yang bisa dipasang link agar lebih menarik.

Lihat pada screenshoot, saya pasang gambar sosial media facebook dan twitter dimana keduanya dapat di klik.



Pada Template Personal Track, saya membuat dua macam map-content, satu di halaman postingan dan satu di halaman homepage.

Bedanya, di halaman homepage saya buat besar dengan fungsi map area, sementara pada halaman posting cenderung saya kecilkan agar pembaca lebih fokus pada artikel dan fungsi map area saya hilangkan.



Untuk mengaturnya, coba cari kode ‘map-area’

Selanjutnya akan muncul kode lengkap seperti tampilan di atas.

Di dalamnya ada dua buah url gambar. Kode seperti di bawah ini adalah kode gambar untuk tampilan dalam postingan.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFclgtjVtUNxA5plhoQi6dW-7carYWXqsq8PN5EXsngd0CsoTghx_L77do58PY2efGjMio36k2LovVsPFxoxIPDemL85FhHYcwh7poQo7avx3ZaG09DgtUeYxFxuwcKZhJhgfkwQhWZJb/s1600/map+posting+personal+track-min.png

Kamu tinggal ganti saja dengan gambar header blogmu [Kalau belum punya bisa buat lewat photoshop, corel draw atau juga paint, hehe]

Selanjutnya adalah map-content di homepage. Caranya sama, tinggal ganti saja url gambarnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21cd512uQLKT_gsLGvnJXMHub6J3H8lc1WomKFkxHUCjPOFZ2lXEaKgYeRYtQnnNXwfLGeyV0akONkPlEtsk8XAQ-QARlOp4T5jSiQiq5Uuoy0ddDqwDWswm4Rrsup3tOB01uqZHS8yrN/s1600/personal+track+map-min.png

Pada bagian ini terdapat kode berikut ini!

<area alt='twitter' coords='240,100,109' href='http://twitter.com/masganteng_id' shape='circle' target='_blank'/>
  <area alt='facebook' coords='40,205,109' href='https://www.facebook.com/lukiluck11' shape='circle' target='_blank'/>

Kode di atas memiliki fungsi membuat area yang bisa dipasangi url pada gambar. Jika dalam contoh saya memasang gambar facebook dan twitter. [Kamu bisa menambahkan gambar lain sesuai selera]

Lalu, untuk pengaturan kordinat areanya kamu bisa melihat kode coords='240,100,109'

Dimana 240 untuk jarak horisontal dari kiri, 100 untuk jarak vertikal dari atas, lalu 109 adalah lebar area.

Kordinat tersebut berlaku untuk shape=’circle’ yang berarti areanya berupa lingkaran.

Sekarang, linknya tinggal disesuaikan saja.

Kalau ingin menambah sosial media baru, tinggal copy paste kode berikut

<area alt='facebook' coords='40,205,109' href='https://www.facebook.com/lukiluck11' shape='circle' target='_blank'/>

Lalu tinggal menyesuaikan tata letaknya.


#4 Menu Navigasi



Pada menu Navigasi, saya buat menjadi tiga bagian dengan poin yang sama. Alias, sebenarnya isinya sama hanya berfungsi untuk tampilan responsive saja.

Pertama adalah kode ‘topnav’, kamu bisa mencarinya.

Kode tersebut untuk tampilan dengan layar dekstop.

Cara mengganti link dan menunya, lihat kode berikut!

<li><a href='#contact'>Tentang Saya</a></li>

#contact = untuk link url yang dituju
Tentang Saya = untuk tampilan menunya

Selanjutnya adalah menu navigasi untuk tampilan layarlebih kecil, umumnya untuk tablet.

Saya buat dengan kode ‘topnav1’, tinggal kamu cari. Lalu ganti url dan menunya.

Caranya sama!

Selanjutnya adalah menu yang tampil untuk layar ponsel, dimana saya beri kode ‘dropdown1’

Ini pun caranya sama, tinggal ganti saja urlnya dan menunya!

<a href='#'>Link 1</a>

#5 Sidebar

Pada sidebar ini ada perlakuan khusus, jadi agak ribet sedikit.

Yang perlu kamu tahu, pada sidebar saya buat dengan warna-warni seperi menu navigasinya.

Lalu,untuk di judul widget saya buat efek garis di antara judul [efek garis inilah yang memberikan langkah tambahan].

Simak saja, jika tanpa langkah tambahan bisa berantakan seperti ini!



Tapi dengan langkah tambahan bisa jadi seperti ini!



Langkahnya mudah saja, pertama cari dulu kode .sidebar



Pengaturan yang saya maksud bisa dilihat dari kode berikut!

.sidebar .widget:nth-child(1), #PopularPosts1 h2 span{background-color:#50b6e1; }

Jadi, yang diberi warna adalah background widget (.sidebar .widget:nth-child(1) dan bckground judul widget #PopularPosts1 h2 span.

Kalau kamu nggak mau pakai judul, hapus saja yang bagian judul widget. Tapi harus teliti, tanda komanya [,] harus dihapus juga. Kalau tidak dihapus kode csnya bisa tidak muncul.

Ini belum selesai, sekarang cari kode ‘sidebar’

Maka akan dibawa pada kode HTML sidebar. Pilih widget yang mau diatur, misal widget popularposts, Klik tanda titik-titiknya maka akan muncul kode yang panjang!

Cari kode <h2>data:title/></h2> yang ada di dalamnya.


Ganti dengan kode <h2><span><data:title/></span></h2>

Baru sekarang tekan tombol save.

Pengaturan di atas berlaku jika kamu ingin menambah widget baru, sebab jika menggunakan widget yang sudah ada pengaturannya sudah saya terapkan. Enak kan?

#6 Footer1

Footer1 ini sebenarnya adalah widget yang saya gunakan untuk pengganti sidebar saat tampilan responsive, atau pada tampilan ponsel.

Mengapa sedikit ribet gitu, sebab dalam penyusunan struktur templatenya saya buat float yang agak ribet dan tidak umum. Jadi harus diatur sedemikian rupa.

Nah, cara pengaturannya sama seperti sidebar, tinggal cari kodenya saja.

Kode css .footer1




#7 Popularposts

Untuk popularposts, sudah secara umum langsung muncul. Tapi cenderung tidak rapi karena ada gambar dan snippetnya.

Pengaturannya, kamu bisa masuk menu tata letak/layout. Pilih widget yang ada di Sidebar atau Footer1.

Pilih Trending Topics atau Popular Posts.



Hilangkan centang pada snippet dan image thumbnail

Lalu simpan!


#8 Label

Nah, pada widget label saya buat cloud label.

Pengaturannya, kamu bisa masuk tata letak/layout lalu pilih widget label dan ubah menjadi cloud.



Kamu bisa atur memunculkan jumlah postingan atau tidak. Sesuai selera saja!

Jika labelmu terlalu banyak, sering membuat labelnya keluar area widget. Maka, jika masalah itu datang perlu adanya tambahan pengaturan, yaitu dengan menambah padding bawahnya.

Caranya, masuk edit template.

Cari kode .cloud-label-widget-content

Maka akan muncul kode css berikut!

.cloud-label-widget-content{text-align:left;padding-bottom:50px;margin-top:10px;}

Nah, pada padding bottom atur saja sesuai kebutuhan. Yang penting tampilan label jadi lebih rapi!


#9 Fanpage

Sementara untuk Fanpage facebook, jika minat?

Fanpage ini sudah saya atur agar lebih responsive. Karena, dasarnya fanpage bawaan dari facebook (dengan kode aslinya) tidak responsive.

Kamu masuk lagi kemu tata letak/layout. Pilih salah satu widget html/javascript yang sudah saya siapkan. Lalu, masukkan kode di bawah ini!

<div class="fb-page" data-href="https://www.facebook.com/lukiluck11/" data-small-header="false" data-hide-cover="false" data-show-facepile="true"></div>

Ganti url fanpage pada kode https://www.facebook.com/lukiluck11/ dengan url fanpagemu!

#10 Subscribe



Untuk subscribe, atau kolom berlangganan email yang ada di bawah postingan, kamu bisa cari kode berikut!

<div id='subscribe-css1'>



Sekarang kamu bisa atur sendiri,seperti kata-kata persuasifnya.

Lalu lihat kode berikut!

http://feedburner.google.com/fb/a/mailverify?uri=GantengId

Ganti dengan url feedburner milikmu, atau bisa jugahanya mengganti GantengId dengan kode akun feedburner milikmu

#11 Tombol Share



Tombol share yang saya gunakan adalah dari pihak ketiga, dari Sumome. Mengapa? Menurut saya tampilannya lebih dinamis dan responsive.

Kodenya seperti ini!

<script async='async' data-sumo-site-id='80d2f638b216485014936b80ec38404a2b44433217911bfbb41aabc036216dd7' src='//load.sumome.com/'></script>

Tapi, kalaukamu ingin tampilan yang berbeda, bisa rubah sendiri mengikuti panduan memasang tombol share responsive pada blog.


Selesai sudah panduan memasang template blog Personal Track, kalau ada yang bingung jangan sungkan untuk tanya!