Membuat Related Post di Blog

Membuat Related Post atau Tulisan Terkait kalau di Wordpress sebenarnya tidak sulit karena sudah ada pluginnya yang mudah ditambahkan disana. sedangkan di blogger tidak demikian sehingga mengharuskan kita untuk menambahkan sendiri scriptnya. Fungsi dari Related Post ini tentu disamping memudahkan pengunjung mencari informasi apa yang berhubungan dengan tulisan yang sedang dibaca, juga cukup membantu dalam mempromosikan tulisan-tulisan lainnya yang mungkin sudah lama diposting.

Sebenarnya sudah banyak sih teman-teman dan para blogger yang membuat tutorialnya, tapi, tidak salah juga kan kalau saya juga ikut menulisnya sendiri. (hehehe...) dan untuk kali ini yang saya tulis adalah Related Post tanpa Thumbnail.. jadi yang muncul cuma judul posting tanpa gambar. (kalau mau tahu hasilnya, lihat di bawah postingan ini yang ada tulisan BACA TERKAIT.

nah, berikut cara-caranya:

1. seperti biasa masuk layout lalu edit HTML. jangan lupa centang kotak "Expand widget Templates". atau kalau perlu download dulu template yang sedang dipakai sebagai back up kalau terjadi apa-apa. ;)

2. temukan kode ini: </head>

3. copy paste kode berikut ini dan letakkan tepat di atas kode tadi (</head>):

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


4. Kemudian cari kode ini: <p><data:post.body/></p>

5. Lalu copy paste kode berikut setelah kode di atas:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

6. oke. Save dan lihat hasilnya.

oia, untuk kode yang ditandai merah dalam pada no. 5, bisa diubah sesuai yang diinginkan. Related Post on bisa diganti dengan nama lain serta angka 10 untuk berapa banyak jumlah posting yang ingin dumunculkan per label/kategorinya.

Selamat mencoba !!

Cara Mudah Membuat Read More di Blog

Sebenarnya cara membuat Read More atau baca selengkapnya sangat gampang kalau anda memaki wordpress. wordpress memang sudah menyediakan fitur ini sejak lama. beda dengan blogger, fitur read more disini tergolong anyar karena baru ditambahkan beberapa bulan lalu.

kalau anda pengguna blogger dan ingin memakai ingin memakai fitur baru yang simpel ini, anda cukup merubah settingan editor yang ada di menu setting. rubah settigan anda dari old editor ke up date editor. hasilnya, silahkan lihat pada tampilan tempat anda menulis posting. disana akan muncul beberapa fasilitas tambahan yang salah satunya adalah Read more ini. penggunaannya pun mudah dan simpel karena anda tidak usah menambahkan script atau kode-kode tertentu di settingan template HTML anda. anda cukup meletakkan pointer dimana anda ingin memisahkan tulisan yang akan ditampilkan dengan yang tidak. setelah itu anda klik fungsi read more atau sparatornya nanti muncul garis pemisah antara keduanya. selesai.

nah, itu kalau anda memakai editor baru. bagaimana kalau anda masih memakai editor lama? tentu anda harus sedikit mengotak-atik template dan menambahkan beberapa kode HTML disana. dan berikut cara membuat read more di blogspot untuk editor lama:

1. Pada menu setting, pilih sub menu formating -> pada entri post text masukkan kode berikut:

<div class="fullpost">


</div>

klik SAVE.

2. pindah ke menu design -> edit HTML -> centang Expand widget.
3. Cari kode ini :

<div class='post-body'>

atau kalau tidak ada cari yang ini:

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

4. copy kode HTML berikut dan letakkan di bawah kode tadi:

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>

5. kemudian lihat ke bawah sedikit, ada kode :

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


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


6. letakkan kode beriku di antara kode tadi (no. 5):

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

atau di bawah kode yang ini: <p><data:post.body/></p>

7. Klil SAVE.

anda bisa merubah kalimat Read More... dengan yang lain, semisal selanjutnya, dst.
selamat mencoba.

kemudian untuk cara memakainya, ketika anda di halaman editor (tempat menulis postingan) klik Edit HTML (jangan COMPOSE) disiru anda akan menemukan kode yang telah anda pasang di settingan menu FORMATING tadi.

letakkan tulisan yang akan dimunculkan sebelum kode ini:

<div class="fullpost">

dan sisa tulisan (atau yang disembunyikan) letakkan setelahnya dan diakhiri dengan kode ini:
</div>

atau gampangnya:

(tulisan yang tampak sebelum read more)
<div class="fullpost">
(tulisan yang disembunyikan atau yang akan muncul dalam postingan jika read more-nya di klik)
</div>

* masalah yang kadang muncul adalah bahwa saat memposting tulisan terjadi eror.
1. biasanya diakibatkan oleh adanya kesalahan peletakan kode.
2. font dari tanda petik/kutib (" ") pada kode tadi: (<div class="fullpost"> ) tidak cocok dengan font template. untuk yang ini, ganti tanda kutibnya dengan cara membuangnya lalu tulis ulang dengan yang baru.

Menampilkan Script Sebagai Teks Biasa

sebenarnya saya juga bingung cara membuat script atau kode yang ingin kita kutib dalam postingan blog. karena biasanya kalau kita mengutip suatu script atau kode baik HTML atau java script maka kode tersebut tidak muncul dalam postingan kita alias tidak terbaca sebagai teks. kalau nggak gitu pasti muncul sesuatu yang aneh-aneh dalam konten postingan tersebut.
namun jangan khawatir ini ada cara mudah untuk melakukan itu. ada aplikasi online yang dengan mudah meng-generate kode atau script menjadi seolah teks bisa sehingga bisa terbaca seolah teks-teks yang lain. langsung saja kamu bisa masuk di sini



nanti kamu tinggal masukkan teks kode script yang kamu inginkan terus klik encode untuk merubahnya menjadi teks yang bisa muncul dalam postingan kamu. untuk melihat kembali script tadi dalam bentuk aslinya klik decode.

Tiga Langkah Mudah Membuat Blog di Blogger.com

Bagi kita yang ingin membuat sebuah blog di blogger.com, domain ini telah menyediakan tiga langkah mudah dan instant dalam pembuatannya yaitu melaui Create a blog in 3 easy step.
1. Create an account (mendaftarkan diri)
2. Name your Blog (memberikan nama blog, misalnya blogku, iblog, dsb)
3. Choose a template ( memilih template atau tampilan grafis yang telah disediakan oleh blogger). OK, mari kita mulai langkah pertama.

1.masuk dulu ke: Blogger . setelah keluar halaman pertama, kita bisa langsung mengklik button berwarna oranye yang bertuliskan Create Your Blog Now dan selanjutnya kita akan masuk ke langkah pertama. Yaitu create an account.

Disini kita diminta untuk memilih atau mengisi form yang diminta Blogger.com yaitu:
- username alias e-mail kita di lajur e-mail address
- password (sebaiknya yang mudah kita ingat) di lajur enter a password
- masukkan kembali password kita di lajur reenter password
- pilihlah nama blog yang ingin kita tampilkandi lajur display name.
- tulis ulang huruf yang yang ada di lajur word verification (sesuaikan antara huruf kecil dan capital).
- check kotak kecil di lajur acceptance of terms kemudian klik continue.



2.setelah tahapan pertama selesai, kita lanjutkan dengan menamai blog kita, yaitu: name your blog.
- tulis nama atau judul blog yang kita inginkan (sebaiknya menarik dan gampang diingat) di lajur title blog. Misalnya: my blog, diaryku, blog lucu, dsb.
- pilih alamat blog kita (URL) di lajur blog addres, yang menarik dan mudah diingat juga. Misalnya: myblog.blogspot.com, diaryku.blogspot.com dll… ingat jangan memberi spasi pada nama alamata ini. Kalau nama yang kita pilih telah ada yang memakainya, kita akan diberi peringatan dan nama tersebut harus diganti yang lain. Atau klik availability addres name untuk mengetahui hal ini.
- dibawahnya ada link advanced blog bagi yang punya hosting sendiri, jadi tanpa embel-embel blogspot.com. tapi kalau kita ingin memakai hosting gratisan blogger, abaikan saja link ini dan langsung klik ikon continue.



3.memilih pola /tampilan desain grafis blog kita atau choose a template merupakan tahapan terakhir dalam membuat sebuah blog. Di blogger.com telah disediakan beberapa template gratis yang sudah cukup menarik dan variatif. Kita tinggal memilih sesuai selera dan bisa kita ganti atau mengubahnya sewaktu-waktu. Kita juga bisa mendapatkan template yang lain di http://www.blogger.template.com.



4.Setelah selesai semuanya, klik continue dan akan muncul tulisan your blog hass been created. OK, selamat!!. Kamu sudah punya sebuah blog. dan sudah bisa dipakai. Jika kamu ingin segera posting atau memakainya klik start posting. Dan kalau kita sudah masuk ke blog kita, kita bisa menulis posting, mengubah setting tampilan, password, bahasa pengantar, profile dst. Nah… gampang kan?!

Membuat Marque Teks

apakah kamu lihat teks bergerak atau berjalan di bagian kanan bawah pada blog ini? atau contoh teks yang bergerak di bawah ini?
nah itulah yang disebut marque, yaitu sebuah efek yang menampilkan teks agar bisa bergerak.

(ini adalah contoh dari efek marquee )

berikut ini skript untuk membuat marque atau teks berjalan. copy paste kode tersebut dan terserah mau diletakkan dimana di blog kamu:

<marquee align="center" direction="up" height="200" scrollamount= "2"
onmouseover='this.stop()' onmouseout='this.start()' width="100%">

(teks atau kode tulis di sini)

</marquee>


* keterangan:
lef, up, down, right: arah gerak teks. height:"200" = tinggi tampilan marque dan scrollamount="2" = kecepatan gerak teks dengan angka 1 sebagai nilai paling cepat.

Menampilkan Status YM di Blog

Sering lihat gambar yang semacam ini     di blog/web?
Ya, ini adalah gambar status YM (Yahoo Messager) sehingga pembaca dapat mengetahui apakah kita sedang online atau offline.

nah, berikut adalah kode untuk menampilkan status YM kita:

<a href="ymsgr:sendIM?aadmail@ymail.com"> <img src="http://opi.yahoo.com/online?u=aadmail@ymail.com&amp;m=g&amp;t=2&amp;i=us" /></a>

copy script di atas lalu kamu pasang di sidebar kamu. masuk ke "Page Element" terus "Add a Gadget --> HTML/Javascript"

Ganti username dengan id Yahoo kamu (misalnya, di atas adalah YM saya: aadmail@ymail.com). lalu, untuk menyetting tampilan gambar, yang perlu diubah adalah t=2 yang ada di baris paling belakang. t=2 dapat diubah menjadi angka lain antara 1 sampai 16. Contoh tampilan gambarnya adalah sebagai berikut dengan angka di depan gambar adalah angka yang dapat digunakan:

selamat mencoba !