Sunday 7 April 2013

Cara Membuat Widget Thesis Email Subscription Pada Blogger

,

Jejaring sosial merupakan alat yang paling ampuh untuk membangun traffic ke blog anda selain dari mesin pencari google tentunya. Maka dari itu, memanfaatkan jejaring sosial untuk membangun traffic ke blog kamu merupakan sebuah kewajiban yang harus kamu lakukan.

Sekarang yang menjadi pertanyaan adalah bagaimana caranya membangun lalu lintas blog dari jejaring sosial tersebut?

Salah satu cara yang bisa kamu lakukan adalah membangun pelanggan blog kamu melalui jejaring sosial dengan menggunakan widget email subscription. Selain bisa berlangganan lewat email, pembaca blog kamu bisa juga untuk berlangganan postingan blog kamu melalui facebook, twitter, ataupun melalui google+.



Memperkenalkan widget thesis email subscription. Widget ini sangat keren sekali dan cocok untuk blog anda yang ingin tampil profesional. Dibawah ini merupakan pratinjau dari thesis email subscription.



Cara Membuat Widget Thesis Email Subscription Pada Blogger

Step 1 : Login Blogger >> Add Gadget >> HTML/Javascript

Step 2 : Copy dan paste kode di bawah ini di kotak yang sudah keluar


<!-- Bloggiks Email Subscription Multi Widget Thesis Style-->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook FanPage" href="YOUR FACEBOOK PROFILE LINK">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="YOUR TWITTER  PROFILE LINK">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="YOUR GOOGLE+ PROFILE LINK">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/FEEDBURNER ID">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/YOUR YOUTUBE CHANNEL USERNAME">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Join this Awesome Blogger Community and receive free email updates!
<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=bloggiks', '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="bloggiks" name="uri">
<input type="hidden" name="loc" value="en_US">
<input class="button" type="submit" value="Subscibe">
<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://bloggiks.com/search/label/widgets">widgets</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/AVvXsEi1tpPBHVyrOua4n5vLOtEHy5QXUXELovcaclzbyuo1MCO6e6YgIDR-3YL1l49NVFsvxx9GhjbLscmWAcQZYLvQv_GlsVs3D46z1t8GXQbAwjHkPcq0cBg2G-UXwX8e_1nnVneeFNc0lOg/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>
Step 3 : Ganti kode yang saya beri warna merah dengan id jejaring sosialmu (Url).
Catatan : Kamu juga bisa merubah kode yang saya beri warna hijau sesuai dengan kehendakmu.
Step 4 : Simpan !


Sekarang kamu sudah menyelesaikan membuat thesis email subscription widget, saya berharap dengan menggunakan template tersebut, blog kamu bisa ramai pengunjung.

0 komentar to “Cara Membuat Widget Thesis Email Subscription Pada Blogger”

Post a Comment

 
Web Analytics