Sunday, August 30, 2009

Integrasi DisQus pada Blogger (Manual)

Ide yang sungguh menarik untuk menggabungkan suatu metode diskusi layaknya forum dengan sebuah blog. Sehingga antara pengunjung dengan pemilik blog akan tercipta diskusi tanya jawab yang menarik dan lebih terarah. DisQus memberikan layanan yang lebih dari pada komentar. Dalam setiap artikel suatu blog, pengunjung diberikan kesempatan tidak hanya sekedar berkomentar tetapi bisa bertanya dan menjawab pertanyaan pengunjung yang lain atau sekedar memberikan input (saran kritik) kepada pemilik blog.
Antara tahun 2007-2008 para blogger dihebohkan dengan layanan yang mirip dengan DisQus, tetapi sayang layanan tersebut bersifat sepihak, hanya menguntungkan pemilik layanan dan tidak ada timbal balik kepada pemilik blog. Ini membuat para blogger dengan segera membuang layanan itu, karena jelas merugikan. Dalam arsip artikel lama Blogger Tune-Up pernah dibahas hal tersebut. Tapi kini DisQus benar-benar berbeda dengan layanan yang pernah booming tersebut. Preview DisQus lihat di blog Kotretan Hendriono.
Beberapa kelebihan DisQus :
  1. Lebih terbuka untuk dikembangkan oleh siapapun
  2. Mendukung API, OpenID, Gravatar
  3. Memberikan trackback dan linkback kepada blog
  4. Pengelolaan komentar lebih mudah
  5. Mendukung layanan lain, misal FeedBurner, Facebook, Twitter dan lainnya
  6. Mampu meningkatkan SERP blog dalam rangka mendukung SEO (layanan ini masih terus dikembangkan)
  7. Tidak terlalu memberatkan loading blog
  8. Tampilan yang mudah di modifikasi (Support CSS)
  9. Membuat tampilan blog terlihat lebih professional
  10. Mudah dalam proses integrasi dengan Template Blogger

Integrasi DisQus pada Blogger

Perhatian! Backup terlebih dahulu Template sebelum melakukan modifikasi kode, dan lebih baik lakukan proses modifikasi blogger hack dibawah ini melalui file backup template (tidak langsung secara online).
Langkah 1
Siapkan script code dari DisQus (Baca: Memanfaatkan Layanan DisQus)
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke "Tata Letak - Edit HTML"
Langkah 4
Checklist "Expand Template Widget"
Langkah 5
Cari kode dibawah ini:
]]></b:skin>
Langkah 6
Masukan kode CSS dibawah ini diatas kode pada langkah 5:
#disqus_thread, #disqus_thread #dsq-content {width: 100%;}
Langkah 7
Cari kode dibawah ini (utamakan yang diblok):
<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>
Langkah 8
Non aktifkan layanan komentar bawaan blogger atau hapus dan tambahkan kode DisQus, sehingga kode menjadi seperti dibawah ini (perhatikan kode yang diblok):
<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> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</b:if>
</p>
Perhatikan kode diatas! Kode yang terletak diantara tag <!-- kode -->, ini berarti dinonaktifkan atau anda bisa saja menghapusnya, namun demi keamanan seandainya suatu hari nanti kita ingin mengaktifkan kembali layanan komentar bawaan blogger maka kita tinggal mengembalikan ke posisi sebelumnya.
Langkah 9
Cari kode dibawah ini(utamakan yang berwarna biru):
<h3>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if>
</h3>
Langkah 10
Modifikasi kode diatas sehingga menjadi seperti kode dibawah ini:
<h3>
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
Langkah 11
Cari kode dibawah ini:
</b:if>
<div id='backlinks-container'>
Langkah 12
Masukan kode DisQus dibawah ini diatas kode pada langkah 11:
<!-- begin code disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = &#39;<data:post.url/>&#39;;
var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML;
var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='&quot;http://DISQUS-SHORT-URL.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
Perhatikan!
  • Kode DisQus pada langkah 12 harus diletakan tepat diatas kode pada langkah 11
  • Ubah DISQUS-SHORT-URL sesuai dengan yang anda dapatkan dari DisQus
Langkah 13
Silahkan ambil napas dulu tapi jangan merokok atau ngemil (bulan puasa lho...) kecuali blogger hack ini dicoba malam hari. Jika sudah merasa lebih tenang, lanjutkan...!
Langkah 14
Cari kode dibawah ini:
</body>
Langkah 15
Masukan kode DisQus dibawah ini tepat diatas kode pada langkah 14:
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName(&#39;a&#39;);
var query = &#39;?&#39;;
for(var i = 0; i &lt; links.length; i++) {
if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) {
query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;;
}
}
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
})();
</script>
</b:if>
<!-- end code disqus -->
Perhatikan kode diatas! Ubahlah DISQUS-SHORT-URL dengan kode yang anda peroleh dari DisQus
Langkah 16
Simpan template dan preview blog

Keterangan:
  • Jika form komentar (bagi template yang sudah menyertakan form komentar dibawah artikel) bawaan sistem blogger masih tetap muncul, nonaktifkan form komentar dengan salah satu teknik dibawah ini:
Cara I
Non aktifkan form komentar melalui "Pengaturan - Komentar" dan ubah option "Penempatan Formulir Komentar" menjadi "" atau "", lihat gambar dibawah ini:
Cara II
Lihat kembali langkah 8 diatas dan hapuslah kode yang diblok:
<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> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</b:if>
</p>
Sehingga kode menjadi seperti dibawah ini:
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</p>
  • Teknik ini adalah teknik paling aman karena komentar yang pernah dibuat melalui sistem komentar bawaan blogger akan tetap ada, bahkan pada mode tertentu komentar tetap ditampilkan tetapi link/form untuk menambahkan komentar baru dengan sistem komentar bawaan blogger sudah dinonaktifkan.
  • Sambil hati berdebar-debar (apakah berhasil atau tidak berhasil) ambil napas panjang, lemaskan jari-jari terutama jari telunjuk kanan yang sudah lelah klak-klik tombol mouse, scroll atas bawah nyari kode yang memusingkan dan BOOOM! Berhasil!
Kode Blogger Hack secara keseluruhan setelah proses integrasi DisQus pada blogger secara manual:
<b:if cond='data:post.allowComments'>
<h3>
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
...
...
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</p>
<!-- begin code disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = &#39;<data:post.url/>&#39;;
var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML;
var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='&quot;http://DISQUS-SHORT-URL.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
</b:if>
<div id='backlinks-container'>
...
...
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName(&#39;a&#39;);
var query = &#39;?&#39;;
for(var i = 0; i &lt; links.length; i++) {
if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) {
query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;;
}
}
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
})();
</script>
</b:if>
<!-- end code disqus -->
</body>
Selamat mencoba, semoga berhasil... Tinggalkan pesan pada komentar jika mengalami kegagalan dan Happy Blogging walaupun lapar... :)

Mengatur Letak Iklan (Bagian 1)

Iklan sepertinya sudah merupakan kewajiban bagi para blogger, karena dengan iklan tersebutlah para blogger terkadang menjadi semangat terkadang menjadi nge-drop. Naik turunnya semangat ngeblog bagi sebagian blogger salah satunya dipengaruhi dari pendapatan yang di peroleh dari iklan. Tampilan dan penempatan iklan menurut para master blogger sangat mempengaruhi pendapatan dari iklan yang kita pasang. Dibawah ini salah satu dari sekian banyak cara menempatkan dan membuat wadah iklan yang telah banyak digunakan oleh para blogger.

Langkah-langkah umum pengatur letak iklan pada blogger:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Baca teknik selanjutnya dibawah ini:

1. Menempatkan (Integrasi) Iklan Pada Artikel

Cara ini masih merupakan cara yang efektif untuk meningkatkan pendapatan dari iklan yang kita pasang, karena dengan teknik ini iklan seakan-akan merupakan bagian dari artikel. Bukan teknik untuk mengecoh pengunjung tapi lebih ke nilai seninya, iklan yang terintegrasi dengan artikel akan lebih bagus dan menarik untuk dilihat serta mampu menarik perhatian pengunjung.
Ikuti langkah integrasi iklan dengan artikel pada blogger:
Langkah 1.1
Cari kode dibawah ini:
<data:post.body/>
Langkah 1.2
Tambahkan kode dibawah ini sebelum kode pada langkah 1.1
<div style='float:left'>
Kode Iklan
</div>
Sehingga kode menjadi seperti dibawah ini:
<div style='float:left'>
Kode Iklan
</div><data:post.body/>
Langkah 1.3
Simpan template dan preview (baca keterangan)

2. Membuat Wadah Iklan pada Artikel

Cara ini sebenarnya pengembangan dari cara pertama dengan penambahan wadah (container) iklan agar tampil lebih menarik dan hal ini akan memancing pandangan pengunjung untuk melihat dan membaca isi iklan karena seakan-akan seperti informasi menarik.
Ikuti langkah pembuatan wadah iklan pada artikel blogger:
Langkah 2.1
Cari kode dibawah ini:
]]></b:skin>
Langkah 2.2
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 2.1:
#iklan250{
float:left;
width:280px;
text-align:center;
background:transparent url(http://lh6.ggpht.com/_xcD4JK_dIjU/Sm8jz8qTKsI/AAAAAAAADHU/6te_TkpwmMw/d/ads250x250.png) center center no-repeat;
padding:5px 10px 10px 5px;
}
Langkah 2.3
Cari kode dibawah ini:
<data:post.body/>
Langkah 2.4
Tambahkan kode dibawah ini sebelum kode pada langkah 2.3
<div id='iklan250'>
Kode Iklan
</div>
Sehingga kode menjadi seperti dibawah ini:
<div id='iklan250'>
Kode Iklan
</div><data:post.body/>
Langkah 2.5
Simpan template dan preview (baca keterangan)

Keterangan:
  • Iklan lebih baik diset segi empat(rectangle) dengan ukuran 250 x 250 pixel, kecuali cara 1 bisa dengan ukuran berapapun
  • Kode Iklan yang akan dimasukan harus di Encode menjadi kode HTML Entities dengan menggunakan Blogger Ads Converter
  • Jika mengikuti cara diatas, baik cara 1 maupun cara 2 maka iklan akan terletak pada sebelah kiri artikel, jika ingin meletakannya disebelah kanan artikel ubah kode "left" menjadi "right"
  • Jika menggunakan fasilitas pemenggalan artikel (readmore), biasanya kode <data:post.body/> ada 2, cobalah satu-satu
Semoga berhasil, jika berhasil bagaimana komentar anda? Silahkan tinggalkan pesan pada komentar dan Happy Blogging... :)

Friday, August 28, 2009

Membuat Navigasi Halaman Versi 1.0 (Page Script)

Selain dengan menggunakan Breadcrumbs untuk membuat navigasi halaman, ada teknik lain yang diperkenalkan oleh vietwebguide yaitu page script. Berbeda dengan breadcrumbs, karena page script layaknya sistem navigasi halaman pada forum atau blog dengan basis Wordpress. Pengunjung bisa menelusuri halaman perhalaman dari sebuah blog dengan mudah, selain itu pengunjung bisa mengetahui posisi halaman yang sedang dibuka dan jumlah halaman dari blog tersebut. Navigasi halaman ini lebih sederhana dan ringan untuk blogger dari pada navigasi yang pernah booming sekitar tahun 2008 dengan nama (kalau tidak salah) Page Navigation. Mau mencoba???
Langkah pemasangan Page Script untuk Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<b:include name='nextprev'/>
Langkah 5
Ganti (replace) kode pada langkah 4 dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {font-size:12px;color: #060;font-weight:bold;padding:0px 4px;}
</style>
<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span>
<input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">
var blogID = "7350022283544621464";
var home_page = "http://modification-blog.blogspot.com/";
var pager_max_main = 5;
var pager_first_text = "Awal";
var pager_last_text = "Akhir";
var pager_prev_text = "Sebelumnya";
var pager_next_text = "Berikutnya";
</script>
<script src="http://hensblog.googlecode.com/files/pagerscriptv20.js" type="text/javascript"></script>
</b:if>
Langkah 6
Simpan Template dan Preview (Baca Keterangan lebih dulu)

Keterangan:
  • var blogID = "7350022283544621464"; = Ganti angka dengan ID Blog anda yang bisa diperoleh melalui Adress Bar pada saat Mode Maintenance
  • var home_page = "http://modification-blog.blogspot.com/"; = Ubah alamat blog dengan alamat blog anda
  • var pager_max_main = 5; = Ubah nilai 5 untuk menentukan berapa jumlah artikel yang akan ditampilkan per index
Selamat mencoba dan semoga berhasil, tinggalkan pesan pada komentar dibawah jika mengalami kegagalan. Happy Blogging walaupun lapar... :)

Thursday, August 27, 2009

Cara memasang Youtube di Blog


Cara memasang Youtube di Blog ~ Youtube adalah salah satu website penyedia content video terbesar di seluruh dunia. Berikut ini saya sharekan bagaimana cara memasang youtube di blog kesayangan kita. tidak terlalu sulit untuk memasangnya.


Caranya sebagai berikut :

1. Masuk/log in blogger
2. Pilih tab Rancangan
3. Kemudian Add gadget
4. kemudian copykan scrip ini
<embedwidth="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"

type="application/x-shockwave-flash"></embed>
5. Tulisan berwarna putih, ganti dengan link/embed dari youtube.

Save, dan lihat hasilnya.
Semoga berhasil.

Wednesday, August 26, 2009

Membuat Artikel Terkait (Versi 3.0)

Artikel Terkait versi 3.0 kali ini merupakan pengembangan dari artikel terkait versi 1.0, karena script code yang digunakan masih tetap sama dengan sedikit modifikasi untuk menampilkan gambar dengan ukuran 72 x 72 pixel. Sehingga menurut BloggerPlugins sebagai pengembangnya versi artikel terkait ini di beri nama Related Posts with Thumbnails. Dari segi tampilan yang hasilkan juga cukup menarik, karena ditambah gambar thumbnail yang diambil dari setiap halaman artikel. Sebagai contoh Blogger Tune-Up mencobanya di Kotretan Hendriono dan menghasilkan preview Artikel Terkait seperti dibawah ini. Merasa tertarik silahkan dicoba...

Integrasi Artikel Terkait (Versi 3.0) di Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini
Langkah 5
</head>
Langkah 6
Masukan kode CSS dibawah ini tepat diatas kode pada langkah 5:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:black;}
#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}
</style>
<script src='http://hensblog.googlecode.com/files/rpthumbsv30.js' type='text/javascript'/>
</b:if>
Langkah 7
Cari kode dibawah ini:
<div class='post-footer-line post-footer-line-1'>
jika tidak ditemukan, coba cari kode dibawah ini:
<p class='post-footer-line post-footer-line-1'>
Langkah 8
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 7:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<a href='http://modification-blog.blogspot.com/2009/08/membuat-artikel-terkait-versi-30.html' style='display:none;'>Related Posts with thumbnails for blogger</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>
Langkah 9
Simpan template dan preview

Keterangan:
  • var maxresults=5; = Ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan
  • var relatedpoststitle="Artikel Terkait"; = Ubah kalimat "Artikel Terkait" sebagai nama widget
Selamat menjalankan Ibadah Shaum-Ramadhan 1430H, selamat mencoba blogger hack diatas, semoga berhasil dan Happy Blogging walaupun lapar... :)

Tuesday, August 25, 2009

Membuat Breadcrumbs - Navigasi Blogger

Breadcrumbs digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini. Dengan menggunakan breadcrumbs, pengguna juga dapat menelusuri path yang telah dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Breadcrumbs memberikan jalan bagi pengguna untuk mengetahui halaman-halaman yang pernah dilewatinya. Breadcrumbs merupakan salah satu kelengkapan navigasi suatu blog, hal ini untuk membantu pengunjung (pembaca) dalam menelusuri satu demi satu halaman blog atau website. Ingin tahu lebih jauh tentang breadcrumbs silahkan baca disini atau disini. Mau mencoba memasangnya di blogger???

Integrasi Breadcrumb pada Blogger

Langkah 1
Login ke Blogger dalam kondisi perut kenyang (kalo sedang puasa, tinggalkan saja artikel ini)
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (Copy Paste) kode CSS dibawah ini diatas kode pada langkah 4:
.breadcrumbs{
float:left;
width:590px;
font-size:11px;
border-bottom:double #eaeaea;
margin:0 0 20px;
padding:0 0 3px
}
Langkah 6
Cari kode dibawah ini:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Langkah 7
Nonaktifkan status pesan standar seperti dibawah ini (atau kita dapat menghapus baris kode status pesan tetapi akan lebih bagus jika kita hanya menonaktifkannya tanpa menghapus, hal ini sebagai suatu bahan perbandingan (debuging) antara sebelum dan sesudah dimodifikasi):
<!-- <b:include data='top' name='status-message'/> -->
Langkah 8
Tambahkan kode untuk menggantikan status pesan standar, seperti dibawah ini:
<!-- <b:include data='top' name='status-message'/> -->
<b:include data='posts' name='breadcrumb'/>
Langkah 9
Perhatikan kode langkah 6 dan cari kode dibawah ini:
<b:includable id='main' var='top'>
Langkah 10
Masukan (copy paste) kode breadcrumb dibawah ini tepat diatas kode pada langkah 9:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Langkah 11
Simpan template blogger dan preview

Keterangan:

Jika disatukan (langkah 6 sampai langkah 10) maka keseluruhan kode breadcrumb seperti dibawah ini:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>
Jika tidak ingin mengambil resiko fatal error lebih baik proses modifikasi ini dilakukan pada template backup, bukan pada template blogger secara langsung. Semoga berhasil, tinggalkan komentar jika gagal dan Happy Blogging... :)

Wednesday, August 19, 2009

Tampilkan Gambar dengan Efek FancyZoom

Efek yang dibuat Cabel Maxfield Sasser ini dirancang untuk menampilkan gambar layaknya animasi yang sering ditemukan pada Mac. FancyZoom's (Prancis berarti "raisin-determination") dirancang lembut, bersih hampir seperti efek pada Safari. Menurut informasi pembuatnya, efek ini terinspirasi dari efek LightBox. Makanya kalo diperhatikan efek ini akan menampilkan gambar dengan efek zoom (membesar) seperti efek LightBox. Tetapi efek FancyZoom versi 1.1 ini lebih bersih dan lebih lembut dalam menampilkan efek, bahkan beberapa blogger mengembangkan efek ini lebih baik.
Selain itu penerapan efek FancyZoom tidak serumit efek LightBox, dan tidak diperlukan modifikasi atau penambahan kode yang memusingkan. Jika penasaran silahkan lihat-lihat gambar yang ada pada artikel Hendriono Online.
Integrasi Efek FancyZoom
Langkah 1
Download script FancyZoom Versi 1.1 disini
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan kode dibawah ini diatas kode langkah 4 (baca keterangan):
<script src='URL-ANDA/FancyZoom.js' type='text/javascript'/>
<script src='URL-ANDA/FancyZoomHTML.js' type='text/javascript'/>
Langkah 6
Cari kode dibawah ini:
<body>
Langkah 7
Tambahkan kode FancyZoom sehingga menjadi seperti dibawah ini:
<body onload="setupZoom()">
Langkah 8
Simpan template...

Modifikasi kode gambar pada artikel
Langkah 1
Upload sebuah gambar pada artikel
Langkah 2
Ubah mode "Tulis" menjadi mode "Edit HTML"
Langkah 3
Buanglah kode -h (warna merah) pada kode gambar, perhatikan contoh dibawah ini
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Langkah 4
Terbitkan artikel...

Keterangan :
  • Lihat langkah 5 pada integrasi efek FancyZoom, ubah URL-ANDA dengan URL tempat anda menyimpan file yang telah di download pada langkah 1
Semoga berhasil dan silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)

Friday, August 14, 2009

Membuat Artikel Terkait (Versi Klasik)

Artikel terkait atau Recent Posts jenis yang ini merupakan versi klasik, yaitu versi yang pertama kali di kembangkan untuk platform Blogger jenis Layout. Mungkin artikel ini tertinggal atau sudah usang tetapi tidak ada salahnya Blogger TuneUp kembali menyuguhkannya sebagai arsip yang bisa digunakan sebagai perbandingan dalam pengembangan fasilitas yang lebih lengkap dan sederhana. Berbeda dengan jenis artikel terkait sebelumnya, yaitu Artikel Terkait (Versi 2.0) dan Artikel Terkait (Versi 1.0). Jenis klasik memang cenderung rumit dengan script yang lebih banyak dari versi terbaru, tetapi menurut beberapa blogger jenis ini selalu berhasil, kecil kemungkinan kegagalan pemasangan pada blogger.

Mengintegrasikan Artikel Terkait Versi Klasik

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<div class='post-footer-line post-footer-line-3'/>
Langkah 5
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 4:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel terkait :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
Langkah 6
Simpan template dan preview.

Keterangan:
  • <h3>Artikel terkait :</h3> : Ganti Artikel Terkait sesuai dengan keinginan anda
  • var maxNumberOfPostsPerLabel = 4; : Ubah nilai 4 untuk menentukan jumlah maksimal artikel (posting) per label yang ingin di tampilkan
  • var maxNumberOfLabels = 10; : Ubah nilai 10 untuk menentukan jumlah maksimal label (kategori) yang ingin di tampilkan
Semoga berhasil, tinggalkan pesan jika mengalami kegagalan. Happy Blogging... :)

Memasang Bookmarks Transparan

Bookmarks sepertinya sudah merupakan bagian yang tidak terpisahkan dari sebuah blog. Dengan fasilitas bookmarks berarti kita memberikan kesempatan orang lain untuk menandai dan menyimpan artikel kita di website penyedia social bookmarks, selain itu website social bookmarks mampu mempercepat blog untuk ter-index di search engine, semakin banyak pengunjung yang mem-bookmarks semakin banyak backlink yang blog kita peroleh. Itu berarti memperbaiki pagerank blog kita dimata search engine terutama Google. Menambah fasilitas bookmarks pada blog kita berarti kita peduli dengan pengunjung blog kita, karena pengunjung dengan mudah menemukan link halaman artikel kita yang sudah tersimpan dihalaman social bookmarks.
Pada artikel sebelumnya kita sudah mencoba sexy bookmarks, tetapi jika merasa tidak cocok silahkan mencoba social bookmarks transparan seperti dijelaskan dibawah ini.

Memasang Social Bookmarks Transparan

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :
]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini di atas kode pada langkah 4:
div.sociable { margin: 16px 0; }
.sociable ul {display: inline; margin: 0 !important; padding: 0 !important;}
.sociable ul li {background: none; display: inline !important; list-style-type: none; margin: 0; padding: 1px 10px 1px 1px;}
.sociable ul li:before { content: ""; }
.sociable img {float: none; width: 16px; height: 16px; border: 0; margin: 0; padding: 0;}
.sociable-hovers {opacity: .4; -moz-opacity: .4; filter: alpha(opacity=40);}
.sociable-hovers:hover {opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);}
Langkah 6
Cari kode dibawah ini :
<data:post.body/>
Langkah 7
Masukan (copy paste) kode dibawah ini di bawah kode pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sociable'>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'><img alt='del.icio.us' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Yahoo! Buzz'><img alt='Yahoo! Buzz' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/yahoobuzz.gif' title='Yahoo! Buzz'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='TwitThis'><img alt='TwitThis' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/twitter.gif' title='TwitThis'/></a></li>
<li><a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='MySpace'><img alt='MySpace' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/myspace.png' title='MySpace'/></a></li>
<li><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='LinkedIn'><img alt='LinkedIn' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/linkedin.png' title='LinkedIn'/></a></li>
<li><a expr:href='&quot;https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Live'><img alt='Live' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/live.png' title='Live'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='&quot;http://sphinn.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sphinn'><img alt='Sphinn' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/sphinn.gif' title='Sphinn'/></a></li>
<li><a expr:href='&quot;http://www.propeller.com/submit/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Propeller'><img alt='Propeller' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/propeller.gif' title='Propeller'/></a></li>
<li><a expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Slashdot'><img alt='Slashdot' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/slashdot.png' title='Slashdot'/></a></li>
<li><a expr:href='&quot;http://www.netvibes.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Netvibes'><img alt='Netvibes' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/netvibes.png' title='Netvibes'/></a></li>
</ul>
</div>
</b:if>
Langkah 8
Simpan template dan preview blog anda.

Semoga berhasil dan tinggalkan komentar jika mengalami kegagalan pemasangan. Happy blogging... :)

Wednesday, August 12, 2009

Tampilkan Gambar dengan Efek Magnify

Sudahkah mencoba cara menampilkan gambar dengan efek LightBox dan efek membesar? Jika masih belum cocok silahkan coba efek yang satu ini, diberi nama efek Magnify atau dalam bahasa Indonesia kurang lebih efek di perbesar. Perbedaan antara efek membesar dengan diperbesar adalah dari proses zoom-nya, jika efek membesar akan menampilkan gambar sesuai dengan ukuran aslinya sedangkan efek diperbesar (magnify) akan menampilkan gambar dengan diperbesar beberapa kali dari ukuran aslinya sesuai dengan settingan yang kita tetapkan.
Fasilitas ini dikembangkan oleh Dynamic Drive dengan framework jQuery, silahkan lihat preview-nya disini. Dalam proses integrasi dengan blogger juga tidak serumit efek LightBox, untuk mencobanya silahkan ikuti langkah dibawah ini...
Langkah pemasangan Efek Magnify
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :
</head>
Langkah 5
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4 :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hensblog.googlecode.com/files/Magnifier.js' type='text/javascript'/>
Langkah 4
Simpan template, sampai disini proses integrasi efek Magnify pada blogger telah selesai.

Modifikasi gambar yang akan ditampilkan dengan efek Magnify
Langkah 1
Masukan gambar pada posting blog kita
Langkah 2
Untuk memodifikasi kode gambar, ubahlah mode posting ke mode Edit HTML
Langkah 3
Cari kode gambar seperti di bawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/>
</a>
Langkah 4
Ada beberapa cara pemasangan kode efek Magnify pada artikel kita.
Cara 1
Tambahkan kode (warna biru) untuk pemasangan efek seperti contoh dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg" rel="magnify[contoh]">
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" id="contoh" class="magnify" data-magnifyby="2"/>
</a>

Cara 2
Buang kode dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">
....
</a>
Sehingga tersisa kode seperti dibawah ini dan tambahkan kode efek Magnify (warna biru):
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" class="magnify"/>
Langkah 5
Terbitkan artikel anda

Keterangan:
Perhatikan langkah 4!
  1. rel="magnify[contoh]" : kode ini berfungsi untuk menghubungkan link ke gambar yang akan tampilkan, kode [contoh] ini adalah ID unik yang harus sama dengan kode ID.
  2. id="contoh" : kode ini adalah identitas unik yang digunakan dalam pemanggilan gambar oleh kode rel="magnify[contoh]"
  3. class="magnify" : ini adalah kode wajib yang harus disertakan untuk menampilkan gambar dengan efek magnify
  4. data-magnifyby="2" : nilai 2 menentukan perbesaran gambar, jika diisi nilai 2 maka gambar akan di perbesar 2 kali dari ukuran aslinya. Kode ini adalah tambahan, jika tidak disertakan pun tidak menjadi masalah, hanya perbesaran default-nya adalah 3 kali jika tanpa kode ini.
  5. Secara mudah efek magnify untuk artikel ikuti saja langkah 4 cara 2.
Semoga berhasil dan silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)

Thursday, August 6, 2009

Memasang Sexy Bookmarks

Ternyata bukan hanya wanita yang bisa sexy, Bookmarks juga bisa dibuat sexy dan menggairahkan. Entah karena apa disebut Sexy Bookmarks, mungkin karena animasinya naik turun, jika kita arahkan pointer mouse ke Icon Bookmarks maka dengan segera icon tersebut naik keatas, jika mouse dipindahkan maka icon yang lain turun dan yang dituju akan naik. Naik turun inilah yang mungkin namanya menjadi Sexy Bookmark. Sebelum memasang pada blog anda, silahkan lihat hasilnya dulu pada blog Hens Revolution Dark Life.
Jika penasaran dengan si sexy ini, silahkan ikuti petunjuk dibawah ini!
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4:
div.sexy-bookmarks{height:54px;background:url(http://i43.tinypic.com/2ueii3t.png) no-repeat left top;position:relative;width:570px}
div.sexy-bookmarks span.sexy-rightside{width:17px;height:54px;background:url(http://i43.tinypic.com/2ueii3t.png) no-repeat right top;position:absolute;right:-17px}
div.sexy-bookmarks ul.socials{position:absolute;bottom:0;left:10px;margin:0!important;padding:0!important}
div.sexy-bookmarks ul.socials li{display:inline-block!important;float:left!important;list-style-type:none!important;height:29px!important;width:48px!important;cursor:pointer!important;margin:0!important;padding:0!important}
div.sexy-bookmarks ul.socials a{display:block!important;width:48px!important;height:29px!important;font-size:0!important;color:transparent!important}
.sexy-furl,.sexy-furl:hover,.sexy-digg,.sexy-digg:hover,.sexy-reddit,.sexy-reddit:hover,.sexy-stumble,.sexy-stumble:hover,.sexy-delicious,.sexy-delicious:hover,.sexy-yahoo,.sexy-yahoo:hover,.sexy-blinklist,.sexy-blinklist:hover,.sexy-technorati,.sexy-technorati:hover,.sexy-facebook,.sexy-facebook:hover,.sexy-twitter,.sexy-twitter:hover,.sexy-myspace,.sexy-myspace:hover,.sexy-mixx,.sexy-mixx:hover,.sexy-script-style,.sexy-script-style:hover,.sexy-designfloat,.sexy-designfloat:hover,.sexy-syndicate,.sexy-syndicate:hover,.sexy-email,.sexy-email:hover{background:url(http://i32.tinypic.com/21ndq48.jpg) no-repeat!important}
.sexy-furl{background-position:-300px top!important}
.sexy-furl:hover{background-position:-300px bottom!important}
.sexy-digg{background-position:-500px top!important}
.sexy-digg:hover{background-position:-500px bottom!important}
.sexy-reddit{background-position:-100px top!important}
.sexy-reddit:hover{background-position:-100px bottom!important}
.sexy-stumble{background-position:-50px top!important}
.sexy-stumble:hover{background-position:-50px bottom!important}
.sexy-delicious{background-position:left top!important}
.sexy-delicious:hover{background-position:left bottom!important}
.sexy-yahoo{background-position:-650px top!important}
.sexy-yahoo:hover{background-position:-650px bottom!important}
.sexy-blinklist{background-position:-600px top!important}
.sexy-blinklist:hover{background-position:-600px bottom!important}
.sexy-technorati{background-position:-700px top!important}
.sexy-technorati:hover{background-position:-700px bottom!important}
.sexy-myspace{background-position:-200px top!important}
.sexy-myspace:hover{background-position:-200px bottom!important}
.sexy-twitter{background-position:-350px top!important}
.sexy-twitter:hover{background-position:-350px bottom!important}
.sexy-facebook{background-position:-450px top!important}
.sexy-facebook:hover{background-position:-450px bottom!important}
.sexy-mixx{background-position:-250px top!important}
.sexy-mixx:hover{background-position:-250px bottom!important}
.sexy-script-style{background-position:-400px top!important}
.sexy-script-style:hover{background-position:-400px bottom!important}
.sexy-designfloat{background-position:-550px top!important}
.sexy-designfloat:hover{background-position:-550px bottom!important}
.sexy-syndicate{background-position:-150px top!important}
.sexy-syndicate:hover{background-position:-150px bottom!important}
.sexy-email{background-position:-753px top!important}
.sexy-email:hover{background-position:-753px bottom!important}
Langkah 6
Cari kode dibawah ini:
<data:post.body/>
Langkah 7
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
</b:if>
Langkah 8
Simpan template dan preview blog anda

Keterangan :
  • Jika anda tidak memerlukan bookmark sebanyak itu silahkan hapus kode-kode pada langkah 5 dan langkah 7 untuk menyesuaikan dengan keperluan anda.
  • Lebih baik simpan gambar dibawah ini dan upload pada webhosting anda, serta ubah arah URL http://i43.tinypic.com/2ueii3t.png dan http://i32.tinypic.com/21ndq48.jpg yang terdapat pada kode CSS (lihat dan cari pada langkah 5)
Selamat mencoba semoga berhasil... Tinggalkan komentar jika mengalami kegagalan. Happy Blogging :)

Membuat Artikel Terkait (Versi 2.0)

Blogger, a.k.a. Blogger.com, Blogspot, atau Blog*Spot, telah bertahun-tahun beroperasi, tetapi masih banyak pemilik blog merasa kesulitan dalam teknik pemasangan Widget Artikel Terkait ini. Berbagai teknik telah diperkenalkan oleh para master blog, begitupun Blogger TuneUp pada artikel sebelumnya pernah membahas blogger hack artikel terkait. Berbagai komentar, email bahkan SMS melaporkan kegagalan pemasangan teknik artikel terkait ini. Entah kesalahan dalam hal apa, tapi teknik sebelumnya memang rumit, wajarlah beberapa blogger mengalami kegagalan pemasangan teknik pemasangan Artikel Terkait ini.
Dalam artikel tips trik blog kali ini Blogger TuneUp akan mencoba memperkenalkan pemasangan Artikel Terkait yang termasuk sangat sederhana baik dari jumlah script maupun dari teknik pemasangannya. Script yang digunakan sangatlah sedikit, sehingga bagi para pemula mudah-mudahan hal ini tidak menyulitkan. Fasilitas Artikel Terkait kali ini di buat oleh Yu-Jie Lin dengan bantuan Blogger Data API sebagai teknik pemanggilan database-nya. Hal inilah yang membuat fasilitas Artikel Terkait menjadi lebih sederhana, ringan, mudah, dan cepat dalam proses loading datanya.
Tetapi sebelum memasang tips trik blog artikel terkait, perhatikan hal-hal berikut ini :
  • Fasilitas ini hanya untuk blog umum dan terbuka.
  • Pemilik fasilitas ini akan memblok blog kita jika melanggar hal-hal berikut :
  • Melanggar hak cipta (Jika blog kita mengandung link yang mengarahkan ke download data illegal, langsung atau tidak langsung, diupload sendiri atau tidak, JANGAN menggunakan fasilitas ini. Yang fatal, blog kita akan di BLOK),
  • Gambar-gambar kategori dewasa dan mengandung unsur pornografi,
  • Artikel berisi provokasi atau bentuk kebencian terhadap suatu kelompok yang dilindungi,
  • Mempromosikan hal-hal berbahaya dan aktifitas illegal,
  • Blog mengandung fasilitas fishing atau account hijacking,
  • Menyimpan identitas pengunjung atau
  • Penyalahgunaan fasilitas ini.
Ingin tahu lebih jauh silahkan kunjungi website Blogger Related Posts Service.

Langsung ke TKP (Teknik Kejadian Pemasangan)
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Expand Template Widget
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode dibawah ini dibawah kode langkah 4:
<div id='related_posts'/>
Langkah 6
Scroll template sampai akhir dan cari kode dibawah ini:
</body>
</html>
Langkah 7
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6:
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
window.brps_options = {
"title": "<h3>Artikel lain yang terkait:</h3>",
"max_results": 5
}
</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
Langkah 8
Simpan template dan preview blog anda

Perhatikan langkah 7!
  • "title": "<h3>Artikel lain yang terkait:</h3>" : kode ini digunakan untuk memberikan nama widget.
  • "max_results": 5 : nilai 5 (lima) digunakan untuk menentukan jumlah artikel yang akan ditampilkan
Tips trik artikel terkait diatas sebenarnya sudah bisa berjalan dengan baik tetapi dengan tampilan yang sangat sederhana, jika kita mau memodifikasi dari segi tampilan, maka kita perlu menambahkan kode CSS untuk mempengaruhi/mempercantik tampilan artikel terkait pada blog kita.

Perhatikan penambahan CSS (Cascading Style Sheet) dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
#related_posts{float:left;width:580px;margin-top:20px;margin-left:5px;font:11px verdana;margin-bottom:10px}
#related_posts h2{color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px}
#related_posts a{color:#054474;font-size:11px;text-decoration:none}
#related_posts a:hover{color:#054474;text-decoration:none}
#related_posts ul{list-style-type: none; border:medium none;margin:10px;padding:0}
#related_posts ul li{display:block; background:url(http://dedehendriono.googlepages.com/weed-bullet.gif) no-repeat 0 0;line-height:2em; border-bottom:1px dotted #ccc; margin:0 0 5px; padding:0 0 1px 15px}
Langkah 5
Simpan template dan preview blog anda

Artikel Terkait (Blogger Related Posts Service) ini sebenarnya dapat diterapkan pada widget tanpa harus mengikuti teknik diatas, cukup klik tombol dibawah ini:

Semoga berhasil... Jika mengalami kegagalan tinggalkan komentar. Happy Blogging :)
Update! Artikel Terkait Versi 2.0