Sinau

Mau kasih Judul agak bingung, tapi kira-kira begini maksudnya, saat ada yang datang berkunjung ke blog kita, entah mereka datang dari mana kemudian memmbuka home maka akan muncul kotak atau boks dari atas menu (home) meluncur kebawah,

Nah, kotak ini ada tombol close-nya, tapi jika pengunjung tidak meng-klik tanda clouse selama 5 detik (bisa diset sesuai keinginan) maka boks tersebut akan menghilang otomatis.

Boks atau kotak ini bisa kita isi macam-macam kode sesuai dengan keinginan misalnya gambar, iklan atau Facebook Fans dll. Kotak atau boks ini bisa kita munculkan di home, atau dipostingan atau keduanya, tinggal kita sesuaikan saja ingin dimunculkan dimana dengan mengatur properti pada HTML.

Ada dua versi pembuatan kotak ini yaitu yang dapat muncul dan menghilang otomatis seperti yang diulis diatas dan ada yang harus menutupnya dengan meng klik tombol close jika ingin menghiangkan boks tersebut. Contohnya seperti gambar dibawah ini

Okey nggak usah basa basi ini kodingnya :

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog_box" ).dialog({
modal: true,
width:400});
});

setInterval(function(){AutoClose()},5000);//JQuery UI Dialog box will auto close after 5 seconds.
function AutoClose()
{
$(function() {
$( "#dialog_box" ).dialog( "close" ).fadeOut(1000);// //Auto Close Dialog Box.
});
}
</script>

<div id="dialog_box" title="Topik pilihan dari admin Oyin">
Letakan disini kode iklannya
</div>

Sampean bisa mengubah tampilan boksnya dari kode CSS, untuk mengubah tampilan boks tentu harus di unduh dulu Cssnya (http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css) lalu diedit dengan notepad sesuai keinginan misalnya diganti warnanya. setelah itu cssnya silahkan di host lagi misalnya di google kode atau dikopikan diatas ]]></b:skin>

width:400});
Adalah lebar kotak bisa disesuaikan dengan gambar atau tulisan. Sedangkan untuk tingginya sudah diset auto.

{AutoClose()},5000);
Adalah waktu yang digunakan untuk menutup secara otomatis 5000 (mili scon) = 5 detik

Huruf hijau adalah isi Boks silahkan sesuaikan sendiri.
Huruf ungu adalah judul Boks, silahkan sesuaikan sendiri.

Catatan :
Tutorial ini berasal dari blog luar (aku lupa catat alamatnya) hehehe.

Tutorial Blog - Oktober 11, 2013

Membuat Kotak iklan yang muncul dan menghilang otomatis

Mau kasih Judul agak bingung, tapi kira-kira begini maksudnya, saat ada yang datang berkunjung ke blog kita, entah mereka datang dari mana...

Bagi yang suka nyolong kode blog orang lain, mungkin alat ini berguna untuk para pencuri kode script. Biasanya para pencuri itu malas mikir yang ruwet maunya instant saja, nah untuk itu mungkin senjata ini berguna bagi sampean para pencuri kode orang.

Sedikit penjelasan :

Sebelum di encript kode htmnya seperti ini :

<script language="javascript">
function preloadImages(){
var iA=new Array();
for(i=0;i<arguments.length;i++){
iA[i]=new Image();
iA[i].src=arguments[i];
}}
preloadImages('img1.gif','img2.gif','img3.gif');
</script>

Setelah di encript sama yang bikin kode maka akan berubah seprti ini :

%264Dtdsjqu%2631mbohvbhf%264E%2633kbwbtdsjqu%2633%264F%261E%261Bgvodujpo%2631qsfmpbeJnbhft%2639%263%3A%268C%261E%261Bwbs%2631jB%264Eofx%2631Bssbz%2639%263%3A%264C%261E%261Bgps%2639j%264E1%264Cj%264Dbshvnfout/mfohui%264Cj%2C%2C%263%3A%268C%261E%261BjB%266Cj%266E%264Eofx%2631Jnbhf%2639%263%3A%264C%261E%261BjB%266Cj%266E/tsd%264Ebshvnfout%266Cj%266E%264C%261E%261B%268E%268E%261E%261B%261E%261BqsfmpbeJnbhft%2639%2638jnh2/hjg%2638%263D%2638jnh3/hjg%2638%263D%2638jnh4/hjg%2638%263%3A%264C%261E%261B%264D0tdsjqu%264F1

Tentu saja sangat merepotkan kode yang sudah diubah oleh pembuat kode tersebut bagi para pencuri karena bentuknya huruf hexa, oleh karena itu para pencuri kode harus punya senjatanya untuk mengembalikan kode2 hexa tersebut ke bentuk semula.

Then, you decode the string and write it to the page by calling the dF() function (which was just unescaped and written to the page in the previous step) passing the string above like this:

dF('%264Dtdsjqu%2631mbohvbhf%264E%2633kbwbtdsjqu%2633%264F%261E%261Bgvodujpo%2631qsfmpbeJnbhft%2639%263%3A%268C%261E%261Bwbs%2631jB%264Eofx%2631Bssbz%2639%263%3A%264C%261E%261Bgps%2639j%264E1%264Cj%264Dbshvnfout/mfohui%264Cj%2C%2C%263%3A%268C%261E%261BjB%266Cj%266E%264Eofx%2631Jnbhf%2639%263%3A%264C%261E%261BjB%266Cj%266E/tsd%264Ebshvnfout%266Cj%266E%264C%261E%261B%268E%268E%261E%261B%261E%261BqsfmpbeJnbhft%2639%2638jnh2/hjg%2638%263D%2638jnh3/hjg%2638%263D%2638jnh4/hjg%2638%263%3A%264C%261E%261B%264D0tdsjqu%264F1');

So, to bring all this together, the following is what you would paste into your page:

document.write(unescape('%3C%73%63%72%69%70%74%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%0D%0A%66%75%6E%63%74%69%6F%6E%20%64%46%28%73%29%7B%0D%0A%76%61%72%20%73%31%3D%75%6E%65%73%63%61%70%65%28%73%2E%73%75%62%73%74%72%28%30%2C%73%2E%6C%65%6E%67%74%68%2D%31%29%29%3B%20%76%61%72%20%74%3D%27%27%3B%0D%0A%66%6F%72%28%69%3D%30%3B%69%3C%73%31%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%74%2B%3D%53%74%72%69%6E%67%2E%66%72%6F%6D%43%68%61%72%43%6F%64%65%28%73%31%2E%63%68%61%72%43%6F%64%65%41%74%28%69%29%2D%73%2E%73%75%62%73%74%72%28%73%2E%6C%65%6E%67%74%68%2D%31%2C%31%29%29%3B%0D%0A%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%75%6E%65%73%63%61%70%65%28%74%29%29%3B%0D%0A%7D%0D%0A%3C%2F%73%63%72%69%70%74%3E'));dF('%264Dtdsjqu%2631mbohvbhf%264E%2633kbwbtdsjqu%2633%264F%261E%261Bgvodujpo%2631qsfmpbeJnbhft%2639%263%3A%268C%261E%261Bwbs%2631jB%264Eofx%2631Bssbz%2639%263%3A%264C%261E%261Bgps%2639j%264E1%264Cj%264Dbshvnfout/mfohui%264Cj%2C%2C%263%3A%268C%261E%261BjB%266Cj%266E%264Eofx%2631Jnbhf%2639%263%3A%264C%261E%261BjB%266Cj%266E/tsd%264Ebshvnfout%266Cj%266E%264C%261E%261B%268E%268E%261E%261B%261E%261BqsfmpbeJnbhft%2639%2638jnh2/hjg%2638%263D%2638jnh3/hjg%2638%263D%2638jnh4/hjg%2638%263%3A%264C%261E%261B%264D0tdsjqu%264F1');

Nah ini senjata yang kalian perlukan, untuk meng Encript atau Decript kode yang diperlukan :

Normal Text/HTML/JavaScript (Select all...)

Escaped Text/HTML/JavaScript (Select all...)

Klik Select All kemudian pastekan kode sampean.

Normal Text/HTML/JavaScript (Select all...)

Code Key:

Encoded Text/HTML/JavaScript (Select all...)

Klik Select All kemudian pastekan kode sampean.

sumber :
scriptasylum.com/tutorials/encode-decode

Tutorial Blog - Oktober 11, 2013

Encript dan Decript kode HTML

Bagi yang suka nyolong kode blog orang lain, mungkin alat ini berguna untuk para pencuri kode script. Biasanya para pencuri itu malas mik...

Bagi yang ingin menyisipkan text berjalan baik pada postingan maupun sidebar sebaiknya kita menggunakan jquery, karena lebih halus perpindahan (jalannya text) dari pada dengan marque.. Untuk contohnya ada pada blog ini dibawah slider.

ini kodingnya tinggal mengganti kalimat atau warna Backgroundnya jika ada yang tertarik, marque ini selain berisi text yang berjalan juga disisipi emot dari yahoo agar lebih menarik untuk dibaca.

<script language="JavaScript1.2">
var marqueewidth="400px" // lebar text
var marqueeheight="25px" // tinggi text
var marqueespeed=1 // kecepatan jalan text
var marqueebgcolor="#24B200" // warna dasar text
var pauseit=1 // nilai satu text akan berhenti jika disentuh mouse.

var marqueecontent='<nobr><font face="Arial"><span style="color: white;">Thank you for your care mom, I luv you so much <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0></span</font></nobr>'

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate
function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Tutorial Blog - September 08, 2013

Membuat text berjalan dengan Jquery

Bagi yang ingin menyisipkan text berjalan baik pada postingan maupun sidebar sebaiknya kita menggunakan jquery, karena lebih halus perpin...

Wayah wengi udan gerimis, mBah Darmo kademen, pengen ngombe susu supaya awake rada anget. Sa'rehne kente'an susu, mBah Darmo

menyang warung golek susu bubuk. Tekan ngarep salah suwijining warung kelontong, mBah Darmo mlebu karo clingak-clinguk nggoleki susu,

ngantek diparani sing jaga...

Penjogo:
Badhe mundhut punapa mBah?

mBah Darmo kaget diundang simBah karo penjogo warung. Bocah kuwi pantese dadi anake, dudu putune.

Menawi Susu Bubuk wonten mboten mBokdhe?

Sing jogo kaget banget diundang mBokdhe. Ngantek rambute njengat kabeh!. Banjur protes keras marang mBah Darmo :

Penjogo:
Loh kok diundang mBokdhe tho? Kulo niki taksih enom loh mBah! Kok sakpenake dhewe diundang mBokdhe. Umurku lagi selikur mBah! Isih

kinyis-kinyis! Selikuuuuuur!

mBah Darmo:
Lha sampeyan ngapa kok ngundang kulo simBah? Umurku lagi seket je, kok diundang simBah?

Penjogo:
Loh, Romo kulo umure inggih seket siji sampun kagungan putu. Adi kulo nikah umur pitulas, sakmenika anake sampun kaleh! Panjenengan

sampun pantes diundang simBah, dadi ampun protes rumangsa enom terus!

mBah Darmo:
Yaaaaaaaah.... sampeyan injih mboten pareng protes diundang mBokdhe! Wong rayi sampeyan sampun kagungan putra kaleh! injih mboten???

Kanca-kancane Penjogo warung ngguyu kemekelen weruh bocah kuwi ora iso njawab pitakone mBah Darmo. Kepeksa Si Penjogo warung ora

sido ngundang simBah marang mBah Darmo. Diganti ngundang "Om" wae amarga luwih enom setahun tinimbang Romone.

Source :
http://duniashinichi.blogspot.com/

Humor - Agustus 31, 2013

mBah Darmo wong tuo sing rodo edan

Wayah wengi udan gerimis, mBah Darmo kademen, pengen ngombe susu supaya awake rada anget. Sa'rehne kente'an susu, mBah Darmo me...

Saat kita ingin share artikel atau postingan di facebook, kadang yang muncul cuma judul postingannya saja, sedangkan untuk deskripsinya harus kita tulis sendiri, hal itu tentu tidak efiesien karena dua kali menulis, nah agar deskripsi setiap artikel yang kita share muncul otomatis, maka kita harus menyesuaikan meta tag pada edit HTML.

Banyak blog yang membahas bab meta tag. Ada yang katanya SEO ada yang katanya Super SEO, mbuh lah apa maksudnya, yang jelas sudah banyak aku coba dan hasilnya biasa-biasa saja. Karena penasaran dengan apa yang namanya meta tag dan fungsinya, maka aku coba memahaminya dan ini hasil meta tag yang aku sisipkan pada edit HTML, kemudian aku coba share beberapa artikel di fb, tapi ntah SEO apa Super SEO aku tidak tau. dan ini hasilnya.

Ada dua bagian meta tag dimana bagian pertama untuk memberi tahukan search engine saat ada orang mengetik nama blog kita, pada pagian ini yang muncul hanya nama blog dengan deskripsi secara umum yang kita tulis pada meta tag :

<meta content='DESKRIPSI YANG KITA TULIS SECARA UMUM' name='description'/>

Seadangkan pada bagian kedua yang dibatasi dengan kode <b:else/> kemdian diakhiri dengan </b:if>
jika orang mencari kata kuci sesuai nama judul post atau isi artikel pada blog maka muncul seperti ini hasilnya pada search engine google :

Nah, begitulah kira2 yang aku maksud. Ternyata penulisan HTML setelah aku amati tak ubahnya seperti menulis kode visual basic dimana ada kata if else dan end if cuma beda di tulisane, tapi intine sama memerintahkan tugas mesin untuk mencari kata kunci dan jika tidak diketemukan maka diberi alternatif..
Dan, developernya FB mengambil data dari meta tag ini berdasarkan <meta content='article' property='og:type'/> dan fbxml karena server FB tidak menyatu dengar servernya google.

Nah, ini meta tag hasil utak-atiku, aku membuat tiga bagian dimana masing-masing punya peran. Jika diterjemahkan dengan bahasa manusia, maka perintanya kira2 seperti ini,

Cari nama asliku jika tidak ada cari sesuai nama panggilanku, jika tidak ketemu juga cari semua nama2 yang pernah aku tulis atau nama yang mirip dengan ku...

Kesalahan dalam menulis atau menempatkan susunan meta tag akan mempengaruhi tampilan blog dan mengacaukan mesin pencari (search engine).

Itulah sedikit pemahamanku tentang meta tag dan sudah aku praktekan pada blog Oyin> dan blog ini, diamana aku dipercaya sebagai penjaga gawangnya. (terlepas dari SEO apa tidak aku tidak faham)sampean bisa menobanya di blog Oyin. Di blog ini tidak aku pasang sahre fb cuma aku beri Like. Kerena ini cuma blog buat utak-atik koding doang.

Okey ini susunannya :

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title>KATA KUNCI </title>
<meta content='DESKRIPSI YANG KITA TULIS SECARA UMUM' name='description'/>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>KATA KUNCI </title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='DESKRIPSI YANG KITA TULIS SECARA UMUM' name='description'/>
<meta content='KATA KUNCI='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='Nomor registrasi blog dari google' name='google-site-verification'/>
<meta content='All, FOLLOW' name='GOOGLEBOTS'/>
<meta content='All, FOLLOW' name='YAHOOBOTS'/>
<meta content='All, FOLLOW' name='MSNBOTS'/>
<meta content='All, FOLLOW' name='BINGBOTS'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='index, follow' name='robots'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='noarchive' name='robots'/>
<meta content='noarchive' name='googlebot'/>
<meta content='Blogger' name='generator'/>
<meta content='article' property='og:type'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='1 days' name='revisit-after'/>
<meta content='ALL' name='spiders'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Blogger' name='generator'/>
</b:if>
<link href='nomor registrasi dari G+ agar foto profil muncul dimesin pencarian ' rel='publisher'/>

Nah begitulah kira2 gambarannya, dan jangan lupa aktifkan juga kode robot.txtnya biar lebih joss

Tutorial Blog - Agustus 27, 2013

Meta tag agar sesuai untuk share artikel di FB

Saat kita ingin share artikel atau postingan di facebook, kadang yang muncul cuma judul postingannya saja, sedangkan untuk deskripsinya har...

Ini merupakan catatan bagaimana membuat effek loading saat halaman dimuat. Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada tautan internal , namun dipicu berdasarkan selesainya pemuatan halaman blog Contohnya ada pada blog ini.

Okey ini kodingnya :

Css :

#loading-overlay {
width:100%;
height:100%;
position:fixed !important;
position:absolute; /* IE6 Fallback */
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background:#3A3A3A url('http://3.bp.blogspot.com/-_ONDmjNBMJs/TwPCL3AdlII/AAAAAAAAB4c/02MboPkAHGg/s1600/layer_loading.gif') no-repeat 50% 50%;
font:normal normal 0/0 a;
color:transparent;
text-shadow:none;
}

jquery letakan diatas </head> :

// hilangkan overlay dengan efek .fadeOut() jika keseluruhan halaman telah selesai dimuat

<script type='text/javascript'>
$(window).bind("load", function() {
$('#loading-overlay').fadeOut();
});
</script>

Resiko saat menerapkan efek ini adalah, jika script gagal terakses, tabir tidak akan bisa menghilang dan akan terus menutupi seluruh halaman. Tapi itu bisa diatasi dengan cara menyisipkan kode CSS yang menyatakan bahwa tabir akan disembunyikan jika JavaScript dinonaktifkan. Caranya adalah dengan menggunakan tag <noscript> seperti ini:

<noscript>
<style type='text/css'>
#loading-overlay {display:none}
</style>
</noscript>

HTML <body>

<div id='loading-overlay'>Loading...</div>

sumber berita :
http://www.dte.web.id/2012/01/membuat-animasi-loading-dengan-jquery.html

Tutorial Blog - Agustus 23, 2013

Membuat effect loading saat halaman dimuat

Ini merupakan catatan bagaimana membuat effek loading saat halaman dimuat. Efek loading/pemuatan halaman yang satu ini bukan dipicu berda...

Newer
Stories

Older
Stories

Pages

Sinau

Membuat Kotak iklan yang muncul dan menghilang otomatis

Encript dan Decript kode HTML

Membuat text berjalan dengan Jquery

mBah Darmo wong tuo sing rodo edan

Meta tag agar sesuai untuk share artikel di FB

Membuat effect loading saat halaman dimuat

SUBSCRIBE AND FOLLOW

ads

Labels

recent posts

SUBSCRIBE NEWSLETTER

Instagram

Popular Posts

Flickr Images

Blog Archive