Membuat kelelawar terbang di blog

Tips Trik Blog | Tutorial Blog -Halo sobat tutorialbelajarblog yang tercinta,kali ini saya akan memberikan script yang saya uplaod di google code tentang cara membuat kelelawar terbang di blog, untuk membuat agar blog kamu banyak cara yang bisa kamu lakukan nah,kalau membuat kelelawar terbang pada blog inilah scriptnya,silahkan pasang di blog kamu.

Cara membuat kelelawar terbang di blog:

• Masuk ke Blogger dengan akun anda
• Setelah masuk ke Dashboard pilih Rancangan~~Tata Letak~~Add Widget
• Lalu pilih Html/javascript
• kemudian copy paste kode berikut:
  

  <script src="http://oktri.googlecode.com/files/lawa.js" type="text/javascript"></script>

• Lalu simpan.

Mungkin pada postingan selanjutnya tutorial belajar blog akan berbagi tips tidak berbeda jauh yaitu  Tips Membuat gambar Berjatuhan (falling snow effect),

Cara Membuat Efek Bubble 'Gelembung' Pada Cursor

TUTORIAL BLOG | TIPS BLOG | TIPS KURSOR DI BLOG -
Effek Bubble Kursor adalah bila kita menggerakkan mouse pada halaman blog kita maka akan keluar dari Kursor beberapa gelembung, yang tadinya kecil hingga membesar. Dan makin sering kita menggerakan Kursor makin banyak gelembungan (bubble) yang berterbangan di halaman blog kita.

OK. Kalau sobat berminta dan ingin memasangnya di blog masing-masing silahkan ikuti langkah-langkah berikut.

   1. Seperti biasa LogIn ke Blogger sobat
   2. Pada halaman Dasbor klik Rancangan
   3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget,

   4. Pilih yang HTML/Javascript

   4. Copy dan Paste Kode Bubble Kursor Efeck di bawah ini di ktak HTML/Javascript

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://ade-tea.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

PERINGATAN!!
Kode yang berwarna merah adalah warna Bubble silahkan sobat ganti dengan warna kesukaan sobat, untuk bantuan kode warna silahkan klik disini.
Kode yang berwarna kuning adalah jumlah Bubble yang akan kita pasang. Sobat boleh menggantinya mau seberapa banyak Bubble yang akan di tampilkan

     5.  Setelah semua langkah langkah selesai. Klik tombol SIMPAN, dan lihat hasilnya.

Selamat mencoba mudah-mudahan berhasil dan dapat bermanfaat, Amiin.

Cara Membuat artikel terkait di blogger

Apa Fungsi Artikel Terkait (Related Posts)?

Fungsinya dari related posts atau artikel terkait selain untuk membuat seo blog kita menjadi bagus, artikel terkait [related post] ini sangat membantu traffic/pengunjung untuk lebih leluasa membaca artikel lain yang mungkin bermanfaat untuk diketahui. Tentu Hal ini sangat memudahkan pengunjung dan efek baik dari pembaca akan betah dan suka membaca di blog kita.

Cara Membuat artikel terkait di blogger,saya sudah mengemas codingnya dalam javascript sehingga codingnya jadi lebih ringkas. So mari kita langsung ke cara membuat nya:

1, Seperti biasa masuk ke blogmu
2. Pilih template, klik edit html dan klik lanjutkan
3. Ceklist pada Expand Template Widget (jangan lupa simpan template aslinya buat jaga-jaga)
4. Cari kode: </head> (gunakan Ctrl+f untuk mencari)
5. Copy kode dibawah ini tepat diatas </head>

<style> #related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_ZbpH8lxO5ol2VhyphenhyphenDFFiPmdtj7y3Nxf4UPIXHy_AOCQppa7Qk76RUnTAFrTAnDVUf51yilfkjSrPo9p8A7ltWuXY6ogAMZfSk8e771q1vkFZ195c17gghGPVqsh9KtmmM3_XWk7Pg6Qo/s1600/rss.png ") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://oktriblogger.googlecode.com/files/related-post-tutorialbelajarblog.js' type='text/javascript'/>

6. Cari kode <data:post.body/> atau <div class='post-body> Kemudian copy code dibawah ini, letakkan persis dibawahnya

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

Simpan template kamu.demikian Cara Membuat artikel terkait di blogger semoga berguna.

Perhatian!! Biasanya Kode HTML <data:post.body/> ada yang lebih dari 3, untuk meletakan kode di atas Biasanya dibawah <data:post.body/> yang ke2 atau sesuaikan dengan template anda.
Untuk kalimat yang saya tandai merah “Related Posts“ bisa anda ganti dengan kalimat  ”Artikel terkait“, “Baca Juga Yang Ini“,  ”Baca Lagi Yang Ini” dan atau terserah dengan kalimat anda. agar pembaca tertarik untuk membaca artikel dalam blog kita.
Untuk sementara ini saja yang bisa saya bagikan , jika ada yang kurang mohon koreksinya. karena saya masih belajar. 

Simple Javascript Floating Image, Object, Avatar, dan Lain-lain

Saya tertarik dengan dengan float image yang pernah saya lihat di blog-blog atau forum untuk di pasang di blog saya. setelah mencari di google saya menemukan script floating dari dynamic drive yang telah di ringkas dan di buat simple oleh joy atau crazy davinci . script ini berfungsi untuk menampilkan gambar, link, mp3 atau apa saja di sidebar page kita.



Caranya mudah dan simple :

• Letakkan kode berikut setelah tag <body> sebelum tag </body>

<div id="avatar">
<img src="YOUR IMAGE URL" width=" 80" height=" 80"/>
</div>

•  Letakkan kode berikut setelah tag <head> sebelum tag </head>

<link rel="stylesheet" type="text/css" href="http://static.int.crazydavinci.net/style/float_joy.css " />
<script type="text/javascript" src="http://static.int.crazydavinci.net/script/float_joy.js"></script>

Silahkan download dan edit file CSS http://static.int.crazydavinci.net/style/float_joy.css kemudian upload di hostingan sendiri.
Untuk modifikasi file .js nya silahkan download dan edit file http://static.int.crazydavinci.net/script/float_joy.js kemudian upload di hostingan sendiri.

• Keterangan: 

startX = parseInt(screen.width/2)+400;
startY = parseInt(screen.height/2)-110

starX akan menjadi objek horizontal dari tengah halaman anda.
starY  akan menjadi objek vertikal.

Nah untuk mengganti gambar menjadi mp3, atau apa saja silahkan modifikasi tag div avatar nya :

<div id="avatar">
<img src="YOUR IMAGE URL" width=" 80" height=width=" 80"/>
</div>

Ganti saja yang saya beri warna merah di atas dengan kode embed mp3 atau yang kamu mau.

Ok, saya rasa cukup jelas dan semoga berguna.
Preview bisa di liat di blog saya atau di SINI .

Script Anti Klik Kanan + Ctrl U + Ctrl C

OKTI BLOG | TUTORIAL BLOGING | SHARING INFORMASI, Sekedar berbagi Informasi seputar blog, karena sebelum nya ada yang bertanya bagaimana membuat blog anti klik kanan + CTRL U + copy langsung saja Script Anti Klik Kanan + Ctrl U + Ctrl C , sering digunakan jika seseorang webmaster ingin memproteksi isi didalam web maupun blognya, berikut akan saya berikan script yang ga ribet, dan sangat mudah untuk dipasang, cocok untuk Web Maupun Blog kita, saya sendiri sudah coba menerapkan ini

Menambahkan Script Anti Klik Kanan + Ctrl U + Ctrl C - No Ribet

Cukup simple dengan menambahkan kode dibawah ke dalam tag <body>

oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'

Penerapan Script Anti Klik Kanan + Ctrl U + Ctrl C - No Ribet

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Nah gimana sobat blogger? Mudah sekali bukan? Silahkan dicoba dan Tinggalkan komentar ya sobat :)

Terima kasih Untuk Om Dayz Sudah Berbagi Informasi Ini 

Read more: http://oktriblogger.blogspot.com/2013/01/script-anti-klik-kanan-ctrl-u-ctrl-c.html#ixzz2HGQd0Zu7