Buku Tamu Terbaru model Slide Vertikal dengan jQuery

Buku Tamu Ala Slide Vertikal dengan jQuery -Artikel ini saya temukan di blog  Asrizal Wahdan Wilsa Sharing Media. Buku tamu memang fasilitas yang penting yang dibutuhkan oleh blogger dalam silaturahim dengan pengunjung, dimana pengunjung dapat bertegur sapa, mengucap salam bahkan ucapan terimakasih yang pernah saya alami di ungkapkan dalam buku tamu. Buku tamu juga digunakan sebagai media blogwalking, dimana blogger dapat meninggalkan jejak untuk dikunjungi oleh si pemilik blog yang dikunjungi nya tersebut. Lalu, bagaimana cara membuat Buku Tamu Ala Slide Vertikal dengan jQuery seperti yang ada di blog ini? mari kita simak tutorialnya.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini :

]]></skin>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4 :

    .parno{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}

    .parno p{color:#ccc;margin:0 0 15px;padding:0}

    .parno a,.parno a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}

    .parno a:hover,.parno a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}

    a.triger{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFW231SzKdHklXDDuhQsRZJzqjyFLY5qz5aruKp0sPnpMAfzBV8dH75ABUI53iGLjxKrps-Fyq924SQ2hOovNyBXs_tkyY4cB4AOw1eFp0wTcXyfDD0M6RddWiJDxd56sYfaDr7yyUg54/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.triger:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYQScCJuIZS4B1RfYlY85YsWQlHoqOpYrJtPRzy0ITOZOATxYDWjll2xkaG6do9WuIW4sGOrTXY97hE4SS8y43OvFJgCL6L_E9PZ4MRy07oN5yX6oUSHhny-yXFeIarBjh_Pcqw1Xj1s/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.active.triger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}

    .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

    .colleft{float:left;width:130px;line-height:22px}

    .colright{float:right;width:130px;line-height:22px}

    a:focus{outline:none}

    .parno img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}

    .parno h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}

    .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Yg dicetak merah silahkan dirubah sesuka anda dg url koleksi gambar anda, cuman diharuskan max 32x32.
Langkah 6
Cari kode dibawah ini :

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6 :

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

    <script type='text/javascript'>

    $(document).ready(function(){

    $(&quot;.triger&quot;).click(function(){

     $(&quot;.parno&quot;).toggle(&quot;fast&quot;);

     $(this).toggleClass(&quot;active&quot;);

     return false;

    });

    });

    </script> 

Langkah 8
Cari kode dibawah ini :

 </body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8 :

    <div class='parno'>

    <h3>Buku Tamu</h3>

    ====== Kode Widget ShoutMix Anda =======

    </div>

    <a class='triger' href='#'>Guest</a>

Yg dicetak merah silahkan dirubah sesuka anda, dan yg dicetak biru isikan dg kode widget shoutmix anda.

Langkah 10
Simpan Template dan Lihatlah hasilnya..

Semoga bermanfaat..

INFORMASI SYARAT DAN KETENTUAN	KETERANGAN

PERHATIKAN SYARAT DAN KETENTUAN: JIKA SAUDARA INGIN MENGAMALKAN (Buku Tamu Terbaru model Slide Vertikal dengan jQuery) SILAKAN MINTA IJIN SAMA PAK WOCO, DAN JIKA ANDA TERMASUK ORANG YANG DERMAWAN, SILAKAN ISI KOTAK KERAMAT SEIKHLASNYA SEBAGAI MAHAR DO'A DO'A DI BLOG INI, DAN KAMI AKAN DO'AKAN SEMOGA DENGAN AMAL ANDA AKAN SEGERA TERKABULKAN APA YANG ANDA AMALKAN DAN CITA - CITAKAN, SILAKAN SMS No. Hp 085648333462 ATAU LANGSUNG TRANSFER MAHAR DI NOMER REKENING PAK WOCO , [AN.WOCO NO. REK.6578-01-000294-50-3 BANK BRI CABANG TUBAN] SEMOGA SELALU BERKAH AMIIN.Mohon Maaf Via SMS/MMS Yang Masuk Tidak Dibalas...Email: woco88@gmail.com

KOMENTAR PADA JUDUL DOA	:	[Buku Tamu Terbaru model Slide Vertikal dengan jQuery]-[Link 1]-[Link 2]

Anda sedang membaca artikel tentang Buku Tamu Terbaru model Slide Vertikal dengan jQuery dan anda bisa menemukan artikel Buku Tamu Terbaru model Slide Vertikal dengan jQuery ini dengan url http://iqroknetjaya.blogspot.com/2011/08/buku-tamu-terbaru-model-slide-vertikal.html. Anda boleh menyebarluaskan atau mengcopy artikel Buku Tamu Terbaru model Slide Vertikal dengan jQuery ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.