Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

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.kelelawar terbang di blog

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:kelelawar
    <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/AVvXsEg9gIaMr52w5OTM8kUgHnWMNfgRUCOcYPxMrpYJwGskZA1y2dFRbef-MULtJ3K9ubgFUbhKG69nJISciXRG3K2JKJoxx6MI450lfB81bSWL8jSGgiKWwLH7a50UC1CeKQmymzr1d330wcBh/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


Script Anti Klik Kanan + Ctrl U + Ctrl C - No Ribet
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 

Efek Salju Keren di Blog


Efek Salju Keren di Blog

Mungkin Anda sudah sangat mengenali efek yang satu ini, Efek Hujan SaljuEfek Salju TurunEfek Falling Snow atau Efek Salju di blog atau apalah namanya, yang jelas semua itu untuk membuat tampilan blog semakin cantik, atraktif dan menarik banyak pengunjung. Ya tentu semua itu dilakukan untuk kebaikan blog, namun ada satu hal yang harus Anda pertimbangkan adalah penggunaan Javascript Efek Salju ini sedikit banyak akan mempengaruhi waktu loading halaman blog. 

Jika Anda benar-benar ingin memberi/membuat efek salju di blog Anda, saya sarankan gunakan kode Javascript Efek Salju yang ringan dan tidak rumit. Ini penting Anda pertimbangkan, karena maksud baik untuk mempercantik blog akan berubah menjadi bencana karena visitor/pengunjung blog Anda pergi sebelum sempat melihat blog Anda, akibat loading blog yang terlaaaaalu lamaaaaaa.......

So, solusinya cobalah gunakan Efek Salju Keren ini (hehe.....ternyata promosi produk sendiri), tapi ga ada salahnya Anda mencoba, karena Efek Salju Keren yang ini cukup unik dengan butiran-butiran salju   berbentuk objek unik yang jatuh dengan animasi berputar (rotate snow falling) dengan efek sesekali terhembus angin sepoi-sepoi......hehe keren Sob!!! 

Ada 2 style/type Efek Salju Keren yang saya sharing dibawah ini, Efek Salju "DesemberSnow 01" dan "DesemberSnow 02",  Anda bisa pilih salah satunya untuk menghiasi blog Anda

Cara Memberi/membuat Efek Salju Keren pada Blog

Caranya sangat mudah Sob, Anda hanya perlu menambah kode Javascript dan jQuery ini ke template blog dan selesai.

  • Masuk Blogger > pilih Template edit HTML
  • Dan letakkan kode Javascript dan jQuery ini tepat diatas tag </head>

Efek Salju "DesemberSnow 01"

Kode scirpt untuk efek salju "DesemberSnow 01"
<script src="http://problogizjs.googlecode.com/files/desembersnow.min.js" type="text/javascript"/>

Kode jQuery untuk memberi efek berputar pada butiran salju
<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js" type="text/javascript"/>

Efek Salju "DesemberSnow 02"

Kode scirpt untuk efek salju "DesemberSnow 02"
<script src='http://problogizjs.googlecode.com/files/desembersnow2.min.js' type='text/javascript'/>

Kode jQuery untuk memberi efek berputar pada butiran salju
<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js" type="text/javascript"/>

Kemudian Save Template

Alternatif  lain memberi Efek Salju Keren pada Blog dengan menambahkan sebagai widget/gadget Blogger. 

  • Masuk Blogger > pilih Tata Letak > add HTML/Javascript
  • Dan pasang/letakkan kode Efek Salju Keren diatas
  • Kemudian Simpan
Untuk penulisan kode Javascript pada widget, seperti berikut :

<script src="http://problogizjs.googlecode.com/files/desembersnow.min.js"></script>
<script src="http://problogizjs.googlecode.com/files/rotatesnow.jquery.js"></script>


Selesai!!
Lihatlah hasilnya, sekarang blog Anda ditaburi salju-salju yang berjatuhan. Selain itu waktunya sangat tepat  Anda memberi efek salju "DesemberSnow" ini di blog, karena sebentar lagi tiba waktunya bagi yang merayakan Hari Raya Natal yang identik dengan moment turunya salju itu. 

Browser Support untuk Efek Salju 

Basicly, efek ini menggunakan Javascript yang secara umum kompatibel di hampir semua browser (apalagi browser modern), efek ini akan bekerja sempurna pada browser Chrome, dan support juga di browser Firefox 3+, Opera 6+, IE 9+ (efek shadow salju kurang baik), Safari.

Good Luck and Enjoy it!!

Sumber : http://problogiz.blogspot.com/

Cara Membuat Efek Salju Natal DiBlog

Oke untuk menghabiskan waktu luang gue yang ngak begitu singkat langsung aja dech untuk hari ini gue mau posting lagi mengenai TipsBlog, udah lama banget gue ngak posting mengenai tipsblog oke langsung aja dech postingnya mengenai Cara Membuat Efek Salju Natal DiBlog, 

Oke sedikit penjelasan mengapa gue milih ini untuk dipostingkan pada hari ini karna, mungkin alasannya karna ini kan udah dekat banget dengan natal jadi untuk mendapatkan visitor yang lebih menurut gue lebih baik tamba beberapa animasi aja dech diblog agar blog tampak lebih menarik dan oke kelihatannya :

Oke langsung aja dech pada tips ini dia, Cara Membuat Efek Salju Natal DiBlog :


  • Pertama tam kamu mesti login ke akun blog kamu,langsung aja kesini blogger.com
  • Kalo udah langsung aj dech kamu buka Tataletak
  • Kalo udah langsung saja TambahGadget > kalo udah langsung pilih HTML/Java Script
  • Kalo udah juga langsung aja pastekan kode ini kedalam HTML/Java Script tersebut 
  • ini dis kodenya :

<script src="http://tgffghg.googlecode.com/files/snowstorm.CobaSanaSini.js" type="text/javascript"></script>

  • Kalo udah  pastekan kode tersebut langsung aja simpan HTML/Java Script, tersebut dan langsung aja lihat blog kamu, selamat mencoba
Oke sekian dulu dari saya jangan lupa untuk terus berkunjung keblog saya dan jangan lupa juga untuk meninggalkan komentar anda disini sekian terima kasih atas kunjungannya salam blogger  Oke sekian dulu salam Blogger by CobasanaSini
 
Dengan berlangganan Newletter kami secara gratis. Anda akan secara otomatis mendapat Update terbaru dari artikel-artikel terbaik kami.

Address

PT. Sobatyan Corp Media.
Jln. Pongtiku No 78 rantelemo.
Email : cs@sobatnyan.com
Twitter : @SobatyanCorp

About Us

Sobatyan Corp adalah Media yang menyajikan artikel yang bermamfaat bagi seluru khalayak internet. SC menyajikan informasi secara real dan terpercaya, memberikan solusi yang baik, membetikan inspirasi kepada semuah orang.
Copyright © 2015. Sobatyan Corp - All Rights Reserved
Design by Novriyan Tangke Powered by Sobatyan Corp