Pelajaran Blog

Membuat Kotak Kode / Text Area (Update)

noreply@blogger.com (Admin) — Mon, 28 May 2012 04:32:16 PDT

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 :

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

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

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

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

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:)

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

noreply@blogger.com (Admin) — Mon, 28 May 2012 04:23:14 PDT

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: 'en-US'} </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&count=horizontal&id=twitter-widget-0&lang=en&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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' 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

Google Translate Widget

noreply@blogger.com (Admin) — Sat, 19 May 2012 23:47:08 PDT

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.

Cara Membuat Template Blogger untuk Tampilan Handphone

noreply@blogger.com (Admin) — Fri, 18 May 2012 08:42:04 PDT

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

Cara Membuat ToolTip Ber-Link Di Dalamnya

noreply@blogger.com (Admin) — Fri, 11 May 2012 06:30:11 PDT

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 () {
$('.bubbleInfo').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

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

var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 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't trigger the animation again if we'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: 'block' // brings the popup back in to view
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', 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: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, 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

Membuat Navbar / Tool Bar Share di Bawah Blog

noreply@blogger.com (Admin) — Sun, 06 May 2012 02:07:52 PDT

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

Parse Tool

noreply@blogger.com (Admin) — Thu, 03 May 2012 06:52:33 PDT

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

Membuat Efek Loading

noreply@blogger.com (Admin) — Mon, 30 Apr 2012 05:40:36 PDT

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

Membuat Back To Top Berefek (Smooth)

noreply@blogger.com (Admin) — Thu, 26 Apr 2012 03:09:30 PDT

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="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/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>

Membuat Link Blogroll Animasi Gulung (Update)

noreply@blogger.com (Admin) — Fri, 20 Apr 2012 04:51:00 PDT

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.

Cara Membuat Vertical Slide Menu / Trigger Hover (Update)

noreply@blogger.com (Admin) — Tue, 17 Apr 2012 02:38:54 PDT

Cara Membuat Vertical Slide Menu / Trigger Hover (Update) Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

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 ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#container {
    clear: both;
    margin: 0;
    padding: 0;
    }
   
    #container a{
    float: right;
    background: #9FC54E;
    border: 1px solid #9FC54E;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px;
    font-weight: 700;
    }
   
    #container a:hover{
    float: right;
    background: #a0a0a0;
    border: 1px solid #cccccc;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px;
    font-weight: 700;
    }
   
    .content {
    font-style:normal;
    font-family:helvetica, arial, verdana, sans-serif;
    color:#ffffff;
    background:#333333;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    margin: 30px 0 50px;
    padding: 15px 0;
    }
   
    .content p {
    margin: 10px 0;
    padding: 15px 20px;
    }

    .panel {
    position: absolute;
    top: 250px;
    left: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    width: 330px;
    height: auto;
    padding: 30px 30px 30px 130px;
    filter: alpha(opacity=85);
    opacity: .85;
    }
   
    .panel p{
    margin: 0 0 15px 0;
    padding: 0;
    color: #cccccc;
    }
   
    .panel a, .panel a:visited{
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    }
   
    .panel a:hover, .panel a:visited:hover{
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    }
   
    a.trigger{
    position: absolute;
    text-decoration: none;
    top: 250px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 15px;
    font-weight: 700;
    background:#333333 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }

    a.trigger:hover{
    position: absolute;
    text-decoration: none;
    top: 250px; left: 0;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color:#fff;
    padding: 20px 40px 20px 20px;
    font-weight: 700;
    background:#222222 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
    border:1px solid #444444;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    display: block;
    }
   
    a.active.trigger {
    background:#222222 url(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/s320/minus.png) 85% 55% no-repeat;
    }
   
    .columns{
    clear: both;
    width: 330px;
    padding: 0 0 20px 0;
    line-height: 22px;
    }
   
    .colleft{
    float: left;
    width: 130px;
    line-height: 22px;
    }
   
    .colright{
    float: right;
    width: 130px;
    line-height: 22px;
    }
   
    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
   
    ul li{
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

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

<script src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>
 
 <script type='text/javascript'>
 $(document).ready(function(){
     $(&quot;.trigger&quot;).click(function(){
         $(&quot;.panel&quot;).toggle(&quot;fast&quot;);
         $(this).toggleClass(&quot;active&quot;);
         return false;
     });
 });
 </script>

Lalu simpan templates.
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="panel">
            
<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
    <div class="columns">
        <div class="colleft">
        <h3>Bisnis Online</h3>
            <ul>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
            </ul>
        </div>
   
        <div class="colright">
            <h3>Ngemis Dollar Internet</h3>
            <ul>
                                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
                <li><a href="http://marshaaruan.blogspot.com/" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
            </ul>
        </div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <a class="trigger" href="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...).
Good luck!

Membuat Menu Kwicks jQuery Slide Geser (Update)

noreply@blogger.com (Admin) — Fri, 13 Apr 2012 05:14:17 PDT

Membuat Menu Kwicks jQuery Slide Geser (Update) Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada yang ketinggalan,hihihi)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://pujiantoro.blogspot.com/

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
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.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Keamudian cari kode ]]></b:skin> kembali,setelah ketemu letakkan kode jQuery berikut tepat diBAWAHnya:

<script class='jsbin' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
 </script>
<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
 </script>
 <script type='text/javascript'>
 $(document).ready(function(){                   
     $(&#39;.kwicks&#39;).kwicks({
         duration: 500,  
         max: 170, 
         spacing:  0 
     });
 });
 </script>

Lalu simpan templates sobat.
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:

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>

Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

Cara Download Youtube (Cepat,Mudah,Praktis)

noreply@blogger.com (Admin) — Tue, 10 Apr 2012 08:10:44 PDT

Download Youtube Tanpa Software

Hi guys,ketemu lagi kita ya,Alhamdulillah,ada info nih yang pingin ana bagi2 pada agan-agan,yup cara praktis download video dari youtube.Jika di artikel tetangga mengups tuntas bagaimana download youtube dengan software semisal IDM (Internet Download Manager) atau situs pihak ketiga seperti www.KeepVid.Com dan sejenisnya,di Pelajaran Blog kali ini akan sharing mas alah bagaimana sih cara donlot youtube tanpa software.

Betul gan,yang kita butuhkan hanya browser mozilla,yes...that's it!
Sepintas memang panjang banget teorinya,tapi setelah dicoba tak ubahnya seperti membalikkan telapak tangan,wah..mudah banget kayanya ya :D

Cara Downlaod Streaming Video

Langsung aja ya,pertama sebagai ujicoba sobat kunjungi video ini (filenya kecil sob,hhihi):
http://www.youtube.com/watch?v=vi-iaFmSsHc

Setelah itu,lihat samapai selesai ya,kemudian ketik :
about:cache?device=disk pada browser:

Sehingga nanti akan muncul halaman seperti ini,lalu copy aja ya url yang tertera seperti pada gambar berikut:

Setelah sobat copy,kini buka jendela My Document di komputer sobat,dan paste url yang baru saja kita copy tadi kedalam kolom directory,lihat gambar:

Kemudian sobat tekan Enter dan akan tampil folder seperti ini,kemudian klik Search ya gan:

Setelah itu,klik 'all files and folders' dan klik 'search' untuk mulai merayapi file,lihat gambar:

Maka setelah hasil folder kita kumpulkan lewat pencarian tadi,kini kita mendapatkan folder-folder seperti gambar berikut,klik kanan pilih 'Arrange Icons By' lalu pilih 'Size'.

Ini bertujuan untuk melihat ukuran file yang paling besar,nah ukuran file yang paling besar inilah yang merupakan file video dari streaming video youtube yang baru saja kita lihat,kemudian setelah kita mendapatkan ukuran file yang paling besar,klik kanan file tersebut dan pilih 'Rename':

Tambahkan ekstension *.flv,misal nama filenya D16D5d01 maka rubah menjadi D16D5d01.flv,llihat gambar:

Kini,sobat bisa lihat video youtube yang baru saja kita lihat dalam bentuk file yang sudah ada di komputer sobat,lihat gambar hasil videonya (ingat ya install juga flv playernya berhubung file dari youtube adalah flv alias Flash Video,hihihi)

Selamat mencoba gan :D

Cara Membuat Related Post Berkedip jQuery (Update)

noreply@blogger.com (Admin) — Sat, 07 Apr 2012 09:44:47 PDT

UPdate! Trik Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait,Sudah Direvisi! Dijamin Berhasil 100%

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget
Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Kemudian letakkan kode berikut sob:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
   <style type="text/css" media="screen">
   <!--

   #spylist {
   overflow:hidden;
   margin-top:1px;
   padding:0px 0px;
   height:300px;
   }
   #spylist ul{
   width:100%;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:100%;
   padding: 0px 0px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url() repeat-x;
   border:1px solid #ddd;
   }

   #spylist li a {
   text-decoration:none;
   color:#4B545B;
width:100%;
   font-size:10px;
   height:12px;
   overflow:hidden;
   margin:0px 0px;
   padding:0px 0px 2px 0px;
   }
   #spylist li img {
   float:left;
   margin-right:5px;
   background:#EFEFEF;
   border:0;
   }
   .spydate{
   overflow:hidden;
   font-size:8px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:12px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }

   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:8px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }

   -->
   </style>
       <script language='javascript'>
   imgr = new Array();
   imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
   showRandomImg = true;
   boxwidth = 200;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 50;
   thumbheight = 50;
   fntsize = 9;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 100;
   home_page = "http://pelajaran-blog.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>

   <div id="spylist">
       <script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>
   </div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D

Membuat Related Post Widget Blogger (Update)

noreply@blogger.com (Admin) — Sat, 07 Apr 2012 09:16:27 PDT

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Contoh gambarnya sobat bisa lihat dibawah ini:

Lihat Gambar Besar

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1
Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3

Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; 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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/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='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?

Cara Membuat Popup jQuery (Update)

noreply@blogger.com (Admin) — Fri, 06 Apr 2012 04:36:54 PDT

UPdate! Trik Membuat Membuat Anchor Popup dengan jQuery (Popup Keren dengan Klik),Sudah Direvisi! Dijamin Berhasil 100%

Trik Cara Membuat Popup dengan jQuery

Membuat popup adalah salah satu dalam kiat kita menghias blog,ini akan memiliki peran sebagai penghemat tempat namun blog tetap dalam keadaan full performance.

Langsung gan,untuk melihat contohnya (ini mungkin akan bekerja pada browser di kompi ya seperti mozilla dan selainnya,alias kurang bekerja baik pada handphone ataupun IE:() sobat bisa lihat gambar dibawah ini:

Atau sobat bisa lihat situsnya di sini.(jika situs masih tersedia ya :D)

Gimana sob,tertarik?

Gini nih cara bikinnya,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)

Letakkan kode berikut tepat diatas kode </head>

<!-- Kode Menampilkan berita muslim sahih  -->
<script type="text/javascript" src="http://layanan.oposisi.net/tampilan/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="http://layanan.oposisi.net/tampilan/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://layanan.oposisi.net/tampilan/bingkai/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
<!-- Kode Menampilkan berita muslim sahih  Sampai di sini -->

Lalu simpan templates.
Selanjutnya,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:

<a href="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" class="highslide"
onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 270, height: 300,} )">Lihat Gambar Al-Qur'an</a>

Lalu Simpan.Selesai deh :D

Ket:

Kode yang berwarna merah sesuaikan dengan keinginan sobat ya :D
http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg rubahlah dengan url gambar sobat atau bisa juga alamat situs seperti http://www.google.co.id/,http://www.youtube.com/,dll.

Update! Membuat Foto Slide Widget di Blogger

noreply@blogger.com (Admin) — Wed, 04 Apr 2012 05:40:04 PDT

UPdate! Trik Membuat SlideShow Image Widget for Blogger,Sudah Direvisi! Dijamin Berhasil 100%

SlideShow Image Widget for Blogger

Masih ingat ga sob artikel tentang membuat widget gambar slideshow beberapa waktu lalu? Yup,saya menemukan cara yang singkat mudah dan terlihat 'sempurna' dari script yang diciptakan teman kita ini,saya ambil artikel ini dari blog sahabat di www.khairulumam.com.
Jika widget yang pertama hanya menampilkan gambar dalam ukuran kecil bahkan navigasi slide-nya sedikit cacat karena tidak dapat ditampilkan sempurna disamping widget,lain halnya dengan script slideshow widget for blogger kali ini.

Widget ini terkesan lebih professional membuat kami ingin membagikan informasi ini pada teman-teman.
Bentuk fisiknya sobat bisa lihat di SINI.

Nah,ini juga salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis (jadi tak perlu menggunakan tombol geser,etc).

Itulah mengapa artikel kali ini saya beri judul Membuat Slideshow Photo / Foto Berubah-ubah dalam Membuat SlideShow Foto Widget #2 sebagai penyempurnaan dari widget sebelumnya di membuat slideshow jquery di postingan beberapa waktu lalu.
Oke sob,kita intip yuk bagaimana cara membuat widget slide show pada gambar / image / pictures ini.

Langkah dan Cara Membuat Slide Show Photo Widget for Blogspot

Pertama,sobat pergi ke pasar (hush!!!!) maksud kami pergi ke Dashboard > Tata Letak > Edit HTML > Contreng Expand Widget Templates (lihat gambar)

(1)

(2)

(3)

Cari kode <head> (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat dibawahnya letakkan kode script berikut ini:

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Ket: kode berwarna merah adalah kode yang sobat bisa ganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain sobat otak-atik aja sendiri ya :D

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<ul class="slideshow">
<li><a href="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Simpan dan lihat hasilnya,mudah singkat dan menarik khan sob?

Sebagai kata terakhir gan,kami Pelajaran Blog menyampaikan rasa Terima kasih buat pihak-pihak yang terkait,i love you full guys! :D

Trik Membuat Slide Show Foto Widget #2

Update! Membuat Page Peel Effect di Blogger

noreply@blogger.com (Admin) — Wed, 04 Apr 2012 05:12:02 PDT

UPdate! Trik Membuat PagePeel,Sudah Direvisi! Dijamin Berhasil 100%

Cara Mudah Membuat Page Peel Effect Untuk Blogger Dengan JQuery

Bismillah - Seperti yang sudah banyak bertebaran di internet,tutorial cara membuat halaman blog seolah tergulung dan melipat seperti yang sobat dapat lihat di beberapa situs diantanya adalah blog dari milik sahabat kami di SINI.

Yup,hanya untuk yang 'belum tahu' tutorial ini kami publikasikan,adalah membuat ujung bagian kanan atas dari blog tersebut seolah menggulung dan terbuka (bahasa jawanya 'ngletek' mentang2 orang jawa pen-) saat mouse diletakkan diatasnya.Jadi bisa sobat lihat sekali lagi dari blog milik sahabat saya tersebut dan coba letakkan mouse berada diatasnya,maka nanti akan ada efek menggulung alias nglotok seolah blog tersebut memiliki dua kulit (emang kambing mas pen-).

Para programmer menamakan sebagai 'Page Peel',seperti pada tutorial-tutorial beberapa waktu lalu,menggunakan jQuery untuk blogger masih banyak diminati,sekedar flasback teknik jQuery pernah kami gunakan dalam membuat menu jQuery,membuat slideshow jQuery,membuat TabView jQuery dan popup jQuery dan masih banyak lagi yang sobat bisa lihat di Tutorial jQuery pada blog ini.
Nah,bagaiaman jika jQuery dikombinasikan dalam membuat PagePeel ini?
Saya kira dari gambaran yang ga pernah jelas seperti diatas sudah dapat sobat bayangkan tutorial apa yang ingin disampaikan kali ini.

Untuk lebih jelasnya bagaimana membuat efect melipat dari ujung blog dari blogger ini,sobat bisa lihat gambar berikut,(plototin ya gan :p)

Oke,caranya adalah pertama kali sobat pilih Tata Letak (gb1) lalu pilih tab Edit HTML (gb2)

gb1

gb2

Sesuaikan saja dengan tampilan blog milik sobat (mengingat blogger sekarang memiliki new interface pen-),setelah dari langkah gb2,cari kode ini <head> (Gunakan Ctrl+F) dan letakkan kode dibawah ini tepat dibawah kode <head> tersebut.

<script type="text/javascript">var tujuan ='http://geliat-bisnis.blogspot.com/'</script>
<script src="https://sites.google.com/site/pujiantoroinc/Home/pagepeelpelajaranblog.js" type="text/javascript"></script>

Simpan dan sobat bisa lihat hasilnya :D
Untuk costomnya sobat utak-atik sendiri ya,terutama yang bercetak tebal pada kode diatas,sedangkan kode jQuerynya sobat bisa download di sini.Semoga artikel Cara Membuat Sudut Halaman Blog Terlipat dan Menggulung (Page Peel jQuery) ini bermanfaat bagi teman-teman disamping saya sendiri juga dari hasil copas sana sini,hihihihihi..keep post guys!

Membuat Widget Melayang / Cara Buat Obyek Melayang saat Loading

noreply@blogger.com (Admin) — Sat, 31 Mar 2012 02:54:02 PDT

Floating Object ketika Halaman Blog Dibuka

Sekedar buat koleksi script aja gan,nih ada info yang saya dapat dari tetangga sebelah bagaimana cara membuat floating object / widget melayang saat halaman blog dibuka.

Ada tombol 'close' yang bisa sobat modofikasi sendiri,misal dengan tanda [x] or berupa gambar.
Namun kedua opsi ini tidak mempengaruhi berhasil tidaknya trik membuat widget link text / gambar melayang ini.Bentuk fisiknya sobat bisa lihat di SINI

Langkah Cara Membuat Link Text Melayang dengan Tombol Close [Tutup]

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:

[1]

[2]

[3]

Dan letakkan kode berikut disana:

<style type="text/css"> #topbar{ position:absolute; padding-left:0px; padding-top:130px; up:100px; background-color: transparancy; width: 200px; visibility: hidden; z-index: 100; } </style> <script type="text/javascript"> var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script> <br /> <div class="clear"> </div> <div id="topbar"> <div style="text-align: right;"> <a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-B0EZO_0NcVo/T3bH1dJkQ8I/AAAAAAAABdA/o3IxlpRnRqE/s1600/pelajaran%2Bblog%2Bclose%2Bbutton.png" /></a></div> <center> <div style="background: #fff;"> <table width="200" height="130" border="0"><tr><td align="center"> <a href="http://beritamuslimsahih-ahlussunnah.blogspot.com/"><img src="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" alt="Pelajaran Blog - Ahlussunnah wa Al Jama'ah." width="180" height="120" /></a><br/><br/> <small><strong>Masih belum mengenal Islam yang Murni?</strong></small> </td></tr></table> </div> </center> </div>

Lalu Simpan dan lihat hasilnya.

**Ket:

1.Untuk kode yang berwarna merah gantilah sesuai dengan keinginan sampai sobat mendapat posisi yang diinginkan.

2.Untuk kode yang berwarna biru sobat dapat ganti dengan [x],jika sobat tidak menginginkan tombol close.

3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.

Selamat mencoba ya :D

Cara Membuat Read More Otomatis di Blogger

noreply@blogger.com (Admin) — Wed, 21 Mar 2012 03:26:30 PDT

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

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

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span> 
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 
<b:else/>
<data:post.body/>
</b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya

Google Rich Snippets - Cara Membuat Rating Tanda Bintang di Google Serp

noreply@blogger.com (Admin) — Wed, 14 Mar 2012 03:28:50 PDT

Trik dan Cara Agar Index di Gogle Memiliki Star / Tanda Bintang

Hi sob,gimana kabar kalian malam ini? masih semangat ngeblog ya :D
Alhamdulillah,sore ini saya ada sedikit info yang semoga saja bermanfaat buat para blogger yang khususnya masih penasaran atau belum mengetahui bagaimana dan seperti apa penjelasan lebih rinci tutorial lengkap membuat google rich snippets ini.

Sebelum melangkah lebih jauh,apa sih fungsi dari rating google rich snippets itu gan? pertanyaan ini sobat bisa baca dan dapatkan infonya di sini.

Mohon baca artikel dengan teliti dan jangan salah langkah,karena jika mengabaikan hal ini kemungkinan besar cara akan gagal,so guys supaya trik ini bekerja di blog kamu dengan baik,simak postingan ini dengan teliti ya sob,..........tapi jangan melotot kaya gitu juga kali :D hihihihi

Seperti title dari posting kali ini,Google Rich Snippets - Cara Membuat Icon Rating Tanda Bintang di Google Serp adalah juga merupakan sebuah trik optimasi blog (salah satu kiat dalam search engine optimization -pent) agar mendapatkan posisi yang terbaik di serp (search engine result page) dari banyaknya view page atau halaman yang tampil.

Disamping itu hasil serp dengan breadcrumbs tanda bintang ini akan lebih menarik pengunjung karena tampilan yang lebih menonjol dibandingkan dengan hasil yang lain,sobat bisa lihat seperti pada gambar diatas tadi.

Bagaimana tips dan trick dalam membuat gugel rich snipet ini? sobat baca dan mari pahami bersama dengan seksama (halah! bahasane mas,biasa wae dumz :p)

Langkah dan Cara Memasang Icon Star atau Tanda Bintang di Result Google

Akan ada banyak step-step yang harus kita lakukan secara berurut,dan disini kami membagi menjadi 7 langkah,dan langkah-langkahnya adalah sebagai berikut:

#1. Pertama,sobat harus memiliki akun Google Plus (Google+),mudah kok sob,tinggal daftar aja di SINI

Syarat ini adalah untuk mendapatkan nomor ID dari akun Google+ sobat,yang nantinya akan kita gunakan sebagai verifikasi dari Google Rich Snippets yang akan kita bahas kali ini.

Setelah sobat memiliki akun Google+,coba sobat pergi ke menu Profil lalu simpan no ID yang tampil dari akun Google+ sobat,no ID ini akan tampil di address bar browser yang sobat gunakan,lihat gambar (gb.1) sob:

gb.1
Setelah itu,untuk sementara simpan dahulu ya gan no ID gOOgle+ milik sobat.Sebagai contoh no ID Google+ milik saya sendiri adalah 118207325935415873536

#2. Sekarang,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode (gunakan Ctrl+F untuk mempermudah pencarian)
Setelah kode tersebut sobat ketemukan,kini letakkan kode dibawah ini tepat dibawah kode <head> tersebut:

<link href='https://plus.google.com/no_id_sobat' rel='publisher'/>

misal dengan ID Google+ yang saya miliki akan menjadi seperti ini atau bisa lihat (gb.2):

<link href='https://plus.google.com/118207325935415873536' rel='publisher'/>

lihat gambar:

gb.2

Simpan template sobat.

#3. Langkah selanjutnya,masih dalam halaman yang sama,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode <body> dan tepat dibawahnya letakkan kode berikut atau lihat (gb.3):

<div> <div itemscope='' itemtype='http://data-vocabulary.org/Review'>

atau lihat gambar:

gb.3

Kemudian cari kode </body> dan tepat diatasnya letakkan kode penutup berikut atau lihat (gb.4):

</div></div>

lihat gambar:

gb.4

Simpan templates sobat.

#4. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates.Gunakan Ctrl+F dalam keyboard dan tuliskan kode berikut post-title entry-title,akan terlihat seperti gambar dibawah (gb.5) ini:

gb.5

Hal ini akan menemukan secara otomatis kode yang kita cari,untuk barisan kodenya biasanya akan terlihat seperti ini:
<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>

Sekarang,sisipkan kode berikut antara barisan kode tersebut:

<span itemprop='itemreviewed'><span itemprop='description'></code> dan <code></span></span>

Sehingga akan menjadi seperti ini atau lihat (gb.6):

<span itemprop='itemreviewed'><span itemprop='description'> <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> </span></span> </b:if>

Dari gambar yang berhasil saya print screen akan seperti ini:

gb.6

Simpan templates sobat.

#5. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
Setelah ketemu,letakkan persis dibawahnya barisan kode google rich snippets breadcrumbs ini:

Description: <span itemprop="description"><data:post.title></data:post.title></span> Rating: <span itemprop="rating">3.5</span> Reviewer: <span itemprop="reviewer"><data:post.author></data:post.author></span> ItemReviewed: <span itemprop="itemreviewed"><data:post.title></data:post.title></span>

atau bisa lihat (gb.7)

gb.7

Bagaimana jika saya menemukan kode <data:post.body/> lebih dari satu? tidak mengapa sob,tinggal letakkan kode google rich snippets breadcrumbs tersebut tepat dibawah masing-masing kode <data:post.body/> yang ada di template blog milik sobat.

Simpan templates.

#6. Langkah berikut ini adalah yang terpenting karena mempengaruhi dalam kesuksesan cara mem-verifikasi Google Rich Snippets yang akan kita bahas ini.

Pergilah ke akun Google+ milik sobat,dan pilih menu Profil maka akan sobat lihat di sebelah kanan atas tombol 'Edit Profil',Klik tombol 'Edit Profil' tersebut dan klik link 'Kontributor Untuk' (gb.a)
Lihat gambar berikut ini:

gb.a

Selanjutnya,klik link 'Tambahkan Tautan....' (gb.b)

gb.b

Isi label dan url,label bisa sobat kasih nama sesuai keinginan sedangkan url sobat tuliskan alamat blog yang sobat miliki lalu klik tombol 'Simpan',lihat gambar (gb.c)

gb.c

#7. Langkah terakhir,sobat kunjungi Rich Snippets Testing Tool lihat gambar berikut (lihat gb.d):

gb.a

Isikan url blog milik sobat untuk mengetes hasil Google Rich Snippets yang baru saja kita ciptakan,jika sukses akan tampil seperti gambar dibawah ini gan:

Semoga bermanfaat ya,see you guys (sok bule,hihihihihihi)

Cara Menambahkan / Mengaktifkan Reply pada Komentar Blogger

noreply@blogger.com (Admin) — Sun, 11 Mar 2012 06:05:26 PDT

100% Works! Membuat Komentar di Blogger dengan Fasilitas Reply (Balas)

Hi guys,ketemu lagi kita ya,sebelum memenuhi janji beberapa hari lalu untuk posting bagaimana cara mendaftar google adsense secara lengkap,tidak ada salahnya khan sob kami mempublikasikan tentang tips dan trik bagaimana cara merubah / mengubah ataupun mengganti kotak komentar di blogger agar memiliki fitur reply / balasan.

Warning!!! alangkah baiknya backup terlebih dahulu template sobat,karena bisa saja template sobat ada yang berubah,misal jika sobat telah membuat read more otomatis maka setelah melakukan trik ini script read more otomatis tersebut sudah tak bekerja lagi karena template sobat nanti akan kembali ke default,kendati seperti itu widget yang ada tidak akan hilang atau berubah.Baca artikelnya ya gan,meskipun tulisan orang ganteng satu ini memang ga begitu menarik tapi memukau (halah!!!),soalnya jika sobat loncat ke permasalahan tanpa memperhatikan langkahnya,cara ini bisa gagal lho :D so,keep watching ya (sok bule bgt @#$%)

Bentuk fisiknya seperti apa sih? yup! sobat dapat lihat gambar di bawah ini (yang kami beri tanda lingkaran):

Pernah juga kami mempublikasikan membuat fitur reply ini dengan pihak ketiga dan kami rasa itu terlalu ribet dan melibatkan sebuah frame yang nantinya akan merugikan blog yang kita milliki.

Secara default untuk template tertentu bawaan blogger,sebenarnya fitur reply komentar yang akan kita bahas ini sudah aktif dan dapat langsung digunakan tanpa kita harus memvermak template.
Kendati seperti itu,bagi agan-agan yang menggunakan template dari hasil convert atau mungkin template bawaan blogger namun belum memiliki fasilitas / sarana reply (balasan) seperti pada gambar di atas bisa mencoba trik sederhana berikut ini.

Note**Jikalaupun tips trik reply blogger comments dibawah ini nantinya berhasil sobat buat,mengapa fitur reply tersebut tidak ada fitur Delete-nya? betul gan,sebagai catatan yang perlu sobat ketahui juga,fitur Delete ini hanya akan tampak saat sobat login dengan akun blog milik sobat sendiri dan hanya sobatlah yang dapat menghapus dari comment2 spam dari pengunjung yang dirasa akan merugikan blog yang kita kelola,sedangkan fasilitas reply-nya sendiri dapat dilihat oleh semua orang / pengunjung.

Pelajaran Blog - nah,bagaimana kita meng-aktif-kan fitur reply comment for blogger ini,ikuti langkah berikut ya sob:

Cara Mengaktifkan Reply (Jawaban) di Kotak Comment Blogspot

Pertama,'pastikan terlebih dahulu':

***1.Sobat aktifkan komentar dengan cara pilih Dashboard > Setting / Pengaturan > Comments > check list Show pada comment (lihat gb.1) > check list juga Embed di bawah posting (lihat gb.2)

gb.1

gb.2

***2.Aktifkan komentar di area posting dengan cara pergi ke Dashboard > Tata Letak > klik Edit (lihat gb.3) dan contreng Comment (lihat gb.4)

gb.3

gb.4

***3.Beri izin akses untuk pengunjung memberi komentarnya di setiap posting milik sobat,ini dapat dilakukan dengan cara check list 'Allow' atau 'Izinkan' di bawah ruang posting sobat (lihat gb.5)

gb.5

Setelah beberapa hal diatas sobat telah lakukan,kini saatnya untuk 'merubah kotak komentar blogger agar memiliki akses balasan / jawaban / reply dari komentar-komentar yang telah ada.

#1.Pergi ke Dashboard > Tata Letak (lihat gb.6) > Edit HTML (lihat gb.7) > Contreng check box Expand Widget Templates (lihat gb.8)

(gb.6)

gb.7)

gb.8

Setelah itu klik link tulisan 'Revert widget templates to default' yang letaknya persis dibawah edit html,(lihat gb.9) dan setelah itu jika ada popup notif untuk menyetujuinya klik saja 'Ok (lihat gb.9)

gb.8

gb.9

Simpan dan lihat komentar di posting milik sobat,jika belum ada komentar,buatlah satu komen untuk mengetes dari hasil eksperiment repli komentar sederhana ini.Moga berhasil dan bermanfaat ya gan,see you :D

Cara Memasukkan Pin Google Adsense

noreply@blogger.com (Admin) — Thu, 01 Mar 2012 03:49:22 PST

Letak Tempat PIN di Google Adsense

Sengaja sore ini posting seputar Google Adsense dalam bagaimana cara memasukkan pin Google Adsense,mengingat salah satu sahabat kita yang sudah berhasil mendaftar google adsense minggu-minggu ini.

Jika bagi sobat yang belum memiliki Google Adsense,buruan daftar karena sebentar lagi search engine raksasa ini akan mendirikan kantor resminya di Jakarta.Ini merupakan peluang bagus buat para blogger yang mulai menekuni dunia blogging dan bisnis online.

Sengaja pula kami loncat kepermasalahan ini sebelum posting utama di cara mendaftarGoogle Adsense untuk beberapa hari ke depan,Insya Allah.
Cara memasukkan pin Google Adsense ini cukup mudah,jika GA (google adsense) sobat sudah di approve dengan datangnya surat pemberitahuan PIN ke rumah sobat,tinggal masukkan pin tersebut dalam akun Google Adsense yang sobat miliki.

Bentuk fisik surat PIN tersebut kurang lebih seperti ini:

Buka surat tersebut dan catat no PIN sebagai aktivasi dari akun Google Adsense kita.
Setelah sobat ketahui no PIN yang akan kita masukkan,ikuti langkah berikut:

Langkah Meng-aktivasi PIN Google Adsense

Pertama,Login di account Google Adsense sobat (akum Google)
Kemudian,Pilih My Account/Akunku dan pilih Payment History/Riwayat Pembayaran selanjutnya klik "Please enter your PIN",untuk tampilannya seperti ini(bisa berubah sewaktu-waktu):

Selanjutnya,klik "Please enter your PIN" seperti gambar berikut:

Jika pin sobat benar,klik 'Continue to Reports' dan akan tampil seperti ini untuk memberitahukan bahwa aktivasi akun Google Adsense sobat telah berhasil dilakukan:

Mudah-mudahan,artikel 'cara memasukan pin google adsense' bermanfaat dan semoga berhasil ya sob :D

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)

noreply@blogger.com (Admin) — Wed, 29 Feb 2012 04:07:45 PST

Bismillah - Pernahkah sobat menemui sebuah kotak pencarian di blog namun bukan saja dihias dengan background agar lebih cantik tetapi juga kotak pencarian (search box) ini memiliki multi fungsi.
Kira-kira widget search box multi ini akan tampak seperti gambar dibawah ini:

Atau bentuk fisiknya sobat bisa lihat di SINI

Langkah Membuat Kotak Pencarian Multiple Manual

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:

[1]

[2]

[3]

Dan letakkan kode berikut disana:

<script type="text/javascript">  </script> <table border="1" cellspacing="1" width="300"> <tr> <th><span style="float: left"><img src="http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif" width="16px" height="16px" alt="" /> Search</span></th> </tr> <tr class="row1"> <td> <form id="qsearch_form" method="post" action="/search" onsubmit="return qsearch_onSubmit();"> <input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="Search for keywords" value="Search" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" /> <select id="qsearch_select" tabindex="8"> <optgroup label="Blog"> <option value="mrpujiajadeh" style="background-color: #EEEEEE;">Pelajaran Blog</option> </optgroup> <optgroup label="Search engines"> <option value="wikipedia" style="background-color: #FEF2D6;">Wikipedia</option> <option value="google" style="background-color: #FEF2D6;">Google</option> <option value="yahoo" style="background-color: #FEF2D6;">Yahoo</option> <option value="msnlive" style="background-color: #FEF2D6;">MSNlive</option> <option value="altavista" style="background-color: #FEF2D6;">Altavista</option> <option value="lycos" style="background-color: #FEF2D6;">Lycos</option> <option value="odp" style="background-color: #FEF2D6;">Open directory</option> </optgroup> </select>  <input type="hidden" name="search_fields" value="all" /> <input type="submit" value="Cari" tabindex="8" /> </form> </td> </tr> </table>

Kemudian simpan dan lihat hasilnya,sekarang sobat sudah memiliki kotak pencarian dengan menu dropdown sebagai multi pilihan,oy gan,kode yang bercetak tebal ubah aja sesuai dengan keinginan dan nama blog sobat ya.
Moga bermanfaat :D

Cara Memasang / Meletakkan Twitter Widget di Blog

noreply@blogger.com (Admin) — Tue, 28 Feb 2012 04:20:35 PST

Bagaimana Menempatkan Widget Twitter di Blogger?

Bismillah,menampilkan status twitter di blog,bagi agan-agan yang berminat menampilkannya baik untuk keperluan bisnis online maupun hanya sekedar 'narsis',bisa ikuti langkahnya sebagai berikut:

Pertama,sobat kunjungi https://twitter.com/about/resources/widgets,lihat gambar:

Selanjutnya,klik My Website,lihat gambar:

Selanjutnya sobat klik Profil Widget,nanti akan keluar jendela seperti berikut,dan isilah form dengan nama username dari username twitter yang akan ditampilkan statusnya,misal akun twitter saya sendiri mrpujiajadeh,promo nih,hihihihi:

Nah,untuk mengatur warna background,jenis text dan warna link dari widget twitter ini,sobat klik tab Appearance,lihat gambar:

Setelah itu sobat klik tombol Finish & Grab Code,lihat gambar:

Dan kini sobat sudah mendapat kode script html yang nantinya kita akan pasang di blog :D,lihat gambar:

Bagaimana Menempatkan Kode Script Twitter Widget di Blog?

Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript

Setelah itu letakkan kode yang berhasil sobat copy tadi pada widget HTML/Javascript tersebut,dan simpan.

Pelajaran Blog

Membuat Kotak Kode / Text Area (Update)

Maksudnya menghias text area?

Menghias Text Area Contoh #1

Menghias Text Area Contoh #2

Menghias Text Area Contoh #3

Menghias Text Area Contoh #4

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

Cara Memasang Like / Share Button di Setiap Postingan Blogger

Langkah dan Cara Pasang Like Button / Icon Social Network Directories

Google Translate Widget

Memasang Translate Bahasa di Blog / Google Translate Widget

Langkah Cara Pasang Google Translate / Penterjemah dalam Blog

Cara Membuat Template Blogger untuk Tampilan Handphone

Cara Membuat Template Blogger versi Mobile

Cara Meng-aktifkan Blogspot template for Mobile

Cara Membuat ToolTip Ber-Link Di Dalamnya

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

Langkah Membuat Coda Bubbles dengan jQuery

Membuat Navbar / Tool Bar Share di Bawah Blog

Tambahkan Widget Tool Bar Share Social Network di Blog Kamu

Parse Tool

Alat Pengubah Kode Agar Tampil di Postingan

Membuat Efek Loading

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

Langkah dan Cara Membuat Efek Loading Blog dari AkuPunya.Com

Membuat Back To Top Berefek (Smooth)

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

Langkah dan Cara Membuat Back To Top Button jQuery

Membuat Link Blogroll Animasi Gulung (Update)

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Cara Membuat Vertical Slide Menu / Trigger Hover (Update)

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Membuat Menu Kwicks jQuery Slide Geser (Update)

Kwick Menu Navigasi Blogger dengan jQuery

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Cara Download Youtube (Cepat,Mudah,Praktis)

Download Youtube Tanpa Software

Cara Downlaod Streaming Video

Cara Membuat Related Post Berkedip jQuery (Update)

UPdate! Trik Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait,Sudah Direvisi! Dijamin Berhasil 100%

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Membuat Related Post Widget Blogger (Update)

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

1.Related Post Widget for Blogger dengan Javascript

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Cara Membuat Popup jQuery (Update)

UPdate! Trik Membuat Membuat Anchor Popup dengan jQuery (Popup Keren dengan Klik),Sudah Direvisi! Dijamin Berhasil 100%

Trik Cara Membuat Popup dengan jQuery

Update! Membuat Foto Slide Widget di Blogger

UPdate! Trik Membuat SlideShow Image Widget for Blogger,Sudah Direvisi! Dijamin Berhasil 100%

SlideShow Image Widget for Blogger

Langkah dan Cara Membuat Slide Show Photo Widget for Blogspot

Update! Membuat Page Peel Effect di Blogger

UPdate! Trik Membuat PagePeel,Sudah Direvisi! Dijamin Berhasil 100%

Cara Mudah Membuat Page Peel Effect Untuk Blogger Dengan JQuery

Membuat Widget Melayang / Cara Buat Obyek Melayang saat Loading

Floating Object ketika Halaman Blog Dibuka

Langkah Cara Membuat Link Text Melayang dengan Tombol Close [Tutup]

Cara Membuat Read More Otomatis di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%

Read More Otomatis pada Template Blogger

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Google Rich Snippets - Cara Membuat Rating Tanda Bintang di Google Serp

Trik dan Cara Agar Index di Gogle Memiliki Star / Tanda Bintang

Langkah dan Cara Memasang Icon Star atau Tanda Bintang di Result Google

Cara Menambahkan / Mengaktifkan Reply pada Komentar Blogger

100% Works! Membuat Komentar di Blogger dengan Fasilitas Reply (Balas)

Cara Mengaktifkan Reply (Jawaban) di Kotak Comment Blogspot

Cara Memasukkan Pin Google Adsense

Letak Tempat PIN di Google Adsense

Langkah Meng-aktivasi PIN Google Adsense

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)

Langkah Membuat Kotak Pencarian Multiple Manual

Cara Memasang / Meletakkan Twitter Widget di Blog

Bagaimana Menempatkan Widget Twitter di Blogger?

Bagaimana Menempatkan Kode Script Twitter Widget di Blog?