Tampilkan postingan dengan label Read More. Tampilkan semua postingan
Tampilkan postingan dengan label Read More. Tampilkan semua postingan
Jumat, 05 Juni 2009

Memasang Auto Read More ( Terbaru)

Read More atau baca selanjutnya kali ini sangat mudah dan tidak memeningkan. Tidak seperti sebelum ini yang memerlukan kita menggunakan kod <span class="fullpost"> atau <span id="fullpost"> untuk memotong entri. Ramai jugak yang tanya Ana bab tanam kod tu, ramai xberjaya.

Read More terbaru ni canggih sikit, kerana pemotongan entry dilakukan secara automatik tanpa perlu memasukkan kod. Dan lagi, Read More ini boleh menampilkan gambar pertama yang ada dalam entri tu diawal entri, walaupun gambar tersebut berada di tengah atau dihujung. Ok tak nak terang banyak2, kita cuba terus.04. Ini contoh Auto Readmore yang Ana buat kat satu blog.

Sebelum kita mula, pada yang dah guna Read More sebelum ni, pastikan remove kod2nya terlebih dahulu. Kalau rasa nak pakai Auto Read More ni la. Kalau malas xyahla.10

1. Cara Membuat Read More
2. Cara Membuat Read More v2


i. Ok ini caranya. Masuk ke Edit HTML. Tanda pada kotak Expand Widget Template yer.

ii. Tambahkan kod dibawah sebelum kod </head>.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/almansuqie/autoreadmore.js' type='text/javascript'/>


iii. Keterangan kod diatas. Kod2 merah boleh diubah ikut selera masing2.

var thumbnail_mode = "float"; (Kedudukan gambar thumbnail.("float") disebelah kiri. Kalau xmau ganti dengan ("no-float").
summary_noimg = 250; (Jumlah huruf yang ingin ditampilkan tanpa gambar thumbnail.)
summary_img = 250; (Jumlah huruf yang ingin ditampilkan beserta gambar thumbnail.)
img_thumb_height = 120; (Tinggi Gambar)
img_thumb_width = 120; (Lebar Gambar)


iv. Seterusnya cari kod berikut. Gunakan Ctrl+f untuk lebih cepat.

<data:post.body/>


v. Dah jumpa? Gantikan/Replace dengan kod dibawah.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


vi. Tulisan READ MORE - diatas boleh diubah. Nak tulis baca lagi ke, ape ke, silakan. Kalau xnak ade tajuk lepas tulisan Read More tu, buang kod ini <data:post.title/>.

vii. Boleh preview dan lihat hasilnya. Kalau dah menjadi klik tombol Save tu.

Selamat Mencuba.

Sumber: o-om.com
Unknown Read More
Selasa, 02 Juni 2009

Pasang Star Rating Pada Posting

Ingin tahu rating sesuatu post dalam blog kita, boleh pasang widget ni. Seperti dibawah post ini ada lima bintang warna kuning. Kalau rasa post ni bagus boleh la bagi bintang skit. Ok ini disediakan kod javascript untuk ditanam dalam template. Caranya..

1. Macam biasa dalam kedaan Loggin. Edit HTML. Tanda pada kotak Expand Widget Template. Cari kod berikut.

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


2. Dah jumpa, tambahkan kod berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='JavaScript'>
var OutbrainPermaLink=&#39;Your-Post-Permalink-Here&#39;;
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://www.geocities.com/almansuqie/limabintang.js' type='text/javascript'/>
</b:if>


3. Tambahan: Kod <p><data:post.body/></p> kemungkinan sudah berubah atau tiada lagi sekiranya Antum gunakan Read More. Tapi jangan kecewa, cuba cari tulisan Read More tu. Tambahkan kod diatas diakhir kod Read Morenya.

4. Dah siap klik save..
Unknown Read More, Widget
Kamis, 21 Mei 2009

Jadikan Tulisan Read More Icon

Khas untuk Cik Farah, tokey muffin kite 10Payah Ana nak jelaskan kat shoutbox. Kene tukar, ganti, tambah kod html ni. Caranya senang saja, sama macam kita nak buat link bergambar. Hanya gantikan sebarang tulisan dengan kod image ini. <img src='http://alamat gambar.gif'/>.

Ok sekarang Ana tumpukan untuk gantikan tulisan Read More. Berpandukan tutuorial ini.

1. Cara Membuat Read More
2. Cara Membuat Read more V2

Loggin ke blogger => Edit HTML. Tanda kotak Expand Widget Template. Pastu cari kod Read More Antum ni.

# Untuk no.1, cari kod ini.

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>


# Untuk no.2/v2, cari kod ini.

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


Dah jumpa, gantikan tulisan merah dengan kod image ini. Kalau Antum dah tukar dengan tulisan lain, gantikan saja.

<img src='http://Alamat Gambar Antum.gif'/>


Preview. Dah ok klik Save.

Tambahan tuk farah. Enti punya tu lain sikit. Cari kod css ni, delete background tu tau.

#showlink {
background: transparent url(http://i302.photobucket.com/albums/nn113/aburifaie/readmore-1.jpg) no-repeat left;
....
....
}
#hidelink {
background: transparent url(http://i302.photobucket.com/albums/nn113/aburifaie/readmore-1.jpg) no-repeat left;
.....
.....
}

Unknown Read More
Jumat, 20 Februari 2009

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>



Unknown Read More, Tips
Minggu, 01 Februari 2009

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
Unknown Read More, Tips
Jumat, 14 November 2008

Membuat Baca Selanjutnya

Artikel terlalu panjang?? jangan risau, boleh dipendekkan. Baca selanjutnya versi ni lebih mudah dan menyenangkan. Sambungan artikel akan dibuka di halaman yang sama. Nak tengok contoh boleh kesini. Ana sangat suka "read more" versi ini. Ok jom lihat cara membuatnya.

1. Loggin ke Blogger=>"Layout=>Edit Html". Jangan lupa tanda pada kotak "Expand Widget".


2. Cari kode di bawah ini:

</head>


3.Tambahkan kode ini di atasnya :

<script type='text/javascript' src='http://www.geocities.com/almansuqie08/bacaselanjutnya.js' />


4. Seterusnya cari kod ini <div class='post-header-line-1'/>. Dibawahnya akan ada kod seperti ini.

<div class='post-body entry-content'>


5. Gantikannya dengan kod dibawah.

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>


6. Kemudian dibawahnya ada kod ini.

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


7. Tambah kod berikut tepat dibawahnya.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


8. Ok kita lihat keseluruhannya kodnya seperti ini.

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] ReadMore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Summary...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


9. Tulisan [+/-]ReadMore... dan [+/-]Summary... boleh digantikan mengikut selera Antum. Dah siap klik butang save.

Tambahan : Untuk meletakkan 'ReadMore' di sebelah kanan posting sila tambahkan kode dibawah sebelum kode ]]></b:skin>

#showlink {
font-size: 12px;
float: right;
margin-right: 20px;
margin-top: 20px;
font-weight: none;
}

#hidelink {
font-size: 12px;
float: right;
margin-right: 20px;
margin-top: 20px;
font-weight: none;
}


Dah siap save yer.. dan lihat hasilnya dengan membuat new post.

Contoh penulisan :

Penulisan bermula disini
<span id="fullpost">
Penulisan baca selanjutnya bermula disini
</span>


Jika Antum berminat untuk membuat baca selanjutnya setiap kali Antum posting, pergi ke "Setting=>Formatting=>Post Template" dan tambahkan kode ini kedalamnya..

<span id="fullpost">

</span>

Unknown Read More