Mereund Blog

Home » Archives for March 2009

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan

versi Read More yang lama (part 1). Bila versi
terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan
pemangilan fungsi <div class="fullpost">..</div>
atau <span class="fullpost">..</span>
dimana kode ini biasanya kita tanamkan secara manual kedalam halaman
postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih
canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis
tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam
postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar
yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman
saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang
ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah
karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan
dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang
jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke
tutorialnya saja ok.

Penting! Yang sudah memasang Read More
versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus
kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi
tinggal disesuaikan saja)

<div class='post-header-line-1'/>

<div class='post-body'>

<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'>Readmore</a>

</b:if>

<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas
kode </head> Kalo sudah, jangan lupa di simpan
terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

Masih pada halaman EDIT HTML, Beri tanda
centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode
<data:post.body/> dengan semua kode dibawah ini

<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 == "item"'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

Trik Blogger | Related Posts Statis

Apa itu related posts? Mungkin kamu sudah pada tahu. Kalau dijelaskan lagi... bisa-bisa membuat kamu tambah tidak sabar untuk segera mencoba trik blogger ini. Tapi untuk memudahkan bagi pengunjung yang baru lewat, silakan baca garis-garis besar related posts | posting yang berkaitan. OB, please dech.

OK...OK.. Berikut trik memasang related posts statis (posting yang berkaitan) dalam satu lokasi tertentu, yaitu di bawah posting :

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Copy kode script related post di sini.

<b:if cond='data:blog.pageType == "item"'> <div class='similiar'> <div class='widget-content'> <h3>Related Posts by Categories</h3> <div id='data2007'/><br/><br/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>

Cari kode <data:post.body/> (atau sejenisnya, tergantung template) dan paste kode script di bawahnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Khusus untuk blog yang telah memasang readmore, baik readmore biasa ataupun readmore tanpa loading halaman. Kode <data:post.body/> biasanya akan terdapat 2 kode, letakkan kode script di bawah kode yang pertama.

Jangan lupa disimpan

Catatan :

Silahkan ganti kalimat "Related Posts by Categories" (warna merah) dengan kalimat favorit kamu, seperti ; Baca Juga Postingan Ini, Tautan Artikel Pada Kategori yang Sama, Posting yang Terkait dengan Label, dan sebagainya. Caranya dengan melakukan edit HTML --> cari related posts by categories --> ganti dengan kalimat favorit kamu.

Kemudian silakan diganti nilai 100 (warna merah), yakni jumlah posting per-label yang akan ditampilkan.

Terakhir ganti nilai 3 (warna merah) yang artinya akan menampilkan tiga label sesuai dengan label posting aktif dibaca/dibuka oleh pengunjung blog.

Kode yang berwarna hijau diartikan bahwa kode yang dilingkupinya (widget) akan muncul, jika posting terbuka secara menyeluruh.

Posting yang berkaitan :

Trik Blogger | Related Posts Dinamis

(Sumber : Membuat Artikel yg Berhubungan (Related Post) by Kendhin)

Selamat membuat related posts statis...

Trik Blogger | Related Posts Dinamis

Setelah dijelaskan dalam garis-garis besar related posts (GBRP), bahwa trik blogger tentang related posts dapat dibagi dua trik. Yang pertama bersifat dinamis dan kedua bersifat statis. Dalam posting ini OB akan mengulas tentang related posts yang bersifat dinamis.

Supaya ngga kelupaan lagi... Langsung kita buka layar pertunjukkan trik blogger yang bertitle membuat related posts dinamis (kaya film aja) :

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Copy script berikut dan paste di atas kode </head>

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

Catatan :

Kode yang berwarna merah merupakan jumlah judul posting yang ingin ditampilkan.

Javascript di atas sudah dikompres melalui Online YUI Cimpressor.

Masih dalam "Edit HTML", cari kode di bawah ini :

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop>

</b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Jika sudah ketemu, sisipkan kode berwarna merah di antara kode di atas.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>

Catatan :

Sesuaikan kode yang berwarna biru dengan jumlah judul blog yang ingin ditampilkan dalam javascript related posts.

Simpan dulu template kamu

Pilih tab Tata Letak --> Elemen Halaman --> buatlah elemen baru atau "TambahGadget" dalam blog kamu (entah itu di sidebar, footer, atas posting, bawah posting).

Trik tambahan

Untuk menambah elemen baru yang belum ada di atas atau di bawah posting, trik bloggernya adalah sebagai berikut :

Cari kode dibawah ini

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

...dan seterusnya ...

</b:widget>
</b:section>

Apabila kamu ingin menambah elemen di atas atau di bawah posting cukup dengan menambahkan kode :

<b:section class='main' id='main1' showaddelement='yes'/>

Di atas posting --> letakkan kode yang berwarna hijau di atas kode yang berwarna merah.

Di bawah posting --> letakkan kode yang berwarna hijau di bawah kode yang berwarna merah.

Coba lihat Tata Letak --> Elemen Halaman (Terdapat elemen baru di atas atau di bawah elemen posting)

Jika sudah membuat elemen baru --> Tambah Gadget --> pilih HTML/JavaScript dalam widget atau gadget, kemudian masukkan kode berikut :

Jangan lupa diberi judul (ex : Posting yang berkaitan)

Selanjutnya agar related posts tidak tampil di halaman pertama atau hanya tampil apabila kamu mengklik sebuah judul posting, maka diperlukan modifikasi kode lagi [sampai disini sudah pusing apa belum??? ya, ngga lah ... (sambil garuk-garuk kepala)].

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget.

Cari kode yang sesuai dengan judul widget related posts yang kamu masukkan, seperti pada contoh di atas judulnya adalah Posting yang berkaitan.

Tambahkan kode sisipan berwarna merah seperti di bawah :

<b:widget id='HTML111' locked='false' title='Posting yang berkaitan' type='HTML'>

<b:includable id='main'>

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



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Catatan :

Untuk kode id='HTML111' abaikan saja, karena tiap template mungkin beda-beda.

Jangan lupa disimpan

Posting yang berkaitan :

Trik Blogger | Related Posts Statis

(Sumber : Cara menampilkan posting yang berkaitan (Related Posts) by O-OM)

Selamat membuat related posts dinamis...

Garis-Garis Besar Related Posts | Posting yang Berkaitan

Related posts merupakan bagian judul posting yang biasanya ditampilkan berdasarkan keterkaitan (kesamaan) label atau kategori. Cara kerjanya adalah apabila kamu mengklik sebuah judul posting, maka judul posting lain yang mempunyai keterkaitan (kesamaan) label atau kategori akan muncul secara otomatis dan umumnya berada di bawah postingan yang kamu klik tadi. Point akhir dari trik blogger ini, yaitu memberikan penawaran kepada pengunjung blog kamu untuk kembali membaca artikel lain yang memiliki keterkaitan dengan postingan yang dia baca sebelumnya.

Secara garis-garis besar related posts (GBRP) atau posting yang berkaitan dapat dibagi menjadi dua, ada yang bersifat dinamis dan ada pula yang bersifat statis. Lho, mengapa seperti itu? Untuk lebih jelas mari bersama-sama kita mengaduk-aduk trik blogger tentang related posts.

Related posts yang bersifat dinamis merupakan salah satu widget atau gadget blogger yang bisa kamu letakkan dielemen manapun (asal masih dalam area blog kamu). Bisa di elemen bawah posting, sidebar kiri atau kanan, dan sebagainya. Karena sifatnya yang dinamis itulah, maka triknya agak sedikit susah tapi dengan hasil yang memuaskan. Sedangkan related posts yang bersifat statis hanya ditempatkan melalui satu lokasi, yakni di bawah postingan.

Jadi bagus yang mana dong trik bloggernya? Terlepas dari kata "bagus" dan "tidak bagus", seluruhnya OB serahkan pada masing-masing pribadi. Yang penting kamu suka dan menikmati hasil dari modifikasi kamu sendiri. Jangan pula kamu melahap begitu saja apa yang dikatakan orang, seperti : "Wah, kalau pakai trik yang itu rugi", "Kalau pakai trik yang ini banyak untungnya lho", dan seterusnya. Kecuali ada yang berkata seperti ini : "Kalau pakai trik ini, kamu akan dapat duit" atau "Pakai trik yang ini, maka pagerank kamu naik"

OB bicara mulu, jadi kelupaan sama trik bloggernya he..he..he.. Ini nih OB beri link postingnya sebagai berikut :

Trik Blogger | Related Posts Dinamis

Trik Blogger | Related Posts Statis

Selamat membaca link related posts...

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

Betapa sulitnya mempelajari format style pada koding CSS yang susunannya tidak
beraturan, jangankan yang baru belajar, yang sudah mengerti sekalipun pasti
dibuat pusing untuk menganalisanya ulang. Tidak masalah bila struktur pengkodean
kita sendiri yang membuatnya, bayangkan saja bila itu buatan programmer lain,
belum lagi jika si programmer menggunakan
mode
style CSS terkompresi, pasti ribet
sekali khan jika harus mempelajari dengan menelusuri kodingya satu-persatu.

Nah, kali ini ada solusi termudah dimana rekan bisa dengan cepat
mengembalikan struktur style CSS yang sebelumnya acak2an menjadi lebih
teratur dan lebih tertata rapi. Saya sarankan coba saja gunakan layanan dari
Styleneat. Udah Basi Om!!
hehehe ya enggak lah, mana mungkin saya ngasih info layanan terbaru kalo tidak
terlebih dahulu masuk best review diluar sana, yang jelas layanan ini benar2
baru di launching tahun 2009 ini :)

Contoh susunan CSS yang tidak beraturan:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }

Contoh susunan CSS yang teratur dan tertata rapi:

#id1 { property: value; }
 
  #id1 .class1 { property: value; }
 
    #id1 .class1 a {
       property: value;
       property2: value2;
       property3: value3; }
 
       #id1 .class1 a span {
          property: value;
          property2: value2; }
 
#id2 { property: value; }
 
  #id2 .class { property: value; }

Jujur saja, sebenarnya banyak juga programmer yang kadang malas mengatur tata
letak dari selector, value dan property pada CSS Syntax ini, masalahnya
kebanyakan si programmer merasa kode tersebut dia sendiri yang menyusunnya, jadi
mau diedit kapanpun juga dia merasa tetap mengerti alurnya. Saya sendiri
sebenarnya termasuk yang malas juga mengatur struktur pengkodean ini, padahal
bila ditata dengan rapi untuk kedepannya pasti lebih mudah untuk mempelajarinya
kembali, yang jelas ini memudahkan kita mengingat antara satu kode dengan lainya
yang saling berhubungan. Silhakan dicoba dan dipelajari sendiri ok :)

Memasang Tukaran Link dengan Text Area

Nah dalam posting ini kamu langsung belajar menggunakan dua trik blogger. Yah, itung-itung sambil menyelam minum air (asal jangan kelelep). Biasanya dengan menyediakan tempat untuk bertukar link, diharapkan mampu menarik minat para blogger lain untuk memanfaatkannya. Fungsinya bukan hanya di situ doang... Tukaran link (link exchange) juga dapat digunakan sebagai bookmark yang dipasang dalam elemen blog. Kok bisa...? Coba bayangkan jika kamu sering membaca blog yang kamu link (favorit link), kebetulan kamu lagi membuka blog sendiri. Di sana sudah tersedia link-nya, jadi tinggal nge-klik dan langsung dibawa ke alamat blog favorit kamu. Selain itu juga dapat berguna untuk ajang promosi blog. Ketika orang lain mengunjungi blog teman kamu dan di blognya ada link kamu. Mungkin mereka tertarik untuk meng-kliknya, lumayan untuk nambah trafik walaupun tidak seberapa. Namun perlu diingat nge-link harus yang berkualitas sesuai dengan tema dan kata kunci blog kamu, agar ngga jauh-jauh amat dengan SEO.

Text area merupakan kode pembantu untuk menampung berbagai tulisan, baik yang standart maupun berupa kode-kode HTML. Fungsinya untuk memadatkan suatu tulisan supaya tampil ringkas. Coba kamu buka posting icon emosi (emoticon) dalam komentar, membuat readmore tanpa loading halaman, dan trik blogger | related posts dinamis, kelihatan panjang dan serasa menelusuri rel kereta api (posting sendiri, kok dijelek-jelekin).

Baiklah mari bersama-sama kita mulai trik blogger mengenai memasang tukaran link dengan text area :

Siapkan image sebagai perwakilan blog kamu.

Kamu bisa membuat sendiri dengan software editor gambar atau kalau lagi malasnya kambuh cara gampang untuk membuat image atau gambar dengan mengunjungi Chicklette.net.

Simpan image kamu ke dalam media penyimpanan atau komputer dan upload ke situs penyimpanan gambar (Picassa, Flickr, Photobucket, dan sebagainya).

Copy kode berikut :

<h2>Tukaran Link</h2>

<br/><br/>Cukup copy text dalam area dan paste dalam blog anda. <br/>Saya akan segera linkback kembali.<br/>

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oncbrD0ZzwseyBF0pAiuDaBGIL1KlSsCUtZzoVq5l0TijOWURjknrOlbMytvEb1D3eB2ThVOef0KZ7esunH5wTH-Nrv0q95XZBmsDyoyiOScNk92YMMrg2a9-k37Ho1xA8uuqIpsS4c/s144/Chicklet%20OB.png"/>

<br/>

<textarea rows="6" cols="20" name="code">

<a href="http://optimasi-blog.blogspot.com/" target="_blank">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oncbrD0ZzwseyBF0pAiuDaBGIL1KlSsCUtZzoVq5l0TijOWURjknrOlbMytvEb1D3eB2ThVOef0KZ7esunH5wTH-Nrv0q95XZBmsDyoyiOScNk92YMMrg2a9-k37Ho1xA8uuqIpsS4c/s144/Chicklet%20OB.png"/></a>

</textarea>

Ganti kode yang berwarna merah dengan alamat penyimpanan image kamu dan alamat blog kamu.

Catatan :

Kode rows="6" digunakan untuk mengatur tinggi text area dan kode cols="20" untuk mengatur lebar text area.

Hasilnya akan seperti ini :

Tukaran Link OB

Cukup copy text dalam area dan paste dalam blog anda.

Saya akan segera linkback kembali.

Pilih tab Tata Letak --> Elemen Halaman.

Tambah Gadget dalam elemen (ex: sidebar) blog kamu.

Dalam "Tambahkan Gadget", pilih HTML/JavaScript.

Paste kode tukaran link di atas.

Lihat tampilan blog kamu.

Contoh area tukaran link di Optimasi Blog, silakan klik "Tukaran Link" disini.

Selamat memasang tukaran link dengan text area.

Trik Membuat Cloud Label (Label Awan)

Apaan tu...? Label awan merupakan salah satu bentuk kumpulan daftar label yang ditampilkan seakan-akan berada di atas awan. Trik blogger ini juga sangat menarik untuk di adopsi dalam blog kamu. Kalau biasanya kamu hanya menggunakan label default bawaan widget atau gadget blogger.com, sekarang kamu memiliki salah satu variasinya. By the way... dari pada ngomong melulu lebih baik kita mulai saja triknya.

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>

atau kode-kode yang sejenis dalam template blog kamu.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Tambahkan kode berikut di bawahnya (update).

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Catatan :

Ganti kode yang berwarna merah secara berturut-turut dengan lebar area label ("240"), tinggi area label ("300"), dan warna area label ("#ffffff") sesuai dengan ukuran elemen halaman (lokasi peletakkan label awan) di blog kamu. Kamu pun bisa menyeting besar kecilnya huruf dengan merubah angka ("12").

Jangan sampai kelupaan jika kamu merubah warna area label. maka kamu mungkin perlu juga merubah warna teksnya yang ditunjukkan dengan warna hijau (333333). Khusus untuk perubahan warna teks, cara memasukkan kode tanpa embel-embel #.

Atur putaran kecepatan dengan mengganti kode berwarna biru (100), makin besar makin cepat.

Jangan lupa disimpan

Sumber : Blogumus: a flash animated label cloud for Blogger! oleh Amanda Fazani

Versi demo silakan dikunjungi Demo Optimasi Blog.

Cara Pasang Image di Sudut Blog

Salah satu trik blogger agar blog kelihatan tambah menarik adalah memasang image di sudut blog. Pemasangan image bisa di atas kiri, atas kanan, bawah kiri, dan bawah kanan. Selain itu trik ini juga dapat dimanfaatkan untuk fungsi yang lain, sesuai dengan apa yang kamu inginkan. Sebab kalau disebutin kebanyakan...

Tanpa ba..bi..bu.. lagi, langsung kita mulai trik memasang image di sudut blog :

Pilih Tata Letak --> Edit HTML.

Tambahkan kode berikut di atas kode ]]></b:skin>.

#anima_sudut {

position:fixed;_position:relative;top:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Ganti kode yang berwarna merah dengan posisi image yang kamu inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri). Dan atur kode yang berwarna hijau sesuai dengan tampilan di blog kamu.

Kemudian tambahkan kode ini di atas kode </body>.

Ganti kode yang berwarna merah dengan alamat blog dan alamat penyimpanan image kamu.

Jangan lupa disimpan

Selamat mencoba pasang image di sudut blog...

Icon Emosi (Emoticon) dalam Komentar

Emosi disini bukan amarah lho... Kadang pengunjung blog setelah membaca suatu posting, ia ingin mengomentari isi postingan tersebut. Komentar pun dapat berupa apa saja. Ada yang hanya sekedar petramax dan ada pula yang betul-betul memberikan saran, kritik serta komentar lainnya yang betul-betul dianggap suatu komentar. Terlepas dari itu semua, tidak jarang pula komentator ingin meng-apresiasi-kan komentarnya dalam bentuk icon. Nah, ini yang belum terdapat dalam widget atau gadget blogger.com, sehingga kamu perlu menambahkan trik blogger tersendiri dalam komentar blog.

Agar lebih caem pasangkan trik blogger ini dengan kotak komentar di bawah posting. Hirup napas panjang-panjang melalui hidung dan lepaskan melalui mulut. Kemudian relaks... Yap, kita mulai cara menambahkan emoticon dalam komentar

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari kode </body> dan copy-paste (copas) kode berikut di atasnya :

<script type='text/javascript'>
//<![CDATA[

a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = a.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\]/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-\o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\//gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\*/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
_str = _str.replace(/8-\}/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
_str = _str.replace(/~x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
_str = _str.replace(/b-\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\L/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = c.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\]/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/;\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-\o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\//gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\*/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
_str = _str.replace(/8-\}/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
_str = _str.replace(/~x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
_str = _str.replace(/b-\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\L/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

Sebagai bahan evalusi source codenya dapat didownload di Ziddu.

Kemudian cari kode di bawah ini. Kalau ada dua kode, pilih yang kedua :

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Letakkan kode berikut di bawah kode yang berwarna merah.

<div style='width: 480; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
</div>

Catatan : Sesuaikan kode yang berwarna merah dengan template blog kamu.

Jangan lupa disimpan

Sumber : Pasang Emoticon di kotak komentar oleh o-om

Update

Oleh sebab, banyaknya Narablog yang mengalami kegagalan dalam memasang trik ini di blognya, maka OB sedikit menambahkan beberapa perubahan yang harus teman - teman lakukan pada template blognya masing - masing.

Agar lebih aman, sebaiknya Narablog terlebih dulu menyimpan perubahan ini dalam bentuk apa saja (yang penting bisa disimpan & dapat dipergunakan nantinya). Dengan kata lain, “resiko ditanggung sendiri”. :)

1. Cari kode seperti di bawah ini :

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

2. Ganti dengan kode berikut :

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

Untuk versi demo & ingin mencoba hasilnya, silakan lihat di Demo Emoticon dalam Komentar. Selamat ber-emoticon di komentar.

Membuat Readmore Diikuti dengan Judul Posting

Readmore lagi,...readmore lagi... Maklum masih laku di pasaran para blogger. Biasanya kalau kamu sering melakukan "blog walking" (jalan-jalan ke blog lain) dan mungkin dari beberapa blog yang dikunjungi, kamu melihat potongan posting. Kemudian di bawah potongan posting tersebut ada link dengan tulisan "selengkapnya..., readmore..., dan sebagainya. Nah, itulah "bendanya" yang disebut readmore.

Apabila kamu ingin agar readmore ada di blog kamu, coba kamu baca trik bloggernya dalam postingan membuat readmore atau membuat readmore tanpa loading halaman blog. Namun tidak jarang sebuah trik tanpa diembel-embeli dengan assesoris rasanya masih ada yang kurang. Begitu pula dengan readmore, seandainya ditambahkan dengan judul posting kelihatannya tambah mantap. Adapun syarat untuk menggunakan trik blogger ini adalah kamu telah menggunakan readmore dalam blog kamu sebelumnya. Sudah ya... Baiklah, mari kita mulai trik menambah judul posting dalam readmore :

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cara menambahkan judul posting dalam readmore biasa dan readmore tanpa loading halaman blog adalah sebagai berikut :

1.1 Pertama, kalau kamu menggunakan readmore biasa. Cari kode di bawah ini :

<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/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

1.2 Ganti kode yang berwarna merah dengan kode :

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

<strong><a expr:href='data:post.url'>Lanjut membaca “<data:post.title/>” »» </a></strong>

1.3 Jadi kode seluruhnya akan seperti ini

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>

<strong><a expr:href='data:post.url'>Lanjut membaca “<data:post.title/>” »» </a></strong>

(Sumber : Membuat Read more Plus Judul Artikel oleh Kang Rohman)

2.1 Kedua, kalau kamu menggunakan readmore tanpa loading halaman blog. Silakan cari kode di bawah ini :

<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);'>[+/-] Hide Readmore...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

2.2 Ganti kode yang berwarna merah dengan kode berikut :

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore “<data:post.title/></a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore “<data:post.title/></a></p>

</span>

Jangan lupa di simpan

Selamat menambah judul posting dalam readmore...

Kreasi Avatar anda Sendiri dengan urFooz

This summary is not available. Please click here to view the post.

Menampilkan Kode HTML dalam Postingan

Tidak jarang dalam sebuah postingan blog, kita ingin menampilkan kode HTML. Dan bukan rahasia lagi, apabila hal tersebut juga dapat menambah daya tarik pengunjung blog. Apalagi kalau blog kamu ber-tema-kan tips dan trik blogger, tutorial blog, serta optimasi blog.

Menampilkan kode HTML dalam postingan tidak seperti menulis kode biasa. Jika dalam postingan kamu memasukkan kode originalnya, maka yang tampil dalam postingan adalah hasil terjemahan bahasa HTML dari kode tersebut. Coba copy kode berikut dan langsung paste dalam entry (postingan) blog kamu :

<b>"Kok, kodenya ngga muncul???"</b>

Hasilnya mungkin seperti ini "Kok, kodenya ngga muncul???"

Di bawah ini merupakan 2 (dua) trik blogger praktis agar kode HTML muncul dalam postingan :

Pertama adalah dengan cara manual, yaitu merubah karakter-karakter kode tertentu. Mari kita lihat karakter-karakter yang perlu diganti :

Kode	Ganti Kode dengan
<	<
>	>
"	"

Kedua adalah dengan memparse kode HTML yang akan kamu masukkan dengan menggunakan layanan situs online. Silakan kamu kunjungi :

Parse Kode HTML

Centricle.com (http://www.centricle.com/tools/html-entities)

Masukkan kode yang akan kamu parse, kemudian tekan "Encode" atau jika ingin mengembalikan ke kode semula tekan "Decode".

Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php)

Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".

Selamat menampilkan kode HTML dalam postingan...

Membuat Readmore Tanpa Loading Halaman Blog

Sebelumnya kita telah membahas mengenai Membuat Readmore, namun halaman blog diloading ulang. Sedangkan pada saat jaringan internet lambat atau kebanyakan pernak-pernik kode script dalam blog akan menyebabkan waktu yang dibutuhkan untuk loading lumayan lama. Tentu hal tersebut berpengaruh pada kenyamanan pengunjung dalam me-eksplorasi posting blog kamu. Nah, trik blogger berikut adalah bagaimana readmore tidak perlu melakukan loading ulang ketika di klik. Dengan kata lain, kamu hanya menyembunyikan posting berikutnya di bawah tulisan readmore.

Kalau kamu berminat, mari bersama-sama kita mengulas readmore tanpa loading halaman blog. Adapun langkah-langkahnya adalah sebagai berikut :

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Copy kode berikut :

<script src='http://blogoptimization.googlecode.com/files/Readmore_unloaded_page.js' type='text/javascript'/>

Kalau kamu mempunyai situs penyimpanan file "readmore.js" sendiri, silakan ganti kode yang berwarna merah dengan alamat penyimpanan file kamu tersebut.

Paste kodenya, di atas kode </head>

Cari kode di bawah ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Ganti semua kode yang berwarna merah dengan kode berikut :

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

Di bawah kode tersebut terdapat kode <p><data:post.body/></p> atau kode sejenisnya, seperti : <data:post.body/>

Atau jika kamu telah memodifikasi seperti pada readmore sebelumnya jadi seperti ini :

<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/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>

Ganti dulu semua modifikasi readmore (warna merah) sebelumnya dengan kode :

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

Selanjutnya tambahkan kode berikut di bawah kode <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);'>[+/-] Hide Reedmore...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Jadi seluruh kodenya akan menjadi seperti berikut :

<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);'>[+/-] Hide Readmore...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Arti kode HTML di atas adalah menyembunyikan posting setelah kode <div id="fullpost"> ([+/-] Readmore...), jika di klik akan menampilkan seluruh posting yang diakhiri dengan </div> ([+/-] Hide Readmore...). Kemudian jika "[+/-] Hide Readmore..." diklik, maka akan mengembalikan posting dalam bentuk semula (posting singkat).

Untuk kode yang berwarna hijau dapat kamu ganti dengan kata yang kamu kehendaki, seperti ; Selengkapnya... dan Ringkasan..., Baca Lanjutannya... dan Post Singkat..., serta kata-kata lainnya.

Jangan lupa disimpan

Sekarang Klik tab Pengaturan --> Format

Di layar paling bawah, ada text area kosong disamping tulisan "Template Posting", isi area kosong tersebut dengan kode di bawah ini :

<span id="fullpost">
</span>

Jika blog kamu masih menyimpan residu trik blogger membuat readmore sebelumnya, maka kotak area template posting berisi kode seperti berikut :

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

Ganti kode yang berwarna merah "class" dengan kode "id", sehingga menjadi :

<span id="fullpost">
</span>

Simpan pengaturan format

Selamat membuat readmore tanpa loading halaman blog...

Cara Otomatis Membuat Keyword via Keywordle

Bingung menentukan keyword yang paling dominan sesuai deskripsi halaman
blog anda? kalo iya, saya sarankan mencoba aplikasi otomatis membuat
keyword dengan bantuan Keywordle.
Cara menggunakan aplikasi ini juga tidak sulit, kita tinggal memasukan saja
alamat URL tujuan dan biarkan keywordle sendiri yang menganalisa
keyword yang sekiranya paling sesuai. Jika kurang sreg dengan hasil keyword yang
diberikan, kita bisa menyortirnya sendiri kok, dan menentukan keyword mana saja
yang sekiranya pantas digunakan. Selain itu aja juga fasilitas
Show meta-tag code yang isinya berupa kompilasi listing dari meta-tag
keyword yang siap rekan copy-paste dihalaman blog masing2 tentunya :).

Sudah dicoba belum? tolong jangan protes untuk hasil akhir keakuratannya ya,
yang jelas aplikasi ini sepertinya khusus buat yang malas aja kali, masa
menentukan keyword sendiri aja bingung hehehe

Sumber:

agusramadhani.com

Memasang Kotak Komentar di Bawah Posting

Berbicara tentang fakta penggunaan form komentar blogger.com yang agak rumit, mungkin ada benarnya. Eit... tunggu dulu, sebab itu dulu sekali. Sebagai akibat dari komplain dari penggunanya, Blogger.com telah memperbaiki salah satu fiturnya tersebut. Tidak percaya, coba kamu kunjungi dan baca posting Embedded Comment Form di bawah posting oleh O-OM dan Kotak Komentar Di bawah Posting oleh Kang Rohman. Kalau kamu lagi suntuk dan ingin buru-buru ingin memulai trik blogger mengenai memasang kotak komentar di bawah posting, mari bersama-sama kita mengulas one by one :

Langkah I

Di Dasbor title blog kamu --> klik tab Pengaturan --> pilih sub tab Komentar atau dalam Kustomisasi --> pilih tab Pengaturan --> klik sub tab Komentar.

Di bawah sub tab Komentar --> Cari "Penempatan Formulir Komentar" dan beri tanda "Disemat di bawah entri".

Simpan Setelan.

Kemudian lihat blog, apabila letak formulir komentar blog kamu telah berada di bawah posting berarti trik blogger kamu telah berhasil dengan sukses.

Tapi jika ulasan trik di atas belum merubah posisi formulir komentar blog, itu artinya kamu sudah pernah melakukan modifikasi template blog tersebut. Jadi gimana dong? Jangan pakai bete dulu, karena masih ada alternatif trik blogger lain yang dapat kamu kerjakan. Sudah siap... OK.

Langkah II

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari kode di bawah ini [kode HTML dalam setiap blog mungkin berbeda, tapi memiliki kemiripan (ex : <div class='comment-footer'> atau <div id='comment-footer'>)] :

<p class='comment-footer'>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</p>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Ganti kode di atas dengan kode berwarna hijau di bawah ini :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

Ingat : kode "p class" memiliki kemiripan dengan "div class" atau "div id" (tergantung template blog).

Jangan lupa disimpan

Lihat blog kembali, jika masih belum berhasil. Coba ulangi trik blogger memasang kotak komentar di bawah posting pada "Langkah Pertama", setelah kamu melakukan trik pada "Langkah II". Dan semoga berhasil?!?

Selamat memasang kotak komentar di bawah posting...

Cara pasang Auto Read More terbaru (Part 2)

Trik Blogger | Related Posts Statis

Trik Blogger | Related Posts Dinamis

Garis-Garis Besar Related Posts | Posting yang Berkaitan

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

Memasang Tukaran Link dengan Text Area

Tukaran Link OB

Trik Membuat Cloud Label (Label Awan)

Cara Pasang Image di Sudut Blog

Icon Emosi (Emoticon) dalam Komentar

Update

Membuat Readmore Diikuti dengan Judul Posting

Kreasi Avatar anda Sendiri dengan urFooz

Menampilkan Kode HTML dalam Postingan

Membuat Readmore Tanpa Loading Halaman Blog

Cara Otomatis Membuat Keyword via Keywordle

Memasang Kotak Komentar di Bawah Posting

Popular Posts

Arsip Blog

Label Blog

Total Pageviews

March 2009 - Mereund Blog