0 Membuat Kotak Kode / Text Area (Update)

Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini.

---

Maksudnya menghias text area?

Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..).

Contoh text area biasa seperti ini :

---

Saya sedang belajar bagaimana cara menghias text area pada Blog,Ini adalah contoh text area yang biasa,tentunya sedang belajar di Pelajaran Blog:)

dengan kode seperti ini :

---

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form>

---

**rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda.

---

Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini:

---

Menghias Text Area Contoh #1

Ini adalah jenis text area dengan garis tepi berbentuk dot berawarna biru,dan mempunyai background warna kuning,dengan text bergaris bawah.

Text area di atas:

• Background berwarna kuning
• Border berwarna biru (dot)
• Warna Text Merah
• Text bergaris bawah

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" background-color="green"
style="color: red; background-color: yellow; text-decoration: underline; border-style: dotted; border-color: blue">Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #2

Ini adalah jenis text area dengan border solid berwarna kuning dengan background text berwarna hijau,jenis text Uppercase

Text area di atas:

• Background berwarna Hijau
• Border berwarna Kuning (solid)
• Text Huruf Besar (Uppercase)
• Warna Text Putih

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #3

Ini adalah contoh text area dengan background berwarna biru dengan warna text kuning tanpa bergaris bawah,border solid berwarna merah

Text area di atas:

• Background berwarna Biru
• Border berwarna Merah (solid)
• Text Tanpa bergaris bawah
• Warna Text Kuning

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #4

Ini adalah contoh text area dengan background berwarna hijau dengan text warna putih dan berhuruf tebal,juga terinstall otomatis.

Text area di atas:

• Background berwarna Hijau
• Border berwarna gray/abu-abu(solid)
• Warna text Putih dan berhuruf tebal
• Kode terinstall/terblok otomatis

Untuk kodenya copy kode di bawah ini :

---

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" onmouseover="this.form.txt.select()" readonly ; style="color: white; background-color: green; font-weight: bold; border-color:gray">Text Anda Disini</textarea></form>

---

Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:)

Detail: Membuat Kotak Kode / Text Area (Update)

0 Cara Pasang Tombol Like Setiap Posting-an (Google Plus,Facebook,Twitter,Addthis)

Cara Memasang Like / Share Button di Setiap Postingan Blogger

Hi Hallo guys,ketemu lagi ya,dah lama banget kayanya ga sharing seputar blogging ya,hihihi.

Ada info baru sob,kenapa baru? ya,karena sebagian blogger ada yang belum mengetahui 'bagaimana memasang tombol like atau share di setiap posting blog'.Karena beberapa hari kemarin ada yang mengirim via email sebagian tutorial hanya memaparkan tombol like untuk halaman blog utama saja.
Sedangkan untuk setiap posting tidak dapat dishare terutama untuk Google Plus dan Facebook.

Seperti yang sobat dapat lihat pada gambar diatas,yup! tombol share / icon like facebook,twitter,google plus bahkan addthis dapat kita pasang pada setiap posting blog secara otomatis.Kelebihannya tentu sobat tidak perlu repot mengcopy url setiap postingan untuk dibagikan di facebook,twitter,google+ dan yang lain.

Ok! langsung saja ya,silakan sobat ikuti langkah-langkah dalam cara memasang tombol like facebook,google +,twitter,addthis,dll dalam setiap postingan berikut ini:

Langkah dan Cara Pasang Like Button / Icon Social Network Directories

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;en-US&#39;}
</script>

**script tersebut diatas dipasang jika sobat ingin juga menampilkan google plus share button

Kemudian langkah selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

Setelah sobat menemukan kode tersebut,

-jika sobat INGIN MENAMPILKANNYA DI BAWAH POSTINGAN maka sobat letakkan kodenya nanti diBAWAH kode <data:post.body/> atau <p><data:post.body/></p>.

-jika sobat INGIN MENAMPILKANNYA DI ATAS POSTINGAN maka sobat letakkan kodenya nanti diATAS kode <data:post.body/> atau <p><data:post.body/></p>.

Nah,kode yang harus sobat letakkan adalah sebagai berikut:

<b>Bagikan posting ini di:</b><br/>
<tbody><tr><td><iframe allowtransparency='true' class='twitter-share-button twitter-count-horizontal' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/tweet_button.1337330192.html#_=1337861351239&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2F#%2F;url=http%3A%2F%2F#%2F' style='width: 110px; height: 20px;' title='Twitter Tweet Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td></tr></tbody></table></div>
<br/>

Simpan Template sobat dan lihat setiap posting sobat :D Good Luck ya! :D

Detail: Cara Pasang Tombol Like Setiap Posting-an (Google Plus,Facebook,Twitter,Addthis)

0 Google Translate Widget

Memasang Translate Bahasa di Blog / Google Translate Widget

Sering kita ya sob,melihat sebuah Google translate widget di beberapa blog milik sobat blogger,tak perlu pusing untuk mendapatkannya,karena saya kira tutorial membuat google translate widget ini sudah banyak yang mempublikasikannya.
Bukan bermaksud latah gan,hanya kurang lengkap rasanya blog sederhana ini jika tidak memposting artikel bagaimana sih cara memasang widget translate di platform blogspot.

Hanya saja,google translate widget yang akan kita pasang nanti hanya berupa buletted list,hasilnya akan tampil seperti di bawah ini:

• English
• French
• German
• Spain
• Italian
• Belanda
• Rusia
• Portugis
• Jepang
• Korea
• Arab
• China

Adapun kelemahan dari widget translate untuk blogger yang satu ini,adalah widget yang tak bisa digunakan dalam halaman terjemahan.Alias jika halaman sudah diterjemahkan dari hasil widget ini,dalam halaman baru nanti saat hendak menggunakan widget ini sudah tak bekerja lagi.
Solusinya? Tetaplah klik google translate widget link pada halaman aslinya :D

Langkah Cara Pasang Google Translate / Penterjemah dalam Blog

Untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget:





Selanjutnya pilih HTML/Javascript,kemudian letakkan kode google translate widget berikut:

<ul><li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;"><b>English</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cfr&hl=en'); return false;"><b>French</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cde&hl=en'); return false;"><b>German</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7ces&hl=en'); return false;"><b>Spain</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cit&hl=en'); return false;"><b>Italian</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cnl&hl=en'); return false;"><b>Belanda</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cru&hl=en'); return false;"><b>Rusia</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cpt&hl=en'); return false;"><b>Portugis</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cja&hl=en'); return false;"><b>Jepang</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cko&hl=en'); return false;"><b>Korea</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7car&hl=en'); return false;"><b>Arab</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7czh-cn&hl=en'); return false;"><b>China</b></a></li></ul>

Simpan dan sekarang sobat sudah bisa lihat hasilnya.

Detail: Google Translate Widget

1 Cara Membuat Template Blogger untuk Tampilan Handphone

Cara Membuat Template Blogger versi Mobile

Jika sobat ingin menampilkan blog dalam tampilan mobile dari blog yang sobat miliki seperti untuk tampilan pada handphone,smartphone,etc(versi mobile),ada trik singkat sob,yang mana hal ini memiliki kekurangan namun juga memiliki kelebihan yang sangat menguntungkan dari owner blog itu sendiri.

Diantara kekurangan tampilan blogger versi mobile adalah:

-Widget yang kita miliki tidak akan dapat tampil,seperti widget kalender,navigasi menu,dan lain sebagainya kecuali jika sobat melihatnya dalam tampilan versi web lengkap dalam handphone sobat.
-Iklan yang kita miliki tidak dapat tampil dalam template blogger versi mobile ini.

Sedangkan kelebihan dari blogger template mobile ini adalah:

-Blog yang kita miliki memiliki lebih banyak peluang untuk dapat dinikmati dan dilihat banyak orang.
-Mempermudah pembaca karena tampilan yang simple dan hanya memprioritaskan isi posting saja.

Hal ini pernah saya coba sob,saat saya mencoba membukanya di handphone milik teman saya yang berbasis 'Android' (beda dengan hp milik saya yang memiliki os bernotabene 'ngirid',hihihi) dan hasilnya sangat luar biasa.
Jangan khawatir,jika sobat ingin menampilkannya seperti situs aslinya tinggal pilih aja 'versi lengkap' yang ada di handphone sobat nantinya.

Cara Meng-aktifkan Blogspot template for Mobile

Sobat pilih Dashboard lalu pilih Settings (gb1) lalu pilih Email & Mobile (gb2) selanjutnya checklist checkbox Yes. Show mobile template on mobile devices. (gb3) kemudian pastikan selera sobat benar (gb4),jika dirasa sudah pas klik Save Settings (gb5) dan lihat hasilnya di handphone milik kamu :D

gb1


gb2


gb3


gb4


gb5

Detail: Cara Membuat Template Blogger untuk Tampilan Handphone

0 Cara Membuat ToolTip Ber-Link Di Dalamnya

Cara Membuat Tool Tip / Mini Popup Memiliki Link Anchor dan Menu Pilihan Didalamnya

Meskipun tutorial membuat tooltip link ini diposting tengah malam kaya ghene(bahasa gaul sekarang gan pent-),tapi tetep semangat ya bro,langsung aja deh,coba sobat arahkan kursor pada gambar link download di posting KLIK DISNI,nanti akan keluar tooltip keren yang memiliki link didalamnya (adapun masalah apa itu tooltip dan pembahasannya telah disharing beberapa waktu lalu di SINI pent-):

Gambar screenshotnya akan tampil seperti ini gan:

Gimana gan,pingin bikin juga buat menghias blog kamu,betul sob,kita bisa membuat tooltip yang didalam tool tip tersebut memiliki link bahkan gambar sekalipun,yuk kita intip gimana sih cara ngbikinnya :D

Langkah Membuat Coda Bubbles dengan jQuery

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

.bubbleInfo {
position: relative;
}

.popup {
font-size:11px;
width:200px;
background:#F3F3F3;
padding:3px 5px;
border:1px solid #CCC;
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
bottom:60px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.popup:after{
border:15px solid;
border-color: #F3F3F3 transparent transparent transparent;
content:"";
display:block;
height:;
width:;
position:absolute;
bottom:-30px;
left:80px;}

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(function () {
$(&#39;.bubbleInfo&#39;).each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(&#39;.trigger&#39;, this);
var popup = $(&#39;.popup&#39;, this).css(&#39;opacity&#39;, 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don&#39;t trigger the animation again if we&#39;re being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: &#39;block&#39; // brings the popup back in to view
})

// (we&#39;re using chaining on the popup) now animate it&#39;s opacity and position
.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 1
}, time, &#39;swing&#39;, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 0
}, time, &#39;swing&#39;, function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn&#39;t do the job)
popup.css(&#39;display&#39;, &#39;none&#39;);
});
}, hideDelay);
});
});
});

</script>

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="bubbleInfo"><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" trigger=""><img class="trigger" src="http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg" height="65" width="150" /></a><div class="popup"><table><tbody><tr> <td>Nama File</td><td>: Benarkah Bid'ah Itu Sesat?</td></tr><tr><td>Ukuran</td><td>: 337kb</td></tr><tr> <td>Hosting </td> <td>: Google Code </td></tr><tr><td>Url Link </td> <td>: <small><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Klik Di Sini</a></small></td> </tr><tr> <td>Referensi </td><td>: <small><a href="http://pelajaran-blog.blogspot.com/" target="_blank">Pelajaran Blog dan Seo</a></small></td></tr>
</tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal sesuikan saja ya,udah terlalu malem soalnya gan,see you ya :D

Detail: Cara Membuat ToolTip Ber-Link Di Dalamnya

0 Membuat Navbar / Tool Bar Share di Bawah Blog

Tambahkan Widget Tool Bar Share Social Network di Blog Kamu

Dulu pernah kami share ya seputar membuat navbar sederhana,namun bukan navbar seperti itu yang akan kita bahas gan.
Lihat screenshot gambar ini,ini adalah widget toolbar yang gratis tentunya dari:
wibiya.conduit.com
,or jika 'beliau' ini masih memberikan kami kesempatan untuk memasangnya,sobat bisa lihat tool bar dibawah blog ini.

Klik gambar untuk tampilan lebih besar:


Klik gambar untuk tampilan lebih besar:


Seperti sobat lihat,navbar ini sangat efektif sekali apalagi didukung dengan tampilan bantuan script yang sangat menarik.
Betul kita dapat membagikan artikel maupun blog yang kita miliki ke semua social network seperti twitter,facebook,kirim email,print bahkan mensubmit ke directory terkenal seperti reddit.

Wah,keren juga ya sob,gimana sih cara dapetinnya?

1.Silakan klik di SINI,dan klik tombol 'GET IT NOW!'

Klik gambar untuk tampilan lebih besar:


2.Selanjutnya,isikan url dari blog yang sobat miliki,misal
http://indonesianbiggestdirectories.blogspot.com,lalu klik tombol 'Create Now'

Klik gambar untuk tampilan lebih besar:


3.Kemudian,sobat pilih warna navbar,bahasa yang akan tampil dan login dengan email dan password baru sobat,lanjutkan dengan menekan tombol 'Get Your Bar'

Klik gambar untuk tampilan lebih besar:


4.Lanjutkan denga meng-klik link 'Install on Blogger'

Klik gambar untuk tampilan lebih besar:


5.Akan tampil jendela popup seperti ini,berhubung tak ada pilihan untuk platform blogger,maka sobat pilih saja 'Website and Other Blog Platform'

Klik gambar untuk tampilan lebih besar:


6.Copy kode script navbar keren yang tercipta,dan klik tombol 'Activate'

Klik gambar untuk tampilan lebih besar:


7.Nah,untuk menampilkannya widget pada blog coba pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,pilih HTML/Javascript lihat Gambar:





Selanjutnya kemudian letakkan kode script nav bar tool yang baru saja kita copy tadi,lalu simpan dan sobat sudah bisa lihat hasilnya.Semoga bermanfaat ya sob :D

Detail: Membuat Navbar / Tool Bar Share di Bawah Blog

0 Parse Tool

Alat Pengubah Kode Agar Tampil di Postingan

Bismillah - berhubung waktu yang semakin malam (chie),langsung aja ya gan,kali ini hanya informasi kecil seputar parse kode html.
Sekali lagi untuk penjelasan lebih detil,sobat baca dulu ya di artikel saya sebelumnya:
klik di
http://pelajaran-blog.blogspot.com/2010/11/menampilkan-kode-html-parse-kode-html.html

Saya kira sudah sangat jelas ya sob,yuk kita cari tahu bagaimana sih contoh script parse html code ini.
Penjelasan singkatnya,kita mencoba menerapkan script dari http://www.donatofurlani.it/ideas,yang kurang lebih fungsi dari script ini seperti parse tool yang sudah banyak kita tahu di www.blogcrowds.com.

Caranya hanya letakkan kode berikut diposting blog sobat dan publikasikan.

<center><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=315&h=200&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"> </script></center>

Sekarang lihat hasilnya ya,kurang lebih akan seperti ini gan:

Script ini saya ambil dari http://www.donatofurlani.it/ideas

Detail: Parse Tool

0 Membuat Efek Loading

Bagaimana Membuat Efek Loading / 'Memuat' dalam Blogspot Blogger?

Dari tetangga sebelah sob,sekalian mo promosi blog sahabat di AkuPunya.Com,script ini sengaja kami ambil untuk sekedar berbagi trik dan tips membuat efek loading di blog.

Bentuk fisiknya sobat dapat lihat di SINI,saat sobat membuka halaman atau mengklik link posting misalnya akan ada efek menunggu atau istilahnya dengan 'animation loading page widget'.

Jadi sambil sobat menunggu konten blog tampil sempurna,widget ini akan tampil dengan gambar animasi yang telah disediakan dalam script.
Seperti yang telah AkuPunya.Com ciptakan,berikut bahan yang dibutuhkan:

1.Script dengan ekstention *.js,silakan lihat di:

http://tc.comze.com/js/preloadpage.js

2.Gambar yang akan tampil,disini adalah yang berformat *.gif yang beralamat di:

http://lh3.googleusercontent.com/-kcn5J_HBL0k/TjwQzEsyEAI/AAAAAAAAAcw/fyuDdV9NDmU/ajax-loader.gif

Tampilan akan seperti ini (gambar ini akan tampil jika yang bersangkutan masih mengabadikannya pent-):

3.Langkah dan caranya.

Langkah dan Cara Membuat Efek Loading Blog dari AkuPunya.Com

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).

Lihat Gambar ya :D


(1)



(2)



(3)

Nah,selanjutnya cari kode <head> (Gunakan Ctrl+F),setelah ketemu sob,tepat dibawahnya letakkan kode berikut:

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

Setelah itu,cari lagi kode <body>,setelah ketemu hapus kode tersebut dan ganti dengan kode ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

Simpan dan lihat hasilnya :D

Detail: Membuat Efek Loading

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

Detail:

0 Cit no delay,cit hero permanen,cit cash lost saga Part 1

software Lost Saga. artikel kali ini saya tujukan buat para gamers khususnya Para Pecinta software Lost Saga sebelumnya saya juga telas menyediakan software Ninja Saga, bagi kalian yang belum tahu apa iu lost saga, Lost Saga adalah games terbaru dari gemscool setelah sukses dengan games Point Blank sekarang gemscool mengeluarkan games Lost Saga yang pastinya tidak akan kalah serunya dibandingkan dengan Point Blank. berikut adalah kutipan yang saya ambil dari situs resminya

    Lost Saga merupakan game online action fighting, yang mempunyai banyak mode permainan , tidak hanya terpaku pada PVP mode, dalam Lost Saga, kalian dapat melakukan pertukaran hero dalam pertarungan serta senjata dan armor yang bisa di rebut dan bertarung dalam team.

    kalian juga dapat memilih Hero, dari petinju, Dark saman, Ninja, kesatria berbaju besi, bahkan Cowboy. Dan setiap Hero memiliki berbagai macam skil yang berbeda serta dapat di tingkatkan sesuai dengan lvl yang di miliki, Map yang berfariasi membuat permainan lebih seru lagi..

nah untuk mempermudah sobat dalam bermain Games Lost Saga ini blog Info Terkini akan menyediakan software Lost Saga. semoga dengan software ini bisa membantu permainan kalian dalam memainkan Lost Saga ada bermacam macam software Lost Saga yang bisa temen temen dapatkan disini diantaranya ada software 1 HIT CRUSADE 60, software Lost Saga Hit Damage, software Lost Saga softwareer Sobat, software Lost Saga Terbaru, dan masih banyak yang lain.

Ok langsung saja Beriku adalah software Lost  Saga Terbaru yang terbukuti masih work,. silahkan disimak.

langsung download disini vvvv

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

cheat lost saga cheat ayodance cit ayodance buat cit hack bokep 3gp cit lost saga cit cash cit peso keylogger

Detail: Cit no delay,cit hero permanen,cit cash lost saga Part 1

0 Membuat Back To Top Berefek (Smooth)

Bagaimana Membuat Back To Top / Kembali ke Atas pada Blogger?

Setelah beberapa waktu lalu sharing seputar bagaimana membuat link anchor back to top dalam satu halaman posting blog,dengan konsep yang sama namun dengan sentuhan jQuery (bahasa javascript) dapat kita ciptakan sebuah tombol back to top yang berfungsi untuk mempermudah pengunjung dalam melihat semua konten blog dalam halaman tersebut.

Biasanya,back to top button ini sangat berguna sekali untuk blog atau situs yang memiliki konten sangat panjang hingga memaksa pengunjung harus menggulung scroll window dalam melihat konten yang ada.

Nah,seperti yang sudah Pelajaran Blog terapkan,scroll back to top ini sobat dapat lihat di sebelah kanan bagian bawah saat scroll window sobat gulung ke bawah:

Dan saat ada eksekusi klik pada tombol backtotop tersebut maka membawa kita pada halaman atas dengan sedikit efek smooth (cari aja dengan google translate apa itu arti 'smooth' ya hihihi)

Langkah dan Cara Membuat Back To Top Button jQuery

Pertama,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar:






Kemudian letakkan kode berikut,lalu simpan.Selesai.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUjRB0QSw3h_DXBQ97jN-xDiY7uYWa-VvPWL2LPzTJhqofPlPUM6VZZZJx0HM2JUoCUmy9JbbhFAr7RUc1FLCDJdGWaefPyS3vNZGmnM-NnDVFhTACh2R7yolEEqLiAOhtKphUZQFin0/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Detail: Membuat Back To Top Berefek (Smooth)

0 Membuat Link Blogroll Animasi Gulung (Update)

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}


Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>


Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>


Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Detail: Membuat Link Blogroll Animasi Gulung (Update)

0 Auto Adder Premium Hero Part 2 LOST SAGA

Fiture:
Auto Adding HEX CASH

Download :
v
klik disini coy!






[klik disini]





Tutorial:
1.Download dan extract cheatnya
2.Buka softwarenya
3.Buka LS dan masukan ID sama PW
4.Saat keluar notice (kotak pesan) tekan OK
5.Saat splash nprotect (cowboy) muncul tekan F1

 status

WORK ON WIN XP SP3 64 BIT / ALL WINDOWS / MAC 
  Pergunakanlah dengan bijak....
ingat,, pergunakan dengan akal yang waras...

Detail: Auto Adder Premium Hero Part 2 LOST SAGA

0 Auto win WAR ! [ Lost Saga ]

Fiture:
Auto Adding HEX CASH

Download :
v
klik disini coy!






[klik disini]





Tutorial:
1.Download dan extract cheatnya
2.Buka softwarenya
3.Buka LS dan masukan ID sama PW
4.Saat keluar notice (kotak pesan) tekan OK
5.Saat splash nprotect (cowboy) muncul tekan F1

 status

WORK ON WIN XP SP3 64 BIT / ALL WINDOWS / MAC 
  Pergunakanlah dengan bijak....
ingat,, pergunakan dengan akal yang waras...

Detail: Auto win WAR ! [ Lost Saga ]

0 Auto win LADDER [ LOST SAGA ]

Fiture:
Auto Win Ladder

Download Link:
[klik disini]





[klik disini]





Tutorial:
1.Download dan extract cheatnya
2.Buka softwarenya
3.Buka LS dan masukan ID sama PW
4.Saat keluar notice (kotak pesan) tekan OK
5.Saat splash nprotect (cowboy) muncul tekan F1

 status

WORK ON WIN XP SP3 64 BIT / ALL WINDOWS / MAC 
  Pergunakanlah dengan bijak....
ingat,, pergunakan dengan akal yang waras...

Detail: Auto win LADDER [ LOST SAGA ]

0 ADDER PREMIUM HERO ! HOT ! [LOST SAGA]

Fiture:
Auto Adding HEX CASH

Download :
v
klik disini coy!






[klik disini]





Tutorial:
1.Download dan extract cheatnya
2.Buka softwarenya
3.Buka LS dan masukan ID sama PW
4.Saat keluar notice (kotak pesan) tekan OK
5.Saat splash nprotect (cowboy) muncul tekan F1

 status

WORK ON WIN XP SP3 64 BIT / ALL WINDOWS / MAC 
  Pergunakanlah dengan bijak....
ingat,, pergunakan dengan akal yang waras...

Detail: ADDER PREMIUM HERO ! HOT ! [LOST SAGA]