, saya akan menulis widget yang kedua. Widget kali ini disertai dengan tombol share & tooltip yang live! Keren dah!. Sebenarnya, widget ini merupakan Widget email subscribtion dengan Style Thesis.
Selain itu, juga bisa digunakan untuk blog Wordpress. Namun kali ini, saya akan membahas cara pemasangan widget ini pada blog Blogspot. Oleh karena itu, mohon maaf yang sebesar-besarnya pada pengguna blog Wordpress!.
Cara peletakan script widgetnya gampang. Tinggal copas kode script berikut ke Tata letak, lalu klik html/JavaScript. Lalu klik Save & Liat hasilnya!.
<!-INFOIKI Thesis Email Subscription Widget->
<div
id="sidebars">
<ul
class="sidebar_list">
<li
id="social-profiles">
<ul>
<li>
<a
class="social facebook" rel="nofollow"
target="_blank" title="Like On Facebook" href="https://www.facebook.com/Yustin.annisa">Facebook</a>
</li>
<li>
<a
class="social twitter" rel="nofollow"
target="_blank" title="Follow on Twiter" href="https://twitter.com/yustin_annisa" ">Twitter</a>
</li>
<li>
<a
class="social googleplus" rel="nofollow"
target="_blank" title="GooglePlus" href="https://plus.google.com/u/0/106217413057730068740">GooglePlus</a>
</li>
<li>
<a
class="social rss" rel="nofollow" target="_blank"
title="RSS" href="http://feeds.feedburner.com/Infoiki">Rss</a>
</li>
<li>
<a
class="social youtube" rel="nofollow"
target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/yustinannisa">Youtube</a>
</li>
</ul>
</li>
<li
id="sidebar-social">
<p
id="email-notice">
Receive Quality
Tutorials Straight In Your Inbox by Submitting Your Email ID Below.We Respect
Your Privacy.
<span></span>
</p>
<div
id="email-form">
<h6>Get Email
Updates</h6>
<form
class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post"
target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed username', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<input
class="input-text" type="text" name="email"
onblur="if (this.value == '') {this.value = 'Enter Your Email
Address';}" onfocus="if (this.value == 'Enter Your Email Address')
{this.value = '';}" value="Enter Your Email Address">
<input
type="hidden" value="Your Feed Username" name="uri">
<input
type="hidden" name="loc" value="en_US">
<input
class="button" type="submit" value="Subscribe me!">
<p>
We never encourage
SPAM
<br>
You can Unsubscribe
any time
</p>
</form>
<span
style=" line-height:0px; font-size:8px; font-weight:bold;
margin-left:270px;
">
<a
style="color:#000000;" href="http://bit.ly/RoSETF">Widget</a>
</span>
</div>
</li>
</ul>
</div>
<style>
#sidebars {
border: 0 none;
float:
right;
padding: 0 15px;
width:
310px;
}
#email-notice {
background: none repeat scroll 0 0 #DF6001;
color:
#FFFFFF;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
padding: 15px 20px;
position: relative;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 10px solid #DF6001;
bottom: -10px;
height: 0;
position: absolute;
right:
40px;
width:
0;
}
#email-form {
background: none repeat scroll 0 0 padding-box #313131;
border-bottom: 5px solid #202020;
border-radius: 2px 2px 2px 2px;
text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
color:
#FFFFFF;
font-family: arial;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
padding: 15px 20px 0;
text-transform: none;
}
#email-form form {
color:
#FFFFFF;
margin: 0;
padding: 20px 18px;
}
#email-form
input.input-text {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #222222;
margin: 0 0 10px;
padding: 8px;
width:
94%;
}
#email-form .button
{
background: none repeat scroll 0 0 #FFFFFF;
float:
right;
margin: 0 0 0 10px;
}
#email-form p {
color:
#CCCCCC;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#sidebar-social {
float:
left;
font-size: 12px;
margin: 0 0 15px;
width:
100%;
}
ul.sidebar_list {
list-style: none outside none;
}
li.widget ul {
list-style: none outside none;
}
#social-profiles {
float:
left;
}
#social-profiles ul
{
float:
left;
list-style: none outside none;
margin: 0 5px 20px;
}
#social-profiles ul
li {
float:
left;
}
#social-profiles ul
li a {
display: block;
float:
left;
height: 32px;
margin: 0 15px;
text-indent: -999em;
width:
32px;
}
#social-profiles
a.social {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLqOsqx0aMTPbyiELoBy-bDigSu8gIrBpMdL9YHmS8k3TkgeWribjyobPJQj0ry3CLtWXOn_FQUedJYMKGFJdI9OwJiHYxo2aayVPrAhcY1KxiKy9IyEdETgNnal2egy0I1q58a0zS7_A/s1600/social.png")
no-repeat scroll 0 0 transparent;
}
#social-profiles
a.facebook {
background-position: -79px 0;
height: 32px;
margin: 0 15px 0 5px;
width:
32px;
}
#social-profiles
a.facebook:hover {
background-position: -79px -74px;
height: 32px;
width:
32px;
}
#social-profiles
a.twitter {
background-position: -5px -111px;
height: 32px;
width:
32px;
}
#social-profiles
a.twitter:hover {
background-position: -42px 0;
height: 32px;
width:
32px;
}
#social-profiles
a.youtube {
background-position: -42px -37px;
height: 32px;
width:
32px;
}
#social-profiles
a.youtube:hover {
background-position: -5px -37px;
height: 32px;
width:
32px;
}
#social-profiles
a.rss {
background-position: -42px -74px;
height: 32px;
width:
32px;
}
#social-profiles
a.rss:hover {
background-position: -79px -37px;
height: 32px;
width:
32px;
}
#social-profiles
a.googleplus {
background-position: -5px 0;
height: 32px;
width:
32px;
}
#social-profiles
a.googleplus:hover {
background-position: -5px -74px;
height: 32px;
width:
32px;
}
* {
margin: 0;
padding: 0;
}
.custom .sidebar
ul.sidebar_list {
padding: 15px 0;
}
</style>
