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://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. 

Post a Comment

12 Comments

  1. Tak susah pun kan? Senang je sebenarnya..

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

      Delete
  2. 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.

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

      Delete
  3. 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?

    ReplyDelete
  4. 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 :)

    ReplyDelete
    Replies
    1. Hehehe sekarang mai dh tak buat cemtu :P

      Delete
  5. Terima kasih Mai!! Sangat2 membantu. Muahciked! Hehehe

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

      Delete
  6. mya nak tanya macam mana nak buat menu tab?

    ReplyDelete
    Replies
    1. Hi sis... Nanti mai jawab kat blog sis ya :D

      Delete