Membuat Image Slider Cantik Dengan Nivo Slider

Image slider atau photo slider atau slider..halah kebanyakan atau -_-", langsung aja deh, image slider memang salah satu upaya untuk mempercantik sebuah desain web atau bahkan untuk menunjang interface pada sebuah tampilan website. Selain mempercantik tampilan, slider juga sekaligus berfungsi sebagai navigasi  interaktif sebagai daya tarik visitor untuk mengunjungi konten yang di link dalamimage slider tersebut.

Lalu, bagaimana sih membuat image slider itu? Susah tidak ya?
Emmm...kalau masalah mudah atau tidak itu tergantung kitanya mau belajar atau tidak..hehe! yang jelas kita harus sedikit tahu atau paling tidak mengerti sedikit mengenai bahasa HTML.

Oke deh langsung saja kita praktek membuat image slider untuk dipasang disebuah template blog atau halaman web.
Sebelum dimulai alangkah baiknya Anda melihat image slider yang nanti akan kita buat, lihat preview image slider yang saya terapkan di web saya yang baru, Klik Disini untuk melihat demonya.

Langkah yang pertama yang harus kita lakukan adalah menyiapkan komponen-komponenya.

• jquery.nivo.slider.js ( plugin javascript dari nivo slider )
• jquery-1.6.1.min.js ( Plugin JQuery )
• CSS
• URL foto yang ingin ditampilkan pada slider

Untuk plugin JQuery dan CSS nya Anda bisa ngelink saja dari web saya, untuk memperpendek penulisan kode. Caranya sebagai berikut :

Taruh kode berikut di antara tag header,

<link rel="stylesheet" href="http://jogja-handycraft.info//slider/style/style.css" type="text/css" />
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery.nivo.slider.js"></script>

Kemudian taruh kode berikut diantara tag body,

<div id="slider" class="nivoSlider">
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/1.jpg" alt="Jewelry Box Open Side" title="Jewelry Box Open Side" /></a> 
<a href="#"><img src="http://jogja-handycraft.info/slider/images/2.jpg" alt="Red Jewelry Box" title="Red Jewelry Box" /></a>
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/3.jpg" alt="Red Jewelry Oval Box" title="Red Jewelry Oval Box" /></a>
 <a href="#"><img src="http://jogja-handycraft.info/slider/images/4.jpg" alt="Pink Beaty Jewelry Box" title="Pink Beaty Jewelry Box" /></a> 
<a href="#"><img src="http://jogja-handycraft.info/slider/images/5.jpg" alt="Tray Set Parcel Hari Raya" title="Tray Set Parcel Hari Raya" /></a>
  </div>

 <script type="text/javascript">
     $(window).load(function() {
     $('#slider').nivoSlider({
     pauseTime: 5000,
     startSlide: 3 }); });
 </script>

Keterangan :
Ganti tulisan yang saya kasih blok warna merah dengan URL tujuan.
Ganti tulisan yang saya kasih blok warna hijau dengan URL gambar.
Ganti tulisan yang saya kasih blok warna kuning dengan Judul dari gambar tersebut.

Simpan, dan lihat hasilnya. Oh iya, slider ini bisa diaplikasikan disemua komponen website ataupun template blog, termasuk pada blogger. Kelebihan dari sider ini selain ringan juga mempunyai slide effect yang indah. So,selamat bereksplorasi.

Lihat Demo.

Baca Selengkapnya

Daftar Isi Otomatis Blogger Dengan Thumbnail dan Navigasi

Memiliki Halaman Daftar Isi atau yang biasa di sebut Table Of Content dalam sebuah blog atau website menjadi hal wajib untuk memudahkan visitor mencari content yang mereka inginkan. Tentunya Daftar Isi ini akan menjadi point plus untuk blog kita dimata para visitor. Membuat daftar isi tidak boleh asal-asalan, karena daya tangkap masing-masing visitor berbeda-beda, kalau kita membuat daftar isi acak-acakan tentu hal ini sulit di mengerti oleh visitor dan bukan tidak mungkin visitor enggan membaca isi dari daftar isi kita.

Nah, pada kesempatan kali ini saya akan berbagi tips nih Bagaimana Cara Membuat Daftar Isi Otomatis Blogger Dengan Thumbnail dan Navigasi. Bisa juga sih membuat secara manual, tapi dijamin deh jari ente gempor kalau posting di blog ente banyak..hehe. Oh iya, ini berbeda loh dengan Trik Membuat Widget Daftar Isi Otomatis pada postingan yang dulu.!

Oke, masuk ke topik. Langkah pertama untuk membuat daftar isi otomatis dengan thumbnail dan navigasi ini kita harus Login dulu ke blogger. Kalau sudah pilih blog mana yang ingin dibuatkan Daftar isi otomatis ini. Kemudian pilih menu laman, berikut screenshotnya :

Buat halaman baru, seperti terlihat pada gambar diatas. Pilih yang HTML, dan taruh kode berikut ini :

<style type="text/css">
#toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:#FFCC00;
  text-align:left;
  margin:0px auto;
  border:2px solid #DFC;
  padding:15px;
  background-color:#040403;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  box-shadow:0px 1px 4px rgba(0,0,0,0.6);
}
#loadingscript {
  background:#F6EFBB url('http://www.gstatic.com/codesite/ph/images/dl_arrow.gif') no-repeat 50% 46%;
  padding:10px;
  font:bold 20px Georgia,Serif;
  color:black;
  height:400px;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  -moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}
.itemposts {
  margin:0px auto 5px;
  height:auto;
  background-color:#474645;
  overflow:hidden;
  display:block;
}
.itemposts h6 {
  margin:0px auto 2px;
  font:bold 12px/14px Arial,Sans-Serif;
  background-color:#70736E;
  background-image:-webkit-linear-gradient(top, #FF0000, #FF6600);
  background-image:-moz-linear-gradient(top, #FF0000, #FF6600);
  background-image:-ms-linear-gradient(top, #FF0000, #FF6600);
  background-image:-o-linear-gradient(top, #FF0000, #FF6600);
  background-image:linear-gradient(top, #FF0000, #FF6600);
  padding:10px 15px;
  text-transform:none;
  color:white;
}
.itemposts h6 a {
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  background-color:##323331;
  border:1px solid #dcdcdc;
  padding:4px;
}
.itemposts .iteminside {
  padding:10px;
  background-color:#343434;
  border-top:1px solid #e5e5e5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}
.itemposts .itemfoot {
  clear:both;
  border:1px solid #EAE7DB;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#323331;
  color:#ff00ff;
  overflow:hidden;
}
.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#ffffff;
  float:right;
  text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
  color:#ffffff;
  text-decoration:underline;
}
#itempager {
  background-color:#F2F0F1;
  padding:30px 0px;
  border-top:1px solid #E5E5E5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}
#pagination, #totalposts {
  color:#999;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  margin-bottom:10px;
  text-align:center;
}
#pagination span, #pagination a {
  border:1px solid #e5e5e5;
  color:white;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:#323331;
  text-decoration:none;
}
#pagination span.actual,
#pagination a:hover {
  background-color:#7483BC;
}
#pagination span.hidden {
  display:none;
}
</style>
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Read more &#9658;",
    prevText       = "Preview",
    nextText       = "Next",
    siteUrl        = "http://blog-thinker.blogspot.com",
    postsperpage   = 10,
    numchars       = 350,
    imgBlank       = "https://lh5.googleusercontent.com/-gMU5IAD2gJ8/AAAAAAAAAAI/AAAAAAAABNA/KZ5hkd9VqV8/s250-c-k/photo.jpg";
</script>
<script src="http://blog-thinker.googlecode.com/files/table-of-content-bt.js" type="text/javascript">
</script>

Ganti URL http://blog-thinker.blogspotcom dengan URL blog Anda dan tekan tombol Publishkan. Selesai.

Baca Selengkapnya

Bot Auto Update Status Facebook Random Ayat Alqur'an

Bot Auto Update Status Facebook Random Ayat Alqur'an. Sekedar informasi aja nih, juga share pengetahuan tentunya. Pertama saya ingin mengucapkan terimakasih buat Mas Burhan Syam yang punya ide membuat bot auto update status random ayat ini. Dengan sedikit script ini kita dapat update status facebook dengan ayat-ayat Al-qur'an tanpa harus online.

Apa saja yang harus kita siapkan untuk membuat bot auto update status ini, pertama kita harus punya aplikasi dulu di facebook. Kalo belum punya silahkan buat dulu disini.
Kalau sudah, ambil APP ID dan SECRET KEY nya.

Buat file PHP copy paste script di bawah ini, upload ke hosting sobat dengan nama ayat.php

1. <?php
2. 
   
3. function bacaHTML($url){
4. // inisialisasi CURL
5. $data = curl_init();
6. // setting CURL
7. curl_setopt($data, CURLOPT_RETURNTRANSFER, 1);
8. curl_setopt($data, CURLOPT_URL, $url);
9. // menjalankan CURL untuk membaca isi file
10. $hasil = curl_exec($data);
11. curl_close($data);
12. return $hasil;
13. }
14. 
    
15. $isine = bacaHTML('http://www.mahesajenar.com/scripts/ayat.php');
16. $bersih= explode('<b>', $isine);
17. $bersih= str_replace("document.write(", "", $bersih);
18. $bersih= str_replace("widget lain", "", $bersih);
19. $bersih= str_replace("<br/><br/><a href='http://widgets.mahesajenar.com/'></a>", "", $bersih);
20. $bersih= str_replace("</strong>", "", $bersih);
21. $bersih= str_replace("<br /><strong>", "", $bersih);
22. $bersih= str_replace(");", "", $bersih);
23. echo "$bersih[0]";
24. 
    
25. ?>

Kalau sudah, buat satu file lagi terserah mau di kasih nama apa. disini saya asumsikan nama filenya adalah botstatus.php File ini nantinya yang akan di eksekusi untuk membuat auto update status yang mengambil content dari fie ayat.php tadi. Berikut Script nya :

1. <?php
2. 
   
3. $access_token = "TARUH TOKEN KODE APP SOBAT DISINI";
4. $url = "https://graph.facebook.com/me/feed?method=POST";
5. 
   
6. $linx = "http://domain-sobat/ayat.php";
7. 
   
8. $status = file_get_contents($linx);
9. 
   
10. $ch = curl_init();
11. $attachment = array( 'access_token' => $access_token,
12. 'message' => $status,
13. );
14. 
    
15. curl_setopt($ch, CURLOPT_URL,$url);
16. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
17. curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
18. curl_setopt($ch, CURLOPT_POST, true);
19. curl_setopt($ch, CURLOPT_POSTFIELDS, $attachment);
20. $result= curl_exec($ch);
21. 
    
22. curl_close ($ch);
23. ?>

Keterangan :
Sesuaikan dengan informasi sobat.
- $access_token = "TARUH TOKEN KODE APP SOBAT DISINI";
- $linx = "http://domain-sobat/ayat.php";
Untuk melihat hasilnya, silahkan akses file botstatus.php nya

Setting CronJob untuk file botstatus.php



Silahkan atur sendiri berapa menit sekali status terupdate.
Semoga bermanfaat.

Credit from marahmerah.com

Baca Selengkapnya

JavaScript Disable Right Click Mouse

Salah satu usaha kita agar artikel kita tidak di copy atau di curi orang selain diable select teks seperti yang telah saya posting pada postingan sebelumnya, yaitu dengan melakukan disable right clik. Tentu saja semua ini tidak menjamin bahwa artikel kita akan bener-bener aman dari aktivitas copy paste, tapi untuk mengelabuhi para newbie boleh lah di coba. Langsung aja deh masuk ke inti.
Langkah-langkah untuk mendisable Right Click Mouse tanpa Alert :

• Login to Blogger (Login ke Blogger).
• Masuk ke Dasboard (Dasbor)
• Setelah login dan memasuki halaman dasboard, KLIK "Design (Rancangan)".
• Halaman Design yang terbuka pertama kali adalah di bagian "Page Elements (Elemen Laman)", cari dan KLIK "Edit HTML".
• Gunakan Ctrl+F (pada keyboard) untuk mencari kode ]]></b:skin>.
• Letakkan javascript di bawah ini tepat di bawahnya.

1. <script type="text/javascript">
2. //<![CDATA[ /*Blog-thinker.blogspot.com | No Right Click */
3. var isNS = (navigator.appName == " Netscape ") ? 1 : 0;
4. if (navigator.appName == " Netscape ") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
5. function mischandler() {
6. return false;
7. }
8. function mousehandler(e) {
9. var myevent = (isNS) ? e: event;
10. var eventbutton = (isNS) ? myevent.which: myevent.button;
11. if ((eventbutton == 2) || (eventbutton == 3)) return false;
12. }
13. document.oncontextmenu = mischandler;
14. document.onmousedown = mousehandler;
15. document.onmouseup = mousehandler;
16. //]]>
17. </script>

Jangan Lupa di Save yah.

Semoga Bermanfaat!!
Visit My portal CYBER JOGIS PORTAL

Baca Selengkapnya

Membuat Anti Select Text Di Bagian Tertentu - Anti Copy Text

Membuat Anti Select Text Di Bagian Tertentu akan sangat membantu kita melindungi artikel kita dari tindakan copy paste yang dapat kita tentukan zona yang tidak boleh di copy. Sepeti biasa, javascript xkita akan menggunakan javascript dan tag HTML untuk melakukan ini. Lalu, apa kelebihan nya di banding kita membuat no select text di seluruh bagian halaman? Tentu saja ini akan menguntungkan bagi kita yang sering memposting mengenai code yang notaben nya memberi izin visitor untuk mengcopy code yang kita posting dengan tidtapi tidak dengan teks nya. Untuk Demo bisa langsung dilihat di artikel ini.
Berikut Javascript Codenya :

JAVASCRIPT :

1. <script type='text/javascript'>
2. //<![CDATA[
3. function disableSelection(target) {
4. if (typeof target.onselectstart != "undefined") target.onselectstart = function () {
5. return false
6. }
7. else if (typeof target.style.MozUserSelect != "undefined") target.style.MozUserSelect = "none"
8. else target.onmousedown = function () {
9. return false
10. }
11. target.style.cursor = "default"
12. }
13. var nocopyblogthinker = document.getElementById("blogthinker")
14. disableSelection(nocopyblogthinker)
15. //]]>
16. </script>

TAG HTML :

1. <div id="blogthinker">
2. Letakkan pada posisi seperti ini teks yang ingin di buat no select text (Anty Copy)
3. </div>

Berikut cara penggunaannya :

• Login ke Blogger.
• Halaman Dasbor --> klik "Rancangan".
• Klik "Edit HTML".
• Backup Template untuk menghindari hal-hal yang tidak di inginkan.
• Cari kode </body>
• Copy dan paste-kan javascript di atas kode tersebut.
• Klik "Simpan Template".
• Lanjutkan membuat posting dan gunakan Tag HTML seperti yang terlihat di atas.
• Lihat hasilnya.

Semoga Bermanfaat!

Baca Selengkapnya

JavaScript Disable Fungsi Keyboard

Kali ini kita akan sedikit membahas mengenai Javascript code. Sesuai dengan judul pstingan, Javascript yang ini berfungsi untuk mendisable atau mematikan fungsi keyboard pada saat pengunjung berkunjung ke halaman web atau blog kita. Oke, langsung di sedot aja code nya. Jangan malu-malu...haha!!

1. <script>
2. function keypress() {
3. alert("Maaf, Fungsi Keyboard Di Non-aktifkan Pada Halaman Ini !!");
4. }
5. document.onkeydown=keypress;
6. </script>

Terseah mau di tempatkan di mana, mau di tag body atau head atau footer boleh, asal jangan di tempat sampah. hehe...! Selamat Mencoba!

Baca Selengkapnya

Pasang Show Hide Widget With Button Customizable Di Blog.

Bagaimana cara membuat Show hide Widget dengan tombol klik yang dapat kita sesuaikan sendiri tempat dan icon nya? Terus gimana tuh bentuk nya? Untuk melihat Demo nya, silah klik tombol di kiri samping blog ini, atau Klik Disini.

Seperti biasa, saya mengandalkan Javascript untuk membuat ini, juga CSS untuk mengatur tata letaknya. Berikut Tutorialnya :

1. Login ke Blogger sobat.
2. Masuk ke menu "Rancangan", pilih tab "Edit Html"
3. Cari tag <body> Letakkan Code berikut di bawahnya :

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:100px;left:0px;' title='KLIK DISINI!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXPSdgWeNoyjXpdgR7BWaZ00ur4hiSca59-rJKlSdkrZhyphenhyphenkeHk-YjBbVSRyWz3MRQlE-levuGYynasnwBP0FMoRiSBnpnwHQM8uVq2ozxYU_oQA3O2DqPXqGyZbiglY0IE9Y7Vn0sDPvE/'/></a>

dan Save.

4. Pilih tab "Elemen Laman", Tambhakan Gadget, dan pilih "Html/Javascript".
5. Copy paste code berikut ( silahkan edit sendiri sesuai selera Sobat, mohon jangan hapus link saya ) :

<style type="text/css">
#fl{
position:fixed;
right:40px;
z-index:+1000;
}
* html #fl{position:relative;}

.fltab{
height:32px;
width:270px;
float:top;
cursor:pointer;
background:url('') no-repeat;
}
.flcontent{
float:right;
border:2px solid #676767;
background:url()#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
<font color="white">

<iframe align="left" frameborder="0" src="https://8397469931666359649-a-1802744773732722657-s-sites.googlegroups.com/site/kangandrysite/file-cabinet/andry_yunan_system.swf?attachauth=ANoY7cpeXd7YQu1EqL19JHZQQFKE8Yw_gHXS1QcX_jQV2IQw6nXYPaLUbwBgDx4yN_MObo0nvMSrybRsEzhnWSgumq4vsxf1MWA5G-b0f-om-ZWiWuiUgBstG4l3PZyS7MOeh-yQmMecpAbDbRNgVh_Nswl3lUFbwYK8SArJbVfzdycpUTqzKZ7eby6YvVF3F-X3C5OsjWyxpliVCUyk449R5g5urQw3d8iTdKOHtxtHoKWKbbhWGk4%3D&attredirects=0%2F" width="900" height="700" scrolling="YES"> </iframe>

</font>
<div style="text-align: right;">

<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://blog-thinker.blogspot.com/"><div style="color: #444444;">
<span >Blog-Thinker Admin</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-200-fl.offsetWidth).toString() + "px";
</script>

SELESAI. Silahkan modifikasi sendiri sesuka Sobat.

Bagi sobat yang masih bingung gimana mengcustumizenya agar sesuai dengan template blog sobat, silahkan tinggalkan pertanyaan di Komentar, insyaallah saya bantu.

Baca Selengkapnya

Obrak-abrik Halaman Suatu Website Dengan JavaScript

Obrak-abrik Halaman Suatu Website Dengan JavaScript, Obrak abrik halaman website yang saya maksud disini bukan bersifat merusak web orang lho, jadi slow... jangan nafsu dulu, kalau gak tertarik baca silahkan close aja postingan ini..hehe.

Lihat printscreen profil facebook saya berikut, Perhatikan dengan seksama, klik gambar untuk memperbesar!


Apakah mungkin facebook mengijinkan penamaan sepanjang itu dengan karakter berbeda-beda, dan dibawah nama tidak terlihat nama alias kosong. Eits, jangan berfikir itu di edit dengan photo editor sperti photoshop atau yang lain. itu asli langsung di edit dari browser firefox lho. loh kok bisa? memangnya firefok bisa buat editing foto? jawabaannya JELAS TIDAK BISA. tapi kalo buat ngedit text statis atau ukuran bahkan tata letak gambar bisa dilakukan dengan JavaScript.

Nah buat Anda yang hobi usil, bisa di coba javaScript yang satu ini,
Copas JavaScript berikut :

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Tempelkan di Address bar kemudian tekan Enter. acak-acak deh tu halaman website sesuka Anda. kemudian di printscreen (CTRL+PrintScreenSysRq), upload deh buat sensasi...haha!
Selamat mencoba.

Baca Selengkapnya

Percantik Postingan Blogger Dengan Fancy ShareThis Social Bookmarking Widget

Bagaimana cara menambahkan tombol ShareThis dengan On-hover efek animasi ( Fancy Style ) di postingan blogspot? 

Menambahkan tombol share this pada setiap postingan merupakan salah trik agar blog kita mendapatkan trafik yang lebih tinggi, dengan tombol share this ini di harapkan pengunjung membagikan / menshare postingan kita di situs jejaring sosial meraka. Nah kalau biasanya tombol sharethis terlihat biasa-biasa saja, kali ini saya akan berbagi tips cara menambahkan tombol ShareThis dengan On-hover efek animasi di setiap halaman postingan blogspot. 

 Lihat LIVE DEMO disini.

Berikut Cranya :

Step 1.

Langkah pertama yang harus kita lakukan adalah Login Ke Blogger, 

kalau sudah login, masuk ke menu "Rancangan" dan pilih Tab "Edit HTML".

Step 2. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :

]]></b:skin>

Letakkan kode berikut diatas/seblem nya.

/* Fancy SocialBookmark*/ #sharebox{height:48px; width:400px; margin:0; padding:5px 0;} ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;} ul.sharebox li a { margin:0 0 0 -24px; display:block;} ul.sharebox li a:hover { margin:0 0 0 -8px; } ul.sharebox li img { border:none;}

Step 3. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :
</head>

Letakkan kode berikut diatas/seblem nya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> (function($){ $.fn.sharebox = function(){ var element = this; $(element).find("li").each(function(i){ $(this).css("z-index", 12- i); if (i>0) $(this).css("left", i * 24 + 100); }); } })(jQuery); </script> <script type='text/javascript'> $(document).ready(function(){ $("#sharebox").sharebox(); }); </script>

Step 4. 

Tekan CTRL+F pada keyboard dan temukan kode berikut :

<data:post.body/>

Letakkan kode berikut dibawah/sesudahnya nya.

<ul class='sharebox' id='sharebox'><li><img alt='Share this' src='http://dotinfo.co.tv/images/sharebox/sharethis.png'/></li> <li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://dotinfo.co.tv/images/sharebox/digg_48.png'/></a></li> <li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://dotinfo.co.tv/images/sharebox/sumbleupon_48.png'/></a></li> <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://dotinfo.co.tv/images/sharebox/delicious_48.png'/></a></li> <li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://dotinfo.co.tv/images/sharebox/technorati_48.png'/></a></li> <li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://dotinfo.co.tv/images/sharebox/reddit_48.png'/></a></li> <li><a expr:href='" http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Mixx' src='http://dotinfo.co.tv/images/sharebox/mixx_48.png'/></a></li> <li><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Sumbit to Twitter' src='http://dotinfo.co.tv/images/sharebox/twitter_boxed_48.png'/></a></li> <li><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Furl' src='http://dotinfo.co.tv/images/sharebox/furl_48.png'/></a></li> <li><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Design Float' src='http://dotinfo.co.tv/images/sharebox/designfloat_48.png'/></a></li> <li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Blinklist' src='http://dotinfo.co.tv/images/sharebox/blinklist_48.png'/></a></li> <li><a expr:href='"http://buzz.yahoo.com/article/" + data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' src='http://dotinfo.co.tv/images/sharebox/yahoo_48.png'/></a></li> <li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Google Bookmarks' src='http://dotinfo.co.tv/images/sharebox/google_48.png'/></a></li> </ul>


Lihat LIVE DEMO disini.

 

Baca Selengkapnya

Background Music Switch Dengan JavaScript

Apa itu Background Music Switch? backgorund music merupakan autoplay music saat sebuah halaman web atau blog di load atau di muat. Dengan background music pengunjung dapat surving halaman dengan diiringi alunan music yang bermain di balik halaman web itu sendiri. Lalu apa bedanya Background music dengan Background Music Switch? pada dasarnya keduanya mempunyai fungsi yang sama, yaitu memutar music pada dibalik halaman web atau blog, yang membedakannya adalah..kalau background music, music akan otomatis bermain saat halaman di muat (autoplay), sedangkan background music switch memungkinkan pengunjung untuk memilih apakah background music akan diaktifkan atau tidak.

BerikutContoh Background Music Switch :


Enable background music Disable background music

Ketika Anda memilih Enable Background Music, maka musik akan play, dan sebaliknya.

Code :

<br /> <script> musi="http://www43.indowebster.com/d89bda11a0b440eb4c2050a59af6ef1e.mp3 " function mus1() { if (t.options.selectedIndex==0){ mus.innerHTML="<embed src="+musi+" loop=-1>" } if (t.options.selectedIndex==1){ mus.innerHTML="" } } document.write("<span id='mus' style='position:absolute;top:-90000'><embed src="+musi+" width=0 height=0 loop=-1></span>") </script><br /> <select name="t" onchange="mus1()"> <option>Enable background music </option><option>Disable background music </option></select><br />

Note : Copy paste code javascript tersebut diatas diantara tag <body> dan </body>, sesuaikan URL Mp3 yang Anda ingin kan.

Untuk pengguna platform Blogger, Silahkan pilih menu tambah widget pada menu Rancangan, kemudian pilih page elemen,  HTML/Javascript dan paste Code javascript diatas.

Selesai. mudah bukan!!
Just sharing, Semoga bermanfaat!!

Baca Selengkapnya