Articles by "Tutorial Blog"
Showing posts with label Tutorial Blog. Show all posts

di 0
sobat kita Memiliki blog yang bagus sudah tentu menjadi impian semua blogger, akan tetapi terkadang kita bingung bagaimana caranya untuk memperindah tampilan blog kita. Sebenarnya tampilan blog yang simple & dinamis yang lebih disukai oleh reader atau pembaca. Akan tetapi jauh lebih bagus bila kita mempunyai ciri khas pada blog kita, salah satunya bisa dengan cara.membuat likebox/fanspage facebook efek melayang di blog

lagsung aja ok

Membuat likebox/fanspage facebook efek melayang di blog kanan dan kiri

1. Login ke blogger

2. Masuk ke dashboard blog anda, lalu Pilih opsi 'Tata Letak'.

3. Klik 'Tambahkan Gadget' lalu akan keluar pop-up, Pilih HTML/JavaScript
4.lalu masukan kode HTML ke dalam kotak konten seperti berikut ini:

5.copy-paste kode HTML  dibawah ini:

DARI KIRI KE KANAN
<style>
/*Fixed Facebook Like Box Seocips*/
.fb-btn-seocips {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;}
.fb-btn-seocips {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-seocips a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-seocips a:hover {color:#fff;}
.fb-btn-seocips2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}
.fb-btn-seocips2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kiri{
from{transform:translate(-30000px, 0px);}
to{transform:translate(0px,0px);}
}
@keyframes kiri{
from{transform:translate(-30000px, 0px);}
to{transform:translate(0px,0px);}
}
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-btn-seocips">
<div class="fb-btn-seocips2">
<div class="fb-page" data-href="https://www.facebook.com/strbelajar" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/strbelajar"><a href="https://www.facebook.com/strbelajar">str belajar</a></blockquote></div></div>
</div>



DARI KANAN KE KIRI
<style>
/*Fixed Facebook Like Box Seocips*/
.fb-btn-seocips {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-seocips {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-seocips a:link, .fb-btn-seocips a:visited {color:#ffcc00;}
.fb-btn-seocips a:hover {color:#fff;}
.fb-btn-seocips2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-seocips2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-btn-seocips">
<div class="fb-btn-seocips2">
<div class="fb-page" data-href="https://www.facebook.com/strbelajar" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/strbelajar"><a href="https://www.facebook.com/strbelajar">str belajar </a></blockquote></div></div>
</div>
</div>

6.Ganti kode di atas warna merah dengan url/link fanspage facebook anda
7. kemudian Seve dan jereng,,,,, lihat hasinya hehehehe
Continue reading

di 0
 saya ingin berbagi Memasang Widget Slide Show  Pada Sidebar Blog
ok sobat kita Memiliki blog yang bagus sudah tentu menjadi impian semua blogger, akan tetapi terkadang kita bingung bagaimana caranya untuk memperindah tampilan blog kita. Sebenarnya tampilan blog yang simple & dinamis yang lebih disukai oleh reader atau pembaca. Akan tetapi jauh lebih bagus bila kita mempunyai ciri khas pada blog kita, salah satunya bisa dengan cara memasang wigdet slide show photo yang berisi foto-foto kita pada sidebar blog.

  Widget ini berisi foto-foto kita yang akan tampil secara bergantian secara otomatis. Memasang widget ini jauh lebih praktis karena semua foto-foto kita bisa tampil bergantian secara slide hingga tampak seperti menonton sebuah video
ok Lagsung Aj

 Memasang Widget Slide Show  Pada Sidebar Blog

1. Login ke blogger

2. Masuk ke dashboard blog anda, lalu Pilih opsi 'Tata Letak'.


3. Klik 'Tambahkan Gadget' lalu akan keluar pop-up, Pilih HTML/JavaScript

4. Beri judul di kolom judul, lalu masukan kode HTML ke dalam kotak konten seperti berikut ini:

5.copy-paste kode HTML  dibawah ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 250px;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 250px;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL FOTO 1" />
<img src="URL FOTO 2" />
<img src="URL FOTO 3" />
<img src="URL FOTO 4" />
</div>
6.ganti tulisan "URL FOTO 1/2/3/4" dengan url foto anda yang telah di host atau di upload ke website album foto online seperti photobucket / picasa /, dll.

SELAMAT MENCOBA

JANGAN LUPA KASIH KOMEN YA UNTUK KRITIK DAN SARANYA 
Continue reading

di 0
Sobat Guru blog dan para kawan-kawan kesempatan hari ini saya akan berbagi cara membuat Widget share melayang di samping kiri blog.pastinya akan menambah cantik tapilan blog dan Juga mudah untuk  me share blog kita ke media sosial

KODE WIDGET SOSIAL SHARE MELAYANG silahkan di Copy

<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>


CARA MEMASANG WIDGET SOSIAL SHARE MELAYANG DI BLOGGER
 1.buka Blogger kalian yg ingin di pasnag winget ini
2.pilih Layout kemudian pilih Add a gadget dimana ingin meletakan widget
3.muncul pop-up window,kemudian pilih HTM/Java Scripe



 4.masukan Kode di atas kotak ini
5.Save dan selesai selamat Mencoba
Continue reading

di 0

Memang Sudah Cukup Lama Saya G posting Di Blog saya Ini saya  ini akan membagikan Tutorial tentang blog heheheh Ok Di lanjut Tema tentang Memasang Komentar Facebok di Blogspot



1.Masuk di Blong kalian
2.Pilih Template Edit HTML
3.Letakan Kode di Bawah ini <div class='comments' id='comments'> , jika tidak masih belum berhasil coba letakkan dibawah kode  <div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='5'/></div>
</b:if>



4.SaveTemplate

Selamat mencoba broo
Continue reading
Subscribe to: Posts (Atom)