Tutorial pisahkan widget sidebar untuk simple template

Tutorial pisahkan widget sidebar untuk simple template. Ape yang dimaksudkan pisahkan widget sidebar ni, kita pisahkan satu persatu macam dalam gambar di bawah ini.

Sebelum buat tutorial sile save dulu template blog.

Dashboard>>Design>>Edit HTML>>Download Full Template.

Dah siap download[save],boleh mulakan tutorial.

1.Cari code 

/* Widgets

----------------------------------------------- */

*tekan ctrl+F untuk memudahkan pencarian.bile dah tekan akan keluar satu box. Mmasukkan code yang  nak di cari tu.

2. Lepastu copy code bawah ni

.sidebar .widget, .sidebar2 .widget {

background: #ffffff url(LINK GAMBAR BACKGROUND);

-moz-border-radius: 0em 0em 0em 0em;

border-radius: 0em 0em 0em 0em;

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;

text-align: justify;

border: 2px solid #000000;

text-transform:none;

}

3.Kemudian paste kat bawah sekali dalam bahagian widget, sebelum code /* Footer

4.Customize code mengikut pilihan masing-masing

ffffff-code warna background*code warne boleh >> http://userabbe.xtgem.com/code_warna

 LINK GAMBAR BACKGROUND-kalau nak letak backround

-moz-border-radius: 0em 0em 0em 0em;border-radius: 0em 0em 0em 0em;-bentuk widget,boleh tukar nilai 0 tu kepada 1 akan terbentuk corner.

margin: .5em 0;

padding:0 0 1.5em;

padding-left: 10px;

padding-right: 10px;

margin-bottom: 20px;-coding ni tak tukar pun takpe.kalau paham coding,bolehlah nak tukar.

text-align: justify;-boleh tukar align tajuk tu,kiri dan kanan..just type left or right.

border: 2px-ketebalan border widget sidebar

solid-boleh jugak buat dashed[garisan putus-putus]..tukar solid kepada dashed

000000-code warne border widget sidebar

5.dah siap customize, tekan preview dulu.

6. Jika dah berpuas hati bolehlah SAVE.

Siap!

Tutorial Buat Slider Sebagai Header Using JQuery

1. Log in blogger>>Dashboard>>Theme>>Edit HTML

2. Cari code

]]></b:skin>

3. Copy code bawah ni

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 560px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

4. Paste diatas code ]]></b:skin>

5. Kemudian cari code

</head>

6. Copy code bawah ni

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

 <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 560, navigation: false, delay: 5000 }); });</script>

7. Paste di atas code </head>

8. Save template

9. Pegi pada page element

dashboard>>page element>>Add a gadget>>HTML/Java

10.Copy code bawah ni

<div id='coin-slider'>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

    

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

</div>

11. Paste dalam box HTML tadi

560 - lebar boleh adjust ikut kesesuaian blog masing-masing

LINK Post - link post yang nak diletakkan dalam slide

URL image - URL image yang nak diletakkan dalam slide

Image's decription - boleh ambil terus dari post entry [copy+paste] atau nak buat ayat sendiri

Tutorial Tukar Font Dalam Blog Tanpa Install

1.Pilih font di web Google font API

Nak pilih font click sini

2. Log in blogger>>Theme>>Edit HTML>>Cari code <head>
*untuk memudahkan pencarian tekan cltrl+F serentak,kemudian masukkan code<head> dalam box pencarian td.

3.Copy code ni

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

4. Paste di bawah code <head> tadi
*pastikan code Font+Name korang tukar name font yang korang dah pilih tadi [yang Fiza bulatkan dalam gambar kat atas tu adalah contoh name font]

5. Copy code ni

font-family: 'Font+Name', arial, serif;

paste pada part yang korang nak tukar font

Page Text
cari code
body {

paste code
font-family: 'Font+Name', arial, serif;
selepas codebody {

contoh code yang dah siap

body {font-family: 'Font+Name', arial, serif; 

Tajuk Post entry
cari code
.post h3 {

 dan paste di bawah code .post h3{
contoh

.post h3 { font-family: 'Font+Name', arial, serif;

Sidebar
cari code
.sidebar h2 {
paste kat bawah code .sidebar h2{
contoh
.sidebar h2 { font-family: 'Font+Name', arial, serif;

untuk part lain pun same juga. Cari code dan paste selepas tanda { dan pastikan tiada code font selain code font-family tu ye.

Jangan lupa code Font+Name perlu tukar kepada name font

font arial dan serif tu tak kesah nak letak font ape sebab tu 2nd and 3rd font yang akan appear kalau first font yang korang pilih tu PC tak leh bace.

Kemudian preview. Kalau dah jadi dah puas hati, save terus. Kalau masih tak puas hati atau tak jadi re-check steps atau silap nama font atau coding.

Tutorial Letak Icon Facebook/Twitter/Friendster/Myspace di Tepi Blog

Log in blogger>>Dashboard>>Layout>>Add a gadget>>HTML/JavaScript

2.Copy kod kat bawah ni

<div style="display:scroll; position:fixed; top:200px; left:0px;">

<a class="linkopacity" href="http://www.facebook.com/facebook ID" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

</div>

3.Paste code dalam box HTML/JavaScript

4.edit code

200-kedudukan icon dari atas ke bawah

[kalau nak letak atas..boleh letak start dari 0px..kalau tengah,mungkin 300px..adjust la mane korang rase ok]

left-kedudukan icon

[nak letak kanan pun boleh]

0-jarak icon dari kiri ke kanan atau dari kanan ke kiri

[adjust ikut suke]

facebook ID-facebook ID korang

click profile and copy je url atas tu

Facebook-nama icon

URL icon/imageurl icon korang..boleh google je icon ni

5.save!

kalau nak letak lebih dari satu icon, copy kod bawah ni

<a class="linkopacity" href="http://www.facebook.com/instagram" target="_blank" rel="nofollow" title="instagram" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

paste selepas code <br /> yang pertama tadi

Tukar nama icon kepada media sosial yang kau orang nak.