cara membuat halaman kontak di blog

Halaman kontak pada suatu blog sangat berguna untuk para pengunjung, cara membuat halaman kontak di blog sangat beraneka ragam, tapi halaman kontak yang akan kita buat ini memiliki tambahan beberapa widget untuk mendukung halaman kontak itu sendiri. Untuk script form contact ini kita akan memakai code geratisan dari situs www.foxyform.com. Postingan kali ini terinspirasi dari seorang teman yang membutuhkan kode halaman kontak yang akan dipasang di halaman blognya. Oke untuk keterangan halaman kontak saya rasa semua teman teman sudah paham atas hal ini, kita landung saja menuju TKP, silahkan lihat demonya melalui link DEMO dibawah ini kemudian simak tatacara pembuatannya.

Demo

Fitur Widget

1. Form Contact
2. Gambar admin
3. Link Profil admin
4. Text snipet admin
5. Link Social Media

Script Form Contact

1. Berhubung script form contact yang kita pake jasa situs www.foxyform.com dengan geratisan oleh karena itu silahkan kunjungi situs www.foxyform.com.
2. BAGIAN 1 >> Setting : Silahkan anda edit settingan halaman form contact anda. Mana yang wajib diisi para pengunjung dan mana yang tidak wajib diisi, Centang bagian required field:     
3. Bagian 2 >> Advanced settings : Silahkan setting warna untuk tampilan halaman form contact anda.
4. Bagian 3 >> Target e-mail Address : Masukkan alamat anda
5. Lihat Preview dibawah setelah ana sudah merasa yakin silahkan klik " CREATE FORMULAR "
6. Kode Script akan muncul dan silahkan anda copy. kemudian kita menuju pemasangan halaman kontak, silahkan simak penjelasan dibawah ini.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget halaman Contact
By : Rivai Silaban | Blog Design
Update : Kamis, 14 September 2013
******************************************/
#bdrspage-contact {
width:580px;
background:#fff;
margin:0 ;
padding:0 ;
}
#bdrspage-contact h2 {
color: #990000;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
text-shadow: 1px 1px 1px #333;
text-align: center;
border-bottom: solid #990000 5px;
padding-bottom:10px;
padding-top:10px;
}
#bdrspage-contact .bdrspage-kiri {
width: 300px;
height: auto;
text-align: center;
float: left;
margin-right:35px;
}
#bdrspage-contact .bdrspage-kanan {
width: 220px;
height: auto;
float: right;
text-align: left;
padding:5px;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#bdrspage-contact .bdrs-faq {
color: #990000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
list-style-type: decimal;
margin-left: -20px;
padding-bottom:12px;
}
/*****************************************
Author Box Rivai
******************************************/
#bdrspage-contact .Rivai-PostAuthor {
font-size:12px;
margin:0 auto;
padding:10px;
text-shadow:1px 0 0 #fff;
min-height:170px;
margin-right: 10px;
border-top: solid #990000 5px;
width:560px;
}
#bdrspage-contact .Rivai {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
#bdrspage-contact .Rivai img {
border-radius:50%;
width: 100px;
height: 100px;
border:2px solid #ccc;
box-shadow: 1px 1px 4px #000;
}
#bdrspage-contact .Rivai-text {
float:right;
width: 75%;
text-align:justify;
color:#111;
margin:0;
padding:0 0 0 2px;
font-size: 12px;
font-style: italic;
} #bdrspage-contact .button a{
background-color:#F7F7F7;
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding: 5px 10px;
margin-right: 5px;
border-color: #E8E8E8;
font-style: italic;
}
#bdrspage-contact .button a:hover{
background-color:#F7F7F7;
color: #990000;
text-decoration: none;
border: solid #999 1px;
text-shadow:0 0 1px #ccc;
box-shadow: 0 0px 2px #999;
}
#bdrspage-contact .more a{
color: #0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-decoration: none;
text-align: center;
padding:2px 10px;
margin-right: 5px;
font-weight: bold;
font-style: italic;
}
#bdrspage-contact .more a:hover {
color: #0000;
text-decoration: underline;}/* BLOG DESIGN CSS and */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Karena kita mau memasang pada halaman blog saatnya anda klik " Laman "
• Pilih " Laman Baru " lalu klik " Laman Kosong "
• Setelah laman kosong sudah terbuka, klik " HTML "
• Copy kode dibawah ini kemudian edit sesuai dengan kebutuhan anda lalu pastekan pada halaman anda.

Kerena kita hanya memasang kode script dan tag html pada halaman jadi anda hanya memasang kode tersebut pada laman bagian " HTML " bukan " Compose " sekali lagi ingat kita hanya memasukkan kode tag html dan script bukan membuat suatu tulisan pada halaman.

Pada tutorial ini script form contact yang akan kita pake adalah jenis script PHP dari server proxy dari situs www.foxyform.com yang geratisan.

<!-- BDRS html start -->
<div id="bdrspage-contact"><h2>Contact Admin</h2>
<div class="bdrspage-kiri">
<!-- Do not change the code! -->
<a id="foxyform_embed_link_454681"></a>
<script type="text/javascript">
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=454681&sec_hash=513b9ef6723&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script></div>
<div class="bdrspage-kanan">
<p style="color:#333333; font-family:Georgia; font-size:11px; font-style:italic">Terimakasih telah menghubungi saya, silahkan isi form contact disamping ini. Semua form harus di isi tidak diperbolehkan satupun yang kosong</p>
<p ><strong>Contact Massage </strong></p>
<ul class="bdrs-faq">
<li>Menggunakan kata kata yang sopan. <br />
<br />
</li>
<li>Mengisi Subject yang sesuai pada semua yang bersangkutan dengan artikel yang ada di blog ini. <br />
<br />
</li>
<li>Setelah kami review, kami akan sesecepatnya untuk membalasnya ke email anda.<br />
<br />
<br />
</li>
<li>Sebelum anda mempertanyakan mengenai permasalahan yang bersangkutan dengan artikel yang ada di blog ini ada baiknya lihat dan simak komentar dari teman teman yang lain. <br />
<br />
</li>
<li>Anda harap maklum bila pesan anda tidak langsung dibalas, sebab kami harus mereview email yang pertama masuk </li>
</ul>
</div><div style='clear:both;'/>
<div class='Rivai-PostAuthor'>
<div class='Rivai'>
<a href='LINK BLOG ANDA ' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' width='100' title="my image"/>
</a>
<div style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px 10px; margin-top:7px; text-align: center; color:#000000; text-shadow: NONE;'>
<b>
Rivai Silaban </b> </div>
</div>
<div class='Rivai-text'>
<span style='font-size: large;'>
<b>
<span style='font-family: Trebuchet MS,sans-serif; color: #990000;'>
My Profil </span> </b> </span>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;'>
Saya adalah seorang yang suka dengan photografi dan berbagai dunia maya lainnya, saya suka
Bloging dan memiliki ilmu sedikit tentang Design Grafis, Buat sohib sohib yang suka dengan bloging mari sama sama membangun ikatan persaudaraan diantara bloger Indonesia.
<div class="more" style='float:right;text-align:right;margin-top:5px;'>
<a href='LINK PROFIL ANDA' rel='nofollow' target='_blank' title="Profil">
Read More
</a>
</div>
<br/></div>
<div class="button" style="margin-top:35px;">
<div style='float:left;text-align:left;'>
<a class="button" href='LINK FACEBOOK ANDA ' rel='nofollow' target='_blank' title="facebook">
Facebook
</a>
<a class="button" href='LINK TWITTER ANDA ' rel='nofollow' target='_blank' title="twitter">
Twitter
</a>
<a class="button" href='LINK GPLUS ANDA ' rel='nofollow' target='_blank' title="Gplus">
Google Plus
</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA ' rel='nofollow' target='_blank' title="join to blog">
Join to Blog
</a> </div>
</div>
</div>
</div>
<div style='clear:both;'/>
<!-- BDRS html End -->

Keterangan Code

• Untuk kode CSSnya kode [ width:580px ] adalah lebar widget, sesuaikan dengan lebar main halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Untuk tulisan warna HIJAU ganti dengan tulisan singkat tentang anda.
• Tulisan kode warna MERAH ganti dengan Link anda sesuai pada tutorial.
• Kode tulisan warna BIRU ganti dengan code script dari www.foxyform.com yang telah anda copy dan daftarkan sebelumnya.
• Kode tulisan warna KUNING ganti dengan link gambar anda .
  

Kesimpulan

Cara membuat halaman kontak di blog ini memakai code script PHP yang geratisan dari situs www.foxyform.com, yang telah saya padukan dengan wiget profil untuk menambah kesan profil admin blog pada halaman kontak tersebut.

Bila teman teman mengalami masalah dalam pemasangan widget ini atau terdapat kesalahan penulisan kode silahkan hubungi saya atau share dengan saya melalui form komentar dibawah.

Halaman Kontak Blog
Kamis, 14 September 2013
By : Admin Blog Design | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 3:07 PM