Mengganti Tulisan Older Post, Newer Post, Home

Berikut Cara Mengganti Navigasi Blog Dengan Gambar:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode berikut:

- <data:newerPageTitle/> ganti dengan <img src="URL-GAMBAR-PREVIOUS" border="0" />
- <data:olderPageTitle/> ganti dengan <img src="URL-GAMBAR-NEXT" border="0" />
- <data:homeMsg/> ganti dengan <img src="URL-GAMBAR-HOME" border="0" />

Klik disini dan disini untuk men-download gambar / tombol Previous, Next dan Home. Password: TBZ-MBT

5. Terakhir, klik Save Template.

Jangan lupa kasih komentar

More about → Mengganti Tulisan Older Post, Newer Post, Home

Memperkenalkan TBZ-Bookmarking Widget

Berikut Cara Memasang Widget TBZ-Bookmarking

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </head>, lalu paste kode berikut di atasnya:

<!-- TBZ-Bookmark by http://tipsbloggerzacky.blogspot.com START -->
<style>
.tbzbookmark {
background:#FFF !important;
width:310px; /* lebar kotak */
text-align:center;
text-transform:none;
border:1px solid #DDD; /* warna border kotak */
-moz-border-radius:5px;
padding:10px;
}
.tbzbookmark img {
margin-top:5px;
opacity:.4;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
.tbzbookmark img:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}
.sharemessage {
color:#666; /* warna judul */
font:Arial, Helvetica, sans-serif;
font-size:13px; /* ukuran huruf judul */
font-weight:bold;
margin-bottom:5px;
padding-bottom:2px;
border-bottom: 1px solid #CCC; /* warna border bawah judul */
}
.tbzcredit {
font-size:9px;
text-align:right;
}
.tbzcredit a {
text-decoration:none;
}
.tbzcredit a:hover {
text-decoration:underline;
}
</style>
<script src='http://z-sbookmark.googlecode.com/files/Z-Bookmarking.js' type='text/javascript'/>
<!-- TBZ-Bookmark by http://tipsbloggerzacky.blogspot.com END -->

4. Selanjunya, cari kode <div class='post-footer'> atau <p class='post-footer-line post-footer-line-1'>. Kalau sudah, paste kode berikut di atasnya:

<div class="tbzbookmark">
<div class="sharemessage">
<div expr:id='&quot;sbtxt&quot;+data:post.id'>Share this post!</div>
<script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script>
</div>

<div id='row1'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsP3kOhBWRuarCiKx6wuSX823oDbRIdYxU0aJK7GJKvl7sQo_rMqq3ew68e03FyuHBCiCKxgycOdOzykmrKCHPIKRJ3nlVN4DThktHVSHhfUtuQ2AK4meWrStAtiQuWrRKY2JsqK8GH8/s400/facebook.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank' title='Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXqw8Oeh2juQ3eCPCYAmZaJMX_CTrp2G8GxVgdoz3pSlbKIm1uFIF8vy4ZQK7jUNRrrcCncQPYtEn-OaOraNq_1KrlTvceQ2iinWDX2fBhS9m6NDaCcOEtMKRhtw2PLT-GZP4vJTAlmk/s400/Delicious.png'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank' title='Digg!'><img alt='Digg!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik16bpDSLPKGQetRKUNImKJkK6vka2Hlss3QNlV8x8CNObclEN2HDOSPxgkqEWm9ek9BsdszLtHU_25iwvWRG6CkkCS-PLC9Fb7xeeKXpAu4td_Bew-l_w_VYs9SkBUez4-V9ovj9td3M/s400/Digg.png'/></a>

<a expr:href='&quot;http://twitter.com/home?status=Currently reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot;. What about you?&quot;' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7AAiyPjkfSCEGGskYnRPQxYhgx_QNA6xpSNIc32wvXXHTOmm7iaWC3svuMsuB7T_4OEQPyGNgkIHx8GflrvihHfbcbRc03DfZTTLTLUG3OPl9gIhk3Zw0cL4WV7nKUD5PpFdpjN_Latg/s400/Twitter.png'/></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,5);&quot;' rel='nofollow' target='_blank' title='Linkedin'><img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeIe_Qpp6EjLo8i9TnEtx8WvYTCt6lIduJqVy6qcoMK7QMgOGuje45aWKfuEPBslBrjMyHCRRsk-qy2ClfUrEG3EcXxDjV7Bvck_fuh9WRdTnynrGhF_6ND0yaSbnbJ4RztryvcSzgYQ/s400/Linkedin.png'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,6);&quot;' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPOkc-BRMCOxBTeBAPpOoyyb9wFMPlpEvZQjm4i4Dj6y-T-jlE3DhLAW8fUZPN9CIhHSV2fndm9IC1A0X8XH3a-W9_P3_Hqnm5UAJ8qfKQ19mvqrRSIISy1W3HxANH3BWgvQAbjdZXmM/s400/Stumbleupon.png'/></a>
</div>

<div id='row2'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,7);&quot;' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBUWYbK03KWjxHFvqHAJH58citYNsmiL6eYZHl5bK7lJwc40Oh-pM5Z2VLdlkQ4AS5XveoOTLo127OsFdXE6RL0gLmK38LUBiejJW-amZV-4COB_qfayW2E6QqglfduYBEFZJatFnjWLs/s400/Technorati.png'/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank' title='Google Bookmarks'><img alt='Google Bookmarks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVM4GnwvTqIoWYp6wnsJfnr_DzU6ZPLIbkRPLC1S0Ai6GLgce8LgflvW8I7pwiR_RMzO6NMo5VZiAUwG0iHGxLsOAVyz5U76TRcRZOpx6hc-7j8gHgiYeHQkY_crrDkAW7BAsJa6dEKQ/s400/Google.png'/></a>

<a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank' title='Mixx'><img alt='Mixx' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0NjzyrPGl7VdF7r-oNnieFYtPan-2QGBonewMuRg5Jpv7GP-WHVopKzywtQLTMV9-c-2RAQGaNkDON0SJYNyXyakYx_vZHF9YiszvzGKy9Amni1J-1oqgVhEFE2ZK5wCPoNaVXn-2eOg/s400/mixx.png'/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' target='_blank' title='Yahoo!'><img alt='Yahoo!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJAl_RZWUEYzwknlo4NOSgHGk30qdoeT89nq7QGX1SIV6bTOfw1UoeH2EbkOTU3HroRofwtMHwemDi9Me5HKhtLt5HKjh_W8II-ULtB-54UMSY26UHfDos7FUaI6GwCMkZ57deHADZEM/s400/Yahoo.png'/></a>

<a expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank' title='Newsvine'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQK6p46kMCtfBN0Llv4_EZSeXnnm6PNMxL9-9B_AbkI_gI8z-02NiVYNzXVDpSUdrCj5mM2gpks0_TYrPkc1LD5uCji_xfj3j5oEek6zrlWVlU2Aoi400YvSbkWYEjCbW3HO_6JRce9fU/s400/newsvine.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,12);&quot;' target='_blank' title='Reddit'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHAmFuE68vok_-ANinwWvmkA9G0kwLQM5ve5hH29KhD8sEDPYXbFT0nIyN8IEDT3GFQCn7d9Qc5IPI9g5pMoy3nsyip-BcalYi-inuF6LuM0EFxljaGyH9P-OymKBaqgvIi_6yVnIvU0/s400/Reddit.png'/></a>
</div><!-- please don't remove this credit! --><div class="tbzcredit"><a href="http://tipsbloggerzacky.blogspot.com/2010/01/memperkenalkan-tbz-bookmarking-widget.html" target="_blank">Get this widget!</a></div>
</div>

Untuk yang ada read more, anda tinggal masukkan kode di atas ke dalam kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- kode no. 4 -->
</b:if>

5. Terakhir, klik Save Template.

note: Tolong jangan hapus credit yang ada dibawah widget.

Untuk demonya bisa anda lihat di bawah postingan ini.

Selamat mencoba...

More about → Memperkenalkan TBZ-Bookmarking Widget

Hidden Chatbox

Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hehehehe....). Anda juga mau memasang shoutmix dengan trik ini? Baca baik-baik ya...

Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

LEFT-Hidden Chatbox

<!-- left hidden chatbox by http://tipsbloggerzacky.blogspot.com START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYbnskPzeYlRImOjmfQFgXe8JkMIKDhiOSz5DKWtNnXtNCEeKMkM1dqAiP4YrcZMgoOO6LRJ0D7d4_ONLQxkVXLgPCYKP-fMOiBBR1ccQj4HZh1jk29zaeeC1yR6UG2qsdDdW-MGruso/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://tipsbloggerzacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden chatbox by http://tipsbloggerzacky.blogspot.com END -->

RIGHT-Hidden Chatbox

<!-- right hidden chatbox by http://tipsbloggerzacky.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAIESqtF9L_cujT6KSVqRh7SKdqyTWFDvMHkMju7e_j6uoLmr1zNfz-6YzcZi_PjpSDXXqRQezRIYBDgjHu-lQr4aDX8VoNuj2f5RMOqAoEOnFNhI28KcDlFbGaKDhcmCEr6XySYAwT0/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://tipsbloggerzacky.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://tipsbloggerzacky.blogspot.com END -->

Keterangan:

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAIESqtF9L_cujT6KSVqRh7SKdqyTWFDvMHkMju7e_j6uoLmr1zNfz-6YzcZi_PjpSDXXqRQezRIYBDgjHu-lQr4aDX8VoNuj2f5RMOqAoEOnFNhI28KcDlFbGaKDhcmCEr6XySYAwT0/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}

Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

Kode warna border: #790909

Kode warna border: #aca500

Kode warna border: #008232

Kode warna border: #003e82

Kode warna border: #0079a0

Nha, sekarang kit pasang kode itu di blog. Udah tahu caranya kan? Itu, pilih Layout > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox disana.

Klik disini untuk melihat demo LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox.

Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha...!

Selamat mencoba....

More about → Hidden Chatbox

Artikel Dicuri? Lindungi Blog Anda!

1. Buka situs MyFreeCopyRight. Anda harus membuat akun anggota dengan memasukkan alamat email beserta password



2. Jika akun anda sudah aktif, segera login untuk mendaftarkan blog anda beserta artikelnya. Klik tombol PROTECT MY CREATION.



3. Pilih BLOG / PODCAST. Lalu masukkan url feed blog anda. Untuk alamat ini saya menyarankan anda untuk memasukkan sitemap yang telah anda submit ke Google Webmaster dan di generate oleh Blogger Sitemap Generator. Ini bertujuan supaya semua artikel anda bisa terdaftar, karena kalau menggunakan alamat feed biasa url yang akan dikirim hanya 25 url.





4. Setelah url anda terdaftar, anda akan diberikan kode html dan sebuah kode registrasi hak cipta, lalu pasang kode tersebut di blog anda.



Jika blog anda telah terdaftar lalu ada orang yang mencuri artikelnya, maka anda harus melaporkannya ke Blogger Team melalui halaman ini.

Google selalu meng-update algoritmanya untuk menemukan sumber artikel dan menghapus daftar duplikasi artikel yang telah terindex. Jadi jika artikel anda masih dicuri, berdasarkan pernyataan Blog Google Webmaster Central, blog anda akan tetap berada di atas blog duplikasi dalam hasil pencarian Google.

Terakhir, jika para pencuri tidak mengacuhkan hak cipta blog anda dan terus mencuri artikel, maka buatlah Daftar PENCURI ARTIKEL dan tampilkan di blog anda supaya pengunjung tahu bahwa anda adalah sang pemilik artikel yang sebenarnya dan pencuri tersebut akan merasa malu (itu pun kalau mereka masih punya rasa malu, hehehe...)

Ok, sekian dulu tips dari saya. Mudah2an berguna bagi kita semua dan mari sama2 kita BASMI PEMBAJAKAN!

Salam Blogger!

More about → Artikel Dicuri? Lindungi Blog Anda!

Membuat Icon External Link Dengan jQuery

Berikut Cara Membuat Icon Link External

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Cari kode </head>, lalu paste kode berikut di atasnya:

<!-- EXTERNAL LINKS ICON -->
<style>
.exlicon img {
border:0;
padding:0;
margin:0
} /* kode ini bisa anda pindahkan tepat di atas kode ]]></b:skin> */
</style>

<SCRIPT src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->

<script type='text/javascript'>
$(document).ready(function() {
$('.exlicon a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVErVK35fO4M02nBHbGNjiRMcy9B41cnZ_MXA_DIgTjrZRJGzTs6llNGYdAX52cURHPEe2B-YDBO498b2eVzGQmrXL_T2NCaCoPaDxxAqc65GvLYfjCvySrVZ1wGD1lusRau6mA4acZeo/s400/icon.gif" alt="external link" />');
});
</script>
<!-- EXTERNAL LINKS ICON -->

Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVErVK35fO4M02nBHbGNjiRMcy9B41cnZ_MXA_DIgTjrZRJGzTs6llNGYdAX52cURHPEe2B-YDBO498b2eVzGQmrXL_T2NCaCoPaDxxAqc65GvLYfjCvySrVZ1wGD1lusRau6mA4acZeo/s400/icon.gif adalah url icon.

4. Cari kode <data:post.body/>, ganti kode tersebut dengan:

<div class='exlicon'><data:post.body/></div>

5. Terakhir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Selamat mencoba...

More about → Membuat Icon External Link Dengan jQuery

Cara Mudah Membuat Tooltip Dengan Kode CSS

Menyiapkan Kode CSS

1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}

Untuk mengatur posisi tooltip, ada bisa mengaturnya dengan memainkan kode top:auto; left:2px; right:auto; bottom:auto;.

3. Klik Save Template.

Menerapkan Tooltip di Blog

Anda bisa menggunakan tooltip ini di postingan atau di bagian lain blog anda. Kodenya:

<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>

Hasilnya: Kesini donk...

Gimana? Mudahkan?

Jangan lupa kasih komentar ya...

More about → Cara Mudah Membuat Tooltip Dengan Kode CSS

Drop Shadow Mempercantik Tampilan Gambar

Drop Shadow adalah sebuah efek bayangan yang timbul pada suatu objek, bisa pada sebuah kotak, tabel, dan gambar. Coba anda perhatikan gambar yang ada pada setiap postingan blog ini. Semua gambar tersebut memiliki bayangan yang membuat tampilannya menjadi lebih menarik. Untuk membuat drop shadow bisa kita lakukan pada beberapa software photo editing seperti Adobe Photoshop. Tapi gimna jika semua postingan kita memiliki gambar yang akan diberi shadow dan jumlahnya banyak? Duh, bisa pusing jadinya... Tenang, dengan membaca tips ini sampai tuntas anda akan mengetahui cara memberi drop shadow pada gambar postingan dengan hanya menggunakan kode css yang simpel.

Berikut Cara Membuat Drop Shadow Gambar

1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:

.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

3. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

<div class='drop-shadow'><data:post.body/></div>

4. Terakhir, klik Save Template dan lihat hasilnya.

Selamat mencoba...

Jangan lupa kasih komentar ya...

More about → Drop Shadow Mempercantik Tampilan Gambar

Cara Memasang Tombol Google Buzz di Blog

Ada 2 pilhan untuk tombol Buzz, yaitu icon besar dan icon kecil. Kodenya:

1. Icon Besar

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CYqRiAvNBC-kBxAOcapynwuuDTNq0T9VvMtxCXz8tNc-VNlLJ2PosFhdsjdbDaoW_DcRAWdAzrrp7P5ZpdGNUrJ36ZPhRjwG2EiXbS1AcIU191ha54sL7nwn7JC7fuVf6MSurExVBGw/s400/googlebuzz.png" border="0"/></a>

2. Icon Kecil

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4YisOcmDIzgaxC9vLEf-eMOzRzghRVZGW__xSbRc6bL8Z6Bb_nJ3RuhoI2AUk6nCVdKQjpYARuvMMiOmtCtSXqzpq8L0H83rO4qpKBTFRHLbKj5cbZgrErz6YCkj5uHrNYA0CXtnL4Y/s400/buzzthis.gif" border="0" alt="Buzz this!"/></a>

Berikut Cara Memasangnya di Template anda:

1. Login ke akun Blogger

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates

3. Cari kode <data:post.body/>, lalu paste kode icon Buzz yang anda suka tepat di atasnya, sebagai contoh:

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CYqRiAvNBC-kBxAOcapynwuuDTNq0T9VvMtxCXz8tNc-VNlLJ2PosFhdsjdbDaoW_DcRAWdAzrrp7P5ZpdGNUrJ36ZPhRjwG2EiXbS1AcIU191ha54sL7nwn7JC7fuVf6MSurExVBGw/s400/googlebuzz.png" border="0"/></a>
<data:post.body/>

Jika anda ingin meletakkannya di bagian bawah postingan, maka cari kode <div class='post-footer'/>, lalu paste kode icon Buzz tepat di bawahnya.

4. Terakhir, klik Save Template.

Selamat mencoba...

More about → Cara Memasang Tombol Google Buzz di Blog

Social Bookmarking Widget Untuk Homepage

Berikut Cara Membuat Social Bookmarking Widget untuk Homepage

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode di bawah ini ke dalam kotak content.

<a href="http://www.facebook.com/share.php?u=http://blogger-driver.blogspot.com" target="_blank" title="Share on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lPgR4HkfKrORvmWZteUegDQukDBlAHG0DBAr0OOhCgXfxd616BlVQO6v08-ofzKe50cexhUhNJlbx-qm_2JQvrWpZ_NcFlCfMKS3sRjT_WnABLETsant7VgndzCAeVOzoGzzdO3MmSk/s400/facebook_32.png" border="0" alt="Facebook" /></a>

<a href="http://twitter.com/home?status=I%20am%20currently%20on:%20Blogger%20Driver%20-%20http://blogger-driver.blogspot.com.%20It's%20a%20great%20blogging%20tips" target="_blank" title="Tweet It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKmsiwg7O6gEpCQimZKKKlI3ALARW-QD0WQ3KX6IP9RofMn8V-WFjB8v53KSM9KqiSM-sAqFDvz31OE9hdJ6ypNs9aHA-8L6UZR-vUSMosL7nQAq8Ll3eH3g2lZGUmfvbYtRcy_y0QOQ/s400/twitter_32.png" border="0" alt="Twitter" /></a>

<a href="javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}" title="Buzz This!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9VfQ2fzxYUz2PnLNEZs6m68YO74ZL49t96xcmM6oRB4FAVC8bdbgYHgBvMw2mCtnZdPitteUQKEWBz3w07P908MKV1HtdjnRHiJ4JXvSe0cNRpSwNhesmJ62Fp2Kz2JYrEJRvzveGtU/s400/googlebuzz.png" border="0" alt="Google Buzz" /></a>

<a href="http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Bookmark to Delicious"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUTzdKFmNtsCRCyuaOPXkvXnH4WRI5kKpzK34cNQXoMee_Bx4fiSi055MK0Cyu4vSME9CjFkVvjRkyMvIk5_5gYcKT00fwHxLYsOxCsVCdHrAFsbTU_Y2MerzsnEYaSfG3NL_4Ui4Tqk/s400/delicious_32.png" border="0" alt="Delicious" /></a>

<a href="http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Digg It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCcE-GDVafQZmzK1lKFZcLN8fxcJg6J-oFV0xIc2PKS2zcycZI8IrchFtqyw9tn22ojICYX6jOiNYI3lM3-zCdstJbw9mI7SqUU5h-wfMWcdFVgG5mJgQLWfjYRz_45grKakMaLquXbFg/s400/digg_32.png" border="0" alt="Digg" /></a>

<a href="http://www.stumbleupon.com/submit?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Stumble it!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5OF2X3DKzxCwe-vWXXUU4R0UxHRzL9EeTtBH-HwsUiIto3aggilHQhjru3QjT9pOhtjTn8tVB-rlTEhy_khEazCHsephSc_PRRd1TR97vT3FL6Rq3yexq_N-Z01m6lsebTaiYmqA7NE/s400/stumbleupon_32.png" border="0" alt="Stumbleupon" /></a>

<div style="clear:both;height:0"></div>

<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Share on Linkedin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IoGqb4gEe4-YEe7Hpthuec-pbdRo70KW-oYr0oJYa3OSFPFnLuf_NRcq7s2aTneOhT7imyKv0EOWbJe70WoyHoXfH3b7rUhKpPzHnZxxeQiA4of11-82luIKb_IYQagtSX2DzO7bHkg/s400/linkedin_32.png" border="0" alt="Linkedin" /></a>

<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://blogger-driver.blogspot.com&=Blogger%20Driver" target="_blank" title="Bookmark to Yahoo! Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrkDSRnO5HXSUmAvQlHfMoIdrIELFe6QFnMe9hj-W_J3g6_kVlncuHftGMxHlpbcRSJtUIZQ7_-jxnypstXqKDLwUE8942nd4W-2MBDQAdtRWZ0vzy4ESwhpOGw8E7v2Fd66_Bz1r3IbE/s400/yahoo_32.png" border="0" alt="Yahoo! Bookmarks" /></a>

<a href="http://www.google.com/bookmarks/mark?op=add&bkmk=http://blogger-driver.blogspot.com/&title=Blogger%20Driver" target="_blank" title="Bookmark to Google Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl37k-BeY9x6ibuDEhdyIlQ-SFYHwImre7R3gZIglQUDGNwNwnwjOD64msCFYQPOe48nyPDSzVs23GOD2GEPr_2fCbiFY5l6Q_9U74ecIbxWLVl-EfA6H87SxD42jK2_NLf1w6XqHZGI0/s400/google_32.png" border="0" alt="Google Bookmarks" /></a>

<a href="http://reddit.com/submit?url=http://blogger-driver.blogspot.com/&title=Blogger%20Driver" target="_blank" title="Reddit"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduXqSKhc3bd4jmZKNEqD_rRlsCPxJUMtevkW-lYTccUTF6cXcWottWToBbQZxjU96x5zUEwl4a-zt2nM2srufR4mardnoulG8fCRdDLlkOFG4zIZ-UvInFfUx30VDfX4CSGyQ29Tqoa0/s400/reddit_32.png" border="0" alt="Reddit" /></a>

<a href="http://www.mixx.com/submit?page_url=http://blogger-driver.blogspot.com" target="_blank" title="Share on Mixx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTpU7wmqNbbTjK96fNj3QwmjyE14TE_dIWOmfhZsKOE2xVC0Ag4ymrfkQnZd6bMCUnR1n-bjZKvApgNJIv7NLh3N20UGWahBFecGzbFgcThuuGlUAX2r8d1tFdvI1lRUQQavn_HvZZeA/s400/mixx_32.png" border="0" alt="Mixx" /></a>

<a href="http://technorati.com/faves?add=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Fave this to Technorati"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96PLUsr93GU8LGZoMc9AJmTa2Jobzij5SfhrianNbKSJO-PCSvZcSw-0JEyp_P-nOqjMdliir8CEYPQxcXy6_dhUJVIfJU2TxV_uvRxd6wg8nFV42PeKOgzUvZPK13yhO4fUpxHi1gFQ/s400/technorati_32.png" border="0" alt="Technorati" /></a>

Keterangan:
- Ganti tulisan yang bercetak tebal dengan url dan nama blog anda
- Jika judul atau nama blog anda lebih dai satu kata, maka gunakan kode %20 sebagai pengganti spasi, misal "Blogger%20Driver" (tanpa tanda kutip)
- Saya sarankan anda meletakkan widget ini di bagian sidebar paling atas supaya mudah dilihat oleh pengunjung

4. Terkahir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Selamat mencoba...

More about → Social Bookmarking Widget Untuk Homepage

Cara Membuat Separator Artikel

Berikut Cara Membuat Separator Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Cari kode berikut:

.post {
margin: 0 0 40px 0;
width: 90%
}

4. Paste kode berikut tepat di bawah kode .post

background: url(LINK-GAMBAR-SEPARATOR-ANDA);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

Ganti LINK-GAMBAR-SEPARATOR-ANDA dengan link gambar separator anda.

Contoh:

.post{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnYbyJIbmh6edUSIsbWPH-hlEP2cPkWVGEKu2nQSxRsMrRPjacWp6cge1pNexhsNHBwVmkIwsXXtHRNHcJGRNRw06d9fJTG3pkI1dTFB9zg8K1PvkYRV-p9FOk3icnv2DYpwzXMgQsW0s/s1600/barsnake.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
margin: 0 0 40px 0;
width: 90%;
}

5. Terakhir, klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Jangan lupa kasih komentar ya...

More about → Cara Membuat Separator Artikel

Membuat Link Warna Warni

Hmm.. Link warna warni? Apa maksudnya?
Untuk menjawab pertanyaan itu, coba anda arahkan cursor anda ke salah satu text yang memiliki link di blog ini.
Udah? Gimana hasilnya? Pasti warna link itu berubah-ubah? Seperti pelangi yang memiliki banyak warna (duh, kalau bicara tentang pelangi saya jadi teringat akan masa2 di Tk dulu. Pelangi2 alangkah indahnya, merah kuning hijau di langi yang biru….. :$ hehe…). Lalu gimna cara membuatnya? Tenang, di tips kali ini saya akan menjelaskan cara membuat kita supaya teringat akan masa2 di TK. Eh salah, cara membuat link warna warni hehe… Mau tau?

Berikut Cara Membuat Link Warna Warni:
1. Login ke akun Blogger anda
2. Pilih Layout > Edit HTML
3. Cari kode <head>, lalu paste kode berikut dibawahnya:

<script src='http://tipsbloggerzacky.googlecode.com/files/rainbow.js'/>

4. Terakhir, klik Save Template.

Selamat mencoba…

Jangan lupa kasih komentar ya…

More about → Membuat Link Warna Warni

Meletakkan Iklan Google Adsense Di Tengah Artikel

Selamat malam Blogger! Kali ini saya mau bahas sedikit tentang Google Adsense. Meskipun saya belum punya akun Adsense :v, tapi tidak apa2 lah, yang jelas saya sudah mau berbagi tentang apa yang saya tau, ya nggak?
Ok, mari kita mulai. Secara umum, iklan google adsense diletakkan di bagian atas atau bawah artikel. Namun saya lihat ada juga beberapa blog yang meletakkanya di tengah2 artikel. Setelah survey ke beberapa daerah tertinggal (bercanda.. :O), akhirnya saya memnukan cara untuk meletakkan iklan tersebut di tengah artikel. Artinya tidak di atas dan tidak juga di bawah, hehe... Mau tau caranya?

Berikut Meletakkan Iklan Google Adsense Di Tengah Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">

<!-- Kode Adsense Anda -->

</div>
<div expr:id='"aim2" + data:post.id'>
<data :post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/x3C!-- adsense --x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

4. Ganti kode <!-- Kode Adsense Anda --> dengan kode Adsense anda

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

More about → Meletakkan Iklan Google Adsense Di Tengah Artikel

Meletakkan Widget Di Bawah Header

Berikut Cara Meletakkan Widget Di Bawah Header:

1. Login ke akun Blogger anda
2. Pilih Layout > Edit HTML
3. Untuk jaga2, bacup dulu template nya
3. Udahkan? Sekarang cari kode berikut:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

4. Ganti kode tersebut dengan kode berikut:

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

5. Klik Save Template
6. Sekarang pindah ke tab Page Elements
7. Lihat pada bagian Header nya, sudah ada tulisan add gadget kan? Nha, kalau mau menambahkan elemen tinggal klik aja tulisan itu.
Gimana? Mudahkan?
Selamat mencoba…

More about → Meletakkan Widget Di Bawah Header

Cara Modifikasi Kotak Komentar

Anda bosan dengan tampilan kotak komentar yang diberikan oleh Blogspot? Mau yang lebih unik dan menarik? Tenang, kali ini saya akan coba menjelaskan cara memodifikasi kotak komentar yang membosankan itu :). Tapi perlu diingat, kode2 dalam tips kali ini mungkin akan berbeda dengan kode yang ada di template anda. Ini disebabkan perbedaan karakteristik masing2 template. Jadi kalau tidak sama dengan yang anda punya, berarti anda kurang beruntung.. Heheh.. :O. Mau tau caranya?

Berikut Cara Modifikasi Kotak Komentar:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Template

3. Sebaiknya backup dulu template anda jika nanti anda kesalahan dalam pengeditan. Klik Download Full Template.

4. Jika sudah, cari kode berikut:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

5. Ganti kode tersebut dengan kode berikut:

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}
#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}
#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}
.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}
.commentinfo{
clear: both;
}
.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsC1k3weCXIFmEzTQbUm_GEif4CYXWJg0oUEGfvj-E2X8vSNAX3Y-goXdpu_OaeB2rfGvreWDEZXa09Veu9Ny_tmqIc4-OCgvfFZnTo-9kGD0nMnXtxm9shtciKGIw-JhJn2JZFDqQIFT/s320-r/comment.gif) no-repeat top left;
}
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsC1k3weCXIFmEzTQbUm_GEif4CYXWJg0oUEGfvj-E2X8vSNAX3Y-goXdpu_OaeB2rfGvreWDEZXa09Veu9Ny_tmqIc4-OCgvfFZnTo-9kGD0nMnXtxm9shtciKGIw-JhJn2JZFDqQIFT/s320-r/comment.gif) no-repeat top left;
}

6. Setelah itu cari kode berikut:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<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>
</b:if>

7. Ganti kode tersebut dengan kode berikut:

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<div id='bg_commentblock'>

<h4>Komentar:</h4>

<div id='commentblock'><!--commentblock-->
<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
</b:if>

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>pada &#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<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>
</div><!--end commentblock-->
</div>
</b:if>

8. Klik Save Template untuk menyimpan perubahan.

Gimana? Susah ya? Mungkin karena kebanyakan lihat kode kepala jadi botak.. :r
Tapi jika anda sedikit familiar dengan CSS, maka anda bisa untuk berkreasi lebih.
Ok, selamat mencoba…

Jangan lupa kasih komentar ya…

More about → Cara Modifikasi Kotak Komentar

Cara Memasang Video Di Artikel

Berikut Cara Memasang Video Di Artikel:

1. Daftarkan diri anda ke situs Youtube.com, lalu klik link Sign Up

2. Isi data yang diperlukan, centang kotak disamping tulisan Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. Lalu klik tombol Sign Up

3. Setelah itu anda akan diminta mengkonfirmasi email yang anda daftarkan tadi. Cek email anda dan konfirmasikan segera

4. Jika sudah, login ke akun Youtube anda

5. Klik link Upload Video

6. Isi form yang disediakan, lalu klik Continue Uploading

7. Klik tombol Browse untuk memilih video yang akan anda upload

8. Beri tanda tik / cek pada radio button. Pilih Public supaya video bisa dilihat oleh semua orang, Private supaya video hanya bisa dilihat oleh orang yang anda tentukan

9. Jika sudah, klik tombol upload untuk mulai mengupload video anda

10. Setelah video anda terupload, copy kode HTML yang diberikan.

Selesai untuk proses upload video...

Sekarang cara untuk menampilkannya di artikel.. Caranya,, paste kode HTML yang telah anda copy tadi ke tab Edit HTML tempat membuat artikel, jangan pada tab Compose. Jika sudah, ya tinggal klik Publish Post.

Gimana? Mudahkan?

Jangan lupa kasih komentar ya...

More about → Cara Memasang Video Di Artikel

Cara Membuat Tabel Di Blog

abel merupakan sebuah elemen yang berfungsi untuk mengelompokkan beberapa variabel dengan variabel lain ke dalam sebuah kotak sehingga mudah untuk memahami pembagiannya (itu defenisi menurut saya, menurut anda gimana?). Bagi anda para Blogger yang memilki blog untuk keperluan bisnis tabel ini akan sangat berguna untuk menampilkan daftar harga dan jenis barang yang ditawarkan. Untuk keperluan yang lain juga boleh. Maka dari itu, di tips kali ini saya akan menjelaskan cara membuat tabel tersebut. Mau tau?

Untuk membuat tabel di blog atau website kita menggunkan kode HTML, misal <table> ..... </table>. Didalamnya kita bisa memasukkan beberapa atribut. Di antaranya:

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

cellpadding : untuk mengatur jarak antara tepi cell dengan isi cell di dalam sebuah tabel. Penempatan kodenya: cellpadding="pixel"

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya: border="pixel"

cellspacing : untuk mengatur jarak antara cell. Penempatan kodenya: cellspacing="pixel"

height : untuk mengatur tinggi tabel. Penempatan kodenya: height="pixel"

width : untuk mengatur lebal tabel. Penempatan kodenya: width="pixel"

Kode yang terbentuk adalah seperti ini:

<table align="left"|"center"|"right"
bgcolor="kode warna"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
height="pixel"|"%"
width="pixel"|"%">
.....................
</table>

Kita juga bisa memasukkan beberapa elemen ke dalam elemen tabel, yaitu caption, TH (Table Header), TR (Table Row), dan TD (Table Division).

Elemen caption berfungsi untuk membuat judul tabel. Elemen ini mempunyai atribut align dengan nilai top (judul di atas tabel), dan bottom (judul di bawah tabel).

Kode yang terbentuk adalah seperti ini:

<caption align="top"|"bottom">
.................
</caption>

Elemen TR (Table Row) berfungsi untuk membuat baris. Elemen ini letaknya di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

Kode yang terbentuk adalah seperti ini:

<tr align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom">
.................
</tr>

Elemen TH (Table Header) berfungsi sebagai header cell pada sebuah kolom tabel. Atribut yang bisa di pakai di dalam TH antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<th align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</th>

Elemen TD (Table Division) adalah elemen untuk membuat kolom. Atribut yang bisa di pakai di dalam TD antara lain:

align : untuk mengatur perataan teks pada tabel (rata kiri, tengah, rata kanan, atau rata kiri-kanan)Penempatan kodenya: align="left"|"center"|"right"

valign : untuk mengatur posisi vertikal teks. Penempatan kodenya: valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya: bgcolor="kode warna" . Klik disini untuk mengetahui kode warna HTML.

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor"

rowspan : untuk mengatur baris. Penempatan kodenya : rowspan="nomor"

Kode yang terbentuk adalah seperti ini:

<td align="left"|"center"|"right"
bgcolor="kode warna"
valign="top"|"middle"|"bottom"
colspan="nomor" rowspan="nomor">
.................
</td>

Berikut kode membuat tabel sederhana:

<table width="200" border="1">
<tr>
<td>
Contoh Tabel Sederhana
</td>
</tr>
<table>

Hasilnya:

Contoh Tabel Sederhana

Jika anda ingin tulisannya berada ditengah, tambahkan kode align="center" setelah kode <td>.
Jika anda ingin menebalkan border nya, ganti nilai border="1" dengan nilai yang lebih tinggi. Contoh: border="5"

Contoh:

<table width="200" border="5">
<tr>
<td align="center">
Contoh center & border="5"
</td>
</tr>
</table>

Hasilnya:

Contoh center & border="5"

Jika anda ingin menambah kolom, misalnya 3 kolom, kodenya seperti ini:

<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1

Contoh Kolom 2

Contoh Kolom 3

Jika anda ingin menambah baris, misalnya 2 baris, kodenya seperti ini:

<table width="300" border="5">
<tr>
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1	Contoh Kolom 2	Contoh Kolom 3
Contoh Baris 2	Contoh Baris 2	Contoh Baris 2

Jika ingin memberi warna tabel, kodenya seperti ini:

<table width="300" border="5" bgcolor="#FF00FF">
<tr bgcolor="#0000FF">
<td align="center">
Contoh Kolom 1
</td>
<td align="center">
Contoh Kolom 2
</td>
<td align="center">
Contoh Kolom 3
</td>
</tr>
<tr bgcolor="#00FF00">
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
<td align="center">
Contoh Baris 2
</td>
</tr>
</table>

Hasilnya:

Contoh Kolom 1	Contoh Kolom 2	Contoh Kolom 3
Contoh Baris 2	Contoh Baris 2	Contoh Baris 2

Huft… Cape’ nih… Lanjut………!!!!!

Ini contoh terakhir:

Misalnya anda adalah Penjual Makanan Online (emang ada? :f anggap aja ada ya.. :r ok, lanjuutt…!). Anda ingin membuat daftar makanan yang unik dan menarik dengan membuat tabel seperti yang saya contohkan berikut:

Warung Online Mpok Inez

Daftar Menu & Harga
No.	Menu	Harga
1.	Nasi Uduk	Rp 5000
2.	Pecel Lele	Rp 3500
3.	Teh Telor	GRATIS!!!

"Wow! Kalau yang itu gimana bang Zacky? :f Inez nggak tau nih.. Bantuin donk…"

Duh Mpok Inez :$, gitu aja repot! Hehehe… Begini kode nya:

<table width="249" border="2" bgcolor="#FF00FF" cellpadding="5" cellspacing="0">
<caption align="top"><b>Warung Online Mpok Inez</b></caption>
<tr bgcolor="fuchsia">
<th colspan="3" bgcolor="#FF0000">Daftar Menu & Harga</th>
</tr>
<tr bgcolor="green">
<th width="24" bgcolor="#FFCC99">No.</th>
<th width="93" bgcolor="#33FFCC">Menu</th>
<th width="92" bgcolor="#66FF00">Harga</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Nasi Uduk</td>
<td bgcolor="#CC0099">Rp 5000</td>
</tr>
<tr bgcolor="red">
<td bgcolor="#99FF00">2.</td>
<td bgcolor="#0000FF">Pecel Lele</td>
<td bgcolor="#FFFFFF">Rp 3500</td>
</tr>
<tr bgcolor="blue">
<td bgcolor="#009900">3.</td>
<td bgcolor="#FF00FF">Teh Telor</td>
<td bgcolor="#CCCCCC">GRATIS!!!</td>
</tr>
</table>

Gimana? Mpok udah kan? Kalau begitu sekarang saya minta menu yang gratis ya, yang Teh Telor itu lho.. :$ Cepat ya Mpookk,,, :)

Lho? Kok jadinya malah ngobrol dengan Mpok Inez? :r :r Ok, saya kembali ke anda para pembaca setia ku.. Hikz.. Hikz..!

Gimana? Saya membuat artikel yang SANGAT SINGKAT ini dengan sangat susah payah, jadi jangan lupa dikasih pujian ya :k, eh komentar… :O

Ok, selamat berkreasi dengan tabel anda…

More about → Cara Membuat Tabel Di Blog

Cara Membuat Read More Automatis + Thumbnail (Versi 3)

Berikut Cara Membuat Read More Automatis +Thumbnail:

1. Seperti biasa, login dulu ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>

<!-- Read more v3 -->
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i ){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">") 1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop ;
strx = strx.substring(0,chop-1);
return strx '...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more v3 end -->

Note:
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. Tetap di Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

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

Tulisan READ MORE - bisa anda ganti sesuai keinginan.

7. Save lagi template nya.

Siap deh semunya. Sekarang tinggal anda coba, Ok! Have a nice dream…! Hehehe…!

Jangan lupa kasih komentar ya…

More about → Cara Membuat Read More Automatis + Thumbnail (Versi 3)

Cara Memasang Jadwal Sholat

Berikut Cara Memasang Jadwal Sholat Di Blog:
1. Buka situs IslamicFinder.org
2. Klik link Add new sevices to your site yang berada di bagian bawah halaman utama
3. Klik dropdown menu yang ada tulisan Select a Country
4. Plih Negara tempat tinggal anda. Contoh: Indonesia. Lalu klik GO
5. Pilih kota tempat tinggal anda, lalu klik tombol Generated Code dan copy kode HTML yang diberikan
Selesai untuk proses di IslamicFinder.org.
Sekarang saatnya kita pasang widget tersebut di blog. Caranya:
1. Login ke akun Blogger anda
2. Pilih Layuot > Page Elements
3. Tambahkan Page Elements dengan HTML/Javascript
4. Paste kode HTML yang anda copy tadi ke kotak content
5. Terakhir, klik Save untuk menyimpannya.
Sekarang blog anda kan sudah punya jadwal sholat, jadi seperti yang saya bilang tadi jangan blogging dan browsing saja kerjaannya, sholat dulu yang penting, ok?! :D
Selamat mencoba…
Jangan lupa kasih komentar ya…

More about → Cara Memasang Jadwal Sholat

Cara Membuat Cursor Animasi

Wow, 2 hari yang lalu ada yang request ke email saya dari mbak "C". Begini katanya, "Mas, saya mau tau cara membuat cursor yang unik seperti yang ada di profil friendster dan yang ada di blog lainnya. Tiap kali saya blogwalking saya selalu ngiri nih liat blog teman yang punya cursor yang unik itu. Bantuin saya donk mas, saya juga mau bikin yang seperi itu...". Setelah baca request itu saya langsung kaget! Kaget bukan karena saya tidak tau caranya, tapi kaget karena itu adalah request pertama yang masuk ke inbox saya, hehe... Ok, kali ini saya akan menjelaskan cara membuat cursor animasi seperi yang diminta mbak "C" itu.

Untuk memasang sebuah cursor animasi di blog, langkah pertama yang harus kita lakukan adalah menyiapkan cursor yang akan dipakai. Cari aja di mbah google, atau kalau mau cepat klik aja disini. Setelah anda sampai di situs tersebut, pilih dan kemudian simpan file cursor anda (biasanya berekstensi .ani). Jika sudah, upload file cursor itu ke sebuah image hosting, misalnya Photobucket.com. Setelah meng-upload, simpan url cursor tersebut.

Sekarang kita, beralih ke pemasangan di blog.

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Cari kode yang hampir sama dengan kode berikut:

body {
font: 100% Arial, Helvetica;
background: #f3f6f7;
color: #333;
}

4. Udah ketemu kan? Selanjutnya paste kode berikut di bawah kode body { :
cursor: url("URL-CURSOR-ANDA");

5. Terakhir, klik Save Template.

Selamat mencoba...

Jangan lupa kasih komentar ya...

More about → Cara Membuat Cursor Animasi

Membuat Efek Zoom Gambar Dengan jQuery Image Magnify v1.1

Sebelum saya menjelaskan lebih lanjut, silahkan baca kutipan berikut dari Dynamic Drive tentang jQuery Image Magnify v1.1:

jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script.

Nha, sekarang mari kita langsung pada pokok permasalahan...

Berikut Cara Memasang jQuery Image Magnify v1.1:

1. Login ke akun Blogger anda

2. Pilh Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </body>, lalu paste kode berikut di atasnya:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/jim-jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Brough to you by: Tips Blogger Zacky (tipsbloggerzacky.blogspot.com)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* This notice MUST stay intact for legal use
***********************************************/
</script>

4. Klik Save Template.


Selanjuntnya, cara mengunakan jQuery Image Magnify v1.1:

1. Fungsi Standar
Dalam fungsi standar, kita harus menambahkan atribut class="magnify" ke dalam tag img.
Kodenya:

<img src"URL-GAMBAR" class="magnify">

Ganti URL-GAMBAR dengan url gambar anda.

Jika anda ingin menampilkan gambar yang akan di zoom dengan ukuran yang lebih kecil dari yang asilnya, maka tambahkan atribut style="width:50px; height:30px; border:none;" ke dalam tag img.
Keterangan:
- width:50px > menunjukkan lebar gambar dalam pixel, ganti nilai 50 sesuai keinginan.
- height:30px > menunjukkan tinggi gambar dalam pixel, ganti nilai 30 sesuai keinginan.
- border:none > menghilangkan border gambar

Penempatan kodenya:

<img src="URL-GAMBAR" class="magnify" style="width:50px; height:30px; border:none;"/>

Contoh:

<img src="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" class="magnify" style="width:250px; height:123px; border:none;"/>

Hasilnya:


Note: Jika anda tidak menggunakan atribut style="width:px; height:px; border:none;", maka perbesaran gambar akan didasarkan pada ukuran aslinya.

# Memodifikasi Fungsi Standar #
Untuk memodifikasi fungsi standar kta harus menambahkan beberapa atribut, yaitu:

- data-magnifyby="number" > berfungsi untuk menentukan jumlah perbesaran. Ganti number dengan jumlah perbesaran yang anda inginkan. Misalnya 1,2,3,4,5,... *Untuk perbesaran 3 kali tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan perbesaran sebanyak 3 kali.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" style="width:250px; height:123px; border:none;"/>

- data-magnifyto="number" > berfungsi untuk menentukan perbesaran lebar gambar ke dalam ukuran pixel, sedangkan tinggi akan mengacu kepada jumlah perbesaran lebar tersebut. Ganti number dengan ukuran pixel yang anda inginkan (tidak perlu ditambah dengan px). *Untuk menggunakannya, anda harus menghilangkan atribut data-magnifyby="number".
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyto="500" style="width:250px; height:123px; border:none;"/>

- data-magnifyduration="number" > berfungsi untuk menentukan durasi perbesaran dari ukuran asli ke ukuran yang telah diperbesar. Ganti number dengan 500 untuk 0,5 detik, 2000 untuk detik. *Penulisan durasi dalam satuan milisecond. Untuk durasi 500 tidak perlu ditulis karena sesuai dengan fungsi standar yang telah menentukan durasi perbesaran selama 500 milisecond atau 0,5 detik.
Penempatan kodenya:
<img src="URL-GAMBAR" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:250px; height:123px; border:none;"/>

Contoh:

<img src="http://tipsbloggerzacky.googlecode.com/files/SAVING.JPG" class="magnify" data-magnifyby="2" data-magnifyduration="1000" style="width:248px; height:320px; border:none;"/>

Haslinya:


2. Membuat Link Gambar Yang Akan Diperbesar
Untuk membuat link gambar, kita harus menambahkan atribut id="ID-GAMBAR" dan membuat tag linknya.
Penempatan kodenya:

<img id="ID-GAMBAR" src="URL-GAMBAR" class="magnify" data-magnifyby="4" style="width:200px; height:150px; border:none;"/>
<a href="#" rel="magnify[ID-GAMBAR]">NAMA-LINK</a>

Contoh:

<img id="baby" src="http://tipsbloggerzacky.googlecode.com/files/get%20to%20the%20choppa%21.jpg" class="magnify" data-magnifyby="2" style="width:250px; height:198px; border:none;"/> <br /><a href="#" rel="magnify[baby]">Klik aqyu donk...</a>

Hasilnya:


Klik aqyu donk...

3. Membuat Efek Zoom Gambar Pada Link Dropdown Menu
Kodenya:

<form>
<select id="imageselect">
<option>Final Fantasy VIII Images</option>
<option>Squall</option>
<option>Rinoa</option>
<option>Squall-Rinoa_1</option>
<option>Squall-Rinoa_2</option>
</select>
</form>
<img id="imagebox" src="http://tipsbloggerzacky.googlecode.com/files/Squall.jpg" class="magnify" data-magnifyby="2" style="width:300px;height:225px; border:none;" />
<script type="text/javascript">
var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["http://tipsbloggerzacky.googlecode.com/files/Squall.jpg", "http://tipsbloggerzacky.googlecode.com/files/Rinoa.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_1.jpg", "http://tipsbloggerzacky.googlecode.com/files/Squall-Rinoa_2.jpg"]
imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 2
})
}
}
</script>

Keterangannya.... Ah,, nggak jadi aahh, cape' jelasin smuanya... Lagian dengan mencari tau sendiri keterangannya bisa lebih cepat nangkapnya, ya nggak?

Oya, ini hasil kode yang tadi:

More about → Membuat Efek Zoom Gambar Dengan jQuery Image Magnify v1.1