Home » Posts filed under Tips dan trik

Memasang Widget Contact Form Blogger pada Halaman Statis

in - on 20:23 - No comments

Widget Contact Form Blogger - Pada artikel sebelumnya saya telah menjelaskan bagaimana Cara Memasang Widget Contact Form Blogger, akan tetapi penempatan Contact Form pada widget ini kayaknya kurang disukai, dan lebih memilih menempatkan contact form pada halaman statis atau halaman posting.

Sekarang saya akan menjelaskan bagaimana memasang Widget Contact Form Blogger ini pada halaman statis atau pada postingan. Penampakan contact form ini seperti screenshoot di bawah ini :

menambahkan contact form pada halaman statis


Langkah 1 : Tambahkan Widget Contact Form Blogger

Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

menambahkan contact form pada halaman statis

Untuk sementara biarkan Contact Form ada di widget / sidebar.

Langkah 2 : Tambahkan Halaman

Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan Compose
<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.

menambahkan contact form pada halaman statis

Klik Publikasikan.

Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas ]]></b:skin>
/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Semoga bermanfaat...
Read more
Label:

cara membuat buku tamu di blog

in - on 19:39 - No comments
Cara Buku Tamu
Membuat atau memasang buku tamu atau guestbook yang melayang di sisi kanan blogdi blog merupakan hal yang sangat menyenangkan untuk dilakukan karena selain dapat memperindah atau mempercantik tampilan blog dengan membuat butu tamu memberikan fitur yang menyenangkan dan sangat berguna untuk mempererat hubungan para blogger dengan blogger lain atau dengan pengunjung blog mereka.


Guestbook atau buku tamu merupakan salah satu dari kumpulan widget terbaik untuk blog karena widget tersebut cukup populer dikalangan para bloggger. Pada kesempatan kali ini setelah beberapa waktu yang lalu saya telah memberikan cara menambahkan widget jam di blog dan cara memasang lagu di blog yang juga merupakan widget yang paling digemari pengguna blog, saya akan memberikan cara membuat atau memasang buku tamu di blog blogger atau blogspot anda dengan langkah yang mudah dan cepat untuk dilakukan.

Cara membuat buku tamu di blog
1. Kunjungi cbox.ws
2. Daftar dengan klik “Get your own free Cbox now!”
3. Isi form pendaftaran dan pilih model buku tamu yang diinginkan di “style”
4. Klik “create my cbox”
5. Verifikasi email anda dan login kembali di cbox
6. Klik “look & feel”  dan atur buku tamu tersebut sesuai keinginan anda
7. Jika telah selesai mengatur klik “save” dan klik “apply”

Cara memasang buku tamu di blog sesuai keinginan
1. Di member area cbox klik “publish!” dan copy  kode yang diberikan dengan klik “copy to myclipboard”
2. Login ke blogger anda, klik “tata letak” dan “tambah widget” pada posisi yang anda inginkan
3. Pilih “HTML/Javascript”
4. Paste kan kode tersebut dan klik simpan.

Cara memasang buku tamu melayang atau menggantung disisi kanan blog
1. Login ke blogger- tata letak – dan tambah widget
2. Pilih “html/javascript”
3. Pastekan kode dibawah ini di kolom yang disediakan
<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/AVvXsEg3WGeySfa0Mtvr3tNez2htGpoGVHERPwaXMXGF1IORu-du4qBpaoS_ss4h5bii2U-mAdem0I_6nZXQdwHRsQHfbBHe_ZpoSNODI_UWKlMBxSYrJjUM7SMJS8HE7jUMkhjPabnrRdzBhHo/s1600/bukutamu.png') 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">
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://anonymouslikepeace.blogspot.com">[get this widget]</a>><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></div></div>
4. Ubah tulisan berwarna hijau dengan kode yang anda dapat dari cbox tadi
5. Klik “simpan”
Read more
Label: