Halo sahabat CMB. Ayo ayo pada Membuat Widget Media Sosial di blognya. Kenapa eh kenapa karena widget ini akan sangat sangat membantu Blog Anda agar bisa diketahui banyak oran. Mempermudah pengujung Anda untuk merekomendasikan atau mengikuti blog Anda. Nantinya blog Anda akan terkenal juga bukan.
Tapi ini lihat demonya dulu :
1. Log in blogger, buka dasbor dan pilih menu tata letak. Akan tampil menu sebagai berikut :
Di sini Anda klik tambahkan gadget. Terserah dimana nantinya Anda juga bisa memindahkannya dengan drag.
2. Selanjutnya Akan muncul menu sebagai berikut :
Setelah menu di atas kebuka pilih HTML / Java Script.
3. Lalu akan Muncul menu sebagai berikut :
Disini Anda masukkan kode di bawah ini pada kolom konten :
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbaur8Xu1AVQ8o_dHo-9Plcs6BvqxMKWuTvEJLIkevlVMKinN1C4611bni_6r9K80irWgi1eDzll1HLS5RdXGWogEolluQB3W6YjB1HAK5W0kyKjTPXMMwxGtorYZ817RxEdH4G6RJEb6f/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 name="uri" value="ID FEED ANDA" type="hidden"><input name="loc" value="en_US" type="hidden"><input name="email" id="newsletter-text" maxlength="100" style="width:160px !important" value="" class="" type="text"><button type="submit" id="newsletter-button">Subscribe</button></form></div><!-- End newsletter --><div class="rsssubscribelink"><a target="_blank" title="Opens new window" href="http://feeds.feedburner.com/wpinsite" class="rssicon external"></a> <a title="Opens new window" target="_blank" class="rsslink external" href="http://feeds.feedburner.com/ID FEED 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 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 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 FACE BOOK 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 + 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 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 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://cara-membuat-webblog.blogspot.com/2013/05/cara-membuat-widget-full-media-sosial.html
">Get this widget</a></div>
</div>
Ingat Ganti kode warna hijau dengan apa yang Anda punya
4. Selesai deh. sekarang Anda klik Simpan dan lihat blog Anda
Baca juga ini ya, penting hlo :
0 Response to "Cara Membuat Widget Full Media Sosial"
Post a Comment