Update! Membuat Tooltip Kotak Search Box Blogger

Yuk! Menghias Kotak Pencarian Blogger!

Lain dengan materi posting Pelajaran Blog beberapa waktu lalu yang membahas juga seputar kotak pencarian,kali ini kita hanya sebatas menghiasnya saja (pembaca:yah..ga seru dong!)

Tunggu dulu sob,ini bisa diterapkan di form apa aja kok,ya salah satunya pada form kotak pencarian yang akan dibahas pada sore hari ini :D

Memang contohnya seperti apa sih?,coba saja sobat lihat kotak pencarian di SINI

Gimana? ingin mencobanya sob? ikuti ya gan.

Langkah Memodifikasi Kotak Pencarian dengan Tooltip jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='http://mrpujiajadeh.comze.com/gips.css' rel='stylesheet' type='text/css'/>
<script src='http://mrpujiajadeh.comze.com/gips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;input#purple&#39;).gips({ &#39;theme&#39;: &#39;purple&#39;, autoHide: true, text: &#39;This is purple tooltip, auto hide after pausess time elapses.&#39; });
$(&#39;input#green&#39;).gips({ &#39;theme&#39;: &#39;green&#39;, placement: &#39;left&#39; });
$(&#39;input#yellow&#39;).gips({ &#39;theme&#39;: &#39;yellow&#39;, autoHide: true, placement: &#39;right&#39; });
$(&#39;input#red&#39;).gips({ &#39;theme&#39;: &#39;red&#39;, placement: &#39;bottom&#39; });
});
</script>

Setelah itu simpan templates.

Kemudian,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:

<div id="demo"><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="red" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
</form></div>

Simpan template sobat dan lihat hasilnya :D

Ref:

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)
Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value
Membuat Auto Clear pada Mesin Pencari
Membuat Search Engine sendiri pada Blog

Update! Membuat Foto Slide Blogger!

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka/Update! Membuat Foto Slide Blogger!

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

Lihat gambar lebih besar klik di SINI
Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)


(1)

(2)

(3)
Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpG2x8_3YpmX84B0mV296ueKENaxXRmKFjmBczCFzx6uurglPX4RkMm_BmFCFpNwIoiFG4rm51HCPY7__9J8api4MSLUvlVy3Ko08GrV0jQAKqF3V_OOjr5Ks-qYlQzAD6HS09HB9yYE/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:

</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)

(6)
Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D

Cara Membuat / Memasang Popup Iklan dengan Tombol Tutup [X]

Trik Membuat Baner Iklan dengan Tombol (Anchor Link) Tutup / Close Button

Bismillah - hi kawan pakabar!? dah lama banget kita ga posting nih,ga ada waktu - job dari mas SpreiShop.Org dan FanspageId.Com aja sampai saat ini terlantarkan dan statusnya juga blm jelas,hehe.. maaf ya mas:D mungkin lain kali pent-),seperti pada screenshot gambar diatas gan,malam ini seperti janji beberapa hari yang lalu,Pelajaran Blog akan berbagi trik seputar membuat baner iklan popup dilengkapi dengan tombol tutup atau close button.

Namun tidak seperti 'trik membuat iklan popup jquery' seperti artikel yang terdahulu,kali ini widget yang akan kita ciptakan ini dalam posisi 'menetap' namun akan hilang saat kita klik close button-nya.
Yah,kurang lebih seperti iklan pada situs YouTube pada halaman awalnya namun hilang saat kita klik anchor link close-nya.

Bagaimana sob,tertarik untuk mencoba widget yang satu ini? (sangat menghemat tempat,actually pent-)
Dengan sedikit kreasi,dari script yang akan kami bagikan ini,sobat bisa memodifikasi sesuai keinginan.

Langkah Cara Membuat Show Hide Link Anchor pada Widget

Pertama,sobat pergi ke Dashboard lalu pilih Template (gb.1),kemudian pilih Edit HTML (gb.2) dan klik Proceed (gb.3)


gb.1


gb.2


gb.3

Lalu contreng Expand Widget Templates (gb.4)


gb.4
Kemudian cari kode berikut:

]]></b:skin>

Jika sudah sobat ketemukan tepat diBAWAHnya letakkan script jquery berikut:

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

Setelah itu tepat diATAS kode ]]></b:skin>,letakkan barisan css berikut:

#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.pb-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
fieldset {
border:none;
}

Lalu simpan templates.

Nah,selanjutnya,kini kita tinggal menciptakan widget iklan yang akan ditampilkan.
Langkahnya sangat mudah,pertama pilih Dashboard lalu Layout (gb.5) kemudian klik Add a Gadget (gb.6) dan pilih HTML/Javascript (dalam mode html bukan rich) (gb.7)


gb.5


gb.6



gb.7
Dan letakkan kode berikut:

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);">Ingin membuat iklan seperti di bawah ini? tunggu tutorialnya beberapa hari lagi ya sob :D.Klik tanda x untuk menutup iklan.</span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
<iframe vspace="0" frameborder="2" marginheight="100" marginwidth="100" readonly="true" height="400" src="http://beritamuslimsahih-ahlussunnah.blogspot.com/" hspace="10" scrolling="yes" width="100%" allowtransparency="true"></iframe>
</div>

<script type='text/javascript'>
$(document).ready(function() {
$('a.pb-window').click(function() {

//Getting the variable's value from a link
var pbBox = $(this).attr('href');

//Fade in the Popup
$(pbBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(pbBox).height() + 24) / 2;
var popMargLeft = ($(pbBox).width() + 24) / 2;

$(pbBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .mrpujiajadeh-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>

**Kode yang berwarna merah,sobat bisa ganti sesuai keinginan,bisa gambar (baca kode cara meletakkan gambar pada blog),video,iklan atau html maupun javascript apa saja.
Menarik bukan? selamat mencoba ya sob.

Revisi : Membuat Menu Home,About,Profil,etc

Revisi Lagi,Revisi Melulu!

Ada apa dengan blog ini yang isi content-nya selalu sama,emang ga ada materi lagi ya? hehe
Ini ada kaitannya dengan sarat email gan,sebagian besar email yang masuk mempermasalahkan posting tentang tema yang akan kita bahas malam ini,meskipun tema ini sudah di posting beberapa waktu lalu,bahkan saya sempat mempublikasikan posting yang sama.
Sebelum ke titik permasalahan,dalam blog sederhana ini telah mempublikasikan bermacam-macam menu navigasi diantaranya:

1.Menu dengan efek Horizontal jQuery
2.Slide jQuery Navigation Menu
3.Menu Navigasi dengan Sub Menu Bergambar
4.Membuat Menu Navigasi dengan Sub Menu
5.Menu Navigasi dengan Css

Nah,diantara menu2 tersebut hanya menu nomor 2 yang sering dipermasalahkan,oleh karenanya,sobat ikuti langkah dengan teliti ya sob,baca artikelnya ya (meski ga tau kemana arahnya dengan gaya bahasa yang sedikit ngelantur dan ngawur hihi pent-)

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://pujiantoroblog.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
}


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

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


**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

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!

Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize

Seperti Apa Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize) Ini?

Masih dengan teknik jquery yang sama seperti trik dan cara memperlebar widget pada posting yang lalu.

Yup,membuat Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize).
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Tombol Memperbesar / Memperkecil Huruf Blogger

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#main&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:


<div id='resizeFont'>
<input id='large' type='button' value='Perbesar Huruf'/>
<input id='reset' type='button' value='Ukuran Normal'/>
<input id='small' type='button' value='Perkecil Huruf'/>
</div>


Simpan Templates dan lihat hasilnya.

Untuk kode yang berwarna biru,sobat sesuaikan dengan attribut yang sobat inginkan,misal sobat ingin mengatur mengubah huruf dengan tombol ini pada bagian #main-wrapper atau #content-wrapper maka ganti kode berwarna biru tersebut dengan tag tersebut.

Membuat Menu Horizontal dengan Efek jQuery

Seperti Apa Menu Horizontal dengan Efek jQuery Ini?

Mengingat waktu yang sudah malam gan,saya share langsung kepermasalahannya aja ya.

Yup,membuat menu dengan efek memanjang ke kanan menggunakan jQuery.
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Menu Horisontal dengan jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.memanjang&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;100%&quot;}, 400);
$(this).hide();$(&#39;.menyusut&#39;).show();
});

$(&#39;.menyusut&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;200px&quot;}, 400);
$(this).hide();$(&#39;.memanjang&#39;).show();
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

#menuguegitu {
width:200px;
height:50px;
background:#999999;
}

.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:

<div id='menuguegitu'><div class='membuatbordermelengkungroundedcorner'>
<center><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/">Home</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/search">Index</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/feeds/posts/default">New!</a> | <a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Facebook</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Twitter</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Google+</a></center></div></div>
<br/><br/>
<div id='button-wrapper'>
<button class='memanjang'>Tampilkan Menu Horizontal</button>
<button class='menyusut' style='display:none;'>Kembalikan</button>
</div>

Simpan dan lihat hasilnya :D
Berhubung waktu sudah larut,edit sendiri ya sob sesuai dengan attribut yang sobat inginkan.See you dan Moga sukses ya nguliknya ya gan!

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)

Yuk! Menghias Kotak Pencarian Blogger!

Lain dengan materi posting Pelajaran Blog beberapa waktu lalu yang membahas juga seputar kotak pencarian,kali ini kita hanya sebatas menghiasnya saja (pembaca:yah..ga seru dong!)

Tunggu dulu sob,ini bisa diterapkan di form apa aja kok,ya salah satunya pada form kotak pencarian yang akan dibahas pada sore hari ini :D

Memang contohnya seperti apa sih?,coba saja sobat lihat kotak pencarian di SINI

Gimana? ingin mencobanya sob? ikuti ya gan.

Langkah Memodifikasi Kotak Pencarian dengan Tooltip jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='http://mrpujiajadeh.comze.com/gips.css' rel='stylesheet' type='text/css'/>
<script src='http://mrpujiajadeh.comze.com/gips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;input#purple&#39;).gips({ &#39;theme&#39;: &#39;purple&#39;, autoHide: true, text: &#39;This is purple tooltip, auto hide after pausess time elapses.&#39; });
$(&#39;input#green&#39;).gips({ &#39;theme&#39;: &#39;green&#39;, placement: &#39;left&#39; });
$(&#39;input#yellow&#39;).gips({ &#39;theme&#39;: &#39;yellow&#39;, autoHide: true, placement: &#39;right&#39; });
$(&#39;input#red&#39;).gips({ &#39;theme&#39;: &#39;red&#39;, placement: &#39;bottom&#39; });
});
</script>

Setelah itu simpan templates.

Kemudian,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:

<div id="demo"><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="red" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
</form></div>

Simpan template sobat dan lihat hasilnya :D

Ref:

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)
Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value
Membuat Auto Clear pada Mesin Pencari
Membuat Search Engine sendiri pada Blog

Membuat Foto Slide dengan Angka dan Dot Navigasi di Dalamnya

Cara Memasang Foto Slide dengan Navigasi Dot dan Angka

Slide Image / Photo with Number & Dot Navigation - masih ingat script dari Nivo beberapa waktu lalu? namun kini sudah menjadi premium sehingga tutorial yang membahas slide widget foto dengan bantuan javascript Nivo sebagian besar sudah tak berfungsi lagi.

Masih menggunakan script yang sama,jadi script 'slider pack nivo' yang kami terapkan di mrpujiajadeh.comze.com tetap menjadi hak cipta mereka ya gan,so jangan diutak-atik hihihi.

Jika beberapa waktu lalu Pelajaran Blog telah berbagi informasi tentang bagaimana membuat / memasang widget slideshow image di blogger,kali ini masih dalam widget yang sama namun dengan tampilan yang berbeda.

Yup! Informasi bagaimana membuat slide image / foto widget di blogger,dengan tampilan lebih menarik dan variatif foto slide widget yang akan kita bahas ini memiliki navigasi 'Previous' dan 'Next' di sebelah kanan dan kiri dari widget slide tersebut.

Sekali lagi betul gan! untuk widget slide show gambar yang akan kita bahas kali ini dibedakan dengan adanya dot atau juga bisa diganti dengan menggunakan angka sebagai navigasi / number navigation slideshow image widget.

Untuk screenshot dari trik Cara Membuat Slide Foto dengan Tombol Prev dan Next-nya yang telah saya terapkan,sobat bisa lihat gambar dibawah ini:

Lihat gambar lebih besar klik di SINI

Sedang untuk demo live-nya sobat bisa kunjungi diSINI.

Nah,sudah sangat jelas sekali ya sob,dan saatnya kini mencari tahu bagaimana memasang widget foto slide ini di blogger/blogspot milik sobat.

Langkah dan Cara Membuat Slide Gambar dengan Tombol 'Prev' dan 'Next'

Pertama,sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) kemudian pilih tab Edit HTML (gb3) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb4)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpG2x8_3YpmX84B0mV296ueKENaxXRmKFjmBczCFzx6uurglPX4RkMm_BmFCFpNwIoiFG4rm51HCPY7__9J8api4MSLUvlVy3Ko08GrV0jQAKqF3V_OOjr5Ks-qYlQzAD6HS09HB9yYE/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

Kemudian setelah itu cari lagi kode berikut:

</head>

Dan jika sudah ketemu,sobat letakkan barisan script berikut tepat diATASnya ya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Setelah itu simpan templates.

Selanjutnya,kini sobat pergilah ke Dashboard (gb1) lalu pilih Tata Letak (gb2) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)


Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode widget slideshow ini:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>


<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

Lalu simpan templates sobat dan lihat hasilnya :D
Untuk kode yang berwarna hijau gantilah dengan atribut yang sobat inginkan ya.Selamat ngulik dan moga berhasil :D