Social Items

Home / Hasil penelusuran untuk cara-menambahkan-widget-contact-form-di

Sebelumnya kami telah berbagi tutorial tentang Cara Menambahkan Widget Contact Form di Blogspot (Part-1).  Sekarang di artikel ini kita akan memahami Cara Custom contact Form Dari Widget Di Blogger. Pada dasarnya ini adalah bagian kedua dari artikel itu. Sebagian besar blogger yang menggunakan platform blogspot tidak menggunakan widget formulir kontak resmi karena tampilannya, tidak terlihat profesional dan menarik, juga tidak cocok dengan desain template blogger khusus. Jadi, Mari kita lihat Cara Custom Contact Form Dari Widget Di Blogger.

Langkah Pertama
Sebelum mengikuti tutorial di bawah ini kami sarankan Anda untuk menginstal widget formulir kontak di blog Anda, prosesnya sangat mudah dan dapat dilakukan dalam hitungan menit, dengan klik sederhana. Kami telah menerbitkan tutorial sebelumnya, jadi Anda tidak akan menghadapi kesulitan. Mohon mengikuti  Cara Menambahkan Widget Contact Form di Blogspot (Part-1).

Proses Kustomisasi (Menambahkan CSS)
Sebelum Mengedit kami menyarankan Anda untuk membuat cadangan dari template Anda, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin> tepat di atasnya paste kode berikut.

CSS
/* ######## Contact Form Widget By Sorabloggingtips.com ######################### */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {
max-width: none;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background-color: #EBEBEB;
border: 1px solid #ccc;
}
.contact-form-widget .form {
}
.contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border:0;
background-image: none;
background-color: #00c8d7 !important;
cursor: pointer;
font-style: normal;
font-weight: 400;
}
.contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {
border: 0;
box-shadow: none;
}
.contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {
border: 0;
}
.contact-form-button-submit:hover {
background-color: #303030;
background-image: none;
border: 0;
}

Cara Custom Contact Form Dari Widget Di Blogger Part-2


Blogger adalah platform CMS yang mudah dioperasikan , Anda tidak perlu menjadi seorang yang ahli untuk mengoperasikan dasbor atau pengaturan. Tetapi dengan kemudahan, ada beberapa keterbatasan, secara default Anda tidak dapat membuat halaman' Contact Us', Anda harus menggunakan plugin pihak ketiga atau harus mengubah widget kontak resmi blogger, sehingga dapat berfungsi pada halaman statis. Membuat halaman terpisah untuk tujuan kontak sangat profesional dan juga membuat blog Anda bersih dengan menyembunyikan widget dan plugin yang tidak perlu.

First Step (Penting)
Sebelum mengikuti tutorial di bawah ini kami sarankan Anda untuk menginstal widget formulir kontak di blog Anda, prosesnya sangat mudah dan dapat dilakukan dalam hitungan menit, dengan klik sederhana. Kami telah menerbitkan tutorial sebelumnya, jadi Anda tidak akan menghadapi kesulitan. Mohon mengikuti Cara Menambahkan Widget Contact Form di Blog Blogger.

 Menyembunyikan Widget (Menambahkan CSS)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

CSS
.sidebar .widget.ContactForm {
    display: none!important;
}

Membuat Halaman (Menambahkan HTML)
Sebelum Mengedit kami menyarankan Anda untuk membackup dari template, sehingga apapun yang salah Anda masih memiliki desain blog.

Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Templates >> Edit HTML dan cari ending ]]> </ b: skin>  tepat di atasnya paste kode berikut.

HTML

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

 <div class="contact section" id="contact" style="display: block;">

 <div class="widget ContactForm" id="ContactForm1">

 <div class="contact-form-widget">

 <div class="form">

 <form name="contact-form">

 <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                 <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                 <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                 <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                 <br />

 <div style="text-align: center; width: 100%;">

 <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

 </div>

 <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

 </div>

 </div>

 </form>

 </div>

 </div>

 </div>

 </div>

 </div>


Cara Membuat halaman Contact Us di Blogger Part-3


Hari ini kita akan belajar Cara Menambah Widget Contact Form di Blogspot. Blogger tidak mendukung plugin seperti wordpress sehingga perlu sedikit trik untuk mencari widget contact form untuk blog Anda.

Ada banyak widget pihak ketiga yang tersedia tetapi kebanyakan dari mereka adalah premium atau sangat terbatas untuk akses, tetapi jika Anda menggunakan salah satu blogger default, itu menjadi mudah untuk mengelola pesan yang akan Anda terima melalui widget ini karena akan meneruskan pesan ke akun email yang sama yang Anda gunakan untuk mengakses blog.

Mengapa Contact form itu penting?
Pada dasarnya Contact Form akan memberi pengunjung dan pembaca kemudahan untuk menghubungi Anda, sehingga jika seseorang ingin menghubungi, maka dia dapat menghubungi Anda dengan mudah.

(Menambahkan Widget)
Ikuti langkah-langkah di bawah ini untuk menambahkan gadget Contact Form di blog Anda.

Langkah 1: Kunjungi blogger.com dan masuk ke akun Anda. Jika Anda menjalankan banyak blog, Anda harus memilih blog yang diinginkan dari daftar.


Langkah 2: Klik Layout pada sidebar sebelah kiri untuk mendapatkan opsi untuk menambahkan gadget.



Langkah 3: Anda dapat melihat tautan Tambahkan Gadget di panel utama di sisi kanan. Klik dan Anda akan dibawa ke daftar gadget.


Langkah 4: Lalu, pilih gadget dari sisi kiri. Sekarang, Anda akan melihat Contact Form. 

Cara Menambahkan Widget Contact Form di Blogspot Part-1


Soracart adalah template blogger responsif dan premium untuk situs eCommerce. Terbaik di kelas dan sarat dengan banyak fitur, dibutuhkan blog Anda ke tingkat berikutnya. Soracart dilengkapi dengan berbagai widget yang akan membantu Anda mempublikasikan blog Anda secara lebih profesional. 

Sora Films tersedia dalam versi free template, tetapi tentunya ada keterbatasan dimana Anda tidak dapat memodifikasi secara keseluruhan template.  Untuk melihat demo dan mengunduh template, Anda bisa melihat di SoraCart Blogger Template

Untuk mempermudah dalam mengatur template , di bawah ini telah ada dokumentasi cara seting template. 

Top Navigation

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.


Contact Menu (Contact Details)

Akses Layout/Tata Letak blog > klik Edit link pada widget Contact Details.


Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Top Social Widget

Akses Layout/Tata Letak blog > klik Edit link di Top Social Widget.

Icons Avaliables { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }


Main Menu/ Mega Menu

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>Fashion</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mens'>MEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/women'>WOMEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/kids'>KIDS</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>Electronics</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mobile'>SMARTPHONE</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/laptop'>LAPTOP</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch'>Smartwatch</a></li>
</ul></li>
<li><a href='#'>Features</a></li>
<li><a href='#'>Documentation</a></li>
<li><a href='#'>Download This Template</a></li>
</ul>
Pada kode diatas ada dua jenis menu yang pertama yaitu menu Normal dan lainnya adalah menu mega.
Kode biru itu normal dan kode merahnya adalah menu mega.

http://sora-cart-soratemplates.blogspot.in/search/label/mobile 
http://sora-cart-soratemplates.blogspot.in/search/label/laptop
http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch
Ganti tautan di atas dengan url label Anda.

Membuat normal link 
<li><a href='#'>Features</a></li>
Kode diatas akan muncul sebagai link normal ganti saja # dengan link anda dan Features dengan teks anda.

Membuat Menu mega dengan Image
<li><a class='menu-target' href='#'>Your-primary-Label</a><ul><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li></ul></li>
Kode di atas akan muncul sebagai menu mega cukup ganti Your-Label-Url dengan link anda dan Your-Label-Text dengan teks anda.

Catatan:-
  1. Label utama Anda: - Ini adalah label utama dari menu mega, label lain akan muncul di bawah ini. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "Electronics" akan menjadi label utama Anda
  2. Your-Label-Url: - Ini adalah link dari label sekunder dari tempat posting yang muncul. Contoh http://yourblogurl.blogspot.com/search/label/LABELNAME. Dalam contoh ini "http://yourblogurl.blogspot.com" adalah url blog anda. Dan "LABELNAME" adalah label sekunder Anda.
  3. Your-Label-Text: - Ini adalah label sekunder dari menu mega, itu akan muncul di bawah label utama. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "(Smartphone, Laptop, Smartwatch)" akan menjadi label sekunder Anda

Vertical Icon Menu

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.


Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Slider Widget

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Slider Widget Section, lalu tambahkan salah satu dari berikut ini

Recent Posts: <div class="latestposts" data-no="5"></div>
Label / Tag Ex: <div class="tagpost" data-label="Break" data-no="5"></div>

Responsive Ads

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Bagian Responsive Ads, lalu tambahkan salah satu dari berikut ini

<div id="banner-1" class="banner">  <a class="banner__permalink" href="#">  <span class="screen-reader-text">Introducing the Vacation Collection — Up to 50% Off</span> </a>  <div class="banner__inside-wrapper"> <div class="banner__inside">  <div class="banner__content">      <h3 class="banner__title">Introducing the Vacation Collection — Up to 50% Off</h3>           </div>    <div class="banner__overlay"></div>      <div class="banner__bg_image"></div>   </div> </div></div><style type="text/css">.banner {    position: relative;    color: #fff;} #banner-1 {    min-height: 130px;    background-color: #c6b78b;}#banner-1 .banner__title {    font-size: 28px;    letter-spacing: 0px;}#banner-1 .banner__subtitle {    font-size: 14px;    color: rgba(255, 255, 255, 0.85);}#banner-1 .banner__inside {    height: 130px;    padding: 8px;}#banner-1 .banner__content {    border-width: 2px;    border-color: rgba(255, 255, 255, 0.5);}#banner-1 .banner__sep {    margin-top: 8px;    margin-bottom: 8px;    width: 20%;}#banner-1 .banner__bg_image {    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs76BKrBdHDA_0msoxRPEV_LauywsaKrkKxp3Zuxfw3xJIQRFdq_sL0gVh6OP9cghVAR9PMOwa5TMdcKBCijXcXxdnRUtl6ZVzYY_mMNXed6PADWUE4biymZffHju1aEcWeGiINdb6mj0/s1600/d.png');}#banner-1 .banner__overlay {    background-color: #0a0000;    opacity: 0.3;}.banner__bg_image {    position: absolute;    top: 0;    bottom: 0;    right: 0;    left: 0;    background-position: center center;    background-repeat: no-repeat;    -webkit-background-size: cover;    background-size: cover;    z-index: 1;    -webkit-transition: -webkit-transform 1s ease-in-out;    -o-transition: -o-transform 1s ease-in-out;    transition: transform 1s ease-in-out;    will-change: transform;}.banner__overlay {    background: #000;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    z-index: 2;}.banner__content {    word-break: break-all;    padding: 18px 30px;    display: table-cell;    vertical-align: middle;    border: 2px solid #fff;    text-align: center;    position: relative;    z-index: 3;}.banner__title {    color: inherit;    margin: 0;}.banner__inside {    display: table;    width: 100%;    box-sizing: border-box;}.banner__inside-wrapper {    overflow: hidden;    position: relative;}.banner__permalink {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: 4;}.screen-reader-text {    clip: rect(1px, 1px, 1px, 1px);    height: 1px;    overflow: hidden;    position: absolute !important;    width: 1px;}.banner:hover .banner__bg_image, .banner__permalink:focus .banner__inside-wrapper .banner__bg_image {    -webkit-transform: scale(1.1);    -ms-transform: scale(1.1);    -o-transform: scale(1.1);    transform: scale(1.1);}</style>
Anda bisa menggunakan kode diatas atau menempelkan kode adsense anda sendiri.

Description Tiles

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<div class="special-wrap row"><!-- First --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-support"></i></span><h6 class="special-heading">24/7 Customer Care</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- First One Ends --><!-- Second --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-money"></i></span><h6 class="special-heading">Cash On Delivery</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Second Ends --><!-- Third --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-clock-o"></i></span><h6 class="special-heading">One Day Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Third Ends --><!-- Fourth --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-plane"></i></span><h6 class="special-heading">Worldwide Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Fourth Ends --></div>
Inilah hal-hal yang perlu Anda ubah.

  1. <h4>We Specialize in</h4> - Main Title.
  2. <i aria-hidden='true' class='fa fa-heart-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
  3. <h6 class='special-heading'>Wedding Photography</h6> -Tiles title
  4. <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s. </p> -Description

Featured Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini. (Anda bisa menambahkan hingga 3 widget)

<span class="labelpost" data-label="mobile" data-no="4"></span>


Random Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

<span class="randomposts" data-no="4"></span>


Cara menambahkan harga dalam produk

Akses posting blog > klik New Post> Labels, di label masukkan price_ $ 120 (Dimana $ 120 adalah harga produk)

Catatan: - rubah simbol $, jika Anda menggunakan mata uang lainnya.
Contoh Gambar:


Setelah menambahkan, klik publish.

Cara menambahkan lencana diskon pada produk

Akses posting blog > klik New Post> Label, di label masuk dari @ -75% (di mana -75% diskon pada produk)
Contoh Gambar:


Setelah menambahkan, klik publish.

Popular Product

Akses Layout/Tata Letak blog > klik Edit link pada widget produk Populer.

Recent reviews

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

<span class="recentcomments" data-no="4"></span>

Cart Page

Akses Page Blog > klik Halaman Baru> Judul, dalam judul masukkan "cart" (tanpa tanda petik).

Catatan: - halaman keranjang tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.
http://sora-cart-soratemplates.blogspot.com/p/cart.html or http://www.xyz.com/p/cart.html
Checkout Page

Akses Page blog > klik Halaman Baru> Judul, pada judul masukkan "checkout" (tanpa tanda petik).

Catatan: - halaman checkout tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.
http://sora-cart-soratemplates.blogspot.com/p/checkout.html orhttp://www.xyz.com/p/checkout.html
Catatan: - Untuk membuat form checkout bekerja anda harus menambahkan contact widget di blog anda. Untuk menambahkan widget ikuti langkah-langkah di bawah ini.

Akses tata letak blog > klik tambahkan gadget> Gadget lainnya, Tambahkan widget kontak.

Cara Menambahkan "Quick overview" ke Produk

Untuk menambahkan ikhtisar singkat pada produk Anda lakukan seperti yang disebutkan di bawah ini

Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save
Go to ke Blogger >> Tambah Posting baru >> Cari Deskripsi
Dalam Deskripsi Pencarian masukkan teks yang ingin Anda tampilkan sebagai ikhtisar produk. Setelah semuanya selesai, tekan "Publikasikan" dan produk Anda siap untuk dijual

Paypal Email dan Currency

<script>//<![CDATA[$(document).ready(function () {  simpleCart({   checkout: {     type: "PayPal" ,     email: "templatemania@yahoo.com"    }  }); simpleCart.currency( "USD" );}); //]]></script>
Ubah templatemania@yahoo.com ini dengan email anda sendiri.
Ubah USD dengan mata uang Anda sendiri (Hanya Mata Uang di Bawah yang didukung).
"USD" - Currency Name  ("US Dollar")  "AUD" - Currency Name  ("Australian Dollar")  "BRL" - Currency Name  ("Brazilian Real")  "CAD" - Currency Name  ("Canadian Dollar")  "CZK" - Currency Name  ("Czech Koruna")  "DKK" - Currency Name  ("Danish Krone")  "EUR" - Currency Name  ("Euro")  "HKD" - Currency Name  ("Hong Kong Dollar") "HUF" - Currency Name  ("Hungarian Forint") "ILS" - Currency Name  ("Israeli New Sheqel") "JPY" - Currency Name  ("Japanese Yen") "MXN" - Currency Name  ("Mexican Peso") "NOK" - Currency Name  ("Norwegian Krone") "NZD" - Currency Name  ("New Zealand Dollar") "PLN" - Currency Name  ("Polish Zloty") "GBP" - Currency Name  ("Pound Sterling") "SGD" - Currency Name  ("Singapore Dollar") "SEK" - Currency Name  ("Swedish Krona") "CHF" - Currency Name  ("Swiss Franc") "THB" - Currency Name  ("Thai Baht")"BTC" - Currency Name  ("Bitcoin")
Pagenavigation Results

<script type='text/javascript'>  /*<![CDATA[*/    var perPage=8;    var numPages=6;    var firstText ='First';    var lastText ='Last';    var prevText ='« Previous';    var nextText ='Next »';    var urlactivepage=location.href;    var home_page="/";  /*]]>*/</script>
Ubah nilai var perPage = 8; Dari 8 ke angka yang kamu mau (Archive).

Selamat berkarya, dan sekali lagi untuk melihat demo dan mengunduh template, Anda bisa melihat di SoraCart Template 

Cara Setup Template Blogger Online Shop SoraCart

Langganan: Postingan (Atom)

Subscribe Our Newsletter