Cara membuat Spoiler [ show Hide ] pada postingan

Dah lama ANdava's gax Ngeposting Pernak-pernik Blog. sobat blogger semuanya, pastinya sudah tahu apa itu spoiler, apalagi yang sering main di forum tuh. Spoiler sudah pasti menjadi hal sering dipakai. Lalu kalau kita ingin menerapkannya di blog kita? emmmhh.. pastinya keren donk.

Sebelumnya kalau ada yang masih belum tahu, apa itu spoiler? Saya akan jelasin singkat saja.
==>> Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan klik untuk membuka dan menutup.

Contohnya bisa dilihat di bawah halaman ini :

Silahkan di Buka:

Orang Ini Cakeep Daak,.. !! hehee

Cara Membuat Spoiler Pada Postingan Blog :

1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini sob..!!

 <br>
</div>
</div>
</div>

5. Kita dapat mengganti Judul Spoiler sesuai keinginan kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Semoga bermanfaat,.

Lanjutkan Membaca … Cara membuat Spoiler [ show Hide ] pada postingan

Cara membuat Daun Bertebaran di blog

Membuat Daun Berjatuhan Di Blog, Membuat Daun Berjatuhan Di Blogger, Buat Daun Berjatuhan Di Blog, Bikin Efek Daun Berjatuhan pada blog, script Daun jatuh pada blog,Membuat Daun Berguguran Di Blog.Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.



Cara Membuat Efek Daun Berjatuhan :

1. Seperti biasa login dulu ke dashboard blogger anda.
2. Pilih Tata Letak ==> Tambah Gadget ==> HTML/javasripct
3. dan isikan kode scripct di bawah ini :

   <script type="text/javascript" src="http://infonetmu.googlecode.com/files/daun.js"></script>

   
   

4. Simpan template kamu.

Demikian langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Semoga bermanfaat

Lanjutkan Membaca … Cara membuat Daun Bertebaran di blog

Cara menghilangkan tulisan Subscribe To Post (Atom) Blog

Biasanya pada template-template standart terdapat tulisan Subscribe To Post (Atom) letaknya dipojok bawah posting.Tulisan ini berfungsi sebagai feed dari blog anda. Tujuannya agar pengunjung bisa dengan mudah menemukan alamat feed anda.
Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini sudah tidak terlalu penting lagi.Jika anda ingin menghilangkan Post (Atom) ini cara simple aja kuq.Gini..nih Caranya:

1. Pertama-tama log in dulu ke account Blogger anda
2. Kemudian Pilih rancangan
3. Pilih Edit HTML.jangan lupa centang "Expand Widget Template"
4. Kemudian Cari Kode Dibawah ini:
   

   ---

   <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
   <b:if cond='data:feedLinks'>
   <div class='blog-feeds'>
   <b:include data='feedLinks' name='feedLinksBody'/>
   </div>
   </b:if>

   ---

5. Setelah Ketemu Hapus Kode yang berwarna merah dan ganti dengan kode dibawah ini.
   

   ---

   <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
   <b:if cond='data:feedLinks'>
   <div class='blog-feeds'>
   <!--<b:include data='feedLinks' name='feedLinksBody'/>-->
   </div>
   </b:if>

   ---

6. Kemudian Klik Simpan.Gampangkan caranya,

Mudahkan..... semoga berhasil..

Lanjutkan Membaca … Cara menghilangkan tulisan Subscribe To Post (Atom) Blog

Cara mengecek kecepatan Blog

Cek Kecepatan Blog Sobat ! Berbeda dengan widget Cara Mengecek Berat Blog,tapi yang ini adalah kecepatan blog kita (bukan beratnya)

Karena baru-baru ini Google telah meluncurkan beberapa fitur baru dan salah satunya adalah tool untuk mengecek berat blog.



ok yukz.. mari buruan kita coba nih, ni saya baru nyoba dan alhamdulillah hasilnya lumayan memuaskan.... hehehe

ok langsung saja.
Cara Cek Kecepatan Blog !
1. Buka Google Page Speed Online

2. Masukkan url blog sobat pada kolom yang tersedia

3. Tunggu sebentar

4. Akan muncul halaman yang memberitahu hasilnya

NB. Hasil tersebut berupa angka 1-100, jika hasil semakin mendekati 100 maka kecepatan blog sobat sudah bagus.

Pengen tahu gimana agar kecepatan blog semakin tinggi??
Yups, yaitu dengan memilih template yang simpel-simpel aja dengan begitu insya allah kecepatan blog sobat akan lebih tinggi.

ok selamat mencoba sob....

Lanjutkan Membaca … Cara mengecek kecepatan Blog

Cara Memberi Background atau efek di judul posting

Pada Tips Mempercantik blog Atau Pada Tutorial Blog sebelumnya Saya Sudah Menjelaskan Tentang Bagaimana Cara Membuat teks area cantik di blog dan Pada artikel kali ini saya akn menjelaskan pada sobat tentang bagaimana Cara Memberi background Pada Judul Posting Blog.Background judul posting bertujuan untuk memperindah judul posting pada blog!..Seperti Punya Saya.
Punya saya juga saya beri background judul postig bertujuan untuk memperindah blog saya.
jika sobat ingin seperti itu mari ikuti langka-langkah berikut:

1.Login Ke akun blog sobat
2.Pilih Rancangan/Tata Letak---> Edit HTML--centang kolom expand template Widget
3.Cari Kode post h3 { (gunakan ctrl f atau F3 agar memudahkan pencarian)
4. Dan amati scripct di bawah ini dan ganti .
5.Letakan Kode ini dibawahnya Tepa Diatas Kode post h3 {

.post h3 {
margin:.25em 0 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q92Kw-4TT5fnt4K_vf0v3pGIFQztRqRcogIaP6c-8mF0URrzqc03EHDz8F3UyQyrVtZIWub7D0T_w4-lKKMG-HX-8flCt-8PiiqFbyhSN491FxCvVw-iVUtmIhNKAG64PNSFRgz2CEE9/s1600/background-judul-posting.gif);
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;

5.Simpan Templatenya Dan Lihat Hasilnya

Catatan: Jika Tidak Berhasil ..Ganti Kode .post h3 dengan .post h2 atau .post h1

Lanjutkan Membaca … Cara Memberi Background atau efek di judul posting

Cara memasang Tombol Like Di atas Postingan

Sebelumnya dilblog ini telah dibahas cara memasang tombol share dibawah postingan.eperti diketahui kalau tombol share atau berbagi berguna untuk memudahkan para pengunjung blog yang ingin membagikan artikel yang telah dibacanya ke jaringan mereka. Facebook Like,merupakan layanan berbagi yang sangat populer.nah berikut gambaran untuk tombol like diatas postingan.

Berikut cara memasang tombol like diatas postingan

1. Masuk ke akun Blogger Anda.


2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.biasanya kode <data:post.body/> ada dua pilih yang pertama untuk memasang tombol like diatas postingan.


5. Copy kode berikut letakkan dibawah kode tersebut.

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=dark&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:24px;'/><br/>

6. SIMPAN

#Semoga Berhasil.....

Lanjutkan Membaca … Cara memasang Tombol Like Di atas Postingan

Cara menghilangkan Tulisan " Tampilkan Entri Lawas "

Sebelumnya udah pernah juga cara menghilangkan tulisan ''Lihat Profil Lengkapku'' dan kali ini juga mau kasih tips lagi yaitu cara menghilangkna tulisan''Tampilkan Entri Lawas'' mungkin anda pernah membuka halama label waktu saat anda membuka label anda melihat suatu tulisan ''Tampilkan Entri Lawas'' mungkin anda sangat tidak suka dengan adanya tulisan tersebut dan ingin menghapusnya.Berikut caranya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dulu dengan mengeklik Download Template Lengkap.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti atau yang mirip dengan kode di bawah ini.

<b:includable id='status-message'>

  <b:if cond='data:navMessage'>

  <div class='status-msg-wrap'>

    <div class='status-msg-body'>

      <data:navMessage/>

    </div>

    <div class='status-msg-border'>

      <div class='status-msg-bg'>

        <div class='status-msg-hidden'><data:navMessage/></div>

      </div>

    </div>

  </div>

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

  </b:if>

</b:includable>

6. Hapus kode tersebut,ganti dengan kode berikut.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

7.SIMPAN TEMPLATE

#Semoga berhasil ......

Lanjutkan Membaca … Cara menghilangkan Tulisan " Tampilkan Entri Lawas "

Cara membuat link otomatis saat artikel di copas di blogger

Sekarang saya akan menjelaskan tentang sebuah trik blogger yang cukup menarik dan mungkin sangat penting bagi para blogger, trik ini adalah cara membuat sebuah link otomatis saat artikel di copy paste di blogger. Manfaat dari membuat link otomatis ini adalah jika saat ada orang lain yang ingin mengcopy paste artikel kita tanpa ada izin dari admin, link tersebut akan muncul di bawah postingan yang di copy dengan sendirinya. Cara ini sedikit membutuhkan bantuan kepada sebuah website yang bernama tynt yang bisa Anda kunjungi disini. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunannya langsung saja kita belajar membuat link otomatis saat artikel di copy paste di blogger, ikuti langkah-langkah di bawah ini.

Cara membuat link otomatis saat artikel di copy paste di blogger

Part 1

1. Kunjungi websitenya disini

2. Klik " Start Here. It's Free "

3. Masukkan E-mail, Domain, dan Password Anda

4. Jangan lupa untuk mencentang " I agree to the Usage and Privacy Agreements "

5. Kemudian klik Next, sampai menemukan sebuah kode HTML

6. Simpan kode HTML tersebut sementara

Part 2

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode HTML tadi dibawah kode <head>

6. Simpan jika sudah selesai

Catatan :

● Anda bisa mengatur link data yang ingin di tampilkan jika sudah selesai

● Kode HTML dibawah ini adalah milik http://v3-class.blogspot.com/

<script type="text/javascript">

if(document.location.protocol=='http:'){

 var Tynt=Tynt||[];Tynt.push('dMf2i-mo4r4B25acwqm_6r');Tynt.i={"ap":"Read more:"};

 (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();

}

</script>

Semoga Berhasil...

Lanjutkan Membaca … Cara membuat link otomatis saat artikel di copas di blogger

Cara memasang Tombol 'Back To Top' di blog

Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian atas suatu halaman pada blog. Tombol ini berguna untuk memudahkan pengunjung saat ingin kembali ke bagian atas halaman blog setelah selesai membaca artikel. Terlebih lagi bila isi posting terlalu panjang. Jadi, pengunjung tidak perlu repot-repot mengeklik scroll bar atau memutar scroll pada mouse untuk kembali lagi ke bagian atas halaman.

Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Copy dan paste kode di bawah ini di kolom Konten.


<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Kembali ke Atas"><img src="http://i1186.photobucket.com/albums/z370/lanonadex/Up.png" /></a>


5. Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.

6.Bila ingin menggunakan gambar Anda sendiri, silakan ganti http://i1186.photobucket.com/albums/z370/lanonadex/Up.png dengan url gambar Anda.
7. Klik tombol SIMPAN.

8. Pindahkan elemen ke posisi paling bawah.

9. Klik tombol SIMPAN.

10. Selesai.

semoga berhasil....

Lanjutkan Membaca … Cara memasang Tombol 'Back To Top' di blog

Cara medifikasi kotak komentar dengan Intensedebate

Mungkin di antara sobat blogger ada yang bosan dengan tampilan kotak komentar platform blogger yang hanya itu-itu saja. Kalau memang ya, sekarang sudah saatnya kalian mengganti tampilan kotak komentar kalian dengan bantuan Intensedebate. Situs ini membantu memodifikasi kotak komentar blogger menjadi seperti wordpress dengan langkah yang sangat mudah, jadi sobat blogger tidak perlu pusing lagi dengan kode-kode HTML yang rumit itu. Cukup dengan 5 menit, kotak komentar sobat akan jadi seperti yang di inginkan.

Langkah pertama kunjungi situs Intensedebate
Bagi yang belum mempunyai akun, silahkan register dulu karena nanti akan di pakai sebagai akun untuk berkomentar di kotak komentar baru.
Setelah proses registrasi selesai, cek email kalian untuk verifikasi akun. Kemudian login menggunakan akun yang sudah terdaftar tadi.

Setelah kalian sudah login, pilih Manage blogs/sites di bagian kanan kemudian Install IntenseDebate.

Nanti kalian akan di minta untuk masukkan alamat blog kalian. Setelah itu akan di beri pilihan install, pilih Template. Kemudian untuk pilihan yang ke dua pilih Only on new posts atau On all blog posts. Saya rekomendasikan pilih yang Only on new posts, karena jika pilih On all blog posts semua komentar yang sudah ada akan hilang.

Login ke akun blogger dulu sebelum melanjutkan. Kemudian masuk ke edit HTML ( Jangan Expand Template Widget ) download full template.
Kembali lagi ke Intensedebate lalu scroll ke bagian paling bawah pilih browse dan upload template yang telah di download tadi.

Setelah proses upload selesai copy kode yang ada di sebelah kiri hasil modifikasi tadi.

Kembali ke blogger, edit HTML kemudian hapus semua kode yang ada di template sobat  dan ganti dengan kode dari Intensedebate tadi.
Langkah yang terakhir tentunya save template dong......
Nanti sobat bisa memodifikasi template melalui Intensedebate, jadi tidak perlu edit kode di HTML lagi. Bagi sobat yang sudah mahir dengan kode css, silahkan berkreasi untuk lebih mendapatkan hail yang lebih baik. Tapi bagi sobat yang belum faham kode css seperti saya, nanti di sana sudah ada petunjuk seperti mengganti lebar, background, warna teks, link dll.

Semoga bermanfaat

Lanjutkan Membaca … Cara medifikasi kotak komentar dengan Intensedebate

Cara membuat Buku Tamu Tersembunyi di blog

Memasang sebuah buku tamu (guestbook) pada sebuah blog adalah hal yang cukup penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang Anda dengan para pengunjung blog. Dengan adanya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang Anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi lebih menarik.

Pastinya Anda penasaran kan dengan buku tamu di blog saya ini. Ternyata buku tamu ini bisa disembunyikan dengan tujuan tidak memakan tempat seperti di sidebar blog Anda dan membuat blog Anda jadi lebih menarik.

Namun sebelum Anda membuat buku tamu, Anda harus menggunakan penyedia buku tamu dari pihak ketiga, tapi Anda nggak usah khawatir, ada kok penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com atau http://www.cbox.ws. Nah, dari penyedia buku tamu inilah kita nanti akan mendapatkan kode buku tamu yang akan kita pasang bersama script di bawah ini.

Ahh.. sepertinya kita tidak usah bertele-tele lagi kali yaa, berikut ini cara membuat buku tamu seperti yang saya miliki :

[1]. Masuk ke Blogger
[2]. Pilih "Rancangan/Layout" kemudian "Page Elements"
[3]. Klik "Add a Gadget" lalu pilih "HTML/JavaScript" dan copy-paste kode di bawah ini :

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOdApmP5dmeFX18VTcAKlqQFU7rqe0wYzWzxnC5AcWl9lxItTlBcvdSTbhyICx6sYWKgBDTSfZwyJeL8OCJhWzNudirWx9UbPO6LPk1-ZHlq0yDJJuL_wwW42i-qvgLmdjCqz6cJwNLrQ/s128/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://v3-class.blogspot.com/2011/12/cara-membuat-buku-tamu-tersembubyi.html">
disini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

[4]. Pada kode di atas, cari kode <!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->  dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya. Sebagai referensi, saya tambahkan cara mendapatkan kode buku tamu dari Cbox.
[5]. Yang terakhir klik "Simpan", selesai deh.

Catatan :
Jika Anda ingin mengatur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.

Bagaimana..?? Makin penasaran..??? Saran saya lebih baik Anda langsung aja deh mencobanya, mudah kok.

Selamat mencoba yaa dan semoga bermanfaat..

Lanjutkan Membaca … Cara membuat Buku Tamu Tersembunyi di blog

cara membuat effek zoom Gambar di Blog

Membuat Effek Zoom Gambar di Blog

Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blog, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini;

1. Masuk ke blogger;
2. Klik Perancangan lalu klik Edit HTML;
3. Carilah kode ]]></b:skin>
4. Kemudian sisipkan kode berikut ini tepat di atasnya:

/* Zoom Image www.wakrizki.net
------------------------------- */
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

5. Selanjutnya cari kode </head>
6. Kemudian sisipkan kode berikut ini tepat di atasnya:

<!-- Zoom Image code script www.wakrizki.net -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

7. Langkah terakhir adalah simpan template sobat. Semoga berhasil

Lanjutkan Membaca … cara membuat effek zoom Gambar di Blog

cara membuat player musik di blog melayang

Sudah banyak tutorial buat atau pasang musik di blog, tapi bagaimana kalau pasang atau buat musik dengan player tersembunyi di blog kita.

Seperti pada blog saya ini semua lagu berdasarkan lagu favorite yang saya suka, temen-temen juga bisa sekalian request Lagunya hehehe.

Sesuai Janji saya untuk posting tutorial ini yang di request salah satu sahabat blogger Ahmad Taufiq Labera, Yaitu cara membuat player musik tersembunyi.

Langkah Pertama adalah membuat Player Tersembunyi

Masuk Pada Bagian Templete Blog, dan cari kode </body> atau mudahnya tekan Ctrl+F masukan kata tersebut. Lalu paste script di bawah ini yang saya ambil dari yahoo media player diatas kode </body>.

Source Script

 

                             <script src="http://mediaplayer.yahoo.com/latest" type="text/javascript"></script>

 

Setelah itu jangan lupa save.

Langkah kedua adalah membuat List Musiknya.

List Musik bisa kita simpan dalam berbagai cara, bisa di templete, entry posting, maupun di widgets.

Jika List musik akan di pasang di entry post kode scriptnya cukup seperti di bawah ini:

Source Script

 

<a href="URL Lagu 1.mp3">Judul Lagu 1</a><br/>
<a href="URL Lagu 2.mp3">Judul Lagu 2</a><br/>
<a href="URL Lagu 3.mp3">Judul Lagu 3</a><br/>

 

Nah bagaimana Caranya Jika List musiknya ingin di sembunyikan juga.?

Gampang, saya gunakan saja script yang biasa di gunakan untuk membuat shoutmix tersembunyi.

Kira kira kodenya seperti di bawah ini :

Source Script

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i999.photobucket.com/albums/af115/spsc66/music.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #3300FF;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="overflow: scroll; width: ; height: 400px;">

<a href="URL Lagu 1.mp3">Judul Lagu 1</a><br/>
<a href="URL Lagu 2.mp3">Judul Lagu 2</a><br/>
<a href="URL Lagu 3.mp3">Judul Lagu 3</a><br/>

</div></div></div><div><br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
 

Silahkan Kode script di atas di widget blog sobat.
Dan saya kira tutorialnya cukup sampai disini, jika tidak berkenan mohon berikan komentar atau ingin menyumbangkan ide ide menarik lainya di blog ini.

 

 

semoga berhasil,,,

Lanjutkan Membaca … cara membuat player musik di blog melayang

Jangan asal copy paste

Jangan asal copy paste baca aturannya!. Tema tersebut di usungkan oleh kang salman berhubungan dengan maraknya copy paste yang dilakukan di blog ini. umumnya di blog yang lainnya. Memang yang namanya hak cipta itu milik Allah, tetapi kita pun harus tau tata caranya agar tidak menimbulkan masalah.

Oke, anda saya berikan kebebasan untuk menyalin artikel atau konten di blog ini tetapi ada beberapa persyaratan yang harus anda di penuhi :

1. Kalau ga keberatan nitip link sumber artikel ya hehe :) : http://www.kucoba.com (bercanda kok :p)
2. Ubahlah konten atau isi artikel ya minimal 30% dari yang asli. misal dengan gaya bahasa kamu :)
3. Perhatikan baik-baik dan pelajari artikel tersebut sampai anda bisa, jangan sampai kejadian yang dulu "nama disamarkan" keulang lagi, asal copas, takutnya ada yang bertanya di blog kita. kan lucu kesannya, saat dia kebingungan dan bertanya balik kepada saya. 'mohon maaf untuk  yang tersinggung'.
4. Dan yang terakhir jangan lupa minta izin. Misal : "Izin copas kang" saya lebih menghargai orang yang seperti ini, lho. mengapa? karena kata-kata itu membuat blog ini hidup dan menyemangati kami untuk menghasilkan artikel yang bermanfaat untuk kita semua.
5. Peraturan di atas tidak mengikat dan dapat berubah sewaktu-waktu

Buktikanlah kalau anda adalah bloger indonesia yang cinta damai. Jujur pada diri sendiri dan jadilah Blogger Sejati menurut diri anda sendiri! Oke ^_^

Terima kasih.. Untuk mengedit kata-kata posting saya. berkat Anda yang asal copy paste, inang kucoba.com di asksalman19.blogpsot.com di hapus 26 September 2011 pukul 01.38 Oleh blogger karena di anggap sebagai sumber SPAM sehingga saya harus bersusah payah membuat akun blog baru dan memposting kembali secara manual. Jika Anda peduli pada blog ini, Tolong Ubah kata-kata posting yang Anda publikasikan di blog.

sumber : http://www.kucoba.com/2010/07/jangan-asal-copy-paste.html

Lanjutkan Membaca … Jangan asal copy paste

Cara Memasang, Menggunakan Gadget Freedjit dan Memanfaatkannya sebagai Media Analisis Blog Anda

Apakah Anda pernah melihat tampilan seperti pada gambar di samping ini? Ya, bagi para pengguna internet yang sering berkunjung ke blog-blog, atau para pengelola blog/para blogger, tampilan seperti itu sudah tidak aneh lagi. Ya, salah satu fasilitas yang disediakan oleh Feedjet untuk melengkapi dan mempercantik tampilan blog kita.

Nah, berdasarkan pengalaman pribadi saya, dengan menambahkan fasilitas ini, selain kita bisa menggunakannya sebagai media pelengkap dan pemanis blog, juga bisa dipakai sebagai media kita menganalisis/melihat aktivitas blog kita, seperti dari mana saja asal pengunjung blog kita, juga bisa meningkatkan traffic blog kita juga. Dari layanan Freedjit ini, kita diberikan dua pilihan, ada yang berbayar, ada juga yang gratis. Untuk pembahasan posting kali ini, saya akan membahas terlebih dahulu manfaat layanan gratisnya.

Layanan Feedjit yang akan saya bahas di sini adalah cara memasang gadget feedjit di blogspot dan memanfaatkannya untuk melihat aktivitas blog kita, termasuk tentang traffic/pengunjung blog kita. Layanan ini hampir mirip dengan layanan gratis dari Google, seperti yang pernah saya bahas pada posting sebelumnya tentang manfaat Google Analityc. Namun kelebihan layanan ini, pembaca pun bisa melihat siapa saja yang berkunjung ke blog tersebut, seperti layanan yang disediakan oleh widgeo.net ataupun s04.flagcounter.com, sebagaimana bisa Anda lihat di blog saya.

Baiklah, agar tidak terlalu panjang lebar, saya langsung saja menjelaskan bagaimana cara memasang Live Traffic Feed dari Feedjit ini. Berikut langkah-langkahnya:

1. Anda login terlebih dahulu ke account blog Anda. Jika Blogger/blogspot, masuk melalui http://blogger.com.
2. Anda masuk ke website feedjit melalui alamat ini (bisa klik langsung): http://feedjit.com/join/ 
3. Klik Menu Widgets, lalu pilih Live Traffic Feed (ada pada sisi paling kanan. Anda pun bisa memilih yang lain jika mau), lalu Klik: Click to Add to Blogger
4. Jika login Anda sukses (langkah 1), otomatis Anda akan dibawa ke halaman blogger. Pilih Blog yang akan Anda pasang Widget Live Traffic Feed ini. Jika hanya satu, langsung saja pilih yang ada. Jangan lupa beri judul terserah Anda. Kalau tidak, Anda akan diberikan judul default/bawaan. Anda pun bisa mengatur konten dan templatenya. Jika kurang paham hal tersebut, Anda gak usah utak atik, langsung saja klik: MENAMBAH WIDGET. 
5. Jika langkah-langkah tersebut diikuti dengan benar, Anda akan dibawa ke Halaman Tata Letak Blog Anda. Di sana akan ada keterangan bahwa widget tersebut telah terpasang. Anda tinggal atur, dimana akan Anda pasang widget tersebut. Pada umumnya, widget Live Traffic Feed ini terpasang di sebelah kanan bagian blog. Tapi ini bukan hal yang mutlak, Anda mempunyai kekuasaan mutlak atas blog Anda.

Sekian tutorial ini, semoga bermanfaat. Barangkali ada tambahan, saran, Anda mendapat manfaat dari posting ini, atau yang lainnya, silahkan tinggalkan melalui comment / komentar pada blog ini.

Oia, ada yang tertinggal, sedikit lagi tentang analisis blognya.

Setelah gedgat-nya terpasang, maka kita bisa melihat siapa saja dan dari mana saja orang yang datang ke blog kita, apakah dari blogwalking (kunjungan sesama blogger), dari search engine, atau dari sumber lainnya. Kalau dari Google Analityc, kita harus ligin dulu ke account google kita untuk mengetahui hasil analisis blog kita, sedangkan di feedjit, kita hanya tinggal klik: Watch in Real-Time yang ada di blog kita. Di sana, kita bisa melihat dari mana saja orang yang datang ke blog kita, menggunakan OS (Operating System) apa, dan informasi yang lainnya.

Jika Anda tidak ingin berabe, harus masuk dulu ke website feedjit, dan ingin data penguunjung ke blog Anda langsung terpasang secara update pada blog Anda, Anda bisa memanfaatkan layanan feedjit pro nya, dimana Anda membayar sekian dollar per bulannya. Dan akhirnya, pilihan ada di tangan Anda.

Sekian saja. Semoga tambahan yang terlewat tersebut bisa bermanfaat bagi Anda semua.

Salam YAKIN SUKSES !!

Lanjutkan Membaca … Cara Memasang, Menggunakan Gadget Freedjit dan Memanfaatkannya sebagai Media Analisis Blog Anda

Cara mengganti Domain Blogspot.com menjadi co.cc

Biasanya ketika membuat blog di blogger, kita akan mendapat nama blog http://110celcius.blogspot.com, kita bisa merubah nama domain blog dengan yang lebih bagus. Salah satu layanan penyedia domain gratis yaitu co.cc. Jadi nantinya nama domain blog kita akan menjadi http://11-celcius.co.cc. Kemarin saya coba mengganti domain blog saya ke co.cc, dan ternyata berhasil dengan mudah.

Ok, marilah kita mulai saja, caranya adalah sebagai berikut :
1. Langkah pertama yang perlu dilakukan adalah mendaftar di www.co.cc
2. Pilih domain yang akan digunakan.

3. Klik tombol Set up.

4. Pilih Zone Records.

Zone Records

Pada bagian ini anda akan mulai melakukan setting domain co.cc. Langkah-langkahnya tidak susah. Anda hanya butuh sedikit kesabaran karena perubahannya tidak langsung terjadi.

Berikut pengaturannya.

"Host, isi dengan domain co.cc anda (jangan lupa pakai www)."

"TTL, biarkan tetap 1 D."

"Type, pilih CNAME."

"Value, ketik ghs.google.com."

Setelah itu lanjut ke pengaturan di blogger. Ikuti petunjuk setting domain co.cc di blogspot di bawah ini.
Masuk ke akun blogger anda.
Pilih menu Settings (Pengaturan) » Publishing (Publikasikan).
Klik tulisan Custom Domain.
Klik tulisan Switch to advanced settings.

5. Di kolom Your Domain, isi dengan domain co.cc anda tadi (masih dengan www.).

6. Terakhir isi kolom Word Verification dan simpan.
Cukup sampai di situ saja cara mengganti domain blogspot dengan co.cc. Setelah selesai mengikuti tutorial di atas, blog anda tidak bisa dibuka untuk sementara waktu.

Waktu yang diperlukan untuk bisa mengakses blog dengan domain baru anda biasanya hanya sebentar. Mungkin hanya beberapa menit ataupun beberapa jam, maksimal 2 hari.
Untuk Melihat Lebih Lengkap Screenshotnya,,, Disini!!!!


sumber : http://www.tutorialblogging.co.cc

Lanjutkan Membaca … Cara mengganti Domain Blogspot.com menjadi co.cc

Scripct animasi terbang di blog

Nih aku kasih scrip kelelawar dan kupu-kupu terbang di blog, langsung aja sob gak usah banyak komat kamit. kilanjut ke TKP

Script kode Untuk Kelelawar Terbang :

<script src="http://kikiefendbat.googlecode.com/files/www.kikiyo.co.cc.kelelawar.js" type="text/javascript"></script>

Script kode Untuk Kupu - Kupu Terbang :

<script src="http://kikiefendbat.googlecode.com/files/www.kikiyo.co.cc.kupu2.js" type="text/javascript"></script>

Langkah - langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Tata letak atau Rancangan
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode diatas didalam HTML/JavaScript
6.Klik Simpan

sumber : http://alulnaxkudus.blogspot.com/2011/10/script-animasi-terbang-di-blog.html

Lanjutkan Membaca … Scripct animasi terbang di blog

Cara membuat tag Cloud / Label cloud

  Mungkin ada diantara teman yang masih pemula yang senang menghias blog dengan membuat label berputar atau menambah tag berputar ketika pointer mouse diarahkan ke tag atau label tersebut maka tag akan berputar, jika mengklik salahsatu tag akan membuka sebuah halaman sesuai tag bersangkutan. . Biasanya tag cloud ditempatkan di sidebar blog. Anda bisa menambahkan script ke template blogger untuk  menampilkan tag (label) cloud tersebut di sidebar.

Untuk memasang tag cloud ke sidebar blog, lakukan prosedur berikut

1. Login ke dashboard Pilih Tata Letak -> Edit Html
2. Cari kode berikut :
   

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

   Jika menggunakan template blogger designer coba cari kode seperti di bawah ini :
   

   <b:section-contents id=’sidebar-right-1′>

   Setelah kode di atas masukkan kode berikut :
   

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

3. Simpan template

Catatan,
Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud


Jika ingin mengubah warnanya anda bisa coba ganti beberapa variabelnya
tagcloud”, “240″, “300″, “7″, “#ffffff” ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa anda ganti sesuai lebar widget anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain ,
3. so.addVariable(“tcolor”, “0×333333″); dimana , 0×333333 warna teks hitam. warna teks lain yang bisa anda gunakan:

0xffffff : warna putih
0xFF0000FFF : warna merah
0x00FF00: Warna Hijau
0x0FFFF0: warna Kuning
0x00FF0000 : warna biru
0xFFF000 : warna biru muda
0xFFFFFFF : Warna Hitam
0x0FF0FF0 : warna pink

Lanjutkan Membaca … Cara membuat tag Cloud / Label cloud