Sandy-Cyber

Setelah anda punya blog tapi masih sepi dengan pengunjung rasanya juga ndak pas kan, sudah capek capek nulis tapi ternyata ndak ada yang baca ya mending nulis saja di buku diary terus di pasang gembok kayak abg ituh
Nah kali ini saya hanya sekedar bagi bagi tips promosi blog ke beberapa situs search engine, tentu saja bertujuan untuk memancing orang lain mampir ke blog sampean. Selain rajin blogwalking dan meninggalkan komentar di blog blog yang anda kunjungi, ada baiknya juga anda bantu mempromosikan blog anda sendiri dengan menggunakan layanan web submission atau directory gratis. Selain menggunakan layanan web submission anda juga bisa menggunakan iklan baris, tapi yang ini etis ndak sih ? tapi sebelum ada undang undang patut dicoba.
Sedangkan link berikut adalah layanan web submission yang saya gunakan untuk mempromosikan beberapa blog saya, dan enakknya sekali mendaftarkan blog kita sudah otomatis masuk ke beberapa web search engine.

• http://www.Addme.com
• http://blog-indonesia.com
• http://www.sitelevel.com
• http://www.jayde.com
• http://www.fybersearch.com/

Setelah blog kita terdaftar di web submission tersebut, maka blog kita akan dimasukkan ke berbagai index Search Engine seperti Google.com, Yahoo.com, dan Msn.com. Nah setelah blog kita laris manis, maka saatnya memikirkan bagaimana supaya  bisa menghasilkan uang dari blog tesebut , itung itung buat ganti biaya ngenet sama biaya domain hosting.

Pasang link dibayar mau ? |
Dapatkan 1000 backlinks dg gratis

 Assalamalaikum Wr.Wb. sy akan memposting cara memasang sponsor di blog part II. setelah  lalu sy sempat memposting cara memasang sponsor di blog. sekarang sy akan memposting lagi, tp kali ini sponsornya langsung dalam bentuk script. :)

Di Sini saya akan memberikan beberapa sponsor yang mungkin setidaknya dalam perlombaan ini akan berguna atau hanya sebagai pajang hiasan di blog anda.
Ya saya dalam lomba Desain blog telah merasakan semua apa yang di lombakan ,apa lagi ini dari sebuah sponsor,sangatlah penting untuk digunakan.
Saya tidak akan berpanjang-panjang lebar lagi menjelasin tentang kode di bawah ini yang akan saya kasih...
langsung saja saya melihatkan langkah-langkah untuk membuat sponsor di gedget:

1. Masuk ke blog anda,
2. Pilihlah Tata letak yang sekarang disebut rancangan
3. Lalu pilih Tambah gedget
4. klik HTML/JavaScript
5. lalu Masukkan code dibawah ini kedalamnya.

Sponsor adalah pihak yang mendukung kita dalam sebuah bidang atau kegiatan, dan kita sangat diuntungkan dengan keberadaan para sponsor itu, baik secara finansial ataupun untuk keberlangsungan suatu bidang atau kegiatan yang kita tekuni. Namun sudahkah kita memperlihatkan respect atau penghargaan terhadap mereka?.

Untuk kita sebagai seorang blogger penghargaan yang bisa kita berikan kepada para sponsor yaitu salah satu yang paling sederhana adalah dengan menyediakan space atau ruang yang enak dipandang dan terlihat elegant untuk menempatkan nama-nama brand mereka dalam blog kita atau bahasa keren nya Sponsor list , lalu bagaimana cara membuat sebuah Sponsor list yang terlihat elegant dan enak dipandang serta terkesan professional ?.

Sebelum kita pelajari langkah-langkahnya lebih baik teman-teman melihat demo-nya terlebih dahulu disini:



Gimana tertarik ga? kalo tertarik ayo kita lanjut ke tutorialnya.


Langkah pertama adalah membuat beberapa Sprite image untuk logo atau banner sponsornya. Sprite image adalah gabungan dari beberapa gambar menjadi satu gambar tunggal, contoh Sprite image seperti ini:





untuk membuatnya teman-teman siapkan dua buah gambar yang sama dengan format color dan grayscale dan gabungkan keduanya menjadi satu kesatuan, teman-teman bisa pake CorelDraw atau Photoshop untuk membuatnya atau kalau ga mau ribet bikinnya silahkan teman-teman download gambar nya disini.



Setelah semua gambar yang akan dipasang sudah siap, upload terlebih dahulu ke tempat hosting gambar semacam Picasa atau Photobucket. Selanjutnya tambahkan kode CSS ini pada template punya teman-teman.

<!--
#sponsors {
 width:auto; height:20px;
 display: block;
 clear: both;
 border: 1px solid #eee;
 padding: 10px 5px;
 margin: 15px auto;
 text-transform: uppercase;
 font-weight: bold;
 color: #666;
}
#sponsors span {
 display: block;
 float: left;
 padding: 0 10px;
 height: 20px;
 line-height: 20px;
}
#sponsors a {
 display: block;
 float: left;
 height: 20px;
 padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
 /*mouseover*/
 a:hover.mootools, 
 a:hover.drupal, 
 a:hover.technorati, 
 a:hover.jquery, 
 a:hover.miro, 
 a:hover.mozilla, 
 a:hover.nbc, 
 a:hover.twitter, 
        a:hover.wordpress {background-position: 0 -20px;} 

kode berwarna biru ganti dengan nama sponsor, sedangkan yang berwarna merah ganti dengan URL dari gambar yang telah di upload tadi.

Langkah selanjutnya kita poles CSS tadi dengan sentuhan magic dari Mootools dengan menempatkan kode dibawah ini sebelum kode </head>

<script src='http://goomelar.googlecode.com/files/mootools-1.2.1-core-yc.js' type='text/javascript'><!--mce:0--></script>
<script src='http://goomelar.googlecode.com/files/colorize.js' type='text/javascript'><!--mce:1--></script>

Setelah itu tambahkan kode Javascript ini setelah kode Mootools tadi, fungsinya adalah untuk menghidupkan kode Mootools dan kode pewarnaan pada gambar.

<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){
 
 var sponsors = $$(&#39;#sponsors a&#39;).setStyle(&#39;opacity&#39;, 0.5); // Set opacity to 0.5 for grayscale image
 
 sponsors.set(&#39;tween&#39;,{duration:200, wait:false}).addEvents({
 
  //On mouseenter
  &#39;mouseenter&#39;: function(){
   this.setStyle(&#39;background-position&#39;,&#39;0 -20px&#39;); //Reveal color image
   this.get(&#39;tween&#39;).start(&#39;opacity&#39;,1); //set opacity to 1
  },  
 
  //on mouseleave
  &#39;mouseleave&#39;:function(){
   this.setStyle.delay(500,this,[&#39;background-position&#39;,&#39;0 0&#39;]); //set back initial background-position for grayscale image
   var tween =  this.get(&#39;tween&#39;);
   tween.start.delay(500, tween,[&#39;opacity&#39;,0.5]); //set back initial opacity
  }
 
 });
});
</script> 

Terakhir teman-teman tinggal menempatkan tag HTML nya pada tempat yang diinginkan misalnya sebelum footer atau setelahnya.

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Judul link" href="Link"></a>
    <a class="drupal" title="Judul link" href="Link"></a>
    <a class="technorati" title="Judul link" href="Link"></a>
    <a class="jquery" title="Judul link" href="Link"></a>
    <a class="miro" title="Judul link" href="Link"></a>
    <a class="mozilla" title="Judul link" href="Link"></a>
    <a class="nbc" title="Judul link" href="Link"></a>
    <a class="twitter" title="Judul link" href="Link"></a>
    <a class="wordpress" title="Judul link" href="Link"></a></div>

Selanjutnya tinggal save template dan lihat hasilnya. Selamat mencoba!

Hai sob, apa kabar? Berhubung blog saya baru saja mengganti template dan kebetulan template ini memakai animasi loading halaman, maka saya akan berbagi Tutorial untuk membuat animasi loading tersebut, Tutorial Membuat Animasi Loading Blog dengan CSS3 dalam 6 Variasi Loader.

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

 dan pastekan tepat diatas kode  <b:skin><![CDATA[

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
/* DEMO 1 */
#horizontal-load body:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
    width: 10em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: .5em;
    background: rgba(255,255,255,0.6);
    box-shadow:
        0 0 0 .05em rgba(100,100,100,0.075),
        0 0 0 .25em rgba(0,0,0,0.1),
        inset 0 .1em .05em rgba(0,0,0,0.1),
        0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
    content: "Please wait.";
    position: absolute;
    left: 25%;
    top: 150%;
    font-family: 'Carrois Gothic', sans-serif;
    font-size: 1em;
    color: #555;
    text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
    border-radius: 50%;
    width: 1em;
    height: 100%;
    background: -webkit-linear-gradient(#eee, #ddd);
    background: -moz-linear-gradient(#eee, #ddd);
    background: -ms-linear-gradient(#eee, #ddd);
    background: -o-linear-gradient(#eee, #ddd);
    background: linear-gradient(#eee, #ddd);
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3),
        inset 0 -.1em .15em rgba(0,0,0,0.15),
        0 0 .25em rgba(0,0,0,0.3);
    display: block;
    -webkit-animation: slide 1.75s ease-in-out infinite alternate;
    -moz-animation: slide 1.75s ease-in-out infinite alternate;
    -ms-animation: slide 1.75s ease-in-out infinite alternate;
    -o-animation: slide 1.75s ease-in-out infinite alternate;
    animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
    to { margin-left: 90%; }
}
@-moz-keyframes slide {
    to { margin-left: 90%; }
}
@-ms-keyframes slide {
    to { margin-left: 90%; }
}
@-o-keyframes slide {
    to { margin-left: 90%; }
}
@keyframes slide {
    to { margin-left: 90%; }
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 2

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

#load2 body {
    background-image: url(../images/hexabump.png);
    background-color: #222;
}
#load2 body:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
    position: relative;
    font-size: 100px;
    width: 1em;
    height: 1em;
    margin: 100px auto;
    border-radius: 50%;
    background: #123456;
    box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
    background:
        -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
        -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
    background:
        -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    opacity: 0.7;
    -webkit-animation: mask 3s infinite alternate;
    -moz-animation: mask 3s infinite alternate;
    -ms-animation: mask 3s infinite alternate;
    -o-animation: mask 3s infinite alternate;
    animation: mask 3s infinite alternate;
}

@-webkit-keyframes mask {
    25%  { -webkit-transform: rotate(270deg); }
    50%  { -webkit-transform: rotate( 90deg); }
    75%  { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
    25%  { -moz-transform: rotate(270deg); }
    50%  { -moz-transform: rotate( 90deg); }
    75%  { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
    25%  { -ms-transform: rotate(270deg); }
    50%  { -ms-transform: rotate( 90deg); }
    75%  { -ms-transform: rotate(360deg); }
    100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
    25%  { -o-transform: rotate(270deg); }
    50%  { -o-transform: rotate( 90deg); }
    75%  { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
    25%  { transform: rotate(270deg); }
    50%  { transform: rotate( 90deg); }
    75%  { transform: rotate(360deg); }
    100% { transform: rotate(180deg); }
}

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#circular3dG{
position:relative;
width:100px;
height:100px;margin:10% auto;
}
.circular3dG{
position:absolute;
background-color:#00C4FF;
width:28px;
height:28px;
-moz-border-radius:30px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:30px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:30px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:30px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:30px;
animation-name:bounce_circular3dG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circular3d_1G{
left:41px;
top:6px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#circular3d_2G{
left:61px;
top:23px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#circular3d_3G{
left:73px;
top:45px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#circular3d_4G{
left:69px;
top:67px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circular3d_5G{
left:42px;
top:73px;
-moz-animation-delay:0.42000000000000004s;
-webkit-animation-delay:0.42000000000000004s;
-ms-animation-delay:0.42000000000000004s;
-o-animation-delay:0.42000000000000004s;
animation-delay:0.42000000000000004s;
}
#circular3d_6G{
left:8px;
top:48px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circular3d_7G{
left:0px;
top:14px;
-moz-animation-delay:0.5399999999999999s;
-webkit-animation-delay:0.5399999999999999s;
-ms-animation-delay:0.5399999999999999s;
-o-animation-delay:0.5399999999999999s;
animation-delay:0.5399999999999999s;
}
#circular3d_8G{
left:17px;
top:0px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circular3dG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="circular3dG">
<div id="circular3d_1G" class="circular3dG">
</div>
<div id="circular3d_2G" class="circular3dG">
</div>
<div id="circular3d_3G" class="circular3dG">
</div>
<div id="circular3d_4G" class="circular3dG">
</div>
<div id="circular3d_5G" class="circular3dG">
</div>
<div id="circular3d_6G" class="circular3dG">
</div>
<div id="circular3d_7G" class="circular3dG">
</div>
<div id="circular3d_8G" class="circular3dG">
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 5

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 6

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(

oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai

oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)

Kalau ada yang belum jelas tulis aja di komentar

Sumber

Assalamu'alaikum Oke gan, ketemu lagi Dengan Saya Kali ini aku saya ngasih Artikel tentang Cara Memasang Video Dari Youtube Ke Blog dengan mudah.
   =>  Buka video yang akan kamu taruh di postingan =>  Jika sudah, klik kanan pada gambar video itu, lalu pilih "Salin Kode Semat" 
      Untuk lebih jelasnya, bisa dilihat gambar dibawah ini

<iframe width="640" height="360" src="http://www.youtube.com/embed/7N5OhNplEd4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

=>  Taruh script yang tadi di paste "notepad" dimana saja, mau itu di tata letak, mau itu dipostingan. Bebas deh.

Hai sobat  Kali ini saya akan memberikan bagaimana cara memberikan tulisan بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم di awak setiap posting. Sebenarnya artikel ini adalah permintaan dari sobat gue yang ingin memberikan Tulisan بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم di Setiap Posting blognya.

Untuk memberikan tulisan silakan sobat lakukan langkah-langkas sebagai berikut.
1. Silakan sobat login dulu di blogger
2. Pilih Rancangan
3. Pilih Edit HTML jangan lupa centang tulisan Expand Template Widget
4. Cari Kode <div class='post-body entry-content'> ( untuk Mempermudah Tekan F3)
5. Letakan Kode di bawah ini setelah kode diatas.

<div style='text-align: center;'> <span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><b><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم</span></b></span></span></div>

6. Save

Demikian Cara Mudah Memberikan Tulisan بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم di Setiap Posting.

Assalammualaikum wr. wb.
Hai Sob kali ini saya akan membahas mengenai bagaiman caranya mempercepat loading blog yang lelet, tapi kalau ganti template lagi rasanya sayang karena udah seret banget dengan template yang sudah dipasang. Jika loading blog cepat tentunya pengunjung akan merasa nyaman berkunjung ke blog kita berkali-kali. Hal ini tentunya akan sangat berpengaruh besar terhadap trafik blog kita.

1. Mengkompres Script Blog
Cara pertama untuk mempercepat loading blog kita adalah dengan cara mengkompres script blog kita. Jika script blog kita dikompres tentunya akan menjadi lebih kecil ukurannya, dan tentu saja akan sangat berpengaruh terhadap kecepatan loading blog kita. Untuk mengkompres script baik itu CSS, HTML, JavaScript, ataupun script blog secara keseluruhan saya biasanya menggunakan tool online gratisan Disini. Pada tool tersebut kita bisa mengatur sendiri seperti apa script blog kita ingin di kompres.

2. Menambahkan Script Pencepat Loading Blog
Cara kedua adalah dengan menambahkan script pada blog kita. Letakkan script dibawah ini tepat di atas kode </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVf-79_6a1oDJYIJ9J8KiJ_zDFkZqQrtsuQxZri7YYlVvrShwsWQN6xUmMiO0KDvc2hGHBSqVAkQ2jc0thyqCM2bL183p9iI6xiCUIQOQHD-My5P4PbJu0zt62EXO0wtfjwj_1fMAuk-g/",threshold : 200}); }); </script>

Demikian cara untuk mempercepat kecepatan loading blog kita. Mudah-mudahan dengan cara tersebut blog kita bisa menjadi tambah ringan.

Sumber

Kali ini saya akan berbagi catatan tentang cara membuat banner sendiri, mau tau? kalo ga silahkan keluar dari sini!! wah ngusir!! bercanda..




Begini caranya lihat kode html dibawah ini!!

<center><a target="_blank" href="URL Anda" title="Nama Blog Anda"><img src="URL Gambar Banner Anda" alt="Nama Blog Anda" /></a></center>

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Tukar Link" /> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 250px; HEIGHT: 50px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><center><a target="_blank" href="URL Anda" title="Nama Blog Anda"><img src="URL Gambar Banner Anda" alt="Nama Blog Anda" /></a></center></textarea></p></form></div>

1. Copy kode di atas dua - duanya yang atas dan yang bawah ke kode HTML/JavaScript. Beri judul sesuka hati seperti saya yang memakai judul:
   Pasang Banner di Blog Anda, Buat Koleksi..
   
2. Buatlah Banner anda menggunakan software pembuat gambar, misalnya Paint, Adobe Photoshop, atau yang lainnya terserah anda, yang penting jadi!!
3. Untuk mendapat URL gambar atau banner anda, bagi pengguna blogger bisa  menggunakan fasilitas i.imgur.com anda atau mau yang lai juga bisa. Tapi khusus i.imgur.com  Caranya setelah anda mengupload sebuah gambar, maka anda klik kanan pada gambar tersebut. Kemudian klik copy image location, itulah url gambar anda!!
4. Untuk Kata Tukar Link bisa anda ganti dengan kata-kata anda sendiri!! 
5. Lalu anda dapat mengatur lebar text area dengan mengubah angka di kode WIDHT, dan HEIGHT untuk ukuran kebawah atau panjangnya.
6. Tambahan bila anda tidak menginginkan banner berada di tengah bisa anda hapus tulisan <center> atau ganti semau anda!

Mau bukti? lihat saja di sidebarku!!
Semoga artikel ini berguna dan bermanfaat.

Cara Membuat Logo I Love Indonesia Di Pojok. Para blogger Indonesia harus punya yang satu ini nch, nggak wajib juga sih. Tapi lebih baik juga biar indonesia dikenal di mana-mana :D. Yang tertarik untuk memasang silahkan ke TKP sekrang.

1. Masuklah ke blogspot Anda
2. Klik Rancangan
3. Klik Tambah Gadget (bisa di mana saja, tidak ada bedanya)
4. Pilih HTML/Javascript 
5. Copy kode dibawah ini :

• Banner berada di Pojok Kanan-Atas:
          <a href=http://sandymufc09.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;top:5px;right:5px;"><img src="http://4.bp.blogspot.com/-CkS5ssq5DKs/ToFrrsfc_pI/AAAAAAAABdw/8bdAJT5vGS8/s1600/iluvindonesia-kanan+atas.png"/></a>
• Banner berada di Pojok Kanan-Bawah:
          <a href=http://sandymufc09.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;bottom:5px;right:5px;"><img src="http://1.bp.blogspot.com/-XQymrUu-B8w/ToFrshMae3I/AAAAAAAABd0/SbntIjU8T7U/s1600/iluvindonesia-kanan+bawah.png"/></a>
• Banner berada di Pojok Kiri-Atas:
          <a href=http://sandymufc09.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;top:5px;left:5px;"><img src="http://1.bp.blogspot.com/-hhIs6hGp9bE/ToFrtvYpbgI/AAAAAAAABd4/ccpdyxRHUho/s1600/iluvindonesia-kiri+atas.png"/></a>
• Banner berada di Pojok Kiri-Bawah:
          <a href=http://sandymufc09.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;bottom:5px;left:5px;"><img src="http://2.bp.blogspot.com/-5am4MTN5s2s/ToFruv1NcKI/AAAAAAAABd8/_SPDnvcbWD8/s1600/iluvindonesia-kiri+bawah.png"/></a>
  

Memasang Facebook Page dan Follow Twitter di Bawah Posting Blog

Cara memasangnya 

1. Masuk ke dasbor blogger > Template > Edit HMTL > Lanjutkan > centang expand template

2. Cari Kode <data:post.body/> atau <div class='post-footer-line post-footer-line-1'> 

3. Kemudian pasang kode  di bawah ini tepat dibawah kode <data:post.body/> atau sebelum <div class='post-footer-line post-footer-line-1'>  (pilih salah satu saja)

Klik Pilih Semua Kode untuk Mencopy Kode




4. Ganti caramembuatblogspot dengan username facebook sobat dan sandymufc09 dengan username akun twitter kamu

Bagaimana sobat udah jadi? silakan tambahkan halaman facebook dan follow twitter di postingan blog .

Cara Membuat Fans Page Facebook Di Blog - Kali ini saya ingin memosting bagaimana cara membuat fans page facebook untuk temen2 yang punya blog. cara untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page/Like Box. Facebook page sudah sangat lazim digunakan di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan.

Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.

Cara Membuat Fans Page Facebook di Blog/Website :
1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

Seperti gambar ini

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", seperti contoh gambar berikut:



5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612



6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" atau bisa juga buka halaman berikut: Like Box

7. Selanjutnya, isikan spesifikasi seperti gambar berikut :


Setting Facebook Like Box:
1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

7. Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).



Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.

Cara pemasangan like Box pada Blog:
Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
Pilih HTML/JavaScript.
Masukkan kode yang telah dicopy ke dalam kotak kode HTML/JavaScript.
Save/Simpan
.
Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.

semoga posting dengan judul Cara Membuat Fans Page Facebook Di Blog bisa bermanfaat :)

1. Masuk ke akun blogger

2. Dasbor > Tata Letak > Tambahkan Gadget > Pilih HTML Javascript

3. Silakan klik Copy all pada text area di bawah ini, lalu paste di form yang ada. Lalu simpan template.






Buat sobat yang belum tahu cara menambah gadget silakan buka artikel Cara memasang gadget di blog

Pengaturan :

• Untuk mengubah jumlah tampilan recent posts masuk silakan cari kode  numposts = 10; silakan ganti angka 10 nya.

• Jangan lupa mengganti alamat blog saya  http://sandymufc09.blogspot.com/ dengan nama URL blog anda sendiri.

• Untuk mengubah ukuran gambar cari kode Silakan ubah angka 70, untuk memperkecil kurangi angkanya.

thumbwidth = 70;

thumbheight = 70;

Widget recent post sobat sudah jadi. Selamat berkarya menghias blog dengan widget recent posts.