19 Desember 2011

Cara Membuat Hujan Salju DI Blog Update

Cara Membuat Hujan Salju DI Blog Update - Di Postingan Terdahulu saya pernah membuat Cara Membuat Salju Di Blog, tapi kode JS nya sudah gak berfungsi, jadi saya update aja daripada mengecewakan pengunjung maka saya buat 'Cara Membuat Hujan Salju DI Blog Update'. berikut adalah tutorialnya :

  • Masuk ke Blogger
  • Pilih Rancangan - Edit Html - centang Expand widget template
  • Kemudian letakkan kode berikut diatas kode </body>

<script src='http://cayunkatel.googlecode.com/files/snow.js' type='text/javascript'>
</script>

  • Kemudian Save Template.

Cukup Mudah untuk anda terapkan pada blog anda. cuma itu yang saya bisa bagi kepada kawan semoga Cara Membuat Hujan Salju  DI Blog Update berguna dan bermanfaat. 
sumber:tanpa-isi.blogspot.com

Cara Mengubah Judul Postingan Blog Menjadi Gambar

angkah langkahnya adalah sebagai berikut :
Masuk ke Blogger coy
Pilih ajja Rancangan -- Edit Html -- centang Expand Widget template.

Kemudian bagi yang belum punya font, silahkan pilih font di http://www.fontsquirrel.com, kalau sudah menemukan font yang cocok klik font tersebut dan .

Cara Membuat Back To Top Dengan Jquery

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });
}
}, 100);
});
});
</script>

Ubahlah kode yang saya tandai dengan warna merah sesuai kehendak anda.
Kemudian Save.

Dan lihatlah hasilnya, blog anda akan terlihat bagus dan cantik dengan BAck to top Jquery.

Memasang Burung Twitter Warna Warni Di Blog

Cara Memasang Burung Twitter Warna Warni Di Blog - Dulu pernah saya membahas Cara Membuat Burung Twitter di Blog, tapi Burung Twitter yang dulu masih berwarna standar. Sekarang sudah ada Burung Twitter Warna Warni Di Blog, variasi warnanya adalah : merah, kuning,hijau,biru tua,putih,ungu, purple dll.
Gimana ? Bosan dengan warna yang standar ? Mari kita beralih ke Burung Twitter Warna warni.

Cara Memasang Burung Twitter Warna Warni Di Blog adalah :


  • Login ke Blogger
  • Pilih Tata Letak - Tambah Widget - Html/Javascript
  • Kemudian copy paste kode berikut :

<script type="text/javascript" src="http://cayunkatel.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMmClz-mqyou7vkkv6nl2hvMz-y8NphnH4ZBvsIqMlWbdfgoFsvVs5FZU7nF1N8No93VeNeWHZYFHgjZ-jMDZZFhP_vEqGzx7P-tnn27ZAT-pn1no5WjhCdYKcKlKF7rPt5b5j3S9o1P8/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/cayunaja";var tweetThisText = "Twitter - cayunaja http://tanpa-isi.blogspot.com/";tripleflapInit();
</script>

Keterangan :

  • Ganti http://twitter.com/cayunaja dengan alamat twitter anda,
  • Ganti http://tanpa-isi.blogspot.com/ dengan alamat Blog anda.
  • Ganti cayunaja dengan nama anda.
  • Untuk memlih warna burungnya silahkan ganti kode yang berwarna merah dengan kode berikut :
Warna Kuning :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMeSKxmlw3MtavhNusiZpISJGFIfg2msGq_b0EVVVmNYS3h3Txnjjsp13uBJnFgyh_iA_EYL0SfMhhj1pahIEzo6v-rSY8hMQtQs-OHYReGBsh3rfa9hB7l6QIS8Wu8MxccnR73MC1SE6A/s1600/yellow.png

Warna Merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBCBvIRbjHqCsIHUTewi8s_cBQ8RiJ6huVF2lQeQGldNe-TZLlzoYtNuUujvGs98L8Xjfzfo7Z2y5h_c4flj_xZgbkDt8mk64vtEDLfbxD9mhpk893p_TMwk-lld7SNhqrsl07CASD2iD/s1600/red.png

Warna Biru Tua :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lV7wNbALLLl4PExDr9XHrHPl1JcCZ5YywCERV2MubMNF844jOZKDnpu5g7e67qYnuWGTzTZ6QC6b9m81n0oGxyrmJC_-hJx_uRuLzLSLGLMHVthq3oJ6sDGYxM-zN4UwzY298C6FLWR6/s1600/Blue.png

Warna Putih :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHCStxFfp0OwqqLhKUWF5928IfeQkd1fwKY1g3xBqbpMm49SbEmoAHfDvufkuuVboHpTLa1RJohg7z4GPbCp0BI11RRs78TgdcK1hEOOhCx2sZkNEiYk8-KXQoY1jFAQUDhACKphAeo-F/s1600/white.png

Warna Coklat :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazxRgQ8V1YrbaG7O5uuSHWKxE4i79zBKTyb9kfxNyo84b_V0jbyYefLLp_1ixrej-uL0LIsou6d6Xtsx01OEjw3EZJBqSgcPRPEshoqR1CHVokCN-Yl26BegZI_7Uu3AR3ESjAEFfPPQM/s1600/brown.png

Warna Hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxgpHnz502nsDjGcfrpov65A4u_b3E5_y3La77-tWNt6hJLSiqFDW7OD_slUn8dQ6KvTOYcfe4V1R__4BuEgetC6U32FwcwLGI2N-G1Jt4I_W9mfZZOo-JhCNzUsS6-EK5fCBL52t2cap/s1600/Green.png


Warna Hitam :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9t4FHn-Uxm0vurqvqjgOvYrEt1OkJu2Q0pmm_BbsrLdp-kS5DnyaKTKjbu16jAfpsBJIWjjrVmtoUWUkFvGdI6AvsfkXP_-BbRSMbOnnsvVPdeo6NGp88HPfYJQxoq9a3DsUbB0f0jUB/s1600/black.png

Warna Purpel :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjvlxHbGBNTWAEQD-cFIbwikTee63y1h4BgyuNTcb26vNkDlovsvIW8dRgjgb2kLaLzdfaN0mb8whTXGBkImG7ISyRGSiCm2iuh8ma3TlLtYiAOwHbx2CH47sEk7xqD1Xx3ZaAqQ8prWs/s1600/purple.png

  • Lalu Save.

Nah bagaimana ? Sekarang Burung Twitter ada akan lebih tampak seperti pelangi.
Semoga  Cara Memasang Burung Twitter Warna Warni Di Blog bermanfaat.

Cara Membuat Admin Bar Pada Blog

Cara Membuat Admin Bar Pada Blog, Memasang Admin Bar , widget ini hampir menyamai pada wordpress tetapi lebih simpel. Menu ini dibuat bertujuan untuk mempermudah admin blog untuk memposting artikel atau edit blog anda. Silahkan lihat gambar yang ada sebagai screenshoot demo Admin Bar .
Untuk  Cara Membuat Admin Bar Pada Blog , anda hanya perlu mengukuti intruksi intruksi berikut untuk membuatnya. Silahkan simak dengan baik baik :

Login Ke Blogger.
Pilih Rancangan + Edit Html
Kemudian Cari Kode ]]></b:skin>
Letakkan kode berikut diatasnya :

ul.adminbar
{background-color:#EEEEEE;
border:1px solid #E6E8E9;
margin-bottom:8px;
padding:5px 5px 0;
}
ul.adminbar li {
background-color:#FAFAFA;
border:1px solid white;
list-style:none outside none;
margin-bottom:6px;
outline:1px solid #DDDDDD;
padding:12px;
}
ul.adminbar li a
{display:block;
color:#888888 !important;
text-shadow:1px 1px 0 #FFFFFF;
text-decoration:none;
font-size:22px;
height:27px;
margin:0 0 0 15px;
}
a.dashboard
{background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;
padding:4px 0 2px 47px;
}
a.settings
{background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;}
a.layout
{background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.editpost
{background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.newpost
{background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}


Save Template.

Langkah selanjutnya masuk ke Add Element
Klik Tata Letak + Add Widget + Html/javascript
Kemudian coy paste kode berikut :
<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=####" target="_blank">Change Settings</a></li>
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=####" target="_blank">Change layout</a></li>
<li><a class="editpost" href="http://www.blogger.com/post.g?blogID=####" target="_blank">Edit posts</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=####" target="_blank">New post</a></li>
</ul>

nb : Ganti tanda ### dengan ID blog anda.
Kemudian Save.

Membuat Kotak Iklan Banner 125 x 125 Di Blogspot

Kali ini saya akan membahas mengenai Kotak Iklan Banner , melihat belakangan ini semakin maraknya pemasangan Banner Untuk Iklan di blog dan kebanyakan Template tidak mempunyai fasilitas Kotak  Banner Ads ini maka saya Akan memberitahu cara membuatnya agar blog Sobat bisa dipasangi Banner Ads. berikut adalah langkah-langkah dalam pembuatnya :



  • Masuk ke Blogger.com
  • Pilih Rancangan > Edit Html > centang "Expand Widget Template"
  • Lalu letakkan kode berikut diatas kode ]]></b:skin>

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}
  •  Simpan Template
Langkah selanjutnya adalah penambahan pada elemen.
  • Pilih Rancangan > Tata Letak > Add Widget > Html Javascript
  • kemudian Copy paste kode berikut :

<div id="Box-Banner-ads">
<a target="_blank" href="http://tanpa-isi.blogspot.com/"><img border="0" alt="ads" src="https://sites.google.com/site/wayankatel/file/Banner125.gif"/></a>
<a target="_blank" href="http://tanpa-isi.blogspot.com/"><img border="0" alt="ads" src="https://sites.google.com/site/wayankatel/file/Banner125.gif"/></a><a target="_blank" href="http://tanpa-isi.blogspot.com/"><img border="0" alt="ads" src="https://sites.google.com/site/wayankatel/file/Banner125.gif"/></a><a target="_blank" href="http://tanpa-isi.blogspot.com/"><img border="0" alt="ads" src="https://sites.google.com/site/wayankatel/file/Banner125.gif"/></a> </div>

ket : ganti tulisan yang berwarna merah tersebut dengan alamat Url iklan banner . dan ganti tulisan yang berwarna pink dengan Url gambar iklan sobat.
  • Lalu Save.
Semoga trik kali ini bisa bermanfaat bagi sahabatku semua dan semoga berhasil