News Update :
Home » » Cara Membuat Buku Tamu Slide (baru)

Cara Membuat Buku Tamu Slide (baru)

Cara Membuat Buku Tamu SlideBeberapa waktu lalu saya sempat posting artikel modifikasi blog tentang cara membuat buku tamu di sebelah kiri. Tips modifikasi blog kali hampir mirip dengan cara yang lama tapi pastinya ada yang beda dari tips ini. Kali saya akan membuat buku tamu dengan tampilan baru yaitu membuat buku tamu slide.

Modifikasi blog ini untuk blogspot. Berikut langkah-langkah untuk membuat buku tamu slide

1. Login blogger sobat
2. Masukkan kode berikut di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

3. Cari kode ]]></b:skin>. dan letakkan kode CSS berikut di atas kode ]]></b:skin>.


.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(URL GAMBAR X) 85% 55% no-repeat;
}


4. Langkah terakhir yaitu masuk ke tata letak >> eleman halaman >> Tambah Gadget >> HTML/Javascript dan masukkan kode berikut

<div class='widget-content'>
<div class="panel">

paste script shoutmix anda disini....

</div>
<a class="trigger" href="#">Shoutmix</a>
</div>

5. Simpan pekerjaan yang sudah sobat buat

Selesai sudah Modifikasi blog tentang cara membuat buku tamu slide semoga membantu dalam mempercantik blog.

loading...

Ditulis Oleh : Nadya Hasyim ~ Tips dan Trik Blogspot

Hasyim Sobat sedang membaca artikel tentang Cara Membuat Buku Tamu Slide (baru). Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

4 komentar:

solanang said...

Thanks Brooooooow, Huebat for you

bayu said...

contohnya kayak gimana ya

Rendy Rizaldy said...

nice info gan.Tapi lebih baik,kasih screenshot contohnya aja.

Rendy Rizaldy said...

k tkp dulu masbro...

Post a Comment

Mohon komentar dengan sopan, SARA atau menaruh LINK Aktif di kotak komentar akan dihapus

 
Support : Copyright © 2011. UDIK-NET - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger