Cara Membahagikan Posting

Tutorial ni bukan la Ana yang buat.. Ini hasil kepandaian Amanda Fazani sohib BloggerBuster. Ana sekodar edit sikit2 aje.. Sebenarnya dah ade template yang dibuat khas dengan bentuk ini, namanya Minima Magazine Template. Contoh Template ni, tp lebih kemas.Ok caranya begini..

1. Pilih Layout => Edit HTML. Tambahkan kod dibawah selepas </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
height:285px;
width: 238px;
float: left;
overflow: hidden;
}
</style>
</b:if>

2. Antum ubahkan lebarnya mengikut lebar main-wrapper. Contoh blog Ana ni, saiz main-wrapper 512px, jadi Ana saizkan dengan 238px untuk dapatkan 2 kotak. Maby boleh dapat 3 kotak jika main-wrapper yang lebih besar.

3. Seterusnya klik preview dan lihat hasilnya... kalau dah berjaya savela.

p/s: sila gunakan Read More V2

Membuat Read More V2

Sebelum ini Ana dah postkan Cara Membuat Readmore yang bila ditekan akan teruskan memaparkan keseluruhan tanpa perlu loading. Ok sekarang ni kita buat readmore yang lain sikit. Tutorial ini sebenarnya terbit lebih awal.. kira version 1, tapi disebabkan Ana postkan kemudian maka jadilah V2. Ok ini caranya..

1. Pilih Layout => EditHTML. Tandakan pada kotak "expand widget template". Cari kod ini..

<p><data:post.body/></p>

2. Kalau dah jumpa gantikan dengan kod di bawah.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

3. Tulisan merah boleh diubah..Siap dah...Klik Save.

4. Seterusnya paling penting. Untuk buat readmore pada entry, gunakan kode ini. lihat contoh.

Awal penulisan bermula<span class="fullpost">Penulisan yang selebihnya yang ingin direadmorekan</span>

Jenis-Jenis Border, Tambah dan Buang

Ape itu border?? Entahla..Garisan luar la gitu.. Template kita biasa dihiasi dengan border, untuk image, header, sidebar dan macam² la. Ok kali ini kita sama² mengenali jenis2 border yang disediakan untuk blogger. Biasanya kod border adalah seperti ini.

border:1px solid $bordercolor;

1. Merah adalah saiz border, Boleh dibesarkan dan dikecilkan. Selain dari px, boleh juga menggunakan kod ini.

*1px (atau lebih)
*thin
*medium
*thick

2. Biru adalah jenis-jenis border, Antaranya ialah:

*none
*hidden
*dotted
*solid
*dashed
*double
*groove
*ridge
*inset
*outset

3. Ungu adalah warna border. Boleh juga guna kode warna. Dapatkan kod warna Disini.

Ok kita terus kepada jenis-jenis border. Contoh pada image pada posting.

.post img {
border:2px solid #ff00ff;
}

.profile-img {
border: 2px dashed #ff00ff;
}

.post img {
border:2px outset #ff00ff;
}

.post img {
border:2px inset #ff00ff;
}

.post img {
border:6px ridge #ff00ff;
}

.post img {
border:6px dotted #ff00ff;
}

Contoh lain tu kasi cuba sendirila di blog Antum ye..

Kalau nak buang border pula begini yer..

.post img {
border:0px;
}

Ok sampai sini dulu..

Sumber:Tip For New Blogger

Cara Memasukkan Gambar di Header v2

Sebelum ni Ana dah buatkan tips untuk memasukkan sebarang gambar ke dalam header. Tutorial ni Ana buat khas untuk sahabat Manns'gor kerana tidak berjaya memasukkan gambar ke dalam header dengan tips sebelum ni. Sian Manns. Ok caranya begini..

Sediakan gambar header berukuran 660x250 (tinggi ikut sukala) dan uploadkan untuk dapatkan linknya.. Mudah upload di Photobucket

1. Loggin => Layout. Kali ini kita ke bahagian Edit HTML. Cari kod dibawah..

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

2. Tambahkan kod berwarna merah..

#header-wrapper {
background-image:url(http://i302.photobucket.com/albums/nn113/aburifaie/91.jpg);
height:250px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

3. Tukar link yang kelip² tu dengan link gambar Antum.Ini link header Ana. Xboleh guna. Tukarkan kod tinggi sekiranya gambar Antum lebih atau kurang dari 250px tinggi. Pastu klik preview dan lihat hasilnya.. Insyaallah gambar sudah muncul..

4. Tapi belum siap.. Border di dalam masih menyibuk kan.. Antum boleh buang atau besarkan die.. Cari kod ini, bawah sikit je.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Kod merah tu ialah border, kalau nak buang delete aje.. kalau nak besarkan tambah dengan kod height:238px; seperti ini..

#header {
height:238px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Ok siap Alhamdulillah..

Cara Memasang Chat Box

ChatBox atau Shoutbox..satu ruang untuk berkomunikasi diantara tuan blog dengan pengunjungnya. Ada macam² jenis chatbox yang biasa digunakan oleh blogger, antaranya Cbox, ShoutMix, Oggix, Tag-World, GoogleTalk dan lain².

Ok harini Ana nak buat tutorial khas untuk Cbox. Sebab Ana sendiri pun guna cbox, dan juga untuk yang bertanya. Ok caranya..

1. Masuk ke laman ini. Klik Cbox ni.


2. Klik pada Get your own free Cbox now! atau sign up di atas untuk daftar akaun.

3. Isikan maklumat di ruangan ini.. dan klik Create my Cbox jika selesai. Gambar dibawah akan muncul jika Antum sudah berjaya daftar.

4. Seterusnya Daftar masuk kedalam akaun menggunakan username dan pasword yang Antum create tadi.. Kalau boleh pasword ni sentiasa diingati.


5. Untuk mendapatkan kodnya klik pada publish!. Jika mahu menukar warna cbox ini klik pada Look & Feel => Edit Style.

6. Copy kod yang diberikan dan paste kedalam blog. Pergi ke bahagian Layout => Page Elements => Add a Gadget => HTML/Javascript.

Ok siap...!

p/s: Kalau nak edit color Cbox ini setelah ditambah di blog, cukup sekadar menekan butang save dan refresh blog Antum tanpa memasukkan kod yang baru.

Membuat Read More di Template Classic

Template Classic pun boleh buat readmore rupanya.. Manala Ana tau kan, xpernah guna pun tempalte classic ni. Terjun je dalam dunia blogging ni terus guna yang baru kan. Tutorial ni hanya untuk simpanan peribadi. Kalau ade kengkawan yang masih still classic bolehla dijadikan panduan. Ok ini cara...

1) Loggin => Template.

2) Masukkan code CSS atau style sheet Summary post (Yg berwarna merah) tu di antara <style type="text/css"> dan </style>

Contoh:

Name: Ms. Moto (Pinky Lee variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
----------------------------------------------- */


/* Primary layout */

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: #555;
background: #d7b url(http://www.blogblog.com/moto_ms/outerwrap.gif) top center repeat-y;
font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}

3) Kemudian untuk meletakkan pautan Read More.. Cari code Blog Item Body dan letakkan code pautan tersebut di bawahnya.

<$BlogItemBody$>

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

4) Lepas tu Save Template.

5) Kemudian seperti biasalah letakkan code Span Full Post di setiap entri Antum atau bila nak Create post yg baru iaitu:

<span class="fullpost"></span>

Contoh:

Ini adalah ringkasan ceritaku blabla pokpek!
<span class="fullpost">
Dan ini adalah selebihnya dari ringkasan tersebut
</span>

6) Kalau nak buat read more setiap kali posting, Antum boleh letakkan kode ini di bahagian Settings=> Formatting=>Post Template.

summary here
<span class="fullpost">
Type rest of the post here
</span>

Sumber : Muncet.com