Jumat, 25 Maret 2011

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget (Update) Sudah Direvisi! Dijamin Berhasil 100%

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery


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 Membuat Tab Vanilla Slick jQuery

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

Membuat jQuery Slick Tab.


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 Tab Vanilla Slick.



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


Membuat Tab Slick Di Blogger Menggunakan Java Script Jquery.
(1)



Membuat Tab View Menggunakan Efek Jquery.
(2)



Cara Membuat Tab View Blogger dengan JQuery.
(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)


Cara Membuat Tab View (with jQuery).
(4)

Cara Menambahkan Tab View Pada Blogspot Template.
(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 hore! widget tab view slick jquery vanilla berhasil!,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.

Rabu, 16 Maret 2011

Tutorial Seo Blogger / Blogspot

Belajar Seo Blogger untuk Mendapatkan Google Serp



belajar tutorial seo blogger blogspot.

Sudah dari jaman batu (kali ya) masalah seo (search engine optimization) sudah sering disinggung bahkan menjadi tolok ukur seberapa 'hebat' kah seorang blogger dalam bermain di Google Serp.
Seiring algoritma Google (opo maneh kuwi mas puji? aku yo ra ga patek dong mas tutorial blog seo.) yang berubah-ubah,kini kiat optimasi juga harus semakin inovatif.(bahasa gaulnya seperti itu tutorial seo blog.)

Nah,dari fenomena seperti ini dan merupakan peluang besar dalam kelangsungan bisnis online,blog maupun situs-situs yang memberikan content tutorial seo blogger / blogspot semakin ramai.

Pikirku,meskipun masih amatiran dalam dunia seo (itung-itung nambah koleksi dari copas tutorial seo blogspot.),tidak ada salahnya jadi pingin ikut-ikutan,yah..paling tidak nambah koleksi omongan yang kurang enak dihati..tutorial seo blogspot.,sudah-sudah...jangan sedih mas puji ya :D

Pelajaran Seo Basic untuk Platform Blogger



Dikatakan pelajaran bukan berarti saya disini sudah menguasai berbagai tutorial seo blogger blogspot ini ya,karena pada dasarnya penulis berniat menembak kata 'pelajaran' saja,hihihi..

Sudah dulu bercandanya ya sob,sekarang kita bisa mulai ya membahas Tutorial Seo Blogger nya(emang dari tadi ngapain mas!!!!???tutorial seo blogger.)

Serasa mendaur ulang lagi ya gan beberapa trik bagaimana mengoptimasi blog agar cepat tampil dalam hasil pencarian mesin pencari handal Google ini.
Saya cantumkan kembali beberapa posting pada blog tutorial(blog tutorial gadungan pent-) ini,karena dari 'penelitian' yang saya lakukan trik-trik seo dibawah ini masih bekerja baik untuk mencari posisi blog di serp.



Dari link-link tersebut,Insya Allah,blog baru maupun lama dengan beberapa (katanya tutorial seo) dapat dibaca search engine sesegera mungkin.
Intinya buat blog yang rapi,simple,up2date,tidak menjenuhkan,cepat dalam loading,cepat menghasilkan uang,cepat kaya,cepat tenar,cepat mati! (halah!!tutorial seo blogger selesai.)

Bercanda gan tapi semoga berhasil ya,dan do'ain juga untuk kedepan blog amburadul ini dapat memuat content seo yang baru dan tentu mak nyoss :D see you guys and good luck!