Sabtu, 10 Mei 2014
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”>6. Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.
#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>
7. Simpan dan Lihat hasilnya.
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.
Keterangan: Jika pada template anda sudah terpasang Javascript seperti kode berwarna biru diatas, dihapus saja.<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>
7. Masih di Edit HTML, cari kode </body>, letakkan kode di bawah ini tepat diatasnya.
Keterangan: Ganti kode yang berwarna merah dengan ID jejaring social anda (ex. http://twitter.com/arieadiecorps).<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>
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/AVvXsEhf6BA6aqmVHcsLcQzGnQRO3pSTe_ILlC3bMM8XTmBEUZuTgLQhRNlUIibOAKsRiIUYpuKknnH_hmKWMNPp_h9sxDvzNuPd0liG4GTiKvLS3UCHamnK3Dxxt77qODavpaxRXMev1Gv4wbif/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/AVvXsEhDc5CJ8aeumRU9Ht2Q2pFWTda13XqZ3y9FJmAaJdG7MKwEy18q-VbtbG8AEbZVBXQM_lVmGm6nFtPFeTKIsB5PvHubIj6nkK92MwPDAxcnYjy9vl-6XsWVuJquCCh1tEqg8Rmgsff4w1FN/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8HiQKSzZQE9zfO4jH3NbKfplH7Vbb2zio5GMNn4DzSfTXtmvfDywNCstW460Kp7QIDOiIWmC24Pl0aHJ3Sc-h_zoepz1UQLr51fKc3tg_TdOcyExx0aaY_pzchBnUdPDN6W4sP4drjg2/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDc5CJ8aeumRU9Ht2Q2pFWTda13XqZ3y9FJmAaJdG7MKwEy18q-VbtbG8AEbZVBXQM_lVmGm6nFtPFeTKIsB5PvHubIj6nkK92MwPDAxcnYjy9vl-6XsWVuJquCCh1tEqg8Rmgsff4w1FN/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/AVvXsEjkc724bRfijTgfLtRKYbcX6zIvEUlGhI44azqoJA8CxyqpmVQw8V26N5MkI9D9n7s1xf3fFlxaabIPxVmg08oI4pH0WXVOYxcPSgULSf-QpOXsIXFcoaMgz9qFTJESB-abrF1q2YYd3UPD/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTgjV1oYpJ89AP03IVnOOEvHCKD5BPxfultv7o2S512P8xgDa_8rH-YnefvRZ6WhoG5gWlr14sM4q8mS0I5AUIKLyf_YvCIlmRB1KnM8zs5-HZf8-smpN0ycGBRGRLK0p_4aXpOk6sy8EY/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkc724bRfijTgfLtRKYbcX6zIvEUlGhI44azqoJA8CxyqpmVQw8V26N5MkI9D9n7s1xf3fFlxaabIPxVmg08oI4pH0WXVOYxcPSgULSf-QpOXsIXFcoaMgz9qFTJESB-abrF1q2YYd3UPD/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/AVvXsEgjSZbjuk8Ob1CDofE9ZD28rLi_gRohU9lGO3ZbF3QM4mQCCe4DJ2w1_BvRCl9lsFQP2hnhO1YO5H1tahbV6fJu2ap7-qCIJ1YNV94exgfAKq86_UWfxHsKp_UVwIILt5pXtpJRIs3oPM6I/s1600/pinterst.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCOHQu84UqFJ3iFwLJin0K7d2cP6xl9QeSp5C-aENIeeYoro6CRj_eBFITITmAR66hQcT__qsqH0uli8eoMmtc7K2-Y5p3o6j0jPj33OdW7fZoddefbPr5TWI8APKl4QBT_7mzyvGPn1y/s1600/pintrest_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSZbjuk8Ob1CDofE9ZD28rLi_gRohU9lGO3ZbF3QM4mQCCe4DJ2w1_BvRCl9lsFQP2hnhO1YO5H1tahbV6fJu2ap7-qCIJ1YNV94exgfAKq86_UWfxHsKp_UVwIILt5pXtpJRIs3oPM6I/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/AVvXsEj3RBTN01iGBCiuvOz6Y0ny7l7oJ1T7Q4dVQvHYkNWE6K8p5zKx1KVje2_5IFANz6dMSfLBP0GAcJlJtu9wilwG1BSi1x3uyWHI6RW04qU9JRRJ62qVTX-Gfru7rlan5C3-cEBvUAW9zn3U/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdLiy7mDEjNXG9PIbBCOQ9caeBHu1owl6Yp3xlncNn1sYjXuTeW97RO1K6yYb1kWoTgp7qm3VYdZpbReHFOqFepFnUShpX7zxtn8-F_qajUxYgI3k6B3jTpHYR7j7YAzi-BXqRxQNKYK8/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RBTN01iGBCiuvOz6Y0ny7l7oJ1T7Q4dVQvHYkNWE6K8p5zKx1KVje2_5IFANz6dMSfLBP0GAcJlJtu9wilwG1BSi1x3uyWHI6RW04qU9JRRJ62qVTX-Gfru7rlan5C3-cEBvUAW9zn3U/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/AVvXsEhboHchemPl3Aq1EiceRDSsyl7rOtWhjrLNj85eUvTO2WuQ3Ple4AAoBpjwE_aQo_3tUOj3nFh30YyjNrUZEK3D72MDU7Aqglr7LkOXpi1rAK9a94_IZ-zm-p6waqi0-JjUeUC3OBvpvW9x/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2XDxvXgb3_91emVuhD6wcL5IITTwp8kTRsIk9l01kNrFOC1-rY6g9T9XETN-g3ehS584YPK1RPz9o_SSBzIO0MDsYPC5Pl-3abilXxKeZsFWu3Hb3QAm-mnq0hseDSxghw_rMEHQ2HCyF/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhboHchemPl3Aq1EiceRDSsyl7rOtWhjrLNj85eUvTO2WuQ3Ple4AAoBpjwE_aQo_3tUOj3nFh30YyjNrUZEK3D72MDU7Aqglr7LkOXpi1rAK9a94_IZ-zm-p6waqi0-JjUeUC3OBvpvW9x/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 ...
- 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/AVvXsEgv_1FN8seegR2PLktZoQAk8Ac9T0b6uv07s2VnyDi80m_rkTU2rjLu09t5VYtvhDwhL1aAp-1YrfEiSlSVs6QhYXVmzhTJGxwJIGLuWxCKmAdJ5bvbA-M-hRzkzvSdjjbCJU97fgeOgvU/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/AVvXsEiziwwIm9ubi5mn5O6ROq420aUqpOK8IQ9GCSDOo1pqoXU-dwcpI3y2ErEJR0xAbTw1PfCoFV38hlv8etCewaCT9HUTbRvxCYe-CtwL8WyrW0wgPMnrKx2BpylV99dEHEWrSPQDclPSLFo/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/AVvXsEiFu8VunIs5ll9B5qbl956xgAn_kPn8ovJOlmrs4dksGF35UxbDU7WbyU9OIM8ohSL7ncsFXf2CNmtjYMB1DLrrArZYbEtzSIc9TXSIv2c7MqvuGbFdBZWcQR_jESleGO1BLoWaRTpiSF-e/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtfI7vI4IN1wz-07GohlVsRaHLmSaltN_8Gp82Q9pLkarM5KHtEqI4OWjH8fF3IpQjRCjWey3SQD88FLaQOoirgO_AHph4hZvNGbLIC0rqOXVISAyn__-ZjEYa0u8tc1XqUnam-LWu2Ngj/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/102921613865056852662"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPffM0EAifHHE4yleuMyzT0At8vM2ggeN_wXCA0yQE0DebPSUPB5pxQV14MtHEeBm0keo0aGLnPJnGbIZrR8Puo1abnhyd6FY6gi7AauPeG6S_QQvtlJw6mY0GZ-n3VkvDkzrOVQGhUAC/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/capoenk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI5uXbh6CadT0qBzyf55pA_q03HIJ59h13ry7Q4jeP5YHnCCd0FYaPjpTkwXlufjMzoaXoRej0UvU0uEaQush5RnMNUC4Xpy_nZieTx4PbjUJbfwhVWV7Ykeu3z6BfAwJVKeRnysGpM5dR/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'.
ul.social_TempatBlogging {5. Cari tag <data:post.body/> dengan menggunakan Ctrl + F
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/AVvXsEg1ga_Gj1UFLNpH-6bLjht6OI5brUByCbJMbVsiwQzKh6q-KJ26-cLZxn2T6x0I7wtA9SDt-BWPF6nT8yRET1T9AuZfkZfCRUnCSIpAHrPp0Juprha8QaYg9MgjGGyipFSGkeK6MSo_YfaV/s1600/TempatBlogging-facebook-icon.png);
}
ul.social_TempatBlogging li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueDIMgqRiSpVHaAqpPEfso9EqdXYM68hGX8vErzwWOjwC_itHGQtNzCucBcpEUy92QcsLXlfGW7pZ2k_5rafr-yv1Hi_gd-OsDS-Bt7U3yNc3xieHJAR5WYK1Jmalp6d25fIBkLrabR9F/s1600/TempatBlogging-twitter-icon.png);
}
ul.social_TempatBlogging li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8aRJyaccHJXwJ8aEj-ugrkUGR_9XSohJI2MwLLE0_O7Ok2i5sT27bnrmfySfoYCTTpNljZ_iPUsqtbb6-IG-y6_fBpL9z9oU61eJ3_1bQrO3bFKPWnCL0ClOVtr91VCaRVYGlUkvzCpY/s1600/TempatBlogging-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw0PQpjcU_Jv3Qzfee6PEFtgrYCMWRlaY6jXqIQzKjg4K4fDbz7IzwDbyhlc4Pusik0v6YRnIABIjnzCE8JmGbxoyOnQNEkxI7xXBWTw-SOGOYlGDnVLymnNrhYYvPNwuAJ7ispt661PVf/s1600/TempatBlogging-Pinterest-icon.png);
}
ul.social_TempatBlogging li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh7G0olvatXwFsd9ymJlf43vosBwYKEjAUSd082wkinWMcL77N6rGxmPSpCgasVAzXmqKfz79QJ7fs1gWuk2nXqWqoUovgiLiK7Gw81A8LsQ06TmRAlS_NLteJDG9Jgds-I7nSp2nW1oJF/s1600/TempatBlogging-StumbleUpon-icon.png);
}
ul.social_TempatBlogging li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0HLE65m5_qQOffbZrYMANXb25nTsf5-jV3mBWlYdCiXuKqz12nRJH8hj65-a5MFiTXhpehpqkT-CNM4eEBRGyMKHJxqnGUbKB6Q3-s2T0SsXKZWXgRvxaj7movoCmNEXMm3xfPzvSL-r/s1600/TempatBlogging-Digg-icon.png);
}
ul.social_TempatBlogging li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshDCCY7GElTZ7FWeej7qDPVBrdYO3eUSAWvNyROJZ1lESHy4osLAfF7XStCthLnIC4vKPBBBylX1_4biqHylQIKlZl7VPLroMxdE4U3aTGfs0ovyFyCUrtkc4kjIWDTsuotX4xhoUN0UF/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;
}
6. Paste kode di bawah Sebelum tag <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>7. Simpan Template Anda.
<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>
Login ke blogger.com
- 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/AVvXsEiUguhYQiE-ghKbjjMRec-pOAVOsxOpDXKjSOr-pDyzITVbFr2fhxBTql9JNLzAJ7FX4wSra-Nr8Q4cadtdOEB5Dx7IvcB5gWzoW3vAMGstoLEPxM5WHIHL3u80A7g7wTh7JpE8rYXPC7KJ/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/AVvXsEjnCmszHNk2TUDEwtUEOYehIc_x4WBtmn4QiTQiG_v_-2CPouCzzOJqHYoPRonfw5-WHeTgeluMoGdLWSOdIqXRnqP-b5ZaIhW7sr0XTgeDOvC95937MJR8d9Wfy0Ddpt6fzBtavilmkTHD/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/AVvXsEhCMKCV9CvuqGDRe4uFJ8VCO2uSUPUBQB1rEg-ZRjIgfv5NdHJ3W0acR6QpTUw669n1AW6BDt6C1PWSyxHn94DNfAWLUTBC6LDO0a8o31VZDVg-kdFjydJWSn3IihAJ7NyCy_I6zYcTKxsa/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/AVvXsEhOgRtKAyGI6JyCC0GCQKrck9lMt2ijl4nQvPR7f3NqbUSvx_xDJBl9IDsW7D8NH8rvpY1IGYZK0mxXw3hQy0pvjaz7yICEDKYvN32yWkztotVg7JGROCl5gMs7BuGFTeFLR5IkcksQtyA0/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/AVvXsEjInQN28s2vyAnZnNDwq3rMvmapP1ORXfP8Wh2CabbQlDH8D5EAUzsTT37pNOVUMhyZV6rvvsxRqYx1UB8I-qs6DYC6bKcsGnDeBcUGgICxnaaOPleMJXv0sPmqb1kzw5V0bNHluOjtYWUq/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/AVvXsEhj4KxCCJQnL4DUZKOsVWmawdNDL9JWDFtzGINAbkVJOJ0paCQiUsU_ERAx5tMSfJKLQXwt74NQa7olzdvyWwgJqJOQ438AihfK365XTd3lInqzYiZLSc8E68eUF8-3EeDO7a2TOtajGEZ8/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
Berikut adalah langkah-langkah nya :
1. Masuk ke blogger >> Dashboard >> Tata Letak >> Add Gadget
2. Pilih Gadget HTML/Javascript.
3. Masukkan kode javascript di bawah ini.
Ganti http://capoenk-blog.blogspot.com dengan alamat blog anda,<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://capoenk-blog.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>
Langkah 4 : Simpan
Langganan:
Komentar (Atom)
Popular Posts
-
Login ke blogger.com Masuk ke bagian Layout / Design Klik Tambahkan Widget . Pilih HTML/Javascript . Copy Kode dibawah ini dan Pastekan di H... -
Buka akun blogger Anda Masuk ke menu Tata Letak >> Add gadget >> HTML/Javascript Pastekan kode dibawah ini : <style> #s... -
Pergi ke Blogger.com >> Situs Anda . Klik Template >> Edit HTML . Sekarang Anda baru masuk dalam Blogger HTML Editor tekan ...
