Want To Be Creative IMPERONESS MaenCit | By Way Of Lifeiqbal fpFox-OneSyndicate™official KAZOKU48Want To Be A CreativeMr-alf1anz Raider BlogSandy-Cyber
Chat Box Sandy-Cyber
Join this site
KxMadagascar Is Valid HTML5
  • Blogger Indonesia
  • Blognya Sandy
  • VHEE-ZONE
  •  Raider Blog
  • Sandy Creativity
  • Sandy-Cyber

Archive for Maret 2013

Cara mempromosikan blog

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


Share this article :


Cara memasang sponsor di blog part II

 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.

<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200">

<a href="http://pekanbaru-riau.blogspot.com/2007/10/mall-pekanbaru.html" target="_blank"><img src="http://3.bp.blogspot.com/_m5mB5X0aSog/ShQMBbqrJyI/AAAAAAAAAA4/5IjArJ_os_E/S220/malpekabaru_logo.jpg'"/></a>
<br/><br/>
<a href="www.telkomspeedy.com" target="_blank"><img src="http://lh5.ggpht.com/_HR4qF9th884/SvZ70c61-TI/AAAAAAAAAH0/fd1LcGnp0kg/s128/43r3.jpg"/></a>
<br/><br/>
<br/><br/>
<a href="http://www.putrasun.com/" target="_blank"><img src="http://lh5.ggpht.com/_HR4qF9th884/SvZ33BYiX-I/AAAAAAAAAHo/0QWC8LZpadU/s128/title.gif"/></a>
<br/><br/>
<br/><br/>
<a href="http://www.megaplasa.com/" target="_blank"><img src="http://lh4.ggpht.com/_HR4qF9th884/SvZ1JHcxu-I/AAAAAAAAAHY/3JgOQy7AhU0/s128/PICT1274.JPG"></a>
<br/><br/>
<br/><br/>
<a href="http://www.bertuah.org" target="_blank"><img src="http://lh4.ggpht.com/_HR4qF9th884/SvZ6L836lwI/AAAAAAAAAHs/hep88I9mXBE/s128/logo.gif"></a>
<br/><br/>
<br/><br/>
<a href="http://www.mandalaair.com/" target="_blank"><img src="http://lh3.ggpht.com/_HR4qF9th884/SvZ6Lx1dsJI/AAAAAAAAAHw/t-t_ppdaiVU/s128/logo-mandala.gif"></a>
<br/><br/>
<br/><br/>
<a href="http://www.telkom.co.id/" target="_blank"><img src="http://lh4.ggpht.com/_HR4qF9th884/SvZ2-2T2i5I/AAAAAAAAAHk/duDKzowXJMw/s128/new-telkom-logo.jpg"></a>
<br/><br/>
<br/><br/>
<a href="http://www.saturiau.com/read/ekonomi/707/2009/05/19/citarasa-foodcourt-mal-pekanba-html" target="_blank"><img src="http://lh3.ggpht.com/_HR4qF9th884/SvZ1JGvopFI/AAAAAAAAAHc/M4mj-vIXFDQ/s128/PICT1278.JPG"></a>
<br/><br/>
</marquee>

Share this article :


Cara memasang sponsor di blog

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.


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

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

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

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


Share this article :


Cara membuat animasi loading di blog

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.


membuat animasi loading blog dengan css
Ok, langsung aja di simak tutorial ini 
1. Masuk ke Dashboard Blogger, klik Template lalu pilih Edit HTML
2. Ini adalah point terpenting, pertama cek dulu template blogmu apakah sudah ada script jquery didalamnya atau belum, jika belum ada silahkan copy kode ini: 
<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[
3. Ikuti petunjuk dibawah ini sesuai dengan style animasi loading yang kamu suka
# Style 1
membuat animasi loading blog css3
Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

/* 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%; }
}
Lalu letakkan kode berikut tepat dibawah kode <body>

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

membuat animasi loading blog css3
Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

/* 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); }
}
Lalu letakkan kode berikut tepat dibawah kode <body>
<!-- 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="load2"><div class="spinner">
    <i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->


Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 3
membuat animasi loading blog css3
Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

/* 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)}
}

Lalu letakkan kode berikut tepat dibawah kode <body>
<!-- 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

# Style 4
membuat animasi loading blog css

Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

/* 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)}
}

Lalu letakkan kode berikut tepat dibawah kode <body>
<!-- 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
membuat-animasi-loading-blog-css3

Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

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


Lalu letakkan kode berikut tepat dibawah kode <body>
<!-- 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


Masukkan Kode berikut tepat diatas kode  ]]></b:skin>  

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


Lalu letakkan kode berikut tepat dibawah kode <body>
<!-- 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

Share this article :


Cara membuat Logo Sendiri

Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.
Pengen punya logo teks blog yang seperti ini?

 Atau yang seperti ini?
Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot

Sumber

Share this article :


Cara memasang Video dari Youtube di blog

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


 (Buka notepad dan paste hasil copy tadi)
(ini contoh script yang tadi hasil copy dari youtube)

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

Share this article :


diblog بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم cara memasang

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.



6. Save

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

Share this article :


Cara mempercepat loading Blog kita

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>






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

Sumber

Share this article :


Cara membuat Barner sendiri di blog

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




http://sadpanda.us/images/1688663-WYP0QRS.png
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.

Share this article :


Cara membuat logo I Love Indonesia di Blog

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>

       6. Klik Simpan Dan Lihat hasilnya


Sekian dulu ya bro. nannti sy update lagi yang lain,,,,



Share this article :


Memasang Facebook Page dan Follow Twitter di Bawah Posting Blog

Pada beberapa post terdahulu saya pernah membuat tutorial tentang cara memasang like facebook, tweet, tombol plus one di bawah postingan, selain itu ada juga tombol share melayang. Agak berbeda dengan itu, kali ini Julak akan share cara menambahkan like facebook page dan follow twitter di posting blog. 

Perbedaannya adalah jika pengunjung mengeklik tombol like, maka secara otomatis mereka akan menyukai halaman facebook blog kita, dengan catatan pada saat itu mereka sedang login di akun facebook. Sedangkan tombol suka biasa tidak, dan hanya menyukai postingan tertentu saja. Demikian pula tombol twitter, pengunjung otomatis akan memfollow akun twitter kita, yang jika tombol biasa hanya sekedar men "tweet" artikel kita. Sebuah nilai lebih saya kira jika diterapkan di blog sobat.
Mau tahu caranya? Silakan ikuti tutorial berikut ini

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



    <!-- Tombol Like Halaman Facebook  Twitter Follow by super-gaptek.com-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='margin:5px 0px 65px 0px; padding:10px; float:none; width:590px;'>
    <div style='margin:0px 0px 0px 0px; padding:0px; float:left; width:265px; border-right:1px solid #ddd;'><!-- Facebook Like button start --><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcaramembuatblogspot&amp;width=265&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false' style='border:none; overflow:hidden; width:265px; height:62px;'/></div><div style='margin:10px 30px 0px 0px; padding:0px; float:right; width:250px;'><!-- Twitter follow button start --><a class='twitter-follow-button' data-show-screen-name='false' href='http://twitter.com/sandymufc09'>Follow @sandymufc09</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><!-- Twitter follow button end --></div></div></b:if>



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 .

Share this article :


Cara Membuat Fans Page Facebook di 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 :)

Share this article :


Cara membuat Recent Post

Salah satu cara untuk mengurangi tingkat bounce rate adalah dengan memasang recent posts. Widget recent post bisa juga disebut artikel terbaru atau posting terbaru berfungsi sebagai petunjuk postingan yang baru di update. Blog sobat pastinya punya pelanggan tetap baik dari twitter facebook maupun feed rss. Tentunya saat mereka kembali setelah lama tidak ke blog kita mereka bisa tau apa saja post-post terbaru blog kita.

cara membuat gadget recent post di blogger


Pada tutorial kali ini saya akan memberikan tutorial cara membuat gadget recent post dengan thumbnail atau yang ada gambarnya, tentunya jika posting sobat ada gambarnya, namun jika artikel tidak memasukkan gambar, maka gambar pun tidak akan muncul. 
Yuk kita ikuti caranya berikut ini.

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.

Share this article :


Cara membuat Artikel terkait di Blog

Cara Membuat Related Post/ Artikel Terkait di Bawah Posting Blog sebenarnya cukup mudah, tujuannya ya tentu agar pembaca blog kita mengetahui, artikel-artikel apa saja yang berhubungan dengan artikel yang sedang dibaca. Selain widget Recent Post ataupun Popular Posts, Related Posts atau dalam bahasa Indonesia sering disebut Artikel Terkait ini adalah berdasarkan Label atau Kategori artikel yang sedang dibuka. Pada Tutorial kali ini ane mau berbagi mengenai cara membuat artikel terkait biasa berupa teks yang berada di bawah posting, yaa siapa tau pengunjung blog kita mau membukanya, hitung-hitung buat nambah statistik kunjungan

Buat apaan sih fungsi artikel terkait ini, salah satunya adalah untuk mengurangi tingkat bounce rate sebuah blog, apa itu bounce rate silakan buka artikel Bounce rate definisi, pengaruh dan cara mengetahuinya

Udah dech, GPL. langsung saja
Langkah pertama, seperti biasa Login di akun Blogger Anda, Klik Rancangan > Template > Edit HTML > centang Expand Template Widget, Lalu cari kode  
]]></b:skin>
2. Tepat di atas kode itu, masukkan kode di bawah ini:

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}
 3. Cari kode berikut ini  <div class=’post-footer-line post-footer-line-1′>, lalu dibawahnya masukkan kode berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Artikel Terkait</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
 Kata Artikel Terkait yang berwarna merah, silakan Anda ganti jika mau menggantinya. 

Klik pratinjau, lalu save/simpan template. Jika Anda mau mencoba namun belum berhasil ane siap bantu lewat komentar. Demikian posting cara membuat artikel terkait di bawah posting, semoga bisa membantu.

Selamat Mencoba, Salam Blogger.

Share this article :


- Copyright © 2013 Sandy-Cyber - Sasuke Dark Blue v.1 - Powered by Blogger - Designed by Johanes Djogan - Redesign by Sandy-Cyber -