Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, September 19, 2013

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.
pesan

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://lh4.googleusercontent.com/-3TFxlGaJYqU/USE9N_fvQOI/AAAAAAAAAO8/0_ocwXMKYkw/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 3:07 PM

15 comments :

  1. pilihan yang sulit mas, dua-duanya bagus :)

    ReplyDelete
    Replies
    1. heheheh dua duanya ipasang juga tidak apa2
      satu di halaman satu lagi di siddebar atau footer

      Delete
  2. Coba terapkan dan pasang di blog saya, terima kasih mas atas infonya yang sudah banyak membantu saya

    ReplyDelete
    Replies
    1. sama sama mas terimakasih kembali atas kunjungannya di blog saya yang sangat sederhana ini.

      Delete
  3. sob...
    saya sudah melakukan tutorial di atas, tetapi ada sedikit problem ni
    kode CSS nya terlihat dan terpapang di atas template blog saya
    bagaimana caranya menghilangkan/ menyembunyikannya sob?
    mohon pencerahannya sob
    bisa di lihat di blog saya sob: http://peluangbisnisberjangka[dot]blogspot[dot]com/
    terima kasih

    ReplyDelete
    Replies
    1. coba do cek kembali penulisan code CSSnya mana tau aakurang codenya, baik itu titik, komma dll...

      Delete
  4. saya masukan CSS sama persis seperti di tutorial agan dan saya sudah koreksi kode-kode tsb ternyata sudah valid (tag pebuka-penutup komplit, titik koma tidak ada masalah)
    mohon bantuannya ya sob
    terima kasih

    ReplyDelete
    Replies
    1. oya, script yang mas pake apa script hasil akun mas sendiri di www.foxyform.com ya, code warna biru di atas merupakan code script kontak saya...

      coba kendalanya dimana ya mas. ?

      Delete
  5. saya sudah mengganti script warna biru dengan script saya sndiri sob
    saya cari-cari kode style tidak ada sob d'HTML template saya, jadi saya pasang di atas kode head
    saya biasanya memasang CSS di bawah sob
    bagaimana sob menurut agan?
    Maaf ya gan banyak tanya, harap maklum karena masih newbie

    ReplyDelete
    Replies
    1. udah ngak apa apa, oya coba di cari kode ]]></b:skin>

      saya rasa ada, nah tempatkan aja CSS nya tepat diatas code ]]></b:skin> tadi,

      biasanya kode ]]></b:skin> berada di head templat. ]]></b:skin> dan code </style> itu hampir mirip atau kegunaanya sama sama menyimpan CSS, jadi setiap mas menyimpan CSS harus diatas kedua kode tersebut, pilih salah satu, bila kedua kode tersebut ada pada template mas, ada baiknya memasang CSS diatas code </style> aja

      Delete
  6. thanks atas artikelnya sob.. bermanfaat :)
    salam damai

    ReplyDelete
  7. Tutorial yang lengkap membuat saya betah buka-buka di blog ini. trima kasih atas info blogging nya

    ReplyDelete
  8. Kontak form memang sangat penting ya, salah satu urgensinya adalah untuk menghubungi pemilik blog sebagai saran atau kritik yang ingin disampaikan. :D

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog