April 2013 | http://soukiblog.blogspot.com/

CARA MEMASANG SPOILER BUKA TUTUP DI BLOG PART 2

Posted by andika Posted on Senin, April 29, 2013 with 4 comments

agsuwustwguswubswnsb

Style 1:

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="LIHAT" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">Letakkan Kode yang disembunyikan disini</div>
<div id="hide"></div>
</div>

Style 2:

<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">LETAKKAN KODENYA DISINI</div>
<div id="hide"></div>
</div>

Style 3:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});}); </script> <style type="text/css"> #dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;} </style> <button id="butToggle">Klik Untuk Buka</button> <div id="dvt"> Letakan Apa Aja Yang Ingin Anda Pasang Di Sini</div>

sumber

Label: Tutorial Blog

GREEN WHITE V.1 TEMPLATE

Posted by andika Posted on Senin, April 29, 2013 with No comments

DEMO

DOWNLOAD DISINI

Fitur-Fitur Template Green White V.1

1 . 3 Tempat Banner 468 x 60 ( Paang Di Tata Letak )
2 . 7 Tempat Banner 88 x 31 ( Pasang Di Tata Letak )
3 . Fast Loading
4 . Scroll Berwarna
5 . Background Simple ( Fast Kalo Loading )
Dan Lain-Lain Sobat Bisa Lihat Di Demo Nya

NOTE:

SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

SUMBER

Label: Template blog stlye

TEMPLATE DARKYELLOW V.3 BY KXMADAGASCAR

Posted by andika Posted on Senin, April 29, 2013 with No comments

DEMO

DOWNLOAD DISINI

Untuk Mengganti Menunya Silahkan Cari


<div id='menu14'>
<ul>
<li><a href='http://kxmadagascar.blogspot.com' target='_blank' title='Welcome To Demo Blog'>HOME</a></li>
<li><a href='http://kxmadagascar.blogspot.com/2013/04/link-exchange-kxmadagascar.html' target='_blank' title='Link Exchange or Banner Exchange'>LINK EXCHANGE</a></li>
<li><a href='http://kxmadagascar.blogspot.com/search/label/Template' target='_blank' title='View All Template KxMadagascar'>TEMPLATE</a></li>
<li><a href='kxmadagascar.blogspot.com' target='_blank' title='Ganti Menunya :D'>Submenu</a></li>
<li><a href='kxmadagascar.blogspot.com' target='_blank' title='Ganti Menunya :D'>Submenu</a></li>
<li><a href='kxmadagascar.blogspot.com' target='_blank' title='Ganti Menunya :D'>Submenu</a></li>
<form action='/search' id='search' method='get'><input name='q' placeholder=' ' size='40' title='Kalau Udah, Tekan Enter' type='text'/></form>
</ul>
</div>

Untuk Blog Kamu Resmi Template Nya Silahkan Cari

<a href='http://kxmadagascar.blogspot.com/'>Nama Blog Kamu</a>

Silahkan Ganti Untuk Meta Tag Nya

<meta content='index, follow' name='robots'/>
<meta content=' Dary Sadega Mantemand ' name='author'/>
<meta content='index, follow' name='robots'/>
<meta content='article' property='og:type'/>
<meta content='1 days' name='revisit-after'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Indonesia' name='geo.country'/>
<meta content='all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='Slurp'/>
<meta content='http://www.didil-cyber.blogspot.com' property='og:url'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='ORtWgFzYK2M8z_wcPvQ525SAk8w' name='alexaVerifyID'/>
<meta content='general' name='rating'/>

Untuk Mengganti Music Silahkan Cari

<div id='DDmusic'>
<embed allowscriptaccess='never' flashvars='autostart=true' height='0' src='http://www.4shared.com/embed/103483304/4e0972b7' style='width:460px;height:25px;border:0px;display:block;margin:5px auto;' type='application/x-shockwave-flash' width='0'/></div>

NOTE:

SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

SUMBER

Label: Template blog stlye

TEMPLATE DARK AQUA V.2

Posted by andika Posted on Senin, April 29, 2013 with 4 comments

DEMO

DOWNLOAD DISINI

Fitur Template nya

[+] 2 Kotak Banner 468 x 60
[+] 8 Kotak Banner Di Header 88 x 31
[+] Kotak Banner Di Sidebar
[+] Sudah Sedia Banner Slider . Tinggal Masukin Kodenya
[+] Kotak Di Bawah Header
[+] Headline
[+] 4 Kotak Banner VIP 88 x 31
[+] 4 Kotak Bannner 125 x 125 ( Ads )
[+] Auto Read More
[+] Floating Twitter Widget

NOTE: SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

sumber

Label: Template blog stlye

Download Template "Lank Tempalate V 0,1"

Posted by andika Posted on Sabtu, April 27, 2013 with 3 comments

DEMO

DOWNLOAD DISINI

NOTE:
SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

sumber

Label: anime template blogger

Cara Membuat Kotak Di Bawah Header

Posted by andika Posted on Jumat, April 19, 2013 with 2 comments

Woke , kali ini kazedama mw mosting tips membuat kota(objek) di bawah header , mungkin beberapa blogger sudah banyak yang mengetahui cara membuatny , tapi ada beberapa newbie seperti saya , yang belum mengetahui cara membuatnya , kg usah lama-lama beriku cara2 membuatny ....

Nah gambar di ats itu contoh kotak(objekny) , langsung saja dah kita coba ......

1.Masuk ke akun Blogger kalian , kemudian pilih tulisan template
2.Cari kode ]]><b:skin
3.Kemudian masukan kode di bawah ini , tepat di atas kode ]]><b:skin

#KZKh{ margin-top:20;margin-left: 0px ;margin-bottom:50px ;border:5px solid #DDD;border-radius:10px 10px 10px 10px ;width:1090px;height:200px; background: #222; position:relative;}

Keterangan:
-kode warna Merah : itu adalah warna background , silahkan ganti warnany sesuka kalian
-kode warna Biru : itu adalah warna border(garis pinggir) , silhkan ganti juga warnany sesuka kalian

4.berikut ini adalah kode HTML nya , cara meletakany silahkan anda cari kode <div id='content'> letakan kode di bawah ini tepat di atas kode <div id='content'>

<div id='KZKh'>SILAHKAN ANDA ISI DENGAN APA SAJA</div>

Gimana gampangkan ngebuatnya , Monggo di coba .......

sumber

Label: Tutorial Blog

animasi loding blog

Posted by andika Posted on Rabu, April 17, 2013 with 1 comment

CSS :
CSS dibawah ini di pasang tepat di atas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px rgb(240 ,0 , 0);
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(240 ,0 , 0);
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Script Animasi :
Pasang Script Animasi dibawah ini tepat di atas code </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

Jquery :
Pasang JQuery ini di atas code </head> ( Pasang kalo belom ada JQuery di template kamu )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Keterangan :
Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gpp , cuman hasil nya ntar warna merah persis kaya contoh nya.

sumber

Label: Tutorial Blog

date a live template blog

Posted by andika Posted on Kamis, April 11, 2013 with 2 comments

DEMO

DOWNLOAD DISINI

NOTE:

SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

sumber

Label: anime template blogger

template mass bray v2.0

Posted by andika Posted on Kamis, April 11, 2013 with No comments

DEMO

DOWNLOAD DISINI

NOTE: SEGALA KERUSAKAN TEMPLATE YANG TERJADI BUKAN TANGGUNG JAWAB ADMIN JANGAN SEKALI - KALI MENGUBAH CREDIT FOOTER-NYA HARGAI KARYA ORANG LAIN JIKA KARYA KALIAN MAU DIHARGAI

sumber

Label: Template blog stlye

Tempat Banner Keren di Header

Posted by andika Posted on Kamis, April 11, 2013 with 1 comment

1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>

.MaskedX {
position: absolute;
right: 190px;
width: 178px;
height: 33px;
top: 150px;
background: #000;
z-index: 9;
padding: 2px;
padding-top:4px;
padding-left:4px;
border-radius: 5px 5px 1px 5px;
border: 2px solid #494949;
}
.MaskedX:before{
content: "";
position: absolute;
bottom: -11px;
left: 162px;
border-width: 10px 25px 0px 0px;
border-style: solid;
border-color: #484848 transparent;
display: block;
width: 0;
}

3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>

<div class='MaskedX'>
<a href="http://maskedx.blogspot.com/" onmouseover="window.location=this.href"><img src="http://i1273.photobucket.com/albums/y407/maskedx/xx_zps5a06b628.png" height="31" width="88" title="The Masked Man | Masked X"/></a>

</div>

4. Pratinjau dulu sebelum di save

sumber

Label: Tutorial Blog

Label Keren dengan CSS3 Count Label

Posted by andika Posted on Kamis, April 11, 2013 with No comments

Cara memasang Label pada blog :

1. Masuk dasbor kemudian pilih tata letak
2. Tambah Gadegt pada bagian sidebar atau footer atau yang lainnya
3. Pilih widget label blogger dan tambahkan
4. Pengaturan pada widget label : centang pada Tampilkan Jumlah Entri Per Label
5. Simpan

Next

1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Cari id widget Label atau code mirip seperti di bawah ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

perhatikan:

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>

hapus semua pada bagian ini:

</b:includable>
</b:widget>
3. Jika sudah di hapus masukan code di bawah ini pada bagian yang di hapus tadi:
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div>

4. Lalu letakkan code di bawah ini diatas code ]]></b:skin>

.sidebar ul li {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5Sn3GGvV7s-YjwdtNudSe3VIVL0SuzgqkWVodf2BoN-9wC_HsAc06zjeap4hzJqMFH9a15j16LT-zv54zxOAKWqepsdYypCPNO4RgZaoaU3f4xR4VWQAWlEB0AM5bL6osBQjjDsO_usy/s1600/icon-new-window.png) no-repeat left center;
list-style-type:none;
margin:0 0 5px;
padding-left:20px;
transition:padding 0.26s ease;
-moz-transition:padding 0.26s ease;
-webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
padding-left:23px;
}
.sidebar ul li:hover span.label-count {
opacity:0.5;
margin-left:10px;
}
span.label-count {
background:#cc0000;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
color:#000;
height:auto;
margin-left:50px;
opacity:0;
position:relative;
text-align:center;
width:auto;
padding:2px 8px;
transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
}
span.label-count:before {
content:"";
width:0;
height:0;
position:absolute;
right:100%;
top:0;
border-width:10px;
border-style:solid;
border-color:transparent #cc0000 transparent transparent;
}

5. Pratinjau dulu sebelum di save

sumber

Label: Tutorial Blog

Template Rin Okumura

Posted by andika Posted on Sabtu, April 06, 2013 with 1 comment

DEMO

DOWNLOAD DISINI

1. Mengubah Gambar di Header :

Cari kode seperti dibawah ini :
#header{
width: 987px;
position: relative;
margin: auto;margin-left:2px;
height:300px;
background:url(http://i.imgur.com/NWbdvev.png) no-repeat top center;

Note : Ganti code warna merah dengan Url gambar header kalian

2. Pengaturan menunya :

Cari kode dibawah ini :
<div class='navijohanes'>
<ul>
<li><a href='http://gatra-cyber.blogspot.com/'>Home</a></li>
<li><a href='http://gatra-cyber.blogspot.com/2013/01/gatra-cyber-banner-baru-d.html'>My Banner</a></li>
<li><a href='http://gatra-cyber.blogspot.com/search/label/Blog'>Blogger</a></li>
<li><a href='http://gatra-cyber.blogspot.com/search/label/Info'>Info</a></li>
<li><a href='http://gatra-cyber.blogspot.com/2012/12/disclaimer.html'>Disclaimer</a></li>
<li><a href='http://gatra-cyber.blogspot.com/search/label/Award'>My Award</a></li>
<li><a href='http://gatra-cyber.blogspot.com/search/label/Template'>Template</a></li>
<li><a href='http://gatra-cyber.blogspot.com/search/label/Tips%20N%20Trick'>Tips And Trick</a></li>

sumber

Label: anime template blogger