Master Selo - Baiklah sobat blogger semua kali ini saya akan memulai dari nol lagi untuk memajukkan situs blog saya yan gterbaru ini semoga sobat semua dapet membantu saya ya dengan cara selalu berkunjung ke blog saya ini untuk mencari informasi yang sobat perlukan berkaitan dengan dunia teknologi dan dunia blogger.
Nahhh sobat pada kesempatan kali ini saya akan membahas tentang perihal blogger sobat dari sobat semua pastinya sudah tahu atau sudah melihat tutorial ini dimana sebelumnya pernah saya posting di sebuah situs pribadi saa dahulu dan sekarang itu bukan situs saya lagi, yaitu dengan bagaimana cara membuat "SUBSCRIBE BOX" dengan 2 STYLE berbeda di blogger, nahh bagi sobat semua yang penasaran bisa nihh mengikuti tutorial saya di bawah ini dengan seksama ya sobat.
caranya mudah banget kok sobat kita hanya perlu memasukkan beberapa sintax koding html dan css ke dalam template blog kita satu persatu sesuai dengan prosedur dan harus dengan teliti agar tidak ada kejanggalan tertentu atau biasa di sebut dengan kata lain yaitu error.
Disini saya akan berbagi tips memasang widget subscribe box dengan dua style berbeda yaitu yang pertama subscribe box berwarna hitam atau biasa di sebut dengan Dark-Background itu dalam bahasa inggris ya sobat jika ke dalam bahasa indonesia widget subscribe box berwarna background hitam dan style widget subscribe box yang kedua yaitu berwarna hijau sobat yang biasa di sebut oleh orang inggris yaitu colorful widget with name box yang artinya ke dalam bahasa indonesia yaitu widget berwarna hehehehehhe kalau itu menurut saya si saya juga tidak tahu bagaimana menurut sobat blogger semua tergantung pendapat dan pemahaman bahasa inggris kita masing-masing ya heheheheheh.
Oke sobat tanpat berbasa-basi lagi langsung saja ke TKP ya terlalu banyak berbasa-basi terkadang membosankan juga sobat hihihihihih
1. Dark-Backdround With Media Sosia Icons
1. Masuk ke situs blog anda masing-masing
2. Pilih Menu Template / Edit Template / setelah itu masukkan kode HTML di bawah ini tepat di bawah kode : <head>
HTML KODE
<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. Jika sudah masukkan lagi kode CSS di bawah ini tepat di atas kode : </style>
CSS KODE
#subscribebox{background:#576269;padding:20px;font-family:'PT 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:#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. Setelah itu simpan Template yang baru kita edit tadi.
5. Jika sudah pilih Menu Tataletak / Add Gadget / Pilih HTML Java Script / masukkan kode HTML di bawah ini ke dalam HTML Java Script yang baru sobat buat tadi.
HTML KODE
<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.masterselo.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>Keterangan :
✔ Ganti Kode [#] dengan kode link URL situs media sosial anda masing-masing.
✔ Ganti Tulisan [YOUR-USER-NAME] dengan username feedburner anda.
2. Colorfull Widget With Name Box
1. Pilih Menu Template / Edit Template / masukkan kode CSS di bawah ini tepat di atas kode : </style>
CSS KODE
#subscribe-box {background-color:#0CC388;font-family: 'PT 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: 'PT 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: 8px2. Setelah itu simpan template yang barusan di edit tadi.
3. Jika sudah selesai masuk ke Menu Tataletak / Add Gadget / Pilih HTML Java Script / Masukkan kode HTML di bawah ini ke dalam widget HTML Java Script yang baru kita buat tadi setelah itu simpan widget dan lihat hasilnya.
HTML KODE
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
<div class="creadit">
<a href="http://www.masterselo.com/" rel="dofollow" target="_blank"> Get This Widget</a></div> Keterangan :
✔ Ganti Tulisan [YOUR-USER-NAME] dengan username feedburner anda.
Comments
Post a Comment