Share posting Go Blog Go kali ini akan berbagi bagaimana kalau Widget Social Sharing jadi satu dengan Subscribe RSS, sangat menarik bukan selain meminimalis tempat juga jadi lebih simple penampilan-nya. Gimana tertarik Mojang dan Bujang, silahkan ikuti cara-nya berikut ini :
Login ke Blogger
Dashboard -> Klik Monetize -> Pilih Layout-> Klik Add Gadget
Jangan lupa Back-Up template Anda
Masukkan Kode dibawah ini dengan cara Copy Paste
Yang Utama ganti Kode Username Profiles Google+, Facebook, Twitter, Pinterest, Feedburner dengan Username Anda
<style type='text/css'>
#socialnetworking {
border: 1px solid #ebebeb;
width: 280px;
}
.fb-likebox {
padding: 10px 10px 0 10px;
border-bottom: 1px solid #ebebeb;
}
.googleplus {
background: #eef9fd;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 280px;
}
#widgetbox {
background: #EBEBEB;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;
}
#widgetbox .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration: none;
}
.g-plusone {
float: left;
}
.twitter {
background: #eef9fd;
border-top: 1px solid #fff;
padding: 10px;
}
.fb {
background: #eef9fd;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.fb span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 280px;
}
.pterest {
background: #EFF5FB;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
border-top: 1px solid #ddd;
}
#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
background: #EFF8FB;
width: 260px;
}
#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
}
</style>
<div id="socialnetworking">
<!-- Begin Widget -->
<div class="fb-likebox">
<!-- Facebook -->
<center>
<a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/No.ID_Google_Plus_Anda" target="_blank">
<img src="http://2.bp.blogspot.com/-TtecU81mxEA/TrHxZowPn9I/AAAAAAAABI8/UGSwDMYkt-c/s1600/Button G.png" /></a>
<a style="margin-right: 10px;" href="http://www.facebook.com/User_Name_Facebook_Anda" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHh6o1Mvt9OQIhSNwUPIDj7Fp1iL-dD60gP22dR2FwbbFhQpf3RjQeLjKr9ry0l6W7-wqjQEb8D9L4qFYEkQDpjpzJfRZX5cgvLH04WA-UsEEAlQ1YAh3DLwOcpMHe89GO3YZEIdGswaCU/s320/1oaxc4.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://feeds2.feedburner.com/User_Name_Feedburner_Anda" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFk8KpAyUHEe0ExZR3B85D-kEkEIx3er85QmjM_Oajz1CyWvVfi7zk4audl1WM-IVQxF0rPuNHvVNc8HGk46LCHEIvmK0W3gh4od9kXA1SXGKvt3qv_WUbXvXJthPgpN0tcIcQ-P9Npbq0/s1600/2d7itk9.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=User_Name_Feedburner_Anda&loc=en_US" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycCFJGLSicjpCld6VC6gnapfe4y_k7zFlLHjkUsNEI7XPtolyFjskUPuBLjSnu9Jvan25T73dGiwF6HlGL42sR9dPSOsRu0lk5U-vYUmI74apbbofR4NuXJ4bXL863I1d2SjFU7l55A3j/s320/j5krgl.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://twitter.com/#!/User_Name_Twitter_Anda" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9MpClTdYyMyt2ryO9g2EtphYmfredq06pP5b8g0-iWfoNxZycCzb1dEKtBaHYT_ozZd181TTgZ3BFs1xLT32ZNUH8l2k2sDzIsG1kXPZqbUfT2Hhyphenhyphen7ob-J8JKd-rcnb_fKpMF9hQ2sRH/s1600/3312cmr.jpg.png" /></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
gapi.plusone.render
(
'plusone-div',
{
"size": "medium",
"count": "true"
}
);
</script>
</div>
<div class="fb">
<!-- Twitter -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FUser_Name_Facebook_Anda&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=User_Name_Twitter_Anda&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="pterest">
<a href="http://pinterest.com/User_Name_Pinterest_Anda /"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a>
</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://feedburner.google.com/fb/a/mailverify?uri= User_Name_Feedburner_Anda ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 140px; 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="User_Name_Feedburner_Anda " name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="subscribe" name="commit" type="submit" value="Subscribe"/>
</form>
</div>
</div>
<div id="widgetbox" style="background: #FBEFEF;border-top: 1px solid #ddd;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://bit.ly/KhaGzy" target="_blank">Blogger Widgets »</a></span>
</div>
<!-- End Widget -->
</div>
Save
Semoga share posting ini bisa menambah koleksi Widget Mojang dan Bujang. Go Blog Go...!!! Amiin
Wassalam,
0 comments:
Post a Comment
Catatan :
1.Untuk menyisipkan Kode, gunakan Tag <i rel="code">Kode Anda Di-Sini...</i>
2.Untuk menyisipkan Kode Panjang, gunakan Tag <i rel="pre">Kode Anda Di-Sini...</i>
3.Untuk menyisipkan Kode Gambar, gunakan Tag <i rel="image">URL Gambar Anda Di-Sini...</i>
4.Untuk menyisipkan Catatan, gunakan Tag <b rel="quote">Catatan Anda Di-Sini...</i>
NB: Sebelum menyisipkan Kode, konversi terlebih dulu Kode-nya agar bisa tampil di Kolom Komentar