Funkysst.com: Widgets
Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Friday, March 2, 2018

Orbit - jQuery Image Slider Plugin Untuk Blogger

Tutorial ini akan menunjukkan cara menambahkan slider gambar cantik lainnya untuk Blogger / BlogSpot yang dibuat dengan jQuery dan, tentu saja, dengan HTML dan CSS. Slider ini, yang disebut Orbit, adalah plugin jQuery ringan yang akan menampilkan banyak gambar dalam ruang terbatas menggunakan panah navigasi (tombol sebelumnya-berikutnya). Di bagian kiri atas Orbit slideshow, kita memiliki beberapa ikon peluru kecil yang menunjukkan gambar saat ini yang sedang kita lihat dan, di sisi kanan atas, adalah pilihan jeda dan penghitung waktu yang memberi tahu kita kapan gambar berikutnya akan ditampilkan.

Jika Anda ingin melihat slider gambar keren ini beraksi, kunjungi blog demo ini:


gambar slider, slideshow, jquery


Markup HTML cukup bersih, hanya elemen yang membungkus beberapa gambar tempat teks dibuat dari tag rentang gambar ini.

Cara Menambahkan Slider Gambar Orbit ke Blogger

Langkah 1. Dari Dasbor Blogger Anda, buka Template> Edit HTML> klik di manapun di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian blogger. Tempelkan atau ketik tag di bawah di dalam kotak telusur dan tekan Enter untuk menemukannya.
</ head>

Langkah 2. Tepat di atas </ head> tambahkan script berikut ini:

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

<! - [jika IE]>
<style type = "text / css">
.timer {display: none! important; }
div.caption {background: transparan; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 99000000, endColorstr = # 99000000); zoom: 1; }
</ style>
<! [endif] ->

<script type = 'text / javascript'>
$ (window) .load (fungsi () {
$ (# #; # Fitur & # 39;) orbit ({
advanceSpeed: 5000,
Bullet & # 39 ;: benar,
& # 39; timer & # 39; : benar,
& # 39; animasi & # 39; : & # 39; horizontal-slide & # 39;
});
});
</ script>

<script type = 'text / javascript'>
// <! [CDATA [
/ *
* Plugin Orbit jQuery 1.1
* www.ZURB.com/playground
* Hak Cipta 2010, ZURB
Bebas digunakan di bawah lisensi MIT.
* http://www.opensource.org/licenses/mit-license.php
* /

(fungsi (e) {e.fn.orbit = fungsi (a) {a = e.extend ({animation: "fade", animationSpeed: 800, advanceSpeed: 4E3, startClockOnMouseOut: true, startClockOnMouseOutAfter: 3E3, directionalNav: true, Teks: true, captionAnimationSpeed: 800, timer: false, bullets: false}, a); return this.each (function () {function m (c) {function g () {f.eq (h) .css ({ "z-index": 1}); s = false} var h = b, k = c; if (h == k) return false; if (! s) {s = true; if (c == "next else if (b == n) b = 0) else if (c == "prev") {b -; if (b <0) b = n-1} else {b = c; if (h <b) k = "next"; else if (h> b) k = "prev"} a.bullet & &
x (); if (a.animation == "fade") {f.eq (h) .css ({"z-index": 2}); f.eq (b) .css ({opacity: 0, "z-index": 3}) bernyawa ({opacity: 1}, a.animationSpeed, g); a.captions && o ()} if (a.animation == "horizontal-slide") {f.eq (h ) .css ({"z-index": 2}); k == "next" && f.eq (b) .css ({left: t, "z-index": 3}) bernyawa ({left: 0}, a.animationSpeed, g); k == "prev" && f.eq (b) .css ({left: -t, "z-index": 3}) bernyawa ({left: 0}, a .jimationSpeed, g); a.captions && o ()} if (a.animation == "vertical-slide") {f.eq (h) .css ({"z-index": 2}); k == " prev "&& f.eq (b) .css ({top: u," z-index ": 3}) bernyawa ({top: 0},
a.animationSpeed, g); k == "next" && f.eq (b) .css ({top: -u, "z-index": 3}) bernyawa ({top: 0}, a.animationSpeed, g); a.captions && o ()}}} var b = 0, n = 0, t, u, s, d = e (this) .addClass ("orbit"), f = d.find ("img, a img "); f.each (fungsi () {var c = e (ini), g = c.width (); c = c.height (); d.width (g); t = d.width () , d.height (c); u = d.height (); n ++}); f.eq (b) .css ({"z-index": 3}); if (a.timer) {d.append ('<div class = "timer"> <span class = "mask"> <span class = "rotator"> </ span> </ span> <span class = "jeda"> </ span> </ div> '); var j = e ("div.timer"), p; jika (j.length! = 0) {var C =
a.advanceSpeed ​​/ 180, v = e ("div.timer span.rotator"), y = e ("div.timer span.mask"), z = e ("div.timer span.pause"), l = 0, A, w = function () {p = true; z.removeClass ("active"); A = setInterval (function () {var c = "rotate (" + l + "deg)"; l + = 2; v .css ({"- webkit-transform": c, "- moz-transform": c, "- o-transform": c}); if (l> 180) {v.addClass ("move"); y Jika (l> 360) {v.removeClass ("move"); y.removeClass ("move"); l = 0; m ("next")}}, C)}, q = function () {p = false; clearInterval (A); z.addClass ("active")}; w (); j.click (function () {p? q (): w ()}); if (a.startClockOnMouseOut) {var B;
d.mouseleave (function () {B = setTimeout (function () {p || w ()}, a.startClockOnMouseOutAfter)}); d.mouseenter (function () {clearTimeout (B)})}}} jika ( a.captions) {d.append ('<div class = "caption"> <span class = "orbit-caption"> </ span> </ div>'); var r = d.children ("div.caption ") (c) f (b) .attr (" rel "), g = e (), o = function () {var c = f.eq (b) .attr (" span "), g = e "#" + c) .html (), h = r.height () + 20; r.attr ("id", "#" + c) .html (g); g? r.parent () berhenti () .ivimate ({bottom: 0}, a.captionAnimationSpeed): r.parent () stop () bernyawa ({bottom: -h},
a.captionAnimationSpeed)}; o ()} if (a.directionalNav) {d.append ('<div class = "slider-nav"> <span class = "right"> Kanan </ span> <span class = " kiri "> Kiri </ span> </ div> '); j = d.children (" div.slider-nav ") anak-anak (" span.left "); var D = d.children (" div.slider -nav ") anak-anak (" span.right "); j.click (fungsi () {a.timer && q (); m (" prev ")}); D.click (function () {a.timer && q () ; m ("next")})} jika (a.bullet) {d.append ('<ul class = "orbit-bullets"> </ ul>'); var E = e ("ul.orbit-bullets "); untuk (i = 0; i <n; i ++) {j = e (" <li> "+ i +" </ li> "); e (" ul.orbit-bullets "). tambahkan (j) ;
j.data ("index", i); j.click (function () {a.timer && q (); m (e (this) .data ("index"))}) var x = function () {E (b) .addClass ("active")}; x ()}})}}) (jQuery);
//]]>
</ script>

Catatan: Anda dapat mengubah kecepatan transisi di antara setiap gambar dengan memodifikasi nilai 5000 dari garis biru - angka yang lebih tinggi akan membuat gambar bertahan lebih lama di antara setiap transisi.

Penting! Jika Anda telah memiliki versi jQuery di template Anda, hapus garis merah, jika tidak, slideshow mungkin tidak bekerja.

Langkah 3. Sekarang saatnya menambahkan CSS. Temukan (CTRL + F) tag ini:
]]> </ b: skin>
Langkah 4. Tepat di atas ]]> </ b: skin> tambahkan kode ini:
#featured {height: 1px; lebar: 1px; overflow: hidden;}
div.orbit {
lebar: 1px;
tinggi: 1px;
posisi: relatif;
overflow: tersembunyi;
}

div.orbit img {
posisi: absolut;
atas: 0;
kiri: 0;
}
div.orbit sebuah img {border: none;}

div.timer {
lebar: 40px;
tinggi: 40px;
overflow: tersembunyi;
posisi: absolut;
atas: 10px;
kanan: 10px;
keburaman: .6;
kursor: pointer;
z-index: 1001;
}

span.rotator {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: -20px;
background: url (http://2.bp.blogspot.com/-RIbuOzbC8os/UwDPg1IgFaI/AAAAAAAAGN0/DrmP4kh7G08/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
tampilan: blok;
lebar: 20px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kanan: 0;
z-index: 2;
overflow: tersembunyi;
}

span.rotator.move {left: 0;}
span.mask.move {
lebar: 40px;
kiri: 0;
background: url (http://1.bp.blogspot.com/-9FdwFtBqvS4/UwDPqzE3ABI/AAAAAAAAGN8/r4xhlPpOHY4/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: 0px;
background-image: url (http://2.bp.blogspot.com/-8G-L7Onwt-Y/UwDPy372vYI/AAAAAAAAGOE/4qUdsKJaK98/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
keburaman: 0;
}

div.timer: hover span.pause,
span.pause.active,
div.timer: hover span.pause.active {opacity: 1; }

div.caption {
latar belakang: # 000;
latar belakang: rgba (0,0,0, .6);
lebar: 100%;
z-index: 1000;
posisi: absolut;
bawah: -100px;
warna: #fff;
padding: 8px 0;
text-align: center;
}

rentang div.caption {
padding: 0 10px;
ukuran huruf: 14px;
text-shadow: 0px 1px 0px rgba (0,0,0, .8);
margin: 0;
}
caption-caption {display: none; }

div.orbit: hover div.slider-nav {display: block; }
div.slider-nav {display: none; }
div.slider nav team {
lebar: 33px;
tinggi: 33px;
text-indent: -9999px;
posisi: absolut;
z-index: 1000;
atas: 43%;
kursor: pointer;
}

div.slider-nav span.right {
background-image: url (http://1.bp.blogspot.com/-oW1NQkjT3Ws/UwDP7b7T2-I/AAAAAAAAGOM/JaeJxm9qZ60/s1600/arrow-right.png);
kanan: 10px;
}
div.slider-nav span.left {
background-image: url (http://3.bp.blogspot.com/-T9eMQBFvVro/UwDQBxCnpWI/AAAAAAAAGOU/L8KS7EAOqOU/s1600/arrow-left.png);
kiri: 10px;
}

.orbit-peluru {
posisi: absolut;
z-index: 1000;
daftar-gaya: tidak ada;
atas: 10px;
kiri: 7px;
margin: 0;
padding: 0;
}

.orbit-peluru li {
float: kiri;
margin-left: 5px;
kursor: pointer;
warna: # 999;
text-indent: -9999px;
background-image: url (http://1.bp.blogspot.com/-lKQgWI4_xhQ/UwDQI0WIQmI/AAAAAAAAGOc/1e6zuurwFSg/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
lebar: 7px;
tinggi: 7px;
overflow: tersembunyi;
}
.orbit-peluru li.active {color: # 222; background-position: -7px 0; }
Langkah 5. Klik pada tombol "Simpan template" untuk menyimpan perubahan.

Akhirnya, kita akan menggunakan kode HTML yang menampilkan gambarnya. Kami memiliki pilihan untuk menambahkan slider baik di dalam salah satu posting / halaman kami, atau menampilkannya sebagai gadget di sidebar blog atau di bawah header.

Jika Anda memilih untuk menambahkannya ke dalam salah satu posting Anda, beralihlah ke tab HTML dan tempel kode di bawah ini di dalam kotak HTML pos Anda.

Jika Anda ingin menambahkannya di sidebar blog / di bawah header, masuklah ke "Layout", klik pada "Add a gadget link"> pilih "HTML / JavaScript" dari jendela pop-up dan tempel html ini di dalam kotak. :
<div id = 'featured'>

<a href=' Tautkan URL'> <img rel = ' photo1 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Orbit-caption id = "span class =' photo1 "> Bagaimana Jepang pisang makro dan diurutkan sekarang, besar utama. </ Span>

<a href=" URL tautan "> <img rel = ' photo2 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo2 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

<a href=" URL tautan "> <img rel = ' photo3 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo3 style =" text-align: center "> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>

<a href=' Tautkan URL'> <img rel = ' photo4 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo4 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

</ div>
Kode ini berisi gambar, link dan deskripsi untuk setiap gambar. Secara biru, adalah URL dari link dan gambar yang perlu Anda ganti dengan milik Anda. Di dalam kode HTML setiap gambar, Anda memiliki ukuran setiap gambar yang dapat diubah dengan memodifikasi lebar (590) dan tinggi (348) nilai. Untuk menambahkan deskripsi gambar Anda, ganti teks dengan warna merah.

Jika Anda ingin menambahkan lebih banyak gambar, tambahkan HTML ini sebelum tag </ div> :
<a href=' URL Tautan'> <img rel = ' photo5 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo5 '> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>
Perhatikan bahwa setiap gambar dan deskripsi memiliki pengenal unik (id) dan tidak boleh diulang. Misalnya, dalam deskripsi teks gambar pertama, kita memiliki id = " photo1 " dan dalam kode gambar adalah atribut "rel" dengan nama id, yaitu rel = " photo1 ".

Setelah menambahkan gambar Anda, klik tombol "Simpan" atau "Publikasikan" dan hanya itu! Sekarang Anda bisa menikmati Slider Gambar Orbit keren ini untuk Blogger.

Sunday, February 18, 2018

Widget Widget Hashtag yang Harus Anda Pilih?

Ada begitu Funkysst apa kabar baik baik kan... langsung pada judul di atas Widget Widget Hashtag yang harus Anda Pilih? ada aplikasi dan widget untuk hampir semua hal, namun satu hal yang kurang adalah widget yang menghubungkan salah satu jaringan sosial berbasis gambar paling populer ke situs web Anda. Sayangnya, Instagram belum merancang widget resmi yang memungkinkan Anda dengan mudah dan cepat menanamkan gram di situs Anda.

Widget seperti aksesori meja yang memungkinkan pengguna akhir menjalankan fungsi tertentu dalam halaman web. Ini mengambil informasi dari sumber tertentu dan kemudian menampilkannya di area yang diinginkan. Hal ini dapat dirancang untuk memberikan akses mudah terhadap cuaca, peta, update olahraga, kalender dan banyak lainnya. Android dan WordPress adalah dua kontributor widget web dan mobile terbesar, namun Instagram masih harus mengejar ketinggalan.

Sementara mereka masih mencoba untuk mencari tahu bagaimana membuat widget Instagram, manfaatkan salah satu widget pihak ketiga untuk Instagram. Tapi karena ada banyak dari mereka di luar sana, memilih yang benar bisa jadi tangguh. Nah, kami melakukan sortasi dan dugaan untuk Anda dan memberi Anda 3 pilihan teratas:
instagram widget, instagram

Instansif

Instansif adalah generator widget untuk Instagram yang bisa Anda gunakan secara gratis atau dengan biaya tertentu. Kedua versi praktis memiliki fitur yang sama, kecuali berapa kali foto tersebut disegarkan. Itu hanya terjadi sekali per hari dengan versi gratisan, tapi selalu up to date dengan versi premium. Jika Anda ingin menghilangkan batasan widget Instagram ini, bersiaplah untuk melakukan investasi kecil.

instagram widget instansive


Fitur Instan

  • Tampilkan foto dan hashtag di grid, slideshow atau kolom.
  • Sesuaikan jumlah kolom dan baris
  • Tambahkan efek hover
  • Menampilkan atau menyembunyikan caption gambar
  • Foto dihubungkan langsung ke Instagram
  • Menawarkan dukungan asli untuk Drupal dan WordPress
Dengan biaya satu kali sebesar $ 5, Anda bisa melakukan upgrade ke versi premium.

Instansif, bagaimanapun, tidak sempurna dibandingkan dengan widget pihak ketiga lainnya untuk Instagram, karena fitur terbatas dalam hal penyesuaian, tampilan, dan frekuensi penyegaran. Bahkan jika Anda membayar biaya minimal, hanya foto yang akan selalu up-to-date, namun tidak ada fitur lain yang akan ditambahkan. Tapi lihat sisi baiknya, itu responsif.


Intagme

Intagme cukup sederhana dan mudah, yang bisa menjadi bonus jika Anda harus mengelola banyak akun media sosial dan widget. Fiturnya juga mendapatkan pekerjaan.

instagram widget intagme


Fitur Intagme

  • Tarik foto atau hashtag dan tampilkan di grid atau slideshow
  • Dapatkan untuk menyesuaikan tata letak, thumbnail, ukuran dan padding gambar
  • Edit foto dengan menambahkan batas dan / atau warna latar belakang
Di atas semua ini, Intagme 100% gratis, yang mungkin bisa menempatkan semua widget pihak ketiga lainnya di bagian bawah daftar Anda. Sebelum Anda membuat keputusan akhir, ketahuilah bahwa Intagme tidak memiliki satu fitur tampilan - kolom, serupa dengan yang akan Anda lihat di Pinterest. Ini tidak responsif dan memiliki pilihan penyesuaian terbatas. Apalagi foto-foto itu terkait dengan sebuah halaman di Intagme.com, bukan langsung ke Instagram.

SnapWidget

Di antara widget Instagram, widget snap adalah yang paling populer dan digunakan oleh lebih dari 100.000 website setiap hari. Ini bisa digunakan gratis atau dengan biaya bulanan sebesar $ 6,99.

instagram widget snapwidget

Fitur SnapWidget

  • Tarik foto atau hashtag, lalu tampilkan di grid, board, slideshow, peta atau scrolling.
  • Ukuran dan tata letak gambar mini bisa disesuaikan
  • Background color hover effect layout dan photo padding dapat digunakan untuk mengkustomisasi foto
  • Tampilkan atau sembunyikan tombol berbagi

Fitur Versi Premium

  • Semua yang di atas
  • Buat hingga 10 widget
  • Saring foto menurut nama pengguna & hashtag
  • Tautkan foto ke Instagram atau halaman lainnya tambahkan custom CSS jika diinginkan
  • Memiliki opsi penyesuaian yang lebih canggih, seperti pagination yang mengendalikan integrasi Google Analytics dan fungsi pop-up foto
Dengan harga $ 6,99 per bulan, widget Instagram ini merupakan investasi yang layak, apalagi karena versi gratisnya didukung iklan. Ini berarti gambar mini terhubung ke laman SnapWidget tempat foto muncul di samping iklan. Bonus tambahan adalah apakah gratis atau berbayar, ada pilihan yang memungkinkan Anda membuat widget menjadi responsif untuk penggunaan ponsel.

Widget Instagram yang Harus Anda Pilih?

Sekalipun hanya 3 pilihan yang dipresentasikan, membuat pilihan masih belum jalan-jalan di taman, tapi setidaknya Anda tidak perlu mengocok banyak widget. Dari informasi di atas, Anda bisa membuat keputusan yang tepat tentang widget Instagram mana yang akan digunakan. Atau, Anda dapat mempersempit pilihan berdasarkan anggaran Anda - apakah Anda memilikinya atau tidak, fitur yang Anda butuhkan, dan seberapa banyak kontrol penyesuaian yang ingin Anda miliki.

Anda juga harus memikirkan bagaimana widget Instagram dapat mempengaruhi usaha SEO Anda. Jika Anda ingin SEO friendly seperti bagian dari situs Anda, cari tahu bagaimana hal itu dikembangkan atau diberikan, karena beberapa platform yang digunakan mungkin tidak terlihat oleh mesin pencari. Pertimbangkan semua faktor di atas dan pekerjaan Anda akan lebih mudah.

TErima kasih .

Wednesday, January 24, 2018

5 Widget Formulir Kontak Blogger Kustom Terbaik

Di masa lalu, menambahkan formulir kontak kustom untuk Blogger cukup proses yang kompleks, dan banyak blogger terpaksa menggunakan situs web pihak ketiga. Namun, bahkan setelah Blogger meluncurkan sendiri formulir kontak gadget , itu masih dianggap sebagai sangat tidak memadai. Hal ini karena gadget resmi hanya akan diimplementasikan pada footer sidebar. Kebanyakan blogger lebih suka memiliki formulir kontak blogger terpisah ditempatkan pada halaman sendiri untuk membuat blog mereka muncul diatur dengan baik dan lebih profesional juga.

Memiliki baik meletakkan-out formulir kontak Blogger sangat penting. Ini adalah alat yang pengunjung, perusahaan, dan merek dapat digunakan untuk menghubungi Anda dan itu hanya fitur harus dimiliki untuk setiap blogger. Jika Anda tidak nyaman dengan berbagi alamat email utama Anda langsung di blog Anda, maka kebiasaan Blogger formulir kontak menawarkan cara yang efektif di mana orang dapat dengan mudah mencapai Anda.
5 Terbaik Kustom Blogger Kontak Form Widget

Mengapa Anda harus menggunakan Blogger Kontak Form?

Jika Anda masih terjebak pada penyedia pihak ketiga, Anda pasti harus mempertimbangkan untuk beralih ke bentuk kontak khusus resmi untuk Blogger karena memiliki berbagai manfaat yang unik, seperti:
  • Pesan dikirim segera - Sebagai administrator blog, Anda akan menerima pesan langsung klik pengunjung kirim.
  • Reliable - Ini adalah bentuk resmi yang dikembangkan oleh Blogger, yang membuat cara yang lebih dapat dipercaya dan diandalkan untuk memulai kontak dibandingkan dengan menggunakan layanan pihak ketiga.
  • Pertanyaan - Bentuk kontak menawarkan platform bagi pengunjung Anda untuk mengajukan pertanyaan spesifik yang mereka mungkin memiliki mengenai blog yang Anda tulis atau bisnis Anda secara umum. Hal ini dapat menjadi cara yang sangat baik menangkap lead dan bahkan menyebabkan konversi jika Anda menjual produk atau jasa tertentu.
  • Feedback - Pengunjung dapat dengan mudah berkomentar di blog Anda dengan meninggalkan umpan balik melalui formulir kontak Anda. Umpan balik ini dapat membantu Anda menentukan pos yang harus dilakukan selanjutnya atau apa daerah ke alamat yang didasarkan pada komentar pengunjung.
  • Informasi atau permintaan layanan - Bagi mereka yang menggunakan blog sebagai cara pemasaran suatu produk atau jasa, klien potensial dapat menggunakan formulir kontak kustom untuk Blogger untuk menjangkau dan meminta informasi tambahan.

Bagaimana Tambahkan Blogger Kontak Form Gadget

Sebelum menambahkan kustom Blogger formulir kontak ke halaman statis, kita perlu menambahkan formulir kontak standar di sidebar blog untuk membuatnya fungsional:

1. Masuk ke dashboard Blogger Anda dan pergi ke "Layout"> klik pada "Tambah gadget" link di wilayah elemen halaman.

2. Pilih "Lebih Gadget" di bawah tab "Dasar-dasar" dan klik tombol "+" untuk menambahkan Formulir Kontak Gadget.

formulir kontak blogger

Menyembunyikan Blogger Contact Form dari Sidebar

Setelah formulir kontak telah ditambahkan, langkah berikutnya adalah untuk menyembunyikannya sehingga akan muncul hanya di halaman statis.

1. Pergi ke "Template" dan tekan tombol "Edit HTML". Setelah kode editor terbuka, klik mana saja di dalam kode area dan tekan tombol CTRL + F (atau Command + F untuk mac) untuk membuka kotak pencarian.

2. Ketik atau tempel tag berikut di dalam kotak pencarian dan tekan Enter untuk menemukannya:
]]> </ B: skin>
3. Tepat di atas]]> </ b: skin> tag, menambahkan kode CSS ini:
# ContactForm1 {display: none! Important;}
4. Klik "Simpan template" tombol di sisi kiri atas dan melihat blog Anda. Formulir kontak widget harus pergi.

Menambahkan Kustom Blogger Contact Form di Halaman Statis

Akhirnya, sekarang kita memungkinkan fungsionalitas dari formulir kontak, mari kita tambahkan bentuk kontak khusus di blog Blogger kami ...

1. Pergi ke "Pages" dan klik tombol "halaman baru". Jika Anda sudah memiliki Contact halaman kami, cukup klik link "Edit" di bawah judul halaman.

2. Setelah Page editor akan terbuka, mengisi judul halaman dengan Hubungi / Contact Us atau gelar apapun yang ingin Anda tampilkan. Hal ini direkomendasikan melakukan hal ini sebelum sesuatu untuk membuat permalink SEO friendly.

3. Klik pada tab HTML karena ada kita akan menambahkan kode untuk membuat kustom Blogger formulir kontak kerja. Di situs yang tepat, mengubah pengaturan Halaman untuk menyembunyikan ( "Jangan biarkan" atau "Jangan biarkan, hide ada") komentar pembaca, maka klik "Selesai" tombol:

kontak halaman statis

4. Berikut adalah 5 kustom bentuk gaya Blogger kontak. Memilih favorit Anda dan salin kode yang disediakan, kemudian paste kode di dalam kotak HTML editor halaman Anda:


Form Kontak sederhana

kustom formulir kontak blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 40px 0} .contactf-nama, .contactf-email {float: left; width : 48.25%} contactf-nama {margin-right:. 3,5%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama:. hover, .contact -form-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100 %; max-width: 100%; margin: 0 0 20px; padding: 10px 15px; font-size: 12px; letter-spacing: 1px; color: # 444; background: # F3F3F3; border: menengah none; -webkit- box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 37px} .contact-bentuk-email-pesan {height: 170px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {width: 13%; height: 30px; font yang: 12px yang normal Arial; letter-spacing: 1px; color: # 444;display: block; outline: none; margin-bottom: 20px; text-align: center; background: # E6E6E6; border: 0; cursor: pointer} .contact-bentuk-tombol-menyerahkan: aktif {outline: none; -webkit -box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height:!! 11px penting; width: 11px !penting;}
</ Style>

<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf -name "> <input class =" kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "NAME" onblur = 'jika (ini .value == "") {this.value = "NAME";}' onfocus = 'jika (this.value == "NAME") {this.value = "";}'/> </ div> <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "eMAIL" onblur = 'jika ini.Nilai == "") {this.value = "EMAIL";}' onfocus = 'jika (this.value == "EMAIL") {this.value = "";}'/> </ div> <div style = "clear: both"> </ div> <div class = "contactf-pesan"> <class textarea = "kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "email-pesan" baris = "5" value = "mESSAGE" onblur = 'jika (this.value == "") {this.value = "mESSAGE";}' onfocus = 'jika (this.value = = "PESAN") {this.value = "";} '> </ textarea> </ div> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-bentuk kirimkan "type =" button" value = "KIRIM"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-keberhasilan- pesan "> </ div> </ form> </ div> </ div> </ div>

formulir kontak dengan CSS pelangi pembagi

formulir kontak berwarna-warni untuk Blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 0} hr {position: relative; height: .75em; border: 0; melimpah : hidden; margin: 0} hr: sebelum {content: ""; display: block; position: absolute; top: 0; left: 0; height: .75em; width: 5.1em; background: # C4DD83; box-shadow : 5em 0 0 0 # F4FCC9,10em 0 0 0 # FDCD78,15em 0 0 0 # ED786F, 20em 0 0 0 # D99DBF, 25em 0 0 0 # C39EDC, 30em 0 0 0 # 679DE2,35em 0 0 0 # 62C2E3, 40em 0 0 0 # F4FCC9,45em 0 0 0 # FDCD78,50em 0 0 0 # ED786F, 55em 0 0 0 # D99DBF, 60em 0 0 0 # C39EDC} .contactf-nama, .contactf-email {float: left; width : 49,25%} contactf-nama {margin-right:. 1,5%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama:. hover, .contact -form-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100 %;max-width: 100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact -form-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow : inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz -box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol -submit, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 - 2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; height: 11px penting; width: 11px penting;!}100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz -box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol -submit, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 - 2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; height: 11px penting; width: 11px penting;!}25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact -form-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA ( 0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; kotak -shadow: inset D4685C 0 -2px #} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width: 11px penting;!}25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact -form-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA ( 0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; kotak -shadow: inset D4685C 0 -2px #} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width: 11px penting;!}15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk -name, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top : 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact -form-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk -name, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top : 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact -form-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff ; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer ; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-kotak- shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width:!! 11px penting; }-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff ; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer ; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-kotak- shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width:!! 11px penting; }kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size : 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:! 0 penting; height: 11px penting! ; width: 11px penting;}!kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size : 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:! 0 penting; height: 11px penting! ; width: 11px penting;}!border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk -tombol kirimkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}! .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: tidak ada! penting; padding: 0 penting; height: 11px penting; width: 11px penting;}!border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk -tombol kirimkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}! .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: tidak ada! penting; padding: 0 penting; height: 11px penting; width: 11px penting;}!
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <hr> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf-nama"> <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur =' jika (this.value == "") {this.value = "Nama";}' onfocus = 'jika (this.value == "Nama") {this.value = "";}'/> </ div > <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "alamat E-mail" size = "30" type = "text" value = "alamat E-mail"onblur = 'if (this.value == "") {this.value = "Alamat E-mail";}' onfocus = 'jika (this.value == "Alamat E-mail") {this.value = " ";} '/> </ div> <div style = "clear: both"> </ div> <div class = "contactf-pesan"> <class textarea = "kontak-bentuk-email-pesan" cols =" 25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" type = "text" value = "Ketik pesan Anda di sini ..." onblur = 'if ( == this.value "") {this.value = "Ketik pesan Anda di sini ...";} 'onfocus =' jika (this.value == "Ketik pesan Anda di sini ...") {this.value = "";} '> </ textarea> <input class ="kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-form-submit" type = "button" value = "Kirim Pesan"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form > </ div> </ div> </ div></ Div> </ div> </ div></ Div> </ div> </ div>

Blogger Kontak Form dengan CSS Ribbon

formulir kontak dengan pita

<Style type = "text / css">
.widget.ContactForm {z-index: 1} .contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 25px 0; background: # EBEBE3 ; -webkit-border-radius: 2%; - moz-border-radius: 2%; border-radius: 2%} kontak-bentuk-widget .form {width: 91%; margin: 0 auto} .ribbon {. Font: 16px Arial; text-transform: memanfaatkan; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); position: relative; background: # 6B5F53; color: # fff; text-align: center; Padding : 1em 2em; margin: 0 -16px} .ribbon: sebelum, .ribbon: setelah {content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid # 584C40; z-index: -1} .ribbon: sebelum {kiri: -1.7em; border-right-width: 1.2em; border-kiri-warna: transparan} .ribbon: setelah {kanan: -1.7em; border-kiri-width: 1.2em ; border-kanan-warna: transparan} .ribbon .ribbon-konten: sebelum, .ribbon .ribbon-konten: setelah {content: ""; position: absolute; display: block;border-style: padat; border-color: # 42362A transparan transparan; bottom: -1em} .ribbon .ribbon-konten: sebelum {kiri: 0; border-width: 1em 0 0 1em} .ribbon .ribbon-konten: setelah {kanan: 0; border-width: 1em 1em 0 0} .contactf-nama, .contactf-email, .contactf-pesan {text-align: left; margin-top: 25px; color: # a1937b; font-size: 13px} .contactf-nama, .contactf-email {float: left; width: 100%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama. : hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 10px 0 0; padding: 10px; font-size: 12px; color: #aaa; border-color: # DBD6D1; border-width: 1px; kotak- shadow: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px} .contact-bentuk-nama, .contact-bentuk-email {height: 35px}.kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 37px; font yang: normal 12px Arial; outline: none; letter-spacing: 1px; color: # fff; text-align: center; cursor: pointer; text-shadow: 1px 1px 0 # ffe8b2; color: # 7c5d1b; border: 1px solid # d6a437; background: # febd4b; background: -webkit-gradien (linear, 0 0,0 100%, dari (# fed970) ke (# febd4b)); background: -webkit-linear-gradient (# fed970, # febd4b); background : -moz-linear-gradient (# fed970, # febd4b); background: -MS-linear-gradient (# fed970, # febd4b); background: -o-linear-gradient (# fed970, # febd4b); background: linear -gradient (# fed970, # febd4b); - pie-background: linear-gradient (# fed970, # febd4b)} kontak-bentuk-tombol-menyerahkan: aktif {color: # 7c5d1b; border:. 1px solid # d6a437; background : # febd4b; background: -webkit-gradien (linear, 0 0,0 100%, dari (# febd4b) ke (# fed970));background: -webkit-linear-gradient (# febd4b, # fed970); background: -moz-linear-gradient (# febd4b, # fed970); background: -MS-linear-gradient (# febd4b, # fed970); background: -o-linear-gradient (# febd4b, # fed970); background: linear-gradient (# febd4b, # fed970); - pie-background:. linear-gradient (# febd4b, # fed970)} kontak-bentuk-lintas { border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height:!!! 11px penting; width: 11px penting;}
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <class h2 = "pita"> <strong class = "pita-content"> Shoot Me Email </ strong> </ h2> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf-nama"> nama Anda: <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur = 'if (== this.value "") {this.value = "nama";} 'onfocus =' jika (this.value == "Nama") {this.value = "";}'/> </ div> <div class = "contactf-email"> alamat E-mail *: <input class = "kontak-bentuk-email" id ="ContactForm1_contact-form-email" name = "Alamat E-mail" size = "30" type = "text" value = "Alamat E-mail" onblur = 'jika (this.value == "") {this.value = "alamat E-mail";}' onfocus = 'jika (this.value == "alamat E-mail") {this.value = "";}'/> </ div> <div style = "clear: both "> </ div> <div class =" contactf-pesan "> pesan *: <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" value = "" placeholder = "Ketik pesan Anda di sini ..." value = "Ketik pesan Anda di sini ..." onblur = 'jika (this.value == "") {this.value = "Ketik pesan Anda di sini ...";}' Onfocus = 'jika (this.value == "Ketik pesan Anda di sini ...") {this.value = "";}'> </ textarea> <input class = "kontak-bentuk-tombol kontak-bentuk -tombol-submit "id = "ContactForm1_contact-form-submit" type = "button" value = "KIRIM pESAN"/> <div class = "kontak-bentuk-error-pesan" id =" ContactForm1_contact-bentuk-error-message "> </ div> <div class =" kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div > </ div>ContactForm1_contact-form-submit" type = "button" value = "KIRIM PESAN"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div> </ div>ContactForm1_contact-form-submit" type = "button" value = "KIRIM PESAN"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div> </ div>

Form Kontak Minimal

formulir kontak minimal untuk Blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 25px; background: # fff} .contact-title {text-align: center; Font: 41px fantasi; color: # 121212; margin-bottom: 25px} .contactf-nama, .contactf-email {float: left; width:.. 47%} contactf-nama {margin-right: 6%} nama- ikon img, .email-icon img {background: transparent penting; border: sedang tidak penting; box-shadow:!!! tidak penting; padding: 11px 0 penting; width:!!! 16px penting; height: 16px penting;} .name-icon, .email-icon {position: absolute; z-index: 1} .contact-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama: hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 0 0 25px; padding: 10px 10px 10px 25px; font yang: bold 16px kursif;text-shadow: 0 1px 2px #ddd; color: # 121212; background:! transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box -shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover ,. hubungi-form-email-pesan: focus {padding: 10px penting!} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact- bentuk tombol-mengirimkan-: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding: 0 penting; ! width: 11px penting; height: 11px penting;}!# 121212; background:! Transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}. hubungi-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: focus {padding: ! 10px penting} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 ! penting; width: 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block ; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; width:! 11px penting; height:!! 11px penting; }# 121212; background:! Transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}. hubungi-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: focus {padding: ! 10px penting} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 ! penting; width: 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block ; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; width:! 11px penting; height:!! 11px penting; }# 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email { height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {padding: 10px penting} .contact-bentuk-email-pesan { height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang : bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact- bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}# 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email { height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {padding: 10px penting} .contact-bentuk-email-pesan { height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang : bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact- bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}kontak-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: Fokus {padding: 10px penting} .contact- form-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width: 30% ; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; width: 11px penting; height: 11px penting;}!kontak-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: Fokus {padding: 10px penting} .contact- form-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width: 30% ; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; width: 11px penting; height: 11px penting;}!hubungi-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; warna: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow : none! important; padding:! 0 penting; width: 11px penting; height: 11px penting;}!hubungi-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; warna: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow : none! important; padding:! 0 penting; width: 11px penting; height: 11px penting;}!
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <class h2 = "kontak-title"> Dapatkan berhubungan. </ H2> <div class = "bentuk "> <form name =" kontak-bentuk "> <div class =" contactf-nama "> <div class =" nama-icon "> <img src =" https://3.bp.blogspot.com/- TgreeOjV9hc / WC8lF19LbaI / AAAAAAAABq4 / E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB / S1600 / avatar% 25.281% 2529.png "width = "16" height = "16"/> </ div> <input class = "kontak-bentuk-nama" id =" ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur = 'if (== this.value "") {this.value = "nama";}' onfocus = 'jika (ini.Nilai == "Nama") {this.value = "";}'/> </ div> <div class = "contactf-email"> <div class = "email-icon"> <img src = "https: //4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width = "16" height = "16"/> </ div> < class input = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "alamat E-mail" size = "30" type = "text" value = "alamat E-mail" onblur = 'if ( this.value == "") {this.value = "alamat E-mail";}' onfocus = 'jika (this.value == "alamat E-mail") {this.value = "";}'/ > </ div> <div style = "clear: both"> </ div> <div class ="contactf-pesan "> <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" value = "Ketik pesan Anda di sini ..." onblur = 'jika (this.value == "") {this.value = "Ketik pesan Anda di sini ...";}' onfocus = 'jika (this.value = = "Ketik pesan Anda di sini ...") {this.value = "";} '> </ textarea> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-bentuk -submit "type = "button" value = "KIRIM"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class =" kontak -form-sukses-pesan "id ="ContactForm1_contact-bentuk-sukses-pesan "> </ div> </ div> </ form> </ div> </ div> </ div>

formulir kontak dengan pidato gelembung



<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right:; width auto: 600px; max-width: 100%}. contactf-nama, .contactf-email {float: left; width: 50%}. hubungi-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama: hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover ,. hubungi-form-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 0 0 15px; padding: 10px; font-size: 14px; color: # 777; background: # E2DEDB; border: 1px solid # CBC7C4; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px} .contact-bentuk-nama, .contact-bentuk-email {height: 33px} .contact-bentuk-email-pesan { height: 130px} .contactf-pesan {position: relative} .contactf-pesan: setelah, .contactf-pesan: sebelum {border-bottom: 50px padat transparan; border-left:80px solid # E2DEDB; bottom: -32px; konten: ''; position: absolute; kanan: 50%; margin-right: -100px} .contactf-pesan: sebelum {border-left: 80px solid # CBC7C4; bottom: - 34px; kanan: 50,3%; margin-right: -101px} .cbluebutton {margin-top: 25px; width: 30%; height: 35px; float: right; font-size: 15px; color: # fff; display: inline -block; text-align: center; background: linear-gradient (ke bawah, # 339ad9 0%, # 224bbc 100%); box-shadow: 0 1px 1px RGBA (34,75,188,0.5); border: 0; - webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px} .cbluebutton rentang .contact-bentuk-tombol-mengirimkan {background: linear-gradient (ke bawah, # 52b1e2 0%, # 397fd0 100%); font yang: bold 16px "Helvetica Neue", sans-serif; height: 35px; width: 100%; color: # fff; text-shadow: 0 1px 1px # 224BBC; display: inline-block; kotak- shadow: 0 1px 1px RGBA (255,255,255,0.3) inset; kursor: pointer; outline: none; -webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf -message "> <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "pesan" baris = "5" value = "pesan" onblur = 'jika (this.value == "") {this.value = "Pesan";}' onfocus = 'jika (this.value == "Pesan") {this.value = "";}'> </ textarea > </ div> <div class = "cbluebutton"> <span> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-form-submit" type = "button"value = "Kirim" /> </ span> </ div> <div class = "contactf-nama"> <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "Nama" onblur = 'jika (this.value == "") {this.value = "Nama";}' onfocus = 'jika (this.value == " nama ") {this.value = "";}'/> </ div> <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" nama = "email" size = "30" type = "text" value = "E-mail" onblur = 'jika (this.value == "") {this.value = "E-mail";}' onfocus =' jika (this.value == "E-mail") {this.value = "";} '/></ Div> <div style = "clear: both"> </ div> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div>

5. Setelah Anda menambahkan kode, klik "Publikasikan" tombol di sisi kanan atas. Sekarang Anda harus dapat melihat formulir kontak Blogger hidup pada halaman statis Anda. Untuk memastikan bahwa semuanya bekerja dengan baik, Anda dapat mengirimkan pesan sebagai ujian. pesan harus dikirim ke kotak masuk Anda dalam hitungan detik, hanya pastikan bahwa Anda memeriksa email yang Anda gunakan dengan akun Blogger Anda.

Pertanyaan tentang Custom Form Kontak untuk Blogger yang Sering Diajukan

Di mana pesan pergi?

Setelah pengunjung mengajukan pertanyaan atau mengirim umpan balik melalui form kontak Blogger , itu langsung dikirim ke email yang terkait dengan akun Blogger Anda. Jika sebuah blog memiliki beberapa administrator, maka semua administrator individu akan menerima komentar atau pertanyaan yang diajukan oleh pengunjung.

Apa manfaat dari menggunakan terpisah "Hubungi Kami" halaman?

Meskipun semua bermuara pada preferensi pribadi Anda, blog Anda akan terlihat lebih profesional jika memiliki halaman terpisah untuk formulir kontak kustom untuk Blogger. Ini memberi Anda kredibilitas dan juga menawarkan Anda kesempatan untuk menambahkan panggilan khusus untuk beraksi di halaman "Hubungi Kami" baru.

Apakah mungkin untuk menambahkan bidang tambahan?

Sayangnya tidak ada. Anda tidak dapat menambahkan kolom kustom seperti website, nomor telepon atau alamat surat sejak Blogger menggunakan tag khusus untuk mentransfer data. Dalam kasus apapun, bidang default diletakkan-out dengan baik dan akan membantu Anda untuk mendapatkan informasi dasar yang Anda butuhkan tentang pengunjung Anda.

Saya telah menginstal formulir kontak Blogger, tapi itu tidak bekerja. Apa yang bisa menjadi masalah?

Ada beberapa alasan mengapa Anda mungkin akan mengalami kesulitan menyiapkan formulir kontak Anda. Cara paling sederhana untuk memecahkan masalah adalah dengan pemeriksaan ulangan email Anda terkait dengan blog dan juga menginstal ulang formulir lagi.

Pada akhirnya, dengan menggunakan adat Blogger formulir kontak yang Anda dapatkan dari konsistensi dalam jenis informasi yang Anda meminta dan juga mengurangi spam karena Anda tidak perlu menampilkan email Anda langsung di blog.

Makasih.