Cara Membuat Stay Connected Widget - Widget dengan deretan tombol followersocial bookmark, feed burner serta tombol untuk berlangganan via email ini biasadisebut dengan widget stay connected. Kenapa disebut seperti itu ? Ya karenapada bagian atas widget ada tulisan StayConnected, gitu aja koq repot sih hi hi. Soalnya saya sendiri bingung maumendefinisikannya dalam bahasa Indonesia seperti apa. Widget stay connecteddapat diletakkan pada sidebar, kalau bisa paling atas supaya mudah dilihat.Biasanya widget berlangganan via feed burner dan berlangganan via email bawaanblogger dibuat terpisah dengan widget social bookmark. Nah pada widgetstay connected ini semuanya dikumpulkan dalam “1 rumah” sehingga lebihmenghemat tempat di sidebar.
Cara membuat widget stay connected :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Addgadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste pada gadget.
<style>
#news-letter{clear:both;padding-top:10px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAm5OfyVR4d4_cmw_HXq30Zee0rdnP68HCihrEyqd94XTXOYnmAPeWxDmRdVSfP1un7YBC5k9gyKq5POF13neNIC7ljt5HH884WYTVfI4aSyv3FYPlV2auz-YGX4jhqjsfe9pX9tZ22m0/s800/mail-box.png)no-repeat;}
.news-headline{position:relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}
</style>
<divclass="news-headline" color:#333;>
Read latestheadlines in your favorite news reader
</div>
<center>
<tableborder="0">
<tr>
<tdstyle="padding-right:4px;">
<ahref="http://twitter.com/TWITTER-NAME"target="_blank" title="Follow Me OnTwitter">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeyj1q3XF47j9DOxEgl4Xsb_2x-7pa_1nFJmeWYx3lqUZ6mny2XbH5Ec1P2B_izySPOrdPstJfh_YoWDfLBD0QqNLI2BTkOj1QhoheOWrGMPySeiaulcYtroevzyh805Kzxm5NCbkZb8/s800/twitt.png"/></a>
</td>
<tdstyle="padding-right:4px;">
<ahref="http://feeds.feedburner.com/FEEDNAME"target="_blank" title="Subscribe ViaRSS">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjktKexik0e3dtoqwARKz_xm0JcdXQoYD9h3ZpF72ydyskc5pl19NzKEkC_faUTyzC9WWcZJYfjRY5_MIi16Ii-EodKjrQ1WFf6Kj_d7t-TnWlquCM_FJAe-9mfUAwVsoDkvpYPY7x8IyA/s800/Feed-icon_128.png"/></a>
</td>
<tdstyle="padding-right:4px;">
<ahref="FACEBOOK-URL"target="_blank" title="Find Us OnFacebook">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpXNWrDd2dr_Pv7CMa-Jx_9eS_waQDmVhcyDexe75M8joMykPMJsmA9d2k3zsCQ1cNo3VEqbSQtgcgu3PaBws8vurAAwl2t_X3bS8vVPBpP09fgELFXVVsLXqXKzh0DikBYg0QBzD-W9c/s800/Facebook_icon.png"/></a>
</td>
<tdstyle="padding-right:4px;">
<ahref="GOOGLE-PLUS-URL"target="_blank" title="Add me onGoogle+">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVBNMH_xcTAbLg3tJfOeSgZWJy8n5yR7xz9sHPJ4eTS94KULAivAUihaVJIWQj39zqeT1IAdxOwF3FmifYdisjpMLLbTBTV04q_Yj4yRnG9YzVhE49YJz55ftQEliA_EUb3z_DVB6zCc/s800/googleplusicon.png"/></a>
</td>
<tdstyle="padding-right:4px;">
<ahref="http://www.stumbleupon.com/share?url=HOMEPAGE-URL"target="_blank" title="StumbleUpon">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI9E_PetDKZaV6vkMlfjYhrJ8G0ak23jbrWU1UTChVnVEUVd6z4gq_FjGV2C1WpsQFlCa01GFoWkhR-2_iswrTk8Xou7Gc1j49MAH2kNtWMVGpUl_hj8Ox7n_rmYK6ckyuiDHvsn6heSo/s800/stumbleupon_icon.png"/></a>
</td>
<tdstyle="padding-right:4px;">
<ahref="http://technorati.com/faves?sub=addfavbtn&add=HOMEPAGE-URL"target="_blank" title="Add ToTechnorati">
<imgstyle="width:25px; height:25px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MjnnPF9BLuKnPRzHWMjltLebT9NcoLP7_atQspFudnooj54cdv8HFlLPpwK0OsI8qDx-j3MfBkP-4v5hJsyfnMwMf8PnXjPsHULoB3LYbSpzWXpghZSxx19mP5WjgAfMGCCJRc9U_XE/s800/Technorati-icon.png"/></a>
</td>
<td>
<tdstyle='padding-top:-2px;'>
<ahref="http://feeds.feedburner.com/FEEDNAME"><imgsrc="http://feeds.feedburner.com/~fc/FEEDNAME?bg=000000&fg=FFFFFF&anim=1"height="26" width="88"style="border:0; padding-top:5px" alt="FellowReaders" /></a>
</td>
</td>
</tr>
</table>
</center>
<divid="news-letter">
<spanclass="msg-box"></span>
<b>Signup for our email news letter</b>
<formonsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDNAME', 'popupwindow','scrollbars=yes,width=550,height=520');return true"target="popupwindow" method="post"action="http://feedburner.google.com/fb/a/mailverify">
<p><inputtype="text" valign="middle"name="email" value="Enter your emailaddress" size="25" maxlength="100"onfocus="this.value = '';"style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51,51);" gtbfieldid="2"/>
<inputtype="hidden" value="FEEDNAME"name="uri"/>
<inputtype="hidden" name="loc"value="en_US"/>
<inputtype="submit" value="Sign Up"id="submit"/>
</p>
</form>
</div>
4. Save / Simpan.
Cara mengedit script widget stay connected(kustomisasi) :
1. Ganti FEEDNAME dengan nama/judul feed blog andayang sudah terdaftar pada layanan Feedburner. Kalau anda belum memiliki akun diFeedburner maka mendaftarlah lebih dulu dan supaya mudah diingat, buatlah judulfeed blog anda sama dengan title blog. Misalnya untuk blog ini saya berikannama feednya “ShareWithIrfan”.
2. Ganti TWITTER-NAME dengan nama akun twitteranda.
3. Ganti FACEBOOK-URL dengan alamat fan page atauboleh juga profil Facebook anda.
4. Ganti GOOGLE-PLUS-URL dengan nama akun Google +1anda.
5. Dan yang terakhir, ganti HOMEPAGE-URL denganalamat homepage blog anda. Misalnya http://rayhanzhampiet.blogspot.com/.
OK sobat selamat mencoba membuat widget stay connected ini dan semoga puas dengan hasilnya. Keep in touch for next update.
No comments:
Post a Comment