Bisnis Kecil Modal Kecil

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 Statis

Posted by rike No comments

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".

Copy kode script related post di sini.

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.

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...

0 comments:

Post a Comment

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...

Trik Blogger | Related Posts Dinamis

Posted by rike No comments

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 :

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)

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 :

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...

0 comments:

Post a Comment

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...

Garis-Garis Besar Related Posts | Posting yang Berkaitan

Posted by rike No comments

Trik Blogger | Related Posts Dinamis

Trik Blogger | Related Posts Statis

Selamat membaca link related posts...

0 comments:

Post a Comment

Sejak mengawali perjalanan wisata dalam rangka liburan Galungan, Nyepi dan Kuningan yang kali ini terjadi berurutan dalam 2 (dua minggu) sehingga membuat daerah bali terjadi libur yang cukup panjang.

Pantai Weru

Meski postingan kali ini agak nyeleneh dari ilmu komputer tetapi karena ini adalah bagian dari mencari hiburan di selah-selah kesibukan dengan rutinitas yang menjemuhkan kita perlu

Akhirnya Kembali Juga Nge"Blog"

Posted by rike No comments

0 comments:

Post a Comment

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/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/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/AVvXsEicfvVLszs9Czzaah8UCIIePa2tQQCEHHtrZ0F8E6z0uy4bW1OvfzE5jp-N5BYG79WeQF8YDNcXTbti1AbnRo-pqaA5K0LNn4QiwCobkhJJ_q0O3s36sc25e3A9_0O5QqF-4_aJoaQQ-cM/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.

Memasang Tukaran Link dengan Text Area

Posted by rike No comments

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 :

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.

0 comments:

Post a Comment

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.

Trik Membuat Cloud Label (Label Awan)

Posted by rike No comments

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.

0 comments:

Post a Comment

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...

Cara Pasang Image di Sudut Blog

Posted by rike No comments

Pilih Tata Letak --> Edit HTML.

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

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...

0 comments:

Post a Comment

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.

Icon Emosi (Emoticon) dalam Komentar

Posted by rike No comments

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

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.

0 comments:

Post a Comment

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...

Membuat Readmore Diikuti dengan Judul Posting

Posted by rike No comments

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...

0 comments:

Post a Comment

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...

Menampilkan Kode HTML dalam Postingan

Posted by rike No comments

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

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

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...

0 comments:

Post a Comment

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...

Membuat Readmore Tanpa Loading Halaman Blog

Posted by rike No comments

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".

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>

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...

0 comments:

Post a Comment

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...

Memasang Kotak Komentar di Bawah Posting

Posted by rike No comments

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.

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

Selamat memasang kotak komentar di bawah posting...

0 comments:

Post a Comment

Blog directory berfungsi sebagai salah satu cara untuk promosi blog kamu. Prosedurnya hanya dengan mendaftarkan blog kamu ke berbagai web directory secara manual. Hal tersebut dilakukan karena tidak semua pengunjung blog melakukan pencarian melalui search engine, namun mereka memilih suatu web directory yang khusus meng-kategori-kan blog sesuai dengan kategorinya masing-masing (ex : SEO Marketing, Personal, Internet, dan lain-lain). Proses pemilihan blog directory pun perlu mendapat perhatian, seperti web directory mana yang sering dikunjungi, pagerank web directory, dan sebagainya. Agar memudahkan kamu dalam melakukan filter terhadap blog directory, di bawah ini merupakan daftar beberapa blog directory gratis yang bisa kamu pertimbangkan :

Blog Indonesia
(http://blog-indonesia.com)
Kampung Blog
(http://www.kampungblog.com)
Tecnorati
(http://www.technorati.com)
Baca di Promosi Blog ke Blog Directory Technorati
Blog Catalog
(http://www.blogcatalog.com)
Blog Hints
(http://www.bloghints.com)
Blogged
(http://www.blogger.com)
Blog Rate Directory
(http://www.blogratedirectory.com)
Blog Listing
(http://www.bloglisting.net/index.php)

Bonus Blog Ranking untuk kamu :

Top Seratus.com
(http://www.topseratus.com)
Blog Top List
(http://www.blogtoplist.com)
Top Blog Area.com
(http://www.topblogarea.com)

Selain yang telah OB sebutkan di atas, pasti masih banyak lagi blog directory lainnya. Tujuan mendaftar di blog directory adalah untuk meningkatkan trafik blog kamu, karena semakin banyak mendaftar di blog directory, maka semakin besar peluang blog kamu dikunjungi. Dan rahasianya lagi, kalau blog kamu dimasukkan dalam link blog directory tersebut, peringkat blog kamu akan ikut terdongkrak.

Update (01 Desember 2012): Perlu menjadi perhatian bahwa jika blog direktori menginginkan timbal balik agar memasang pranala blog direktori tersebut ke situs web atau blog Anda, kemungkinan hal ini akan termasuk dalam skema pranala yang negatif.

Meningkatkan Trafik Blog melalui Blog Directory

Posted by rike No comments

Blog Indonesia
(http://blog-indonesia.com)
Kampung Blog
(http://www.kampungblog.com)
Tecnorati
(http://www.technorati.com)
Baca di Promosi Blog ke Blog Directory Technorati
Blog Catalog
(http://www.blogcatalog.com)
Blog Hints
(http://www.bloghints.com)
Blogged
(http://www.blogger.com)
Blog Rate Directory
(http://www.blogratedirectory.com)
Blog Listing
(http://www.bloglisting.net/index.php)

Bonus Blog Ranking untuk kamu :

Top Seratus.com
(http://www.topseratus.com)
Blog Top List
(http://www.blogtoplist.com)
Top Blog Area.com
(http://www.topblogarea.com)

0 comments:

Post a Comment

Selain rajin mengunjungi blog lain dan memberikan komentar pada suatu posting tertentu, bertukar link juga marak dilakukan. Hal tersebut dilakukan dalam upaya mem-promosi-kan blog. Seperti yang telah diuraikan dalam kualitas link bahwa diusahakan semaksimal mungkin untuk menentukan link yang sesuai dengan tema dan keyword blog kamu. Cara singkat untuk mencari blog yang sesuai dengan tema dan kata kunci adalah dengan menggunakan mesin pencari. Carilah di search engine dengan kata kunci yang sesuai dengan blog kamu, kemudian kunjungi blognya. Baca dan pelajari informasi dalam posting, jika selesai membaca berikan komentar yang menurut kamu relevan dengan isi postingan tersebut. Dan apabila ia menyediakan halaman untuk bertukar link, manfaatkan kesempatan tersebut untuk berbagi.

Dalam link exchange juga mempunyai etika tertentu agar blog lain tertarik bertukat link dengan blog kamu :

Kamu harus me-link duluan. Bagaimana meminta blog lain me-link ke blog kamu, jika kamu belum melakukan link ke blog mereka.

Memberi pemberitahuan bahwa kamu telah me-link ke blog mereka, baik melalui shoutbox, komentar, maupun email (ex : "Blog-saya.com" telah me-link ke "Blok-kamu.com")

Berikan komentar untuk meninggalkan jejak kamu dalam blog mereka.

Jangan berlaku khianat, dengan menghapus link blog mereka dari blog kamu. Padahal link kamu masih berada di blog mereka.

Jangan pula bersikap memaksa, seperti "link kamu akan dihapus, jika kamu tidak linkback dalam 2 hari", "Ini sudah yang ketiga kalinya, saya meminta,..."

Blog kamu harus memiliki posting yang menarik dan berhubungan dengan tema serta kata kunci blog yang lain tersebut.

Kemudian ada pula etika, jika blog kamu telah di link oleh blog lain :

Lakukan cek terjadwal dalam mesin pencari tentang siapa saja yang me-link ke blog kamu (ketik dalam kotak pencarian "link:http://alamatblogkamu.com")

Kunjungi daftar link, yaitu blog lain yang telah me-link ke blog kamu. Apakah blog tersebut mempunyai relevansi dengan judul dan keyword kamu.

Sampaikan dengan baik dan sopan "Mengapa blog mereka belum kamu linkback" atau "Tidak di linkback"

Jangan sombong dengan berlaku tidak mau tahu dengan blog lain yang telah melakukan link ke blog kamu. Karena blog kamu hidup mungkin karena kunjungan, komentar, dan promosi mereka.

Dengan memahami etika yang saling berhubungan timbal-balik tersebut, maka akan menghasilkan suatu hubungan yang ber-simbiosis mutualisme (saling menguntungkan). Sehingga dinilai sah menurut hukum, jujur dari pandangan kasat mata, dan legal menurut algoritma search engine.

Selamat ber-Link Exchange...

Etika Bertukar Link (Link Exchange)

Posted by rike No comments

Dalam link exchange juga mempunyai etika tertentu agar blog lain tertarik bertukat link dengan blog kamu :

Kamu harus me-link duluan. Bagaimana meminta blog lain me-link ke blog kamu, jika kamu belum melakukan link ke blog mereka.

Memberi pemberitahuan bahwa kamu telah me-link ke blog mereka, baik melalui shoutbox, komentar, maupun email (ex : "Blog-saya.com" telah me-link ke "Blok-kamu.com")

Berikan komentar untuk meninggalkan jejak kamu dalam blog mereka.

Jangan berlaku khianat, dengan menghapus link blog mereka dari blog kamu. Padahal link kamu masih berada di blog mereka.

Jangan pula bersikap memaksa, seperti "link kamu akan dihapus, jika kamu tidak linkback dalam 2 hari", "Ini sudah yang ketiga kalinya, saya meminta,..."

Blog kamu harus memiliki posting yang menarik dan berhubungan dengan tema serta kata kunci blog yang lain tersebut.

Kemudian ada pula etika, jika blog kamu telah di link oleh blog lain :

Lakukan cek terjadwal dalam mesin pencari tentang siapa saja yang me-link ke blog kamu (ketik dalam kotak pencarian "link:http://alamatblogkamu.com")

Kunjungi daftar link, yaitu blog lain yang telah me-link ke blog kamu. Apakah blog tersebut mempunyai relevansi dengan judul dan keyword kamu.

Sampaikan dengan baik dan sopan "Mengapa blog mereka belum kamu linkback" atau "Tidak di linkback"

Jangan sombong dengan berlaku tidak mau tahu dengan blog lain yang telah melakukan link ke blog kamu. Karena blog kamu hidup mungkin karena kunjungan, komentar, dan promosi mereka.

Selamat ber-Link Exchange...

0 comments:

Post a Comment

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam, sehingga pembaca tidak merasa bosan untuk menikmatinya. Begitu pula dengan postingan sebuah blog, defaulnya posting akan menampilkan seluruh entry dalam sebuah judul posting. Coba bayangkan jika sebuah posting yang panjang ditampilkan, tentu menyita ruang untuk posting lainnya. Padahal posting lain yang kamu masukkan tidak kalah penting dengan posting yang panjang tadi.

Agar hal tersebut tidak terjadi dalam blog kamu, maka perlu trik supaya posting blogger dapat dipersingkat. Caranya dengan menambah dan memodifikasi pengaturan format dan template blogger kamu. Sebagai catatan sebaiknya kamu menggunakan browser Firefox atau yang lainnya, kecuali Internet Explorer untuk menghindari terjadinya galat. Daripada kita ngelantur kemana-mana, langsung saja dimulai trik blogger tentang readmore, yaitu :

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 class="fullpost">

</span>

Simpan pengaturan format

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

Cari kode berwarna merah di bawah ini :

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

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.

Ganti semua kode berwarna merah diatas dengan kode berikut :

<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>

Untuk kode yang bertanda hijau dapat kamu ganti dengan kata yang kamu kehendaki seperti Selengkapnya..., Lanjutannya..., Klik disini untuk melanjutkan..., Baca selengkapnya..., dan sebagainya. Atau kamu bisa menghilangkan atribut <strong> ... </strong> agar tulisan Readmore tidak menggunakan huruf tebal.

Jangan lupa di simpan.

Contoh :

Isi semua posting :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya posting akan menampilkan seluruh entry dalam sebuah judul posting. Coba bayangkan jika sebuah posting yang panjang ditampilkan, tentu menyita ruang untuk posting lainnya. Padahal posting lain yang kamu masukkan tidak kalah penting dengan posting yang panjang tadi.

Penambahan kode :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya<span class="fullpost"> posting akan menampilkan seluruh entry dalam sebuah judul posting. Coba bayangkan jika sebuah posting yang panjang ditampilkan, tentu menyita ruang untuk posting lainnya. Padahal posting lain yang kamu masukkan tidak kalah penting dengan posting yang panjang tadi.</span>

Hasil yang ditampilkan :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya

Readmore...

Catatan :

Kode <span class="fullpost"> dan </span> akan muncul, jika kamu melakukan entry posting dalam model edit HTML

Kode <span class="fullpost"> diletakkan setelah posting yang akan kamu tampilkan di halaman utama blog, sedangkan </span> diletakkan pada akhir posting.

Pemenggalan kalimat sebaiknya diatur dengan baik dan sebisa mungkin penggalan tersebut menimbulkan rasa penasaran pengunjung blog kamu untuk meng-klik-nya.

Trik Blogger ini hanya berlaku untuk posting yang baru, sedangkan posting lama tetap seperti biasanya kecuali kamu melakukan edit terhadap posting lama tersebut.

Posting yang berkaitan :

Membuat Readmore Tanpa Loading halaman Blog

Membuat Readmore Diikuti dengan Judul Posting

Selamat Membuat Readmore...

Membuat Readmore

Posted by rike No comments

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 class="fullpost">

</span>

Simpan pengaturan format

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

Cari kode berwarna merah di bawah ini :

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

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.

Ganti semua kode berwarna merah diatas dengan kode berikut :

<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>

Jangan lupa di simpan.

Contoh :

Isi semua posting :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya posting akan menampilkan seluruh entry dalam sebuah judul posting. Coba bayangkan jika sebuah posting yang panjang ditampilkan, tentu menyita ruang untuk posting lainnya. Padahal posting lain yang kamu masukkan tidak kalah penting dengan posting yang panjang tadi.

Penambahan kode :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya<span class="fullpost"> posting akan menampilkan seluruh entry dalam sebuah judul posting. Coba bayangkan jika sebuah posting yang panjang ditampilkan, tentu menyita ruang untuk posting lainnya. Padahal posting lain yang kamu masukkan tidak kalah penting dengan posting yang panjang tadi.</span>

Hasil yang ditampilkan :

Readmore berfungsi untuk melakukan pemenggalan kalimat agar tampilan sebuah posting dapat dipersigkat. Hal ini mirip sekali dengan koran, artikel berita akan lebih padat dan beragam sehingga pembaca tidak merasa bosan. Begitu pula dengan postingan sebuah blog, defaulnya

Readmore...

Catatan :

Kode <span class="fullpost"> dan </span> akan muncul, jika kamu melakukan entry posting dalam model edit HTML

Kode <span class="fullpost"> diletakkan setelah posting yang akan kamu tampilkan di halaman utama blog, sedangkan </span> diletakkan pada akhir posting.

Pemenggalan kalimat sebaiknya diatur dengan baik dan sebisa mungkin penggalan tersebut menimbulkan rasa penasaran pengunjung blog kamu untuk meng-klik-nya.

Trik Blogger ini hanya berlaku untuk posting yang baru, sedangkan posting lama tetap seperti biasanya kecuali kamu melakukan edit terhadap posting lama tersebut.

Posting yang berkaitan :

Membuat Readmore Tanpa Loading halaman Blog

Membuat Readmore Diikuti dengan Judul Posting

Selamat Membuat Readmore...

0 comments:

Post a Comment

Walaupun tidak seheboh optimasi dalam blog (title, keyword, dan sebagainya), namun link mempunyai bagian tersendiri dalam menentukan peringkat pencarian oleh search engine. Semakin banyak orang yang me-link, berarti suatu blog dinilai memiliki konten yang bagus dan menarik. Hal ini pada akhirnya akan berpengaruh pada meningkatnya PageRank (PR) blog tersebut. Banyaknya link dalam suatu halaman situs disebut juga dengan istilah "Link Popularity".

Pada kasus lain, link tidak akan mampu menaikkan PR. Mengapa? Sebab walaupun banyak link yang yang merujuk ke suatu halaman blog kamu, tapi tanpa melihat kualitas dari link tersebut, sama saja dengan link kosong. Artinya jika hanya kuantitas (jumlah) link yang diutamakan oleh search engine, maka setiap situs atau blog tidak akan pandang bulu untuk me-link ke semua situs atau blog lain. Toh, dengan begitu PR dapat meningkat. Tapi kenyataan berkata lain,yakni kamu perlu memilih dan memilah situs atau blog mana yang sesuai dengan tema serta keyword blog kamu. So, bagaimana menentukan link yang berkualitas tersebut?

Berkaca dari paragrap di atas, kamu mungkin memiliki puluhan link ke blog kamu, tapi jika link tersebut tidak sesuai dengan tema dan keyword blog kamu atau tidak ada korelasi dengan blog kamu, tentunya tidak akan pernah juga berpengaruh pada kecepatan peningkatan PR blog kamu.

Illustrasi :
Tema blog adalah SEO dengan keyword tips seo, belajar seo. Yang me-Link blog kamu bertema MP3 dan video bokep.

Berikut point-point agar blog mendapatkan link yang berkualitas, sehingga mampu meningkatkan PR blog tersebut :

Link dari suatu website atau blog seharusnya mempunyai kandungan tema dan keyword yang sesuai dengan blog kamu (ex : Tema blog-A tentang seo marketing, kemudian di-link oleh blog-B yang bertema tips seo).
Kata dari sebuah link harus sesuai dengan keyword kamu.
Link yang terdapat dalam suatu paragrap halaman, diikuti dengan kata yang terkait.
Title penghubung halaman blog pun harus memiliki korelasi dengan keyword kamu.

Contoh :
Keywordnya adalah SEO dan mesin pencari

Banyak orang mendengar tentang SEO, namun tidak jarang ada yang belum mengetahui tentang apa manfaat dan <a href="h**p://namablog.blogspot.com/tips-seo.html>tips SEO</a> tersebut.  Search Engine Optimization atau yang lebih familiar disebut <a href="http://id.wikipedia.org/wiki/SEO">SEO</a> adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik dari <a href="h**p://namablog.blogspot.com/daftar-mesin-pencari.html" title="mesin pencari">mesin pencari</a> menuju alamat situs web tertentu dengan memanfaatkan mekanisme kerja alami algoritma <a href="http://optimasi-blog.blogspot.com">mesin pencari</a> tersebut. Tujuan spesifik SEO adalah <a href="http://id.wikipedia.org/wiki/SEO">klik disini</a> untuk lebih detail atau menempatkan suatu alamat situs web pada posisi teratas (atau setidaknya pada halaman pertama) hasil pencarian berdasarkan subyek tertentu. (Wikipedia.org)

Dari contoh di atas, mana penempatan link yang tepat untuk menghasilkan link yang berkualitas?

Link yang tepat :

<a href="h**p://namablog.blogspot.com/tips-seo.html>tips SEO</a>
<a href="http://id.wikipedia.org/wiki/SEO">SEO</a>
<a href="h**p://namablog.blogspot.com/daftar-mesin-pencari.html" title="mesin pencari">mesin pencari</a>

Sedangkan link yang kurang tepat :

<a href="http://optimasi-blog.blogspot.com">mesin pencari</a>
<a href="http://id.wikipedia.org/wiki/SEO">klik disini</a>

Sekarang sudah tahu khan, cara membuat dan menganalisa link yang mempunyai kualitas meningkatkan pagerank blog kamu. Selamat meng-optimasi kualitas link...

SEO | Optimasi Kualitas Link dalam Blog

Posted by rike No comments

Illustrasi :
Tema blog adalah SEO dengan keyword tips seo, belajar seo. Yang me-Link blog kamu bertema MP3 dan video bokep.

Berikut point-point agar blog mendapatkan link yang berkualitas, sehingga mampu meningkatkan PR blog tersebut :

Link dari suatu website atau blog seharusnya mempunyai kandungan tema dan keyword yang sesuai dengan blog kamu (ex : Tema blog-A tentang seo marketing, kemudian di-link oleh blog-B yang bertema tips seo).
Kata dari sebuah link harus sesuai dengan keyword kamu.
Link yang terdapat dalam suatu paragrap halaman, diikuti dengan kata yang terkait.
Title penghubung halaman blog pun harus memiliki korelasi dengan keyword kamu.

Contoh :
Keywordnya adalah SEO dan mesin pencari

Banyak orang mendengar tentang SEO, namun tidak jarang ada yang belum mengetahui tentang apa manfaat dan <a href="h**p://namablog.blogspot.com/tips-seo.html>tips SEO</a> tersebut.  Search Engine Optimization atau yang lebih familiar disebut <a href="http://id.wikipedia.org/wiki/SEO">SEO</a> adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik dari <a href="h**p://namablog.blogspot.com/daftar-mesin-pencari.html" title="mesin pencari">mesin pencari</a> menuju alamat situs web tertentu dengan memanfaatkan mekanisme kerja alami algoritma <a href="http://optimasi-blog.blogspot.com">mesin pencari</a> tersebut. Tujuan spesifik SEO adalah <a href="http://id.wikipedia.org/wiki/SEO">klik disini</a> untuk lebih detail atau menempatkan suatu alamat situs web pada posisi teratas (atau setidaknya pada halaman pertama) hasil pencarian berdasarkan subyek tertentu. (Wikipedia.org)

Dari contoh di atas, mana penempatan link yang tepat untuk menghasilkan link yang berkualitas?

Link yang tepat :

<a href="h**p://namablog.blogspot.com/tips-seo.html>tips SEO</a>
<a href="http://id.wikipedia.org/wiki/SEO">SEO</a>
<a href="h**p://namablog.blogspot.com/daftar-mesin-pencari.html" title="mesin pencari">mesin pencari</a>

Sedangkan link yang kurang tepat :

<a href="http://optimasi-blog.blogspot.com">mesin pencari</a>
<a href="http://id.wikipedia.org/wiki/SEO">klik disini</a>

Sekarang sudah tahu khan, cara membuat dan menganalisa link yang mempunyai kualitas meningkatkan pagerank blog kamu. Selamat meng-optimasi kualitas link...

0 comments:

Post a Comment

Bisnis Kecil Modal Kecil

What's New Here?

Trik Blogger | Related Posts Statis

0 comments:

Trik Blogger | Related Posts Dinamis

0 comments:

Garis-Garis Besar Related Posts | Posting yang Berkaitan

0 comments:

Akhirnya Kembali Juga Nge"Blog"

0 comments:

Tukaran Link OB

Memasang Tukaran Link dengan Text Area

Tukaran Link OB

0 comments:

Trik Membuat Cloud Label (Label Awan)

0 comments:

Cara Pasang Image di Sudut Blog

0 comments:

Update

Icon Emosi (Emoticon) dalam Komentar

Update

0 comments:

Membuat Readmore Diikuti dengan Judul Posting

0 comments:

Menampilkan Kode HTML dalam Postingan

0 comments:

Membuat Readmore Tanpa Loading Halaman Blog

0 comments:

Memasang Kotak Komentar di Bawah Posting

0 comments:

Meningkatkan Trafik Blog melalui Blog Directory

0 comments:

Etika Bertukar Link (Link Exchange)

0 comments:

Membuat Readmore

0 comments:

SEO | Optimasi Kualitas Link dalam Blog

0 comments:

Popular Posts

Blog Archives