Kotak Berlangganan pus Link Media Sosial di Sidebar Blog - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Kotak Berlangganan pus Link Media Sosial di Sidebar Blog, saya telah menyediakan Tutorial Blog lengkap seperti Kotak Berlangganan pus Link Media Sosial di Sidebar Blog . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

Cara Memasang Kotak Berlangganan pus Link Media Sosial di Sidebar Blog.

KOTAK berlangganan (subscription box) adalah form untuk  pembaca memasukkan email mereka agar mendapatkan artikel/posting terbaru langsung di inbox email mereka.

Sangat banyak gaya atau desain tampilan kotak berlangganan untuk blogger, salah satunya yang keren "hitam berwibawa" seperti ini:

Cara Memasangnya

1. Template > Edit HTML

2. Pasang kode berikut ini di atas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

3. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,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:#F35D5C;-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:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

4. Save Template. Simpan template!

5. Klik Layout > Add a Gadget > pilih HTML/JavasCript

6. Masukkan kode berikut ini:

<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

Catatan: 

Ganti # dengan link media sosial Anda dan YOUR-USER-NAME dengan kepunyaan Anda.

7. Save!

Beres.

Demikian Kotak Berlangganan pus Link Media Sosial di Sidebar Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber

Demikianlah Artikel Kotak Berlangganan pus Link Media Sosial di Sidebar Blog

Sekian Tutorial dari Blogrenanda Kotak Berlangganan pus Link Media Sosial di Sidebar Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Kotak Berlangganan pus Link Media Sosial di Sidebar Blog

Anda sedang membaca artikel Kotak Berlangganan pus Link Media Sosial di Sidebar Blog dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2017/01/kotak-berlangganan-pus-link-media.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: