TUTORIAL PASANG FREE RESPONSIVE TEMPLATE (PART 2)



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)INSTAGRAM WIDGET
  • Then lepas dah masuk tu klik CREATE A NEW WIDGET
INSTAGRAM 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. 
INSTAGRAM WIDGET
  • 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;

slider responsive blog

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://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/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. 

Previous
Next Post »

12 Comments

Click here for Comments
Fatin
admin
11/27/2016 9:43 PM ×

Tak susah pun kan? Senang je sebenarnya..

Reply
avatar
Adam
admin
11/27/2016 9:56 PM ×

Tentang blog ni saya memang bengap, bukan sikit bahkan banyak. Saya tak tau apa template. Saya akan baca lagi hingga saya paham baru saya berani godeh blog saya. Part one pun belum baca. Akan baca.

Reply
avatar
Noor Maizan
admin
11/28/2016 1:20 AM ×

Hihi takpa slow2 Adam. Nanti kalau nak tanya apa2 saya okay ja, kalau boleh tlg saya akan tlg.

Reply
avatar
Noor Maizan
admin
11/28/2016 1:20 AM ×

Betul tu Fatin, mudah tp kena biasalah diri dulu dgn segala coding dan template,hehe

Reply
avatar
Beeha Azman
admin
11/28/2016 6:44 AM ×

sis, macam mana awak punya snapwidget awak okay ye penuh dari hujung ke hujung? Beeha dh try ubah width semua tapi dia still jadi separuh je.. And macam gmbar awak dekat bawah tu bila kita halakan cursor dia keluar icon fb pinterest semua?

Reply
avatar
Siqah Hussin
admin
11/28/2016 7:28 AM ×

Link buka kat new tab.. ingatkan mula2 kenapalah mai buat camtu. Tapi bila dah baca reason, betul jugak ek mai. Senangkan readers jugak nanye :D

Nice sharing, mai :)

Reply
avatar
Ana Fatihah
admin
2/10/2017 12:51 AM ×

Terima kasih Mai!! Sangat2 membantu. Muahciked! Hehehe

Reply
avatar
Noor Maizan
admin
2/11/2017 2:44 AM ×

Beeha.. mai guna snapwidget. hehehe

Reply
avatar
Noor Maizan
admin
2/11/2017 2:44 AM ×

Hehehe sekarang mai dh tak buat cemtu :P

Reply
avatar
Noor Maizan
admin
2/11/2017 2:45 AM ×

Waaa harap membantu tau Ana, kalau ada problem roger2 je Mai.

Reply
avatar
4/26/2017 8:45 PM ×

mya nak tanya macam mana nak buat menu tab?

Reply
avatar
Noor Maizan
admin
4/26/2017 9:28 PM ×

Hi sis... Nanti mai jawab kat blog sis ya :D

Reply
avatar