BISNIS INFINITY: widget

<div dir="ltr" style="text-align: left;" trbidi="on"> Dari beberapa tutorial saya share di artikel dengan tampilan yang bervariasi. Pada tutorial ini saya akan membahas mengenai widget contact form dengan efek lightbox agar tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul seperti kotak dialog karena ini juga cara yang sama seperti saat membuat modal dialog lainnya. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara Membuat Lightbox Widget Contact Form Blogger. <div id="content-sidebar" style="border: 0px; box-sizing: border-box; font-family: "Google Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="wrapper" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px auto; max-width: 990px; overflow: hidden; padding: 0px; position: relative; vertical-align: baseline; width: 360px;"><div class="iniwrapper" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; overflow: hidden; padding: 0px; position: relative; vertical-align: baseline;"><div class="content single-posts" id="content" itemprop="mainContentOfPage" style="background: rgb(255, 255, 255); border: 0px; box-shadow: none; box-sizing: border-box; float: none; font: inherit; margin: 0px; padding: 10px; vertical-align: baseline; width: 360px;"><div class="main section" id="main" name="Main" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="widget Blog" data-version="1" id="Blog1" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="blog-posts hfeed" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <article class="post-format-image" id="post-body-1834561270854376780" itemprop="" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font: inherit; margin: 0px 47px 30px 0px; overflow: hidden; padding: 0px; vertical-align: baseline; width: 340px;"><div class="post-outer" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="post hentry uncustomized-post-template" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;"><div class="post-body entry-content" id="animated-thumbnail" itemprop="articleBody" style="border: 0px; box-sizing: border-box; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; padding: 0px; user-select: none; vertical-align: baseline;"> <div class="inline_wrapper" id="inline_wrapper" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="ads_middle" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="kotak_iklanpost" style="border: 0px; box-sizing: border-box; font: inherit; margin: 20px auto; padding: 0px; text-align: center; vertical-align: baseline;"></div></div></div><a href="https://draft.blogger.com/null" name="more" style="border: 0px; box-sizing: border-box; color: #f24a4a; font: inherit; margin: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;"></a> <h4 style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 19.2px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: 500; line-height: normal; margin: 0px; padding: 0px; vertical-align: baseline;">Membuat Lightbox Widget Contact Form Blogger</h4> Pertama, masuk ke Edit HTML template blogger lalu cari kode <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">]]></b:skin> kemudian pasang kode berikut ini di atasnya. <pre style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 14px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; overflow-wrap: normal; overflow: auto; padding: 0px; user-select: text; vertical-align: baseline;"><code class="hljs css" style="background: rgb(43, 43, 44); border-radius: 5px; border: 0px; box-sizing: border-box; color: white; display: block; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5; margin: 0px; max-height: 350px; overflow: auto; padding: 1.2em; user-select: text; vertical-align: baseline;">#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px} #widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase} #widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit:hover{background:#d00} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{padding:5px} .buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer} .buka-contact:hover{background:#d00}</code></pre> Selanjutnya cari kode <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></body> kemudian pasang kode berikut ini tepat di atasnya. <pre style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 14px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; overflow-wrap: normal; overflow: auto; padding: 0px; user-select: text; vertical-align: baseline;"><code class="hljs xml" style="background: rgb(43, 43, 44); border-radius: 5px; border: 0px; box-sizing: border-box; color: white; display: block; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5; margin: 0px; max-height: 350px; overflow: auto; padding: 1.2em; user-select: text; vertical-align: baseline;"><<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script type='text/javascript'> $(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})}); </<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">script></code></pre> Selanjutnya cari kode <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div id='sidebar-wrapper'> kemudian pasang kode berikut ini tepat dibawahnya. <pre style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 14px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; overflow-wrap: normal; overflow: auto; padding: 0px; user-select: text; vertical-align: baseline;"><code class="hljs javascript" style="background: rgb(43, 43, 44); border-radius: 5px; border: 0px; box-sizing: border-box; color: white; display: block; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.5; margin: 0px; max-height: 350px; overflow: auto; padding: 1.2em; user-select: text; vertical-align: baseline;"><div id='contacts-forms'> <<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div id='widget-contact'> <<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">h3 class='juduls'>Contact Form<<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a href='#' class='close' title='Close'>&#215;</<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a></<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">h3> <<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/> </<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div> <<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div id='area-overlay'></<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div> <<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">button class='buka-contact'>Kirim Pesan</<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">button> </<span class="hljs-name" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div></code></pre> Langkah terakhir Simpan template. Sekarang buka Tata Letak, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak seperti pada gambar dibawah ini. <div class="separator" style="border: 0px; box-sizing: border-box; clear: both; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a class="imglink" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdNxlqy8dp2Z5BrLzmXDGCVnrUe5g2XrLAA0Gfub4DAZUQjOSXdA5ioJn172O9nnZtwDFZeSGhdHveJSOE7fpkgk_56BO_19tVCBZREe-u9JKqaPTM-SRMWxUqg_BaF1tabp0rxBiA0c/s1600/tambah-widget.gif" style="background: none; border: 0px; box-sizing: border-box; color: #f24a4a; font: inherit; margin: 0px 1em; padding: 0px; text-decoration-line: none; transition: all 0.3s ease 0s; vertical-align: baseline;"><img class="anime" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdNxlqy8dp2Z5BrLzmXDGCVnrUe5g2XrLAA0Gfub4DAZUQjOSXdA5ioJn172O9nnZtwDFZeSGhdHveJSOE7fpkgk_56BO_19tVCBZREe-u9JKqaPTM-SRMWxUqg_BaF1tabp0rxBiA0c/s640/tambah-widget.gif" style="border: none; box-sizing: border-box; font: inherit; height: auto; margin: 0px 0px 20px; max-width: 100%; opacity: 1; padding: 0px; pointer-events: none; transform: scale(1) translateY(0px); transition: all 0.6s ease 0s; user-select: none; vertical-align: baseline;" /></a></div> Cukup seperti itu saja untuk <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS. <div class="kabaradd" style="border: 0px; box-sizing: border-box; font: inherit; margin: 20px auto 0px; padding: 0px; vertical-align: baseline;"><ins class="adsbygoogle" data-ad-client="ca-pub-1619167471144570" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="1308327682" data-adsbygoogle-status="done" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; display: block; font: inherit; height: 0px; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><ins id="aswift_3_expand" style="background: transparent; border: none; box-sizing: border-box; display: inline-table; font: inherit; height: 0px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 340px;"><ins id="aswift_3_anchor" style="background: transparent; border: none; box-sizing: border-box; display: block; font: inherit; height: 0px; margin: 0px; opacity: 0; overflow: hidden; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 340px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="284" hspace="0" id="aswift_3" marginheight="0" marginwidth="0" name="aswift_3" scrolling="no" style="border-style: initial; border-width: 0px; box-sizing: border-box; font: inherit; height: 284px; left: 0px; margin: 0px; max-width: 100%; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 340px;" vspace="0" width="340"></iframe></ins></ins></ins></div></div></div><div id="initab" style="border: 0px; box-sizing: border-box; font: inherit; margin: 30px auto 0px; overflow: hidden; padding: 0px; position: relative; vertical-align: baseline;"> <section id="content1" style="border: 0px; box-sizing: border-box; display: inline-block; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 340px;"><div id="disqus_thread" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font: inherit; margin: auto; padding: 0px; vertical-align: baseline;"></div></section></div></div></article></div></div></div></div> <aside id="sidebar" itemscope="itemscope" itemtype="https://schema.org/WPSideBar" style="border: 0px; box-sizing: border-box; float: none; font: inherit; margin: 0px auto; padding: 0px 10px; vertical-align: baseline; width: 360px;"><div class="sidebar section" id="sidebar_top" name="Sidebar" style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><div class="widget HTML" data-version="1" id="HTML5" style="background: rgb(255, 255, 255); border: 0px; box-shadow: none; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><div class="widget-content" style="border: 0px; box-sizing: border-box; font: inherit; margin: auto; overflow: hidden; padding: 0px; vertical-align: baseline;"><ins class="adsbygoogle" data-ad-client="ca-pub-1619167471144570" data-ad-format="auto" data-ad-slot="3187327447" data-adsbygoogle-status="done" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; display: block; font: inherit; height: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><ins id="aswift_5_expand" style="background: transparent; border: none; box-sizing: border-box; display: inline-table; font: inherit; height: 0px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 340px;"><ins id="aswift_5_anchor" style="background: transparent; border: none; box-sizing: border-box; display: block; font: inherit; height: 0px; margin: 0px; opacity: 0; overflow: hidden; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 340px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="280" hspace="0" id="aswift_5" marginheight="0" marginwidth="0" name="aswift_5" scrolling="no" style="border-style: initial; border-width: 0px; box-sizing: border-box; font: inherit; height: 280px; left: 0px; margin: 0px; max-width: 100%; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 340px;" vspace="0" width="340"></iframe></ins></ins></ins></div></div></div></aside></div></div></div><iframe id="st_gdpr_iframe" src="https://c.sharethis.mgr.consensu.org/v1.0/cmp/portal.html" style="border-style: initial; border-width: 0px; box-sizing: border-box; font-family: "Google Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: 0px; left: -5000px; line-height: inherit; margin: 0px; max-width: 100%; padding: 0px; position: absolute; vertical-align: baseline; width: 0px;"></iframe> <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" data-anchor-shown="true" data-anchor-status="displayed" style="background: rgb(84, 110, 122) !important; border: 0px; box-sizing: border-box; display: block; font-family: "Google Sans", sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; height: 61px; left: 0px; line-height: inherit; margin: 0px; opacity: 1; overflow: visible !important; padding: 0px; position: fixed; top: 0px; vertical-align: baseline; width: 360px; z-index: 2147483647;"><ins id="aswift_6_expand" style="background: transparent; border: none; box-sizing: border-box; display: inline-table; font: inherit; height: 56px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 360px;"><ins id="aswift_6_anchor" style="background: transparent; border: none; box-sizing: border-box; display: block; font: inherit; height: 56px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 360px;"><iframe allowfullscreen="true" allowtransparency="true" frameborder="0" height="56" hspace="0" id="aswift_6" marginheight="0" marginwidth="0" name="aswift_6" scrolling="no" style="border-style: initial; border-width: 0px; box-sizing: border-box; font: inherit; height: 56px; left: 0px; margin: 0px; max-width: 100%; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 360px;" vspace="0" width="360"><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" data-ad-client="ca-pub-8374748405632371" data-ad-format="auto" data-ad-slot="5919532590" data-full-width-responsive="true" style="display: block;"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></iframe></ins></ins></ins></div>

Dari beberapa tutorial saya share di artikel dengan tampilan yang bervariasi. Pada tutorial ini saya akan membahas mengenai widget contact f...

Membuat Lightbox Widget Contact Form Blogger

Mengganti Fungsi Widget Label Menjadi Dropdown