Bagi seorang Blogger kekaring Sosial Media merupakan menjadi tempat promosi blognya yang baik apalagi jika mendapat respon yang baik maka kita merasa senang pastinya bahwa blog kita di kenal di berbagai orang.
Jejaring sosial yang biasa nya di kenal oleh orang ter masuknya Facebook n Twitter yang sudah dikenal oleh semua orang.
Nah pada kesempatan kali ini ane mau nge share sebuah Widget tombol
Follow Google Plus, Twitter,
Like Fans Page Facebook.
Subscribe Email
RSS Feed
Dalam Satu kotak nah silahkan di simak cara pembuatanya ya......
1. Login blogger sobat.
2. Masuk ke menu Setting Blog > Tata Letak.
Sekarang sobat milih letak Widget yang mau di buat taro mana, Sebelah kiri,kanan,atas,bawah atau di mana deh.
3. Setelah tadi memelih letaknya seakrang klik "Add Gadget" pilih yang " Html / Java Script "
4. Silahkan Copi paste kode di bawah ini di Widget Html/JavaScript yang sobat pilih tadi.
<style>
/* www.aji-apps.blogspot.com All in One Social Widget */
#Pb-allinonesocial-widget {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 13px 0 10px;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-bottom: 1px solid #D8E6EB;
margin:0px;
height:45px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.gplus {
background: #fff;
padding: 0px;
border: 0px solid #C7DBE2;
margin-bottom:-13px;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#allinonesocial {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#allinonesocial .author-credit {}
#allinonesocial .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-widget {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-widget ul {list-style: none outside none; padding-left: 4px;}
#other-social-widget .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-widget .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-widget .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtx1WtMRUkfjqOBR7HUzy7o0vqg3Pwv5sDBM5Zg09wdDQKntKkYgeJPiyvHnt2PN4CS93v1E5l_l8ClAMrLJ6vFMTU4omlRzy3YDe__e57Z_Ixe7rmnflT9wjvDtHwG6eSllJ2hXxnzPI/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-widget .other-follow li.my-rss a, #other-social-widget .other-follow li.my-twitter a, #other-social-widget .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-widget .other-follow li.my-rss a:hover, #other-social-widget .other-follow li.my-twitter a:hover, #other-social-widget .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-widget .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtfTFcvbiE6vEl6y3mIzGnmKGjwYFjkRs8ds3mZOsIYRtH_iASTqoibxE2IE948K50cqgtcZ_E9Ka6zU6nLoSHLZpw8aFo8QzIdbpHKOYJRG52t3ankYodvY1DN1UMkAI8KVK7fDXnwqM/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-widget .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdNHoXyIMjP_P4FONi4OQ64U9mOmBK-DG_quQiDZQKCxp4nGpGLuzT5gZZ1JxfXZfi6t1atnynn5oAIqpFRY9Kgjfuwt40YgTkjACmhLTgNHedtv4xDtjW-B3Kx-Ud662c8tMOcYmR7A/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
/* www.aji-apps.blogspot.com.com All in One Social Widget */
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<!--begin of social widget--><div style="margin-bottom:10px;"><div id="Pb-allinonesocial-widget" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/105724044394788112406" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/105724044394788112406" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/Aji-Apps-Blogspot/161961597331066&send=false&layout=standard&width=200&show_faces=false&action=like&colorscheme=light&font=arial&height=100" scrolling="no" frameborder="0" style="border:none; overflow:hidden;"></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter -->
<iframe src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=AJICahPugung&show_count=& show_screen_name=&text_color=" title="" style="width: 300px; height: 20px;" class="twitter-follow-button" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feeds.feedburner.com/AjiAppsDownloadAllFilesNMySharingLikeis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="AjiApps" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-widget"> <!-- Other Social widget --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/AjiAppsDownloadAllFilesNMySharingLikeis" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/AJICahPugung2" target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/105724044394788112406" target="_blank">Google Plus</a> </li> </ul> </div> <div id="allinonesocial" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.aji-apps.blogspot.com/" target="_blank" >All in One Social Widget »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->
=========================================================
5. Setelah sudah menambahkan kode nya ada beberapa yang harus di ganti di antaranya :
a.) Ganti https://plus.google.com/105724044394788112406 dengan alamat Profil Google Plus sobat
b.) Ganti
https://www.facebook.com/pages/Aji-Apps-Blogspot/161961597331066
dengan alamat URL Fans Page Facebook sobat.
c. )Ganti AJICahPugung sddengan ID alamat akhiran akun Twitter sobat.
Contoh nya jika alamat akun Twitter : www.twitter.com/CahGemblung .
Maka yang di ambil kata CahGemblung saja ya.....
d.) Ganti http://feeds.feedburner.com/AjiAppsDownloadAllFilesNMySharingLikeis dengan aalamat FeedBurner Sobat.
e.) Ganti https://twitter.com/AJICahPugung2 dengan alamat URL Akun Twitter sobat.
Untuk lebih jelas semua tampilan kodenya bisa lihat Di Sini
Nah postingan kali ini bisa membantu sobat yang mau masang Widget Like n Follow Sosial Media di Blog. Jika masih bingung silahkan komen ya..... :)
EmoticonEmoticon