Assalaamu'alaikum Wr Wb!
Setiap proyek tentu mencari pelanggan, tanpa terkecuali pada Website atau Blog. Mungkin ini suatu kebanggaan bagi para Webmaster atau para Blogger jika mempunyai banyak pelanggan yang tentunya dari para pengunjung. Anda pun tahu para YouTubers juga mencari pelanggan yang tentunya pelanggan itu ialah para pemirsa pada saluran YouTube mereka.
Pada Website atau Blog, widget ini disebut "Email Subscribe" yang kini akan saya bagikan tutorialnya kepada anda. Tetapi perlu anda ketahui bahwa bagi Website atau Blog yang menonaktifkan fungsi blok tulisan dan klik kanan adalah sama dengan tidak berpengaruh bagi tukang copy paste, tetapi ramai juga para Webmaster atau Blogger yang menonaktifkan fungsi blok tulisan dan klik kanan namun tetap menggunakan widget ini walau dalam gaya yang berbeda, mungkin ada tujuannya dan jika anda seorang Webmaster atau Blogger sejati tentu tahu apa tujuannya.
Kembali ke topik pembahasan, perlu anda ketahui bahwa widget ini sangatlah ringan karena ringan adalah pertimbangan para Webmaster atau para Blogger.
Jika anda ingin menerapkan widget ini tentunya anda harus mempunyai "FeedBurner" yang disediakan oleh Google, ini tentunya khusus bagi para Blogger yang bermitra dengan Google yang menggunakan platform Blogger yang disediakan oleh Google. Inilah kelebihan bermitra dengan Google.
Widget ini lengkap dengan ikon sosial. Anda bebas memilih salah satu diantara dua gaya widget ini sesuai dengan selera anda, yang terpenting adalah anda harus mengisi dengan data anda supaya widget ini berfungsi untuk anda dan boleh anda ubah gaya dan warnanya sesuai dengan selera atau ciri khas anda.
Mungkin ada baiknya anda melihat dahulu hasil widget ini sebelum anda mengambil tutorial ini.
Jika anda menyukainya, mari ke tutorial⇨
1. Letakkan Script CSS berikut dibawah / selepas tag <head>, tetapi jika sudah ada pada template blog anda maka abaikan saja⇩
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>2. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin> ⇩
/***********************************************************************
Email Subscription Widget With Social Icons By www.BloggerAutodidact.com
***********************************************************************/
#subscribebox{background:#576269;padding:20px;font-family:'Open Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#006600;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#009900}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
#subscribe-box {background-color:#009900;font-family: 'Open Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'Open Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px3. Tambahkan HTML berikut ke dalam kotak HTML / JavaScript pada Tambah Widget⇩
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://www.bloggerautodidact.com" rel="dofollow" target="_blank"> Get This Widget</a></div>Catatan: Ganti semua warna biru yaitu tanda # dengan link media sosial anda, dan ganti "YOUR-USER-NAME" dengan username FeedBurner anda
Alhamdulillaah, tutorial sudah siap.
Note
Jikalau ada pertanyaan, silakan anda bertanya kepada Admin melalui komen!Terima Kasih.
Share
Silakan anda kongsikan artikel ini kepada rakan-rakan anda di media sosial, supaya mereka juga boleh mengambil manfaat daripada artikel ini!Insyaa Allaah, semoga artikel saya dapat membantu rakan-rakan!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!
Belajar Blog Secara Autodidact
Silakan Anda Komen Dengan Budi Bahasa Yang Sopan Dan Arif! ConversionConversion EmoticonEmoticon