BRANKAS SCRIPT (BLOGSPOT): Script

Tampilkan postingan dengan label Script. Tampilkan semua postingan

Senin, 14 Januari 2013

Superman Terbang di Blog

Setelah beberapa lalu Kang degleng memberikan Tip memasang Hiu berkeliaran di halaman blog anda, nah kali ini anda bisa memasang animasi lain yaitu Superman terbang mengawasi blog anda.

Jadi jika ada yang usil dengan blog anda, Superman langsung jewer telinga nya.... he..he..he.. bercada
Oke dech... langsung ke TKP

Cara Pemasangan :

Login ke blog sobat...
Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut.

<script language="javascript" src="https://sites.google.com/site/goezdegleng/javascript/superman_terbang.js"></script>

Klik "Save" dan lihat hasilnya...

Sekarang blog anda telah di awasi oleh sang Superman, siap siap bayar gajinya disetiap tanggal 2

Minggu, 13 Januari 2013

Bintang Bertaburan Pada Kursor

Cara membuat efek bintang bertaburan pada kursor cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :
1.       Login ke dashboard blogger sobat.
2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).
3.       Copy dan paste script dibawah ini pada gadget baru tadi.

    <script>
    // JavaScript Document<script type='text/javascript'>
    // <![CDATA[
    var colour="red";
    var sparkles=65;

    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
    }}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    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;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>

4. Simpan dan lihat hasilnya.
NB : Silahkan ganti warna “red” dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Sabtu, 12 Januari 2013

Adress Bar Berjalan

Cara Membuat Judul Blog Berjalan di adress bar - Nah buat Teman Goez degleng ... ini script nya .. tinggal copy trus login ke blogger kemudian Tata Letak > Tambah Widget > Html/Java Script > pastekan script tersebut kemudian Simpan ... jadi deh, mudah kan ... hehehe, oh iya scriptnya di bawah ini ...

<script language="JavaScript">

</script>
<script language="JavaScript">

</script>

Jangan lupa Teman GoezDeg tulisan yang warna merah diganti ama judul blog nya atau apalah terserah anda, mudah-mudahan ada mamfaat nya untuk kita semua .. amin, selamat mencoba dan salam ....

Membuat Judul Posting Unik

Membuat Judul Post Unik, dengan menampilkan judul post yang unik sudah tentu akan menarik perhatian pengunjung blog sobat serta memberikan sedikit warna seni yang berbeda pada tempate sobat. Mungkin diantara sobat lainnya ada juga yang sudah lebih dahulu lebih tahu tentang membuat Link teks berkedip ini.

Jika diantara sobat masih ada yang belum tahu tentang cara membuat Link teks berkedip ini, caranya seperti contoh dibawah:

<blink><a href="http://gusdegleng.blogspot.com/">Brankas Script (Blogspot)</a></blink>

Brankas Script (Blogspot)

Ganti teks warna merah diatas, dengan URL link anda dan Nama dari URL tersebut

OK, selanjutnya postingan ini akan berisikan artikel tentag Cara Pasang Judul Post Berkedip.
Caranya seperti berikut:

1. Login ke blog sobat
2. Kemudian Pilih Rancangan
3. Klik Edit HTML
4. Download Template (backup selalu template sobat)
5. Kemudian Centangkan "(Expand Widget)"
6. Cari kode <a expr:href='data:post.url'><data:post.title/></a>
7. Sisipkan <blink> dan </blink> seperti yang ditunjukkan code dibawah:

Sebelum disisipkan

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

7. Kemudian masukkan kata <blink> dan </blink> seperti tampak dibawah ini

Setelah disisipkan

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><blink><data:post.title/></blink></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

8. Klik Simpan Template
9. Selesai.

TRIK LAIN
Trik ini cukup sederhana namun sangat berguna bagi para teman blogger, dengan trik ini akan membuat blog kita lebih menarik lagi sehingga akan membuat para pengunjung blog untuk tertarik membaca artikel kita. Ada banyak sekali trik seperti ini, Langsung aja kita ke TKP :

Membuat judul posting miring, Tebal, Garis Bawah

miring :
Sama seperti cara di atas code untuk huruf miring adalah "<i>"
Penulisannya seperti ini

<a expr:href='data:post.url'><i><data:post.title/></i></a>

Tebal :Sama seperti cara di atas code untuk huruf tebal adalah "<b>"
Penulisannya seperti ini

<a expr:href='data:post.url'><b><data:post.title/></b></a>

Garis bawah :Sama seperti cara di atas code untuk huruf garis bawah adalah "<u>"
Penulisannya seperti ini

<a expr:href='data:post.url'><u><data:post.title/></u></a>

~~Membuat judul posting ada efek coretan garis~~
Untuk caranya sama seperti sebelumnya hanya berbeda codenya saja, untuk coretan garis codenya adalah "<del>" atau "<strike>"
Penulisannya seperti ini

<a expr:href='data:post.url'><del><data:post.title/></del></a>
<a expr:href='data:post.url'><strike><data:post.title/></strike></a>

Code yang digunakan adalah "<button>"
Penulisannya seperti ini

<a expr:href='data:post.url'><button><data:post.title/></button></a>

Untuk trik-trik yang lain silahkan coba-coba sendiri yaaa.. Juga bisa juga ditambahkan code "<center>" agar letak judul posting berada di tenggah

Jumat, 11 Januari 2013

Embed Script PhotoShop

Memasang photoshop online pada blog ternyata tidak terlalu ribet, cukup anda Copy script dibawah kemudian pastekan pada postingan anda.

Langkah-langkah membuat PhotoShop pada blog anda :

Buka blog anda.
Buat dokumen baru
Copy dan Paste kan Script pada mode HTML
Publikasikan

Berikut script photoshop online :

<br />
<div align="left">
<div>
<h2 class="style1">
By : Goez Degleng</h2>
</div>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<div align="center">
<iframe frameborder="0" height="600" scrolling="auto" src="http://pixlr.com/editor/?loc=pt-br" width="100%"></iframe>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8866720-28']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script>

NB : Pada teks berwarna merah silahkan ganti dengan ukuran yang anda inginkan.

Teks Berputar Mengelilingi Kursor

Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.

Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "LETAKKAN TEKS ANDA DISINI";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna kuning.
6.    Tulis teks yang anda inginkan pada Teks yang berwarna merah diatas.

Selamat mencoba Cara Membuat Teks Pada Kursor ini

Texs Berjalan Seperti Mengetik

Sebetulnya saya tidak tahu mau saya namakan apa widged yang satu ini, tetapi daripada saya pusing untuk memikirkan namanya... lebih baik saya beri saja namanya Widged Selamat Datang ( terserah anda mau menerimanya atau tidak..itu bukan urusan saya...he...he..he...)

Namun yang terpenting disini adalah bagaimana cara membuatnya......?
Nah..bila anda tertarik ingin membuat widged ini di blog anda ...ya...silahkan ikuti keterangannya dibawah ini dengan sebaik-baiknya.

Caranya adalah sebagai berikut :

1. Log in ke blog anda ( jangan blog orang lain )
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/ JavaScript
5.Masukkan kode ini ke dalamnya

<center><form name="news">
<textarea cols="30" name="news2" rows="4" wrap="virtual"></textarea></form>

<script language="javascript">
//Edit by http://gusdegleng.blogspot.com/

var newsText = new Array();
newsText[0] = "Selamat Datang di Brankas Script Blogspot";
newsText[1] = "Tentang kumpulan JavaScrip, Tip Blog dan berbagai panduan tentang Blog";
newsText[2] = "Sekedar berbagi sedikit Ilmu yang saya miliki ";
newsText[3] = "Semoga bermanfaat juga untuk anda, sahabat semua";
newsText[4] = "Silahkan cari artikel-artikel yang yang anda butuhkan";
newsText[5] = "Jangan lupa eaa,,,beri jempolnya pada FansPage kami";
newsText[6] = "Terima kasih buanyakkkk....";
var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
var tspeed = 80;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds

// ------------- jangan di edit di wilayah ini ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
    dwAText = newsText[cnews];
    if (dwAText.length != 0) {
      document.news.news2.value = "";
      eline = 0;
      setTimeout("addChar()",tspeed)
    }
}
}
//Visit http://gusdegleng.blogspot.com/
function addChar() {
if (eline!=1) {
    if (cchar != dwAText.length) {
      nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
      document.news.news2.value = nmttxt;
      cchar += 1;
      if (cchar != dwAText.length) document.news.news2.value += "_";
    } else {
      cchar = 0;
      eline = 1;
    }
    if (mxText==cnews && eline!=0 && ttloop!=0) {
      cnews = 0; setTimeout("addNews()",tdelay);
    } else setTimeout("addChar()",tspeed);
} else {
    setTimeout("addNews()",tdelay)
}
}

doNews()
</script></center>

KETT

Ganti teks warna kuning dengan kebutuhan widget anda : cols adalah lebar widget dan rows adalah tinggi tempat teks berjalannya.
Ganti teks warna merah dengan kata kata anda sendiri.
SELAMAT MENCOBA

Rabu, 09 Januari 2013

Membuat Link Button Horizontal

Jika sebelumnya saya pernah memposting tentang membuat form button,sekarang kita akan membahas tentang membuat form button berjejer.

Untuk sebuah form,jika di sejajarkan akan mengalami sedikit kesulitan.

Disini kita akan mengakalinya dengan menambahkan tabel,untuk meletakkan form-form yang akan kita publikasikan.

Untuk contohnya seperti di bawah ini:

Berikut code scriptnya, silahkan anda sesuaikan dengan link dan nama icon nya

<p align="center"><table border="0" cellspacing="1"
width="104"><tr>
<td width="72"><form method="get"
action="http://www.google.com/"target="_blank"><p><input type="submit"
value="Google"
name="1"></form></td>
<td width="69"><form method="get"
action="http://www.yahoo.com/"target="_blank"><p><input type="submit" value="Yahoo"
name="2"></form></td>
<td width="69"><form method="get"
action="http://www.youtube.com/" target="_blank"><p><input type="submit" value="Youtube"
name="3"></form></td>
<td width="69"><form method="get"
action="http://www.Friendster.com/" target="_blank"><p><input type="submit" value="Friendster"
name="4"></form></td>
</tr></table>

Keterangan :
Untuk tulisan warna kuning,rubah sesuai atribut blog anda,jika anda ingin memposisikan form-form diatas,ke kiri,tinggal merubah baris kode yang berwarna merah.
Untuk posisi tengah="center", kiri="left" sedangkan untuk kanan="right",namun masalah posisi,biasanya browsre IE yang berfungsi dengan baik.

Untuk hasil eksekusi diatas,jika anda menginginkan link akan terbuka,pada window yang sama,gantilah kode _blank gantilah dengan _self
Gimana? minat mau mencoba?

Link Berupa Icon Tombol

Pada umumnya Link yang ada pada suatu halaman blog adalah yang berbentuk Teks, sedangakan disini saya akan mencoba berbagi sedikit kepada sobat-sobat Goez Degleng tentang Cara membuat Link berupa Tombol, lumayan lah menambah-nambahi perbendaharaan ilmu kita bersama. Hehehehehe....

Langsung saja kita praktekkan:
1.    Login ke blog anda.
2.    Pada halaman Dasboard klik "Rancangan".
3.    Lalu klik "Tambah Gadged".
4.    Kemudian klik "Html/JavaScript".
5.    Dan masukkan kode script yang ada dibawah ini lalu klik tombol "Simpan".

<form method="get" action="http://gusdegleng.blogspot.com/"
target="_blank">
<input type="submit" value="Brankas Script (Blogspot)" name="q">
</form>

Ket:

Yang berwarna Merah silahkan anda rubah sesuai dengan link tujuan anda sendiri.
Yang berwarna Kuning silahkan ganti dengan kata-kata sesuai keinginan anda.
Untuk tulisan _blank adalah : Sebuah keterangan yang menjelaskan ketika anda klik tombol tersebut maka akan muncul halaman tab baru, namun jika anda menginginkan muncul pada halaman itu sendiri ganti tulisan _blank menjadi _self

Contohnya :
Silahkan anda baca blog goez degleng yang lain

SPOILER PADA BLOGSPOT

SPOILER,hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,dulu saya pernah membahas membuat spoiler disini tapi dalm postingan tersebut belum begitu lengkap, nah setelah jalan-jalan saya menemukan tips spoiler,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,yuk mari kita coba......

Exp.

1.Spoiler Tampilkan/Sembunyikan

<div>
<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>

Huruf berwarna Merah bisa anda ganti dengan kata lain sesuai keinginan anda, exp: SILAHKAN DI BUKA / SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
Huruf yang berwarna Kuning sobat bisa memasukan pesan atau gambar

2.Spoiler SHOW / HIDE

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>

Huruf berwarna Merah bisa anda ganti dengan kata lain,exp : SILAHKAN DI BUKA / SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
Huruf yang berwarna Kuning sobat bisa memasukan pesan atau gambar

3.Spoiler OPEN / CLOSE

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Close..'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Clik Here'; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>

Huruf warna Ungu (judul spoiler) bisa di ganti dengan kata yang lain nya.
Huruf berwarna Merah bisa anda ganti dengan kata lain,exp : SILAHKAN DI BUKA / SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
Huruf yang berwarna Kuning sobat bisa memasukan pesan atau gambar

Tiga kode spoiler di atas hampir sama hanya beda di tampilan saja,nah...gimana simpelkan boleh di coba neh semoga bermamfaat

Sabtu, 29 Desember 2012

Membuat Daftar Isi Otomatis di Blogspot

Membuat Menu daftar isi otomatis yang simpel praktis dan tidak berat pada widget anda
Silahkan compy scripnya pada HTML/JavaScript widget anda

Cara di atas adalah cara untuk memudahkan Anda memasang widget tersebut dan di dalam widget tersebut berisi kode seperti berikut ini:

<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;>
<script style="text/javascript" src="https://sites.google.com/site/goezdegleng/javascript/widgetdaftarisioto.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://gusdegleng.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Widget By: [<a href="http://gusdegleng.blogspot.com/">Brangkas Script</a>]

Kode tersebut akan menampilkan daftar isi artikel blog anda.
Silahkan ganti http://gusdegleng.blogspot.com (teks warna merah) dengan alamat blog anda masing-masing.

Kode yang berwarna Kuning adalah kode CSS untuk memperindah tampilan daftar isi dan silahkan atur sesuai denga selera masing masing.
Silahkan seting pada border untuk garis pinggir dan warnanya dan jika perlu tambahkan kode width: 200px; sebelum height, untuk mengatur lebar widget tersebut.
Selamat Mencoba dan Semoga Berhasil!

Jumat, 21 Desember 2012

Blog Tidak Boleh Copy Paste

Berikuti Ikuti langkah - langakah Supaya Artikel Blog Tidak Bisa di Copy :

Login ke Blogger dengan ID anda
Di halaman Dasbor, kita pilih Tata Letak.
Kemudian pilih Edit HTML.
Sebaiknya backup dulu template anda dengan meng-klik Download Template Lengkap. Hali ini bertujuan agar apabila terjadi kegagalan, maka hasil download tadi bisa untuk mengembalikan kondisi template seperti sebelumnya.
Beri tanda centang pada Expand Template Widget dan gunakan 'Ctrl F' untuk pencarian kode struktur dengan cepat.
Lalu cari kode </body> Supaya tidak ribet mencarinya tekan aja tombol F3.
Kalo Udah Ketemu Copy Kode Paste di atas Kode </body>
Setelah Itu Klik Save template.
Selesai
Lihat Blog Anda.
Selamat Mencoba.......

<script language='JavaScript1.2'>

//Disable select-text script (IE4+, NS6+)- By Andy Scott
//Exclusive permission granted to Dynamic Drive to feature script
//Visit http://www.dynamicdrive.com for this script
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script language='JavaScript'>curPage=1;
document.oncontextmenu = function(){return false}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if(e.target==document)return false;
}
}
else {
document.onmousedown = function(){return false}
}</script>

TEKS AREA BERWARNA

Membuat sebuah teks area untuk sebuah kode atau script bukan lagi menjadi sebuah hal yang sulit dilakukan karena sudah banyak blog yang membagikan cara membuatnya tapi tidak ada salahnya jika saya sharing ulang dengan gaya saya sendiri, setelah baca-baca dibeberapa blog yang mengupas tentang tutorial teks area masih banyak blogger yang menanyakan cara agar teks areanya berwarna oleh karena itu saya akan melengkapi tutorial tersebut silahkan dicek ke TKP

<.teksarea { margin : 15px 15px 15px 35px; padding : 10px; clear : both; font-size:normal; list-style-type : none; font-family : "Courier New", "MS Sans Serif", sans-serif, serif; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilW6uKdcdx7pmOl9dR-QQFPoirY8pBlfDb0Qt9DMUZYfuFS4vYVyI31N5HDj7y_04QgavWMx11pfePOM_IjDreg8ouWqKowc5-BRG-kzE6cGDku-HBgs8xRbNhmTERHnLpTVMxqA1vhjI/s1600/kode.gif') no-repeat scroll bottom right #EFFBF5; border-top : 1px solid #eeeeee; border-right : 2px solid #cccccc; border-bottom : 2px solid #cccccc; border-left : 1px solid #eeeeee; } .teksarea li { font-size : 13px; line-height : 24px; color : #333333; font-weight : normal; margin : 0; padding : 0; }>

Nah kurang lebih teks area berwarnanya akan berbentuk seperti diatas, sekarang kamu buka deh dashboard dan pilih rancangan/design dan klik Edit HTML, cari kode ]]</b:skin> lalu simpan kode yang berada di teks area atas tadi tepat diatas kode ]]</b:skin>

Setiap sobat ingin membuat postingan yang ber teks area di blog yang harus sobat lakukan adalah menambahkan kode ini ( ingat masukan kodenya dalam mode edit html )

<div class="teksarea">
<SIMPAN KODE DAN SCRIPT KAMU DI SINI>
</div>

Membuat Spoiler

Spoiler adalah sebuah elemen blog untuk menyimpan data ataupun gambar agar data atau gambar tersebut bisa buka atau tutup secara manual.

Spoiler ini juga bisa digunakan untuk menyimpan code scrip

contoh spoiler :

Dua Sejoli:

Berikut scrip code untuk membuat spoiler :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Letakkan teks atau kode script (gambar atau video) di sini <br></div></div></div>

Kett :
Warna Merah : Judul Spoiler, silahkan ganti sesuai keinginan anda.
Warna Kuning : Tempat meletakkan teks atau code script ataupun gambar/video

Membuat Daftar Link Bergerak

Daftar menu yang jalan tentu akan mempercantik blog anda, selain menghemat tempat, daftar menu berjalan ini (istilah lainnya marquee) bisa menarik pandangan orang untuk melihat menu yang ditampilkan.

Cekidot, langsung menuju script codenya

Seperti biasa Masuk ke tambah widget --> Pilih HTML/JavaScript
Compy code dibawah ini

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="200">
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><blink>TULIS INFO DARI URL DISINI</blink></a>::<p>
::<a href="LETAKKAN URL NYA DISINI"><i><blink>TULIS INFO DARI URL DISINI</blink></i></a>::<p>
</marquee>

Save

KETERANGAN :

Silahkan Ganti Tulisan berwarna merah dan kuning diatas sesuai dengan URL dan nama URL keinginan anda
Untuk mempercantik,Bisa ditambah keterangan tulisan atau url gambar

Kamis, 20 Desember 2012

Kode Javascript Untuk Kode Warna

Thanks

Baca selengkapnya »

Icon Tombol Untuk Link

Membuat icon tombol sangat penting untuk mempercantik blog anda, dengan tombol tersebut pembaca akan mudah diarahkan pada alamat yang mereka inginkan.

Demo

silahkan clik dibawah ini

Baca selengkapnya »

Membuat Lebah Beterbangan Di Blog

Lebah beterbangan di blog ...???
Kenapa tidak , Okey... kang Degleng kembali berbagi, untuk membuat lebah beterbangan di blog kita.
Tak perlu pakai lama :

Masuk Tata Letak dan tambah Widget/Gatget
Pilih HTML/JavaScrip
COPAZ code yang saya berikan
Save

Berikut script code untuk membuat lebah beterbangan di blog anda

Baca selengkapnya »

Jumat, 27 April 2012

Pasang SMS Gratiiss

Pingen Pasang Script SMS Gratiiisss pada blogspot
seperti ini :

Silahkan tinggal copy paste pada Widget/Gadget anda jangan lupa (add HTML/Java Script)

Baca selengkapnya »

Daftar Isi Pada Halaman Posting

Ini Adalah scrip Daftar Isi untuk blog anda.
Silahkan copy paste pada postingan (HTML)

<script style="text/javascript" src="https://sites.google.com/site/goezdegleng/javascript/contents.js">
</script><script src=" http://gusdegleng.blogspot.com/ feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

NB : Ganti text berwarna merah di atas dengan url blog anda, kemudian save, publikasikan.