Magazine Web Design: Membuat Widget Media Sosial Advanced Di Sidebar Blogger

Widget Media Sosial Advanced akan membuat blog Anda terlihat profesional dengan widget berlangganan di siderbar yang akan menghubungkan blog atau website Anda ke semua jejaring sosial populer seperti Facebook, Twitter, Delicious, Pinterest, LinkedIn, StumbleUpon dan juga terdapat Email berlangganan melalui Feedburner.

Wdiget sosial ini sangat direkomendasi buat blog atau website Anda, selain tampilannya yang bagus didukung juga dengan fungsi utamanya yang akan memudahkan Pembaca atau pengunjung blog Anda untuk Follow atau berlangganan untuk Feedburner.

LIVE DEMO

Artikel yang terkait :

Langkah-langkah Membuat Advanced Social Media :

Pilih Tata Letak - Tambahkan gadget

Pilih HTML/Javascript

Kemudian salin kode di bawah ini :

<style>
div#advancedsocialwidget,div#advancedsocialwidget ul,div#advancedsocialwidget ul li,div#advancedsocialwidget ul li img,div#advancedsocialwidget ul li span,#advancedsocialwidget ul li a{background:none;border:none;margin:0;padding:0}
div#advancedsocialwidget{font-family:inherit;background:#fefefe url() repeat-x;width:100%;border:1px solid #ddd!important;font-size:90%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:0 0 10px!important;padding:5px 2px 18px!important}
div#advancedsocialwidget h3{font-size:inherit;text-shadow:0 1px 0 rgba(255,255,255,.5);margin:0!important;padding:2px 0 5px 10px !important}
#newsletter{text-align:center;margin:0 auto 10px!important;padding:0!important}
.newsletter input{-moz-border-radius-topleft:3px!important;-moz-border-radius-topright:0!important;-webkit-border-top-left-radius:3px!important;-webkit-border-top-right-radius:0!important;-moz-border-radius-bottomleft:3px!important;-moz-border-radius-bottomright:0!important;-webkit-border-bottom-left-radius:3px!important;-webkit-border-bottom-right-radius:0!important;-webkit-font-smoothing:antialiased;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;background:0 color-stop(.25,#FFF));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#FFFFFF');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE', EndColorStr='#FFFFFF')";border:1px solid #CCC;color:#666!important;height:18px!important;font-size:11px!important;line-height:18px!important;vertical-align:top;margin:5px 0 0!important;padding:4px!important}
.newsletter input:focus,.newsletter input:active{background:#fafafa}
.newsletter button{vertical-align:top;height:28px!important;line-height:18px!important;text-align:left;width:auto;-moz-border-radius-topright:3px!important;-moz-border-radius-topleft:0!important;-webkit-border-top-right-radius:3px!important;-webkit-border-top-left-radius:0!important;-moz-border-radius-bottomright:3px!important;-moz-border-radius-bottomleft:0!important;-webkit-border-bottom-right-radius:3px!important;-webkit-border-bottom-left-radius:0!important;background:#4b88a0;background-image:0;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;font:bold 11px Arial, Helvetica!important;color:#fff;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);border-color:#75a1b2 #4b88a0 #38677a;border-style:solid;border-width:1px;margin:5px 0 0!important;padding:4px!important}
.newsletter button:hover{background:#75a1b2;background-image:0;cursor:pointer}
.newsletter button:active{background:#89C9E2;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
div#advancedsocialwidget .textwidget img{border:0}
div#advancedsocialwidget .textwidget .tfsubscribelink{text-align:center!important;position:relative;margin:5px auto!important}
div#advancedsocialwidget .textwidget .rssicon{width:21px;height:21px;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -176px 0;margin-bottom:30px;padding:5px 20px 7px 0}
div#advancedsocialwidget .textwidget .rssicon a,div#advancedsocialwidget .textwidget .rssicon a:hover{text-decoration:none}
div#advancedsocialwidget .textwidget .socialfollow{text-align:center;width:245px;margin:10px auto}
div#advancedsocialwidget .textwidget .rsssubscribelink{display:block;text-align:center;margin:0 auto 5px;padding:0}
div#advancedsocialwidget .textwidget a.rsslink{text-decoration:none;font-weight:700!important;font-family:inherit}
div#advancedsocialwidget .textwidget a.rsslink:hover{text-decoration:underline}
div#social_icons{float:left;width:100%;background:#fff;position:relative}
div#social_icons ul{clear:left;float:left;list-style:none;position:relative;left:50%;text-align:center;margin:0!important;padding:0!important}
div#social_icons ul li{display:block;float:left;list-style:none;position:relative;right:50%;margin:0 0 0 1px !important;padding:3px 10px!important}
div#social_icons ul li span{display:block;color:#444!important;font-size:8px;border:none;padding:40px 0 2px!important}
div#social_icons ul li:first-child span{margin-left:-2px}
div#social_icons ul li:last-child span{margin-left:-10px}
div#social_icons .subscribe_delicious a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -76px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_twitter a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat 0 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_stumbleupon a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -101px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_google a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -50px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_facebook a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -25px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_pinterest a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -126px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_linkedin a{width:24px;height:24px;text-decoration:none;display:block;background:url(http://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -151px 0;font-family:inherit;color:inherit}
.tipsy{font-size:10px;opacity:0.8;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);padding:5px}
.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px}
.tipsy-north{background-position:top center}
.tipsy-south{background-position:bottom center}
.tipsy-east{background-position:right center}
.tipsy-west{background-position:left center}
.clear{clear:both}
</style>
<div id="advancedsocialwidget" style="width:270px !important">
<h3>Subscribe for latest updates</h3>
<div class="textwidget">
<div id="newsletter">
<form action="http://feedburner.google.com/fb/a/mailverify" class="newsletter" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpinsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" name="uri" value="ID-FEEDBURNER-ANDA" />
<input type="hidden" name="loc" value="en_US" />
<input name="email" id="newsletter-text" type="text" maxlength="100" style="width:160px !important" value="" class="" /><button type="submit" id="newsletter-button">Subscribe</button>
</form>
</div>
<div class="rsssubscribelink">
<a title="Subscribe to RSS Feed" href="http://feeds.feedburner.com/wpinsite" class="rssicon"></a>  <a class="rsslink" href="http://feeds.feedburner.com/ID-FEEDBURNER-ANDA">Subscribe to RSS Feed</a>
</div>
<div class="socialfollow">
<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; width: 90px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" id="I0_1341141889671" name="I0_1341141889671" src="https://plusone.google.com/_/+1/fastbutton?bsv=pr&url=http%3A%2F%2Fwww.URL-WEBSITE-ANDA.com%2F&size=medium&count=true&origin=http%3A%2F%2Fwww.wpinsite.com&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DVZZqGbh13DI.en_GB.%2Fsv%3D1%2Fam%3D!0Tt3uNrLr0Coc6egjA%2Fd%3D1%2Frs%3DAItRSTNEDiY6r3yiw7M_70-BLTWIV1YUXw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart&id=I0_1341141889671&parent=http%3A%2F%2Fwww.wpinsite.com" title="+1"></iframe></div> <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/ID-FACEBOOK-ANDA&layout=button_count&show_faces=false&width=40&action=like&font=&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowtransparency="true"></iframe> <div class="tfsubscribelink">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1341141886240&id=twitter-widget-12&lang=en&screen_name=ID-TWITTER-ANDA&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 95%; height: 20px; " title="Twitter Follow Button"></iframe>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="clear" style="margin-bottom:5px;"></div>
<div id="social_icons">
<ul>
<li class="subscribe_delicious" style="padding:0 4px !important"><a id="subscribe_delicious" href="http://delicious.com/post?url=http%3A%2F%2Fwww.URL-WEBSITE-ANDA.com&title=WPInsite" class="fade" target="_blank" style="opacity: 1; " original-title="Bookmark WPInsite on Delicious"></a></li>
<li class="subscribe_twitter" style="padding:0 4px !important"><a id="subscribe_twitter" href="http://twitter.com/ID-TWITTER-ANDA" class="fade" target="_blank" style="opacity: 1; " original-title="Follow wpinsite on Twitter"></a></li>
<li class="subscribe_facebook" style="padding:0 4px !important"><a id="subscribe_facebook" href="http://www.facebook.com/ID-FACEBOOK-ANDA" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Facebook Page"></a></li>
<li class="subscribe_google" style="padding:0 4px !important"><a id="subscribe_google" href="https://plus.google.com/u/1/ID-GOOGLE-PLUS-ANDA" class="fade" target="_blank" style="opacity: 1; " original-title="Visit the WPInsite Google+ Page"></a></li>
<li class="subscribe_stumbleupon" style="padding:0 4px !important"><a id="subscribe_stumbleupon" href="http://www.stumbleupon.com/submit?title=WPInsite&url=http%3A%2F%2Fwww.URL-WEBSITE-ANDA.com" class="fade" target="_blank" style="opacity: 1; " original-title="Recommend WPInsite on StumbleUpon"></a></li>
<li class="subscribe_pinterest" style="padding:0 4px !important"><a id="subscribe_pinterest" href="http://www.pinterest.com/ID-PINTEREST-ANDA" class="fade" target="_blank" style="opacity: 1; " original-title="Follow me on Pinterest"></a></li>
<li class="subscribe_linkedin" style="padding:0 4px !important"><a id="subscribe_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwww.URL-WEBSITE-ANDA.com" class="fade" target="_blank" style="opacity: 1; " original-title="Submit post to LinkedIn"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="clear" style="margin-bottom:10px;"></div>
<div style="margin:auto; text-align:center; margin-bottom:0 !important; padding-bottom:0 !important"><a href="
http://satu-delapan.blogspot.com/search/label/Tips%20Blog
">Get this widget</a></div>
</div>

Catatan :

Ganti script warna merah dengan ID-SOSIAL-ANDA

Demikin yang bisa saya berbagi pada kesempatan kali ini, dengan menambahkan widget sosial media advanced ke blogger Anda itu akan lebih baik. Dan akhir kata semoga artikel ini bermanfaat buat Anda semua. salam satu-delapan !

Magazine Web Design

Jumat, 24 Mei 2013

Membuat Widget Media Sosial Advanced Di Sidebar Blogger

Artikel yang terkait :

Langkah-langkah Membuat Advanced Social Media :

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Arsip Blog