TUTORIAL PASANG FREE RESPONSIVE TEMPLATE (PART 2)

Baca Tutorial Pasang Free Responsive Template (Part 1)

Orait dalam Part 1 kita dah berjaya download dan pasang responsive template kan. So Mai nak guide cara nak atur template kita pula. Tapi guide ni basic je okay, ehehe, sebab Mai pun tak pandai sangat. 

04. RUANGAN PENULIS/ABOUT

Copy code dibawah dan paste pada ruangan 'about'

<center><div class="about-me-widget-wrapper">

<img src="LINK GAMBAR AUTHOR" alt="About [span]me[/span]" /> <br/>

<div class="about-me-title">Hi, Assalamualaikum.</div><div class="about-me-text"><p>UCAPAN ANDA</p></div> <div class="signature-image"><img src="LINK GAMBAR SIGNATURE" /></div>

<div class="clear"></div>

</div></center>

Tukarkan tulisan berwarna PINK dengan URL gambar , manakala tulisan BIRU dengan ucapan anda.

05. INSTAGRAM WIDGET

Untuk masukkan gambar Instagram korang, Mai suka guna apps SnapWidget kerana dia mmg update laju bila kita upload gambar baru kat Instagram, dan apps ni juga kita boleh pilih nak gambar tu grid ataupun nak dia scrolling (sentiasa bergerak). 

• First sekali, masuk SnapWidget dan Sign Up. (Mai sign up guna Facebook je)
• Then lepas dah masuk tu klik CREATE A NEW WIDGET

• So nanti akan keluar macam gambar kat bawah, so korang baca la yang mana korang bekenan, then terus klik CREATE YOUR WIDGET. Katalah kita nak jenis scrolling, so pilih yang paling kiri tu. 

• Editlah ikut suka korang, lepas dah siap klik UPDATE WIDGET dan copy code tu, paste dalam layout blog korang. Settle. (tengok contoh scrolling kat bawah)

06. SLIDER BLOG

Kalau template yang korang download jenis ada slider, so maknanya blog korang pun akan ada slider. Slider tu macam mana? Macam ni;

Kalau blog Slider korang tak berfungsi, maknanya adalah tu yang tak kena. Kemungkinan sebab kenapa slider blog korang tak muncul adalah :

1. 5 blog post paling latest korang tak ada Labels. Labels wajib okay. Cuba check balik, at least masukkan satu label untuk satu entry. InsyaAllah akan muncul.

2. Ataupun korang ada letak kat add a gadget korang tu coding lazyload untuk kononnya ringankan blog, buang sekarang! hahaha.

3. Kalau semua masalah ni dah settle tapi slider korang masih tak muncul, maybe patut cari je template lain atau purchase template tu, biasalah barang free mesti ada kekurangan.

07. LINK BUKA KAT NEW TAB

Yang ni penting sebab tak nak menyusahkan readers kena tekan button back lepas baca link. Caranya mudah sangat!

• Buka blogger dashboard > Template > Edit HTML
• Cari code  </head> ( gunakan ctrl + F  untuk mempermudah pencarian code )
• Paste code <base target='_blank' /> di ATAS/SEBELUM code </head>
• Save.

08. TUKAR WARNA HIGHLIGHT

• Buka blogger dashboard > Template > Edit HTML
• Cari code  ]]></b:skin> ( gunakan ctrl + F  untuk mempermudah pencarian code )
• Paste code berwarna merah di ATAS/SEBELUM code tadi. (Tukar code warna biru dengan code warna pilihan korang.

::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::selection {
background:#000000;
color:#FFFFFF;
}

09. EDIT BLOCKQUOTES

• Buka blogger dashboard > Template > Edit HTML
• Cari code  </head> ( gunakan ctrl + F  untuk mempermudah pencarian code )
• Copy code berwarna merah di ATAS/SEBELUM </head>

<style>

.post blockquote {

@import url(https://fonts.googleapis.com/css?family=Lato);

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_K2q9h_dYxSEtIY6i57x5-_478wDZUolaBX-vmm2NMW4UpvfIlI8zV59eK3D58xE9O3LHP30IzEBXtoXbpc1K_aVPFUUtoa97yaXLH8hAcqQ0sBTQ6KYhzTbIzFys2IJy-2S-tEsFDMV/h120/blockquote.png) no-repeat;

border: dashed 2px #ccc;

color: #333;

font-family: Lato;

margin: 30px;

padding: 20px 30px 30px 40px; 

} 

</style>

Tukar tanda berwarna biru dengan link dan font family mengikut font pilihan korang di Google Font.

10. TAMBAHAN

Rasanya sampai disinilah tips dan tutorial yang dapat Mai kongsi untuk menukar template kepada responsive ini. Semoga berguna. 

Untuk dapatkan kotak shoutbox terbaru boleh baca SINI.

Untuk dapatkan blockquotes cantik jenis lain baca SINI

Terima kasih! Harap bermanfaat. 

BACA TUTORIAL PASANG FREE RESPONSIVE TEMPLATE (PART 1)