31 May 2012

Tutorial : Edit Blog Ala-ala Blogskin

Aina Sofea | 10:15 PM | 1Comments |
Assalamualaikum !
Apo Khabor ??


Dear Diary ,

Ramai cakap blog saya cantik . Jadi , saya nak ajar korunk edit blog . Ok , utk menampakkan effect "blogskin" ikut tutorial dibawah :




  1. Dashboard > Settings > Formatting
  2. Ce tengok kat "Show at most" tu
  3. Tukarkan digit yang tertera kat sebelah tu kepada "1" .
  4. Save Settings
Dengan cara ni , blog korunk akan terlihat seperti "blogskin" yang hanya akan menunjukkan post terbaru sahaja . (kalau tak suka , tak payah ikut step ni , ok?)

Tukar Jenis Template

Step ini tidak wajib . Sekiranya tidak mahu buat , tidak mengapa . Tetapi , sekiranya tidak mahu pening , lebih baik buat .

  1. Dashboard > Design > Template Designer
  2. Pilih "Simple" (pastikan pilih yang berbackground biru)
Header
  1. Ikut tutorial ni (jika tidak tahu cara membuat header)
  2. Untuk memasang header , Dashboard > Design > Header
  3. Choose File
  4. Save !

Transparent Header
Memang korunk dah buat transparent header , tapi kenapa background-nya tetap berwarna putih ?? Haihh ! Hairan tul ! 
  1. Dashboard > Design > Edit HTML
  2. Cari /* Mobile (bagi memudahkan pencarian , CTRL+F)
  3. Copy Kod dibawah & Paste kod tu di ATAS kod yang korunk cari tadi

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}
Buang Shadow yang berkeliaran
  1. Dashboard > Design > Edit HTML
  2. Cari .content-outer { (bagi memudahkan pencarian , CTRL+F)
  3. Korunk akan jumpa kod-kod dibawah . Buang semua kod tu .
 .content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}
Background Comel

  1. Cari URL Background dari Meera , Photobucket atau MyCuteGraphics
  2. Copy Direct Link background tu dengan cara "Copy Image URL" , "Copy Image Location" atau "Direct Link" 
  3. Pastekan Direct Link tu di TextEdit atau PowerPoint
  4. Dashboard > Design > Add A Gadget > Java Script/HTML Code
  5. Copy And Paste kod dibawah di dalam ruangan yang disediakan
*Gantikan "Direct Link BG" kepada Direct Link yang korunk letak kat TextEdit/PowerPoint tu


Garis Pembuka & Penutup Post Title/Sidebar Title


1. Sidebar Title

  1. Dashboard > Design > Edit HTML
  2. Cari h2 { (bagi memudahkan pencarian , CTRL+F)
  3. Copy & Paste kod ni diBAWAH h2 { 

border-bottom:1px dashed silver;
border-top:1px dashed silver;

2. Post Title

  1. Dashboard > Design > Edit HTML
  2. Cari h3.post-title { (bagi memudahkan pencarian , CTRL+F)
  3. Copy & Paste kod ni diBAWAH h3.post-title {
border-bottom:1px dashed silver;
border-top:1px dashed silver;
Border Pada Sidebar

  1. Dashboard > Design > Edit HTML
  2. Cari .sidebar .widget{ (bagi memudahkan pencarian , CTRL+F)
  3. Copy & Paste kod ni diBAWAH .sidebar .widget{

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px dashed #BCA9F5;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px}
*Peringatan !! 
Tulisan yang diboldkan dengan warna merah itu boleh digantikan dengan warna yang lain. cari di sini.
Sekiranya tidak menjumpai kod ".sidebar.widget{" , copy & paste kod ni di kotak ADD CSS di Template Designer :
.sidebar .widget{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px dashed #BCA9F5;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px}
Menu Tab

  1. Sebelum apa-apa , buat page sendiri . Dashboard > Edit Posts > Edit Pages
  2. Tekan "CREATE A PAGE" dan buat page 
  3. Buka software pilihan anda (seperti Photoshop , Photoscape , Pixelmator atau Pixlr) .
  4. Lakarkan tajuk page menggunakan software
  5. Upload image itu di Imgur untuk mendapatkan direct link
  6. Dashboard > Design > Add A Gadget > JavaScript/HTML Code
  7. Copy & Paste kod dibawah pada kotak yang diberikan


LINK BLOG URL KORANG" target="_blank">142px; height: 51px;" src="LETAK IMAGE URL DI SINI" border="0" />LINK PAGES  PERTAMA" target="_blank">143px; height: 51px;" src="LETAK URL IMAGE DI SINI" border="0" />LINK PAGES KEDUA" target="_blank">142px; height: 51px;" src="LETAK URL IMAGE DI SINI " border="0" />LINK PAGES KETIGA" target="_blank">142px; height: 51px;" src="LETAK URL IMAGE DISINI" border="0" />
 
Peringatan !!!
Gantikan perkataan yang dibold-kan dengan warna merah pada link page yang anda create.
Gantikan perkataan yang dibold-kan dengan warna biru pada url image yang korunk buat guna software


Copyright Yang Tersendiri
Lebih baik korunk buat copyright yang tersendiri . Jangan main ikut jer step yang orang beri . Tambahkan dekorasi supaya copyright tu memang hak korunk . Haa .. Aina bagi 1 cadangan . Korunk tambahkan dekorasinya .

  1. Buka Software pilihan anda dan create your own copyright .
  2. Pastuh >>KLIK SINI<<
Lain-lain fasal COPYRIGHT YANG TERSENDIRI
Dekorasi Tambahan Blog
Ini bagi menambahkan effect "blogskin" . Ia akan nampak tersendiri . Dekorasi ni haruslah DIY !! Korunk boleh buat apa saja tambahan . Kalau yang terror bab coding , boleh korunk edit html blog korunk . 

Lain-lain fasal DEKORASI TAMBAHAN BLOG
 Tutorial: Buang Shadow Pada Keliling Blog
 Tutorial: Welcome Image Pada Blog
 Tutorial: Cara Tukar  Home,Older Post & Newer Post  kepada Icon Comel
 Tutorial: Cara Letak Icon Comel Sebelah Bloglist
 Tutorial: Cara Letak Icon Comel Sebelah Blog Archive
 Tutorial: Note Setiap Bawah Post
 Tutorial: Tulisan/Text Berkelip-kelip
 Tutorial: Cara Disable Right Click
 Tutorial: Cara Tukar Dashboard Baru Kepada Dashboard Lama
 Tutorial: Cara Tukar Perkataan Comment Kepada Icon Comel/Image
 Tutorial: About Me/Profile ada Icon Comel
 Tutorial: Cara Tukar Warna & Pattern Underline Pada Post
 Tutorial: Double Underline Pada Post
 Tutorial: Favicon Icon Comel
 Tutorial: Status Update Macam CikMeera 
 Tutorial: Cara Buat Button Follow & Dashboard Pada Blog
 Tutorial: Sparkling Cursor Macam Cikmeera 
 Tutorial: Cara Ubah Warna Highlight
Kalau ada apa-apa soalan , boleh comment kat sini atau di shoutbox

1 comment:

Tinggalkan komen , jom ?? LIKE SINI dan FOLLOW SITU lah juga yaa ?? ^_^



"Budi Bahasa Budaya Kita"