Cara Memasang Total Post & Total Komen

Assalamualaikum..Pekabor semua?? Sebagai permulaan setelah lama meniggalkan dunia blogging..kira post pertama yang ditulis di tanahair ni..kita mula dengan perkara mudah aje..Pasang Total Post dan Total Komen.

Macam biasa dalam keadaan Loggin. Copy kod2 dibawah dan paste di Add a Gadget => HTML/Javascript.

<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://NAMABLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://NAMABLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

Gantikan text merah dengan nama blog Antum..Dah siap klik save yer..

Highlight Script/Kode Pada Postingan

Membuat Highlight pada script atau kode di postingan akan lebih menampakkan pembaca. Macam blog ini. Setiap kali ada script/kode Ana akan highlightkan. Ini caranya.. Tapi Ana baru je upgrade highlight ni. BroSKL boleh pakai yang ni dulu.

1. Login ke blogger pastu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

.alert {
background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border: 1px solid #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, Antum tukarla mengikut kesesuaian template Antum.Boleh dapatkan script warna DISINI.

3. Pastu klik butang save yer..

Cara Posting..

Tambahkan kode ini <p class="alert"> sebelum kode/script yang akan dihighlight. kemudian tambahkan kode </p> diakhir script/Kode.

Perhatikan contoh dibawah.

<p class="alert">.alert {
background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border: 1px solid #223344;}</p>

Selamt Mencuba!!

Cara Menukar Icon Pada Address Bar

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu). Contohnya disebelah alamat Ana ada icon greenstar dan jika di Blogspot maka icon default yang akan timbul adalah gambar seperti ini : Ini namanya "Favorite Icon/Favicon"

Kalau rasa nak tukar dengan icon/gambar yang kita inginkan, caranya sangat mudah, cuma dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira-kira 50x50 pixel (sebenarnya tiada ukuran yang tepat, cuma kita nakkan file yang lebih kecil dan cepat dibuka). ok .....next masuk ke "Layout => Edit HTML" pastu copy kode dibawah dan pastekan sebelum kode</head>

<link href='http://almansuqie-tips.com/starstar21.gif' rel='SHORTCUT ICON'/>

Tukar text yang ditebalkan dengan warna biru dengan link gambar/icon yang sudah Antum uploadkan. Ana biasa upload di Photobucket dan juga di Imageshack..Kalau Antum nak upload kat tempat lain pun boleh. Asalkan dapat link gambar tu.

ok setle...Selamat mencuba!!

Cara Membuat Link Download

Menjawab pertanyaan pkgkualapilah dengan detail, Ok caranya mudah sekali..Ada dua cara kita boleh gunakan untuk buat link download.

1. Pertama dengan text link.. Biasa kita tulis Download Disini. Ok untuk yang ini boleh refer pada Tip Memasukkan Link Di Postingan.

2. Cara kedua dengan menggunakan kod ini..

<a href="http://s302.photobucket.com/albums/nn113/aburifaie/?action=view&current=down.jpg" target="_blank"><img src="http://i302.photobucket.com/albums/nn113/aburifaie/down.jpg" alt="Download"></a>

3. Gantikan text merah dengan link Download Antum dan text ungu dengan link Icon Donwload Antum. Ini hasilnya.Klik icon untuk Download Mozilla Firefox 3.

Cara Menghilangkan Status Message

Status message ini akan muncul di atas posting bila kita tekan label atau kita search artikel dalam blog tersebut. Ada sesetengah orang tidak suka dan rasa menyemak je kan, dan terasa nak buang terus status ini. Ok jangan risau, ini cara membuangnya.

1. Sekiranya kita menekan label, ia akan muncul begini,


2. Sekiranya artikel yang kita cari menggunakan kotak search yang disediakan atau pada navbar tiada, maka status begini akan muncul.



3. Loggin ke Blogger, pada layout pilih Edit HTML. Jangan lupa tandakan pada kotak “Expand Widget Templates”. Untuk langkah berjaga2 sila "Download Full Template dulu".

4. Seterusnya cari kod ini.. Guna Ctrl+F untuk lebih cepat. Delete kod berwarna merah.

<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>

5. Siap padam klik butang save.. Insyaallah xkan muncul lagi. Kalau Antum memerlukannya kembali, cuma kembalikan kod merah tu ke tempatnya.

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

Memasang Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Kalau nak emoticon lain Antum boleh ke Chokilala.com. Disana ada macam² emoticon yang comel dan menarik. Chokilala memang pandai buat emoticon. Ok untuk yang ini, caranya begini..

Tutorial ini memerlukan kepada langkah berikut:-

1. Menggunakan Web Browser Firefox, mesti guna Firefox, yang lain tak boleh.. nak pulak IE yang kurang best tu. Maka bertukarla ke Firefox. Download Sini. Pastikan sudah menggunakan Firefox untuk step seterusnya.

2. Memasang Add-ons Greasemonkey. Kalau belum Install Disini. Senang aje. Ikut arahannya. Bila selesai, akan muncul icon kepala monyet yang berjambul dibawah.

3. Seterusnya install script emoticon Yahoo! Messenger dengan mengetik Script Ini. Bila keluar satu kotak, klik pada Install.

Ok selesai.. Emoticon sudah wujud di post editor Antum. Selamat beremosi dalam menulis.

Tambahan: Kalau gambar di posting Antum telah diborderkan, maka setiap emoticon yang ditampilkan akan berserta dengan border. Untuk hilangkan border tersebut, tambahkan kode ini sebelum ]]></b:skin>

img.emoticon {
border: 0;
}