Mei 2014 ~ Capoenk 10

Cara Membuat Recent Post Terbaru

On 17.38 by Yuga irgi in Recent Post No comments

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

On 17.33 by Yuga irgi in Social Media No comments

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.

Widget Push Button Media Sosial Dan Rss Subscribe

On 17.32 by Yuga irgi in Social Media, Social Subscription, Widget No comments

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 ...

Widget Social Subscription Keren Warna Biru

On 17.31 by Yuga irgi in Social Subscription, Widget No comments

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'.

Widget Sharing Social Dibawah Post Blogger

On 17.31 by Yuga irgi in Social Media, Widget No comments

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/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;
}

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.

Widget Social Media Efek Flipboard Untuk Blogger

On 17.30 by Yuga irgi in Social Media, Widget 6 comments

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

Membuat Widget Recent Post Berupa Gambar Kotak

On 17.29 by Yuga irgi in Recent Post, Widget No comments

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.

<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>

Ganti http://capoenk-blog.blogspot.com dengan alamat blog anda,

Langkah 4 : Simpan

Membuat Artikel Terkait dengan Thumbnail

On 17.27 by Yuga irgi in Artikel Terkait No comments

Menurut pakar SEO dengan membuat artikel terkait dengan gambar atau tanpa gambar hanya berbentuk tulisan saja akan meningkatkan jumlah pengunjung atau dalam bahasa blogger disebut Pageviews. Artikel terkait ini umumnya diletakan di akhir pembahasan atau di bawah postingan, karena letaknya efektif dan mudah dilihat oleh pembaca / pengunjung.

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan terpukau, Lebay :D

Penerapan CSS & JavaScript Artikel Terkait Bergambar

Masuk / Login ke www.blogger.com
Pada Dashboard pilih Template → Edit HTML → Ceklis Expand Template Widget
Letakan CSS & JavaScript berikut ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHBKip9nurj_C8E_iu92TEDmq_TSCRnzj-QT4n03fSq1mvJhiSJXbKhC8SHfhBlg7dYR7-eVjA1bF93NuK6ip3FY5XggnRbjG2kGijagmYwoTUuL2pZfDFzbvuJUzyG4U_96eThufYls/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

Penerapan Kode HTML Artikel Terkait Bergambar

Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna, caranya

Silahkan Anda cari kode <data:post.body/>
Kemudian letakan kode di bawah ini setelah kode <data:post:body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

Simpan Template (Save Template)

Keterangan Terkait Kode Artikel Terkait Bergambar

1. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.

2. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.

3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya,

4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.

5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikianlah tutorial blogger mengenai cara membuat artikel terkait dengan gambar / thumbnail. Semoga postingan yang berjudul Cara Membuat Artikel Terkait dengan Gambar / Thumbnail ini bermanfaat dan mudah dipahami dan dimengerti.

Terima kasih.

Capoenk 10

free tutorial blogger and free download

Enter Slide 1 Title Here

Enter Slide 2 Title Here

Enter Slide 3 Title Here

Sabtu, 10 Mei 2014

Cara Membuat Recent Post Terbaru

Cara Membuat Floating Social Media di Sisi Blog

Widget Push Button Media Sosial Dan Rss Subscribe

Tambahkan Push Button Media Sosial Untuk Blogger / Blog

Membuat Perubahan ini

Widget Social Subscription Keren Warna Biru

Widget Sharing Social Dibawah Post Blogger

Widget Social Media Efek Flipboard Untuk Blogger

NOTE :

Membuat Widget Recent Post Berupa Gambar Kotak

Berikut adalah langkah-langkah nya :

Membuat Artikel Terkait dengan Thumbnail

Search

sponsor

Popular Posts

Categories

Blog Archive

Mengenai Saya

Labels

Text Widget

Unordered List

Pages