Cara Membuat Spoiler Bertingkat

Sebelumnya saya sudah berbagi dengan kawan cara membuat Spoiler dan sekarangpun masih tetap tentang Spoiler cuma yang ini seperti Tab Menu artinya bisa lebih dari satu Spoiler alias bertingkat :z; 

Perhatikan Demonya : 

» KOMENTAR BLOGGER

» KOMENTATOR

» JUDUL

disini simpan file kawan

Setelah kawan memperhatikan Demonya, sekarang mari ke Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor Pilih Tata Letak 
• Pilih Tambah Gadget - HTML/JavaScript
• Copas Script berikut kedalamnya

<style type="text/css">
h5 {
font-family: Tekton Pro, trebuchet-ms, arial, tahoma;
font-size: 16px;
padding: 0 0 1em;
font-weight:bold;
color: #FFFF00;
text-shadow: 2px 2px 2px #000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
margin:1px;
border:1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.msg_body {
padding: 5px 10px 15px;
background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF));
border: 2px solid #699AB8;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">&#187; JUDUL SPOILER</h5>
<div class="msg_body">
Simpan disini File kawan</div>
<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

• Silahkan kawan mengganti teks yang berwarna merah dengan kebutuhan
• Seandainya kawan ingin menambahkan Spoiler lagi cukup Copas dari 

<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

• Simpan Blog kawan dan lihat hasilnya 

Read more ...

Cara Membuat Spoiler

Sekarang saya akan mencoba berbagi dengan kawan tentang Cara Membuat Spoiler :q; yang peruntukan atau kegunaannya untuk menyembunyikan sesuatu [Gambar, Iklan dan lain sebagainya] pada tempat yang sempit, karena kalau tanpa Spoiler akan menghabiskan banyak tempat :z; 

Kalau kawan ada yang bertanya, seumpama kawan memasang Iklan pada Spoiler, pengunjung Blog pasti tidak mau membuka Spoiler tersebut :w  karena sudah diketahui isi didalam Spoiler tersebut adalah Iklan Sponsor - Benar juga ya !!!

Tapi kawan jangan salah prediksi, karena saya berikan solusi seperti berikan Judul yang bikin pengunjung Blog kita penasaran  misalnya "ADA APA DISINI" :r;

simpan : FILE, GAMBAR, VIDIO dll disini

Cara membuat Spoiler

• Masuk Acount Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak 
• Pilih Tambah Gadget - HTML / JavaScript 
• Copas Script berikut kedalamnya

<center><div style="margin: 5px 10px;">
<input value="JUDUL SPOILER" style="margin: 0px; padding: 0px; width: 100%; font-size: 18px;" 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 = 'mohon tutup kembali'; }
else { this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'judul spoiler'; }"
type="button"/> </div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 0px;">
<div style="display: none;">
simpan : FILE, GAMBAR, VIDIO ANDA dll disini</div></div></center> 

Silahkan kawan menyesesuaikan khusus pada teks yang saya beri warna merah :q; 

Selamat Mencoba

Read more ...

Cara membuat Elemen Box Melayang

Sebelumnya saya pernah memposting Cara Membuat Elemen melayang yang bisa di Close maupun tidak bisa di Close [ini khusus untuk Back to Top] kalau kawan ingin membacanya  disini yang pada dasarnya sangat sederhana :i; tapi yang sekarang ini saya tambahkan sedikit polesan biar kelihatan lebih keren :y maka jadilah hasilnya seperti yang kawan lihat di Blog Demo saya disini :x; 

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Cari </body> kalau pada Template saya letaknya paling bawah sekali sebelum </HTML> 
• Copas script berikut dibawah </body> atau diatas </HTML>

<style type='text/css'>
.notification{width:310px;height:250px;padding:10px;display:block;position:fixed;bottom:130px;left:660px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 30px #000;-webkit-box-shadow:2px 2px 30px #000;box-shadow:2px 2px 30px #000}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKlkOHcERXF5uvuPKzCbh8mOKBEC0VDCBu2pPdAkmqXhKEn2C4t4Dc18Mx5E1_QKvhnmkpYOmS3elKMy17clwa6eAzGKr60Ek15u9Bc1NO93XE9OfAillar_eW2hYeBqyUTAlSd4WePyH/s1600/Close.png) no-repeat right top;cursor:pointer;display:block;width:22px;height:22px;position:absolute; top: 2px;right: 2px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border:1px solid #FFF;/*Background Gradients*/background:#FFF;background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF))}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>

<center>
SIMPAN DISINI SCRIPTNYA</center>
</div>

• Teks yang saya beri warna merah paling atas adalah ukuran Box dan posisinya, kawan bisa merubahnya [Edit] agar sesuai keinginan :q;
• Simpan disini Scriptnya, kawan bisa menaruh Iklan, Like Box FB dan lain sebagainya
• Simpan Template kawan dan lihat hasilnya

Read more ...

Melacak IP Anonymous dengan StatCounter

Pada umumnya para Blogger itu baik-baik, yang pada prinsip utamanya ingin berbagi [saling memberi dan saling menerima] tapi lama-lama dengan berkembangnya Ilmu Tehnolagi, para Bloggerpun semakin berkembang, ada yang suka iseng, jahil dan lain sebagainya yang sudah mengarah ke Negatif :q; seperti berkomentar SPAM alias tidak sesuai topik maupun memberikan komentar tanpa etika, tidak ada sopan santun, menghina, menghujat dan seterusnya, biasanya memakai nama samaran yang lazim disebut : Anonim / Anonymous [tanpa URL/Link] :x; 

Sebelum kawan mengalami seperti Blog saya yang lain, sebaiknya pada Blog kita masing-masing dipasangi StatCounter yang berfungsi sebagai mengumpul Data Visitor setiap saat secara lengkap, :y; 

Walau hanya gratisan [Free] tapi fasilitas yang diberikan sudah cukup lumayan, rasanya tak perlu panjang lebar saya memberikan ulasan karena nanti banyak salahnya, sebaiknya langsung saja kawan kesana untuk Mendaftarkan Blognya bisa Klik » disini 
setelah proses pendaftaran {sign up] selesai nanti copas Scriptnya di Blog kawan, bisa pada Gadget maupun pada Template 

contoh Komentar Anonymous

• Dengan meng-Klik View My Stats disamping Data [angka] pengunjung, kawan akan masuk ke StatCounter - pada sisi kiri pilih  Recent Pageload Activity maka akan tampil Data Pengunjung, waktu berkunjung, pada Artikel yang mana, selengkapnya seperti berikut :

Catatan : Daftar di sebelah kiri silahkan kawan pilih-pilih sesuai keinginan,

• Kalau kawan ingin mengetahui IP Adress lebih jauh sebagai pembanding seperti  » IP Adress 

• StatCounter akan berfungsi setelah terpasang di Blog, makanya lebih baik pasang sekarang sebelum ada Anonymous berkunjung memberikan Komentar di Blog kawan

Read more ...