capoenk 09

Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blogspot:
1. Login ke Dasbor blogspot.
2. Pilih Rancangan
3. Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.
4. Kemudian Pilih HTML/JavaScript
5 Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya

<center><style type=”text/css”>
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”>
</script>
<script src=”http://theplick.googlecode.com/files/newsticker-plick.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
var speed = 1000;
var pause = 2500;
$ (document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id=”rp_plus_img”><script>
var numposts = 20;
var numchars = 0;
</script> <script src=”http://capoenk-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt”>
</script> </ul>
</center>

6. Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.
7. Simpan dan Lihat hasilnya.

Cara Membuat Floating Social Media di Sisi Blog

1. Login ke Blogger.

2. Pilih Template.

3. Pilih Edit HTML.

4. Centang box 'Expand Template Widget'.

5. Cari kode ]]></b:skin> menggunakan CTRL+F, lalu letakkan kode di bawah ini tepat diatasnya.

.social-buttons {

position: fixed;

top: 130px;

width: 45px;

z-index: 9999;

}

.button-left {

left: 0;

}

.button-right {

right: 0;

}

.social-buttons #twitter-btn .social-icon,

.social-buttons #facebook-btn .social-icon,

.social-buttons #google-btn .social-icon,

.social-buttons #rss-btn .social-icon,

.social-buttons #pinterest-btn .social-icon,

.social-buttons #youtube-btn .social-icon {

background-color: #33353B;

background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);

}

.button-left #facebook-btn span {

background-position: right 10px;

}

.button-left #twitter-btn span {

background-position: right -35px;

}

.button-left #google-btn span {

background-position: right -127px;

}

.button-left #rss-btn span {

background-position: right -80px;

}

.button-left #pinterest-btn span {

background-position: 11px -177px;

}

.button-left #youtube-btn span {

background-position: 11px -223px;

}

.button-right #facebook-btn span {

background-position: 12px 10px;

}

.button-right #twitter-btn span {

background-position: 11px -35px;

}

.button-right #google-btn span {

background-position: 10px -127px;

}

.button-right #rss-btn span {

background-position: 11px -80px;

}

.button-right #pinterest-btn span {

background-position: 11px -177px;

}

.button-right #youtube-btn span {

background-position: 11px -223px;

}

.social-buttons #facebook-btn:hover .social-icon {

background-color: #3B5998;

}

.social-buttons #twitter-btn:hover .social-icon {

background-color: #62BDB2;

}

.social-buttons #google-btn:hover .social-icon {

background-color: #DB4A39;

}

.social-buttons #rss-btn:hover .social-icon {

background-color: #FF8B0F;

}

.social-buttons #pinterest-btn:hover .social-icon {

background-color: #D43638;

}

.social-buttons #youtube-btn:hover .social-icon {

background-color: #C4302B;

}

.social-buttons a:hover .social-text {

display: block;

}

.button-left .social-icon {

-moz-transition: background-color 0.4s ease-in 0s;

-webkit-transition: background-color 0.4s ease-in 0s;

background-repeat: no-repeat;

display: block;

float: left;

height: 43px;

margin-bottom: 2px;

width: 43px;

}

.button-left .social-text {

display: none;

float: right;

font-size: 1em;

font-weight: bold;

margin: 11px 40px 11px 0px;

white-space: nowrap;

}

.button-right .social-icon {

-moz-transition: background-color 0.4s ease-in 0s;

-webkit-transition: background-color 0.4s ease-in 0s;

background-repeat: no-repeat;

display: block;

float: right;

height: 43px;

margin-bottom: 2px;

width: 43px;

}

.button-right .social-text {

display: none;

float: left;

font-size: 80%;

font-weight: bold;

margin: 11px 0 11px 40px;

white-space: nowrap;

}

.social-buttons .social-text {

color: #FFFFFF;

}

6. Selanjutnya, cari kode </head>, lalu letakkan kode di bawah ini tepat diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

<script>

$(window).load(function(){

$('.social-buttons .social-icon').mouseenter(function(){

$(this).stop();

$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});

});

$('.social-buttons .social-icon').mouseleave(function(){

$(this).stop();

$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});

});

});

</script>

Keterangan: Jika pada template anda sudah terpasang Javascript seperti kode berwarna biru diatas, dihapus saja.

7. Masih di Edit HTML, cari kode </body>, letakkan kode di bawah ini tepat diatasnya.

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/Facebook ID' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/Twitter ID' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/Google+ ID' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>

<a class='itemsocial' href='http://pinterest.com/Pinterest ID' id='pinterest-btn' target='_blank'><span class='social-icon'>

<span class='social-text'>Follow via Pinterest</span></span></a>

<a class='itemsocial' href='https://www.youtube.com/user/Youtube ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/Feedburner ID' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>

</div>

Keterangan: Ganti kode yang berwarna merah dengan ID jejaring social anda (ex. http://twitter.com/arieadiecorps).

6. Klik 'save template', dan selesai.

Tambahkan Push Button Media Sosial Untuk Blogger / Blog

Masuk ke akun blogger dan klik drop down.
Sekarang pilih "Layout".
Klik Tambah Gadget dan pilih 'HTML / Javascript'
Paste di bawah salah satu kode di bawah ini.

<style>
#sub_widget {
margin-bottom: 30px;
max-width: 300px;
background: #ddd;
max-height: 400px;
border: 4px ridge green;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
margin-top: 20px;}
#sbsr {height:70px;}
#bts {margin: 9px 0 0 15px;;float:center;}
#bts img {border-style: none;}
.gap {margin: auto 2px;}
#pra {float:left; margin:-6px 0 0px 20px;color:#000;font-size:14px;font-family:arial;font-weight:bold;}
.newsletter {height:35px;float:left;margin: 10px 0 60px 0;}
.button {
margin-top: 5px;
color: #fff;
width:100px;
font-family:arial;
font-weight:bold;
font-size:16px;
text-margin-left:-10px;
background: green;
}
.email {width:250px;
height:25px;
font-size:12px;
text-margin:0 auto;
pading:10px auto;
background:white}
</style>
<div id="sub_widget">
<center><img id="sbsr" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmnSZHAmnu-GG51HOFnYG1BbOYrPkFqbNAjuBy6dHIaV-Ade_RxgegU61Ebawc3TI6aL5jfKp26OImXcs0VyA4e34XWmonAgWbLMpgBR78LZbp6DPLvPenZDaDlXSg6faMJMk_Tj3_atHH/s734/rss-subscribe.png"/></center>
<center><div class="newsletter">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=capoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" onblur="if (this.value == '') {this.value = 'E-mail';}" onfocus="if (this.value == 'E-mail') {this.value = '';}" type="text" value="Get all the latest updates daily in your inbox.." />
<input name="uri" type="hidden" value="capoenk" />
<input name="title" type="hidden" value="capoenk" />
<input name="loc" type="hidden" value="en_IN" />
<input class="button" name="submit" type="submit" value="Submit" />
</form>
</div>
</center>
<center>
<div id="bts">
<a rel="nofollow" class="gap" href="http://feeds.feedburner.com/capoenk" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rLBwxHWn27h2uDZRqqDyH5phvjBKvFpgix8PfvurQpoRyZu0pzYihP7BFScUb5-qQ4o5fKUstyywlCrSaAZclyIQpdD4XJPsUW3e6yhU1gbAD4RRL6D3ysafMsvaMJlWO5aj7ovcQEZc/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNbXC6dzy0nJGZay54B0fi6TMA_yjlp_wR8cdhCrwn9SkJv9wgc02scPPu0eRSra_KxwqndAfcE_eR0GonWLabnwx6_Wvij_VSaaoccmOY9awYlMli7kyjI_XCIFvL4BFgiMhmkBOcYvv/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rLBwxHWn27h2uDZRqqDyH5phvjBKvFpgix8PfvurQpoRyZu0pzYihP7BFScUb5-qQ4o5fKUstyywlCrSaAZclyIQpdD4XJPsUW3e6yhU1gbAD4RRL6D3ysafMsvaMJlWO5aj7ovcQEZc/s1600/Rss.png" title="Subscribe Via Rss" alt="RSS" /></a>
<a rel="nofollow" class="gap" href="https://plus.google.com/102921613865056852662/" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgn3LwSR9rhZepOHCFOIbRLN8J0Hb9guQp9q3SVTK4Wjfz9QLbxjFe-NI_ju4L0VsiONhmgceL1mqBRh3-W3QCShU8Mql5iEYd_KZGuT8L0afYsV80-vD_uAeuEMM0sp8smaY75Q_nvnl/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYw8CZQ2w1rilYYr2sa_Px8Wh8bY1QTrOO6LFLDWvyaYMUajGpAd-J4ZjAEZwLW-H4aFazOmT8T_kBw68tdmnzIfR-m9woUmo2xVgfv2QIpg_RZChz4WJdtk8b_plKjKHK8aH_XBZOp0vV/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgn3LwSR9rhZepOHCFOIbRLN8J0Hb9guQp9q3SVTK4Wjfz9QLbxjFe-NI_ju4L0VsiONhmgceL1mqBRh3-W3QCShU8Mql5iEYd_KZGuT8L0afYsV80-vD_uAeuEMM0sp8smaY75Q_nvnl/s1600/Google.png" title="Follow Us On Google plus" alt="Google" /></a></br>
<a rel="nofollow" class="gap" href="http://pinterest.com/arieadie/" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4AVjBzDWyTV8tXEMs3JSsIMZIi2MMWCg9rHvoPTIseVVat_LaJxlrSlFsYY2F605uAbOCPUHDRALzpxWP4WVKBmqn4sf8LIb4Usx-ZiP9JUv86jPrVn82OJU7LhDJpTlzuC6nmDfO8knG/s1600/pinterst.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrPMAB_Zsr1XGKCpyPFXQVBwaiEVqQTxZGXVBGWam98MJdwfWLnY6hW2hpHNeF3DquYR5pUfEQs4GvhO_Bi5h-8ml7cwn5zezFOXAIHtP6AV6VnwjHNbzZzqSHV9B05x88qcmBF7ddZsP/s1600/pintrest_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4AVjBzDWyTV8tXEMs3JSsIMZIi2MMWCg9rHvoPTIseVVat_LaJxlrSlFsYY2F605uAbOCPUHDRALzpxWP4WVKBmqn4sf8LIb4Usx-ZiP9JUv86jPrVn82OJU7LhDJpTlzuC6nmDfO8knG/s1600/pinterst.png" title="Follow Us On Pinterest" alt="pinterest" /></a>
<a rel="nofollow" class="gap" href="http://www.facebook.com/arieadie30 " target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcP69qqsap2_4q3euIk9gme0iHkacQmY7XKmcOUpgcoQjoF2UDFLAbrpSW9thFSWYMbNkda6NepoFZblE5eoFSHO-1Vj3herGUt_65kHRmoY6bHMdFPTji_qGLT8JW70ZFMCwSZnySfd4/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW4rPvHkGQ96aSywdxh13UDvp0I4fYd3HTTgoWR3ANtR0ot4HVvkKNc2sq8bLtil-RH97GyINzsqApN1WjIWk7d6uU0mGTiZkYsqedkKAS2z2kDRyZrrNOg5EWywpWFPdtIYTg0NkGGKc7/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcP69qqsap2_4q3euIk9gme0iHkacQmY7XKmcOUpgcoQjoF2UDFLAbrpSW9thFSWYMbNkda6NepoFZblE5eoFSHO-1Vj3herGUt_65kHRmoY6bHMdFPTji_qGLT8JW70ZFMCwSZnySfd4/s1600/Facebook.png" title="Like Us On Facebook" alt="Facebook" /></a>
<a rel="nofollow" class="gap" href="http://www.twitter.com/lindamarlina40" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-WDmdrdwnmH5R-ZKAPdzmXA8DRWbiqKTnppZ8S-Fnbe16UNj7RcfSuitBqttGWN3HbiJowFRtJeU9HZxqf6hqRPvFxg3g8ShRiJSK4GGvQl_tfZ0QWXbXdHN_lm84AT-Ie_6X0nCpkkl/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEganfmiRl5l5bykDIHSBxWL6p_zZgWIbNE0SiGspH-alsrUj_z5kAVRcMRr0d4qfW6Zki8SKWVcZHhoH9jZixXwda7UsJrD5dwZhx9QfH2N9bjgn8czsBIGScP-GzkFV5UMIlJ9p2qIk63U/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-WDmdrdwnmH5R-ZKAPdzmXA8DRWbiqKTnppZ8S-Fnbe16UNj7RcfSuitBqttGWN3HbiJowFRtJeU9HZxqf6hqRPvFxg3g8ShRiJSK4GGvQl_tfZ0QWXbXdHN_lm84AT-Ie_6X0nCpkkl/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div></center></div>

Membuat Perubahan ini

Ganti capoenk dengan ID Feedburner
Ganti arieadie30 dengan nama pengguna Facebook Anda
Ganti lindamarlina40 dengan Nama Twitter
Ganti arieadie dengan Username Pinterest
Ganti 102921613865056852662 dengan Nama Google Plus
Sekarang menyimpan HTML / Javascript '.
Dan Anda selesai ...

Pergi ke Blogger.com >> Situs Anda.

Klik Template >> Edit HTML.

Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>

Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

ul.social_TempatBlogging {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_TempatBlogging li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_TempatBlogging li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_TempatBlogging li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_TempatBlogging li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnAo0E09FGABPD6jLAQ19fgSlGD2Xub-hWjWOw-O_h7lFasGnAof1L_e-m2j42UqfEUJzSxuEg6eO2dAsdohm4hulr_ifK9LVVpH_JFSAeJfZU-8aIn4jPsYIfr4rYglNrrnbsjctOJ_G/s1600/TempatBlogging-facebook-icon.png);
}
ul.social_TempatBlogging li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIj4z1vPRXsXasPHqAc5M5x7x-7As6WFGxq9Svpq9E-2qw-f_UkEQ6wXNbh-2ihe4L2nEURK9T9LIiYihJY8DrCX3OawYMOvWlq54bPMfRTFjWypuLMOxw6jS1gVXC3UchSBkzZlggXzK/s1600/TempatBlogging-twitter-icon.png);
}
ul.social_TempatBlogging li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6PXPGIlRCY4zp0uuNSjlVkEKFzbOlTr6QcTPnMLa6rcjTYuRLTN5kMzrpKwgWVw6wfyy4SIpTc8IQJUMjjHIKE40T0AxTYtiSxGs6SwEqqWKUVjvMMGE5QfD53jdC5cmAHo6Rlj2KC7lF/s1600/TempatBlogging-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiSf2H_121ujU7smpMEps8y74_0jTxuS6cowuxTbUQLz0SBJHJIF15q1Bp1VGIi1MJppIGdFGCWetsihKeJjxq1-pzI0rf2yaCNl8b_qgL9XSk6qCuho79DT3tqbe3HYU_8YlEJqz8pNVN/s1600/TempatBlogging-Pinterest-icon.png);
}
ul.social_TempatBlogging li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkMcEwUXH6QqoKVhgqRuSI6q14EKFsRq83o_s4DV6Ks4wkz304QXPsjd-bDJjQ4ploFf16nMhxSdVR6r1lApoI7D3xV4tTus74tkyaGr0RJqeQOjthcXKXZpzyuCYSWpC4BxLznsUMua0F/s1600/TempatBlogging-StumbleUpon-icon.png);
}
ul.social_TempatBlogging li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeRFqHdluXFDhsTWy_lcsvH4eDju-sOUJzA_R5P3sia5ho1rTNypayIBuK_WepPsTlWNB6tQEeM0-x-EWhC-U1ZXTmT-llTl4HG8jrFKLVm17p5_G5QnOGO_RaGpN3DxD-S3eia0Z6JHbJ/s1600/TempatBlogging-Digg-icon.png);
}
ul.social_TempatBlogging li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fPKjoknbHPib9cyVEbyTWZL1ERxhgiWmBahuGjjSFjVN5Qn8f33civpCJErq1uwevjbtTBzJXOwPNXhPUZUmdUP7uCRZKxX0yULKQ7l_CZbE7uGv92qVWe1Ln_oQHqSBRi3UfWTm9dVW/s1600/TempatBlogging-Linkedin-icon.png);
}
#animation_TempatBlogging:hover li {
opacity:0.2;
}
#animation_TempatBlogging li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_TempatBlogging li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_TempatBlogging li:hover {
opacity:1;
}
#animation_TempatBlogging li:hover a strong {
opacity:1;
top:-10px;
}

5. Cari tag <data:post.body/> dengan menggunakan Ctrl + F
6. Paste kode di bawah Sebelum tag <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_TempatBlogging' id='animation_TempatBlogging'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>

7. Simpan Template Anda.

Buka akun blogger Anda
Masuk ke menu Tata Letak >> Add gadget >> HTML/Javascript
Pastekan kode dibawah ini :

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNgydijPeyXPy5HLuXXwcE1Rq2FbK2el8KcgP0dRj0jKuvJxDNf8ZzHD9p3G9corERVvZ9M902Vk2YDmmQkr8mH4ZNbCjFjEZINv22228pFBmftD2JqylXUhJ8btqr9_ijaezSxSfd3M/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRhomzY7BLTbWqLvYe1F1aWXi3NxDETS6Td2kGbPQhWu18lxqwhogdQxzytsgHYSs93Qr4AIgVhjRKvZPRGDBIwVaMdfpOGtJizBahKFHnusvX6PjdSaE8Ym7ytdBhsTXIXts3FaKZYI/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-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;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://facebook.com/arieadie30"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMNneQKKy5bVFjdfuLjanMC-K7JSUtz0NQIb-BhKEFqh_oyd5HqYFpDJoUSm6L4w3niQc6PunTxUHk_-L02qq8HD0ApxUNo5gopEStcTKY92viEq4X_C6SEmOuq589Fyy23TJ-teuqnlf/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLF9Rri7OBjc3S9k-pHsoPZGTyROuBss-Tz_vWNQdoLHOFy-RhRDx4hN2naLEgvfoewlU2n510dtJi41e0B9Wef9DPeDiB_UO_sTg-LoyhzVaNKtR45NTXhxT6BbmVFRN5MM394I5-EEO/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/102921613865056852662"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwajVzh3YgxyomC0N39sM5QM9NwO8DOlemB3plrRPfuC0lYgDEXhPfuI5R5mDsGVEl3R1-TwJwJ90fn-FPlBz5I0ZMWmtrXjFcq8HPJvQ2Vn6DPMWOipJRe7dE-z2eY5j139co_ZDU_mpr/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/capoenk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJoQlbTZzZY_2EtmAOFZTIsKgIBSU_KfgTgidPjkNDl7DvztzG-C0nD43c7BhuVCnZ9vz7fsr2TzyyjpD4j-TTvHVZa7vb2MvOOikUfig_a0s1oKRemUdtz8lroQZ1LVDzgBJ2Xvdv4A8m/s1600/Bloggertrix-Rss.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=capoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="capoenk" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

Information :

Ganti arieadie30 dengan nama pengguna facebook Anda
Ganti lindamarlina40 dengan twitter Username
Ganti 102921613865056852662 dengan GooglePlus
Ganti capoenk dengan feedburner nama
Ganti capoenk dengan Feedburner ID

7. Kemudian Save HTML/Javascript'.

Masuk ke bagian Layout / Design
Klik Tambahkan Widget.
Pilih HTML/Javascript.
Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style type="text/css">
#flipboard_tempatblogging{ width:300px;}
ul.flipboard_tempatblogging{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_tempatblogging li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_tempatblogging li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tempatblogging li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tempatblogging li a img{
border-width: 0;
}
ul.flipboard_tempatblogging li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_tempatblogging li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#tempatblogging-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWduWia-anC5NCDfEWyA9F35pE0D_PZU8Lqp4NVXXxjs4efeyGA5Oih0FOUPdVMByh00f3p7VphAOkShlaemL1Vq0qM_ep3kujA620d6zJxdSBsPvkqlhFPgd9HzdEvxbNSz75cZTKCCYc/s1600/green.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#tempatblogging-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#tempatblogging-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#tempatblogging-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="flipboard_tempatblogging">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_tempatblogging">
<li><a href="http://www.pinteresr/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikb9ts7zDtC4bsmdUZbvnmdVjAV2hyoaKwzHIgqgqEE_ln-MpjtTf_UvK7C15Ya6luGDdPRJsYwlyYFEjX3Lf1iEPcf5_RkoNsI5zEVw_Ga0Egx4hNik92qU-QFq7fSJAYxFaebojld914/s1600/tempatblogging_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6_NWhabKuUH76ypuom2JWgcRSky5xDi4nsU_q0Mn7_pHO2yqYQG_Ul6gXKSb3zTk3uCf9U0IsY1jwLCZD70IwW6fTrwzLXWsxpcoO8m3nnYntlH_W_nGA5bOMs28zgG1TrPulSSFKx0_/s1600/tempatblogging_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkHtUoOdj2YvScxKZv5DHHYsQMTiYZisLF9EpegrLLVQ2OGbApgL8TILljsNqEmdonAmr_d3cfgLJfJhk_dgF1ykRli2SiDyAxJB-fqw0NSqI0qhIXuW38wARlfuIX0TBwC3tR9c2DrFr/s1600/tempatblogging_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bdCnEfTqwQcpgO7rEUgcXdL9qPm4TI-ts29SjpEQAY17oy5WleHL222C4T4a5mCEQ5-7fEtku2QbteX9K7JIEi-1ldwDOKecCZ6L-rxAOWnV5u9N-3KQp37i5uT_bV6K6yReWMZ5c88q/s1600/tempatblogging_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjGBMKi6K6KmC-qBOSlqA3k0ZPdnpBgpgrz_ah83uRItU-zIbuHJFz5eOT-IDLD4Hm8Cq431EegRdyCzNbCzwDkrY8MtF4A0038Z8ZcSgy-pWNr49i9LlQ4N1BnxnOxVoijUHW4Elm_Htp/s1600/tempatblogging_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="tempatblogging-searchbox">
<form action="/search" id="tempatblogging-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>

NOTE :

Ganti userId dengan nama pengguna Facebook Anda
Ganti userId dengan Nama Twitter Anda
Ganti userId dengan Pinterest Username Anda
Ganti UserId dengan ID Google Plus Anda

capoenk 09

Tambahkan Push Button Media Sosial Untuk Blogger / Blog

Membuat Perubahan ini

NOTE :

Popular Posts

Followers

Mengenai Saya

Arsip Blog

Category

Advertise

Label

Visitors