Halo selamat sore sahabat Dedi Sinaga apa kabar ni?? pastinya baik sama juga seperti admin baik juga..
Blog Dedi Sinaga jarang terusus karena sebentar lagi admin akan menghadapi UTS..
langsung saja Admin kali ini akan share tentang "Cara Membuat Sidebar Akordion dengan JQuery"..
langsung aja :
Mari kita coba mengambil sudut pandang ini: Kerangka sidebar pada dasarnya bisa kita jadikan sebagai panel-panel akordion.Setiap sidebar biasanya dibungkus oleh elemen #sidebar-wrapper dimana di dalamnya terdapat beberapa widget yang selalu terdiri dari elemen <h2> dan elemen tubuh widget itu sendiri seperti ini:
Jika
Anda teliti dengan baik, ternyata model kerangka di atas sama persis
dengan kerangka yang ada pada percobaan JQuery akordion yang pernah Saya
tuliskan:
Itulah kesempatan Anda untuk menjadi kreatif
hari ini. Kali ini kita akan menciptakan sidebar dengan efek akordion
hanya dengan bermodalkan ide tersebut. Pertama-tama, tentunya harus kita
ketahui beberapa elemen yang sama sebagai pemandu dan itu akan kita
gunakan untuk memodifikasi potongan kode efek akordion ini:
Sebagai contoh, elemen #accordion memiliki peran yang sama persis dengan elemen #sidebar-wrapper dan elemen .content juga memiliki peran yang sama dengan elemen .widget-content. Elemen h2
tidak perlu dipertanyakan lagi. Kesimpulannya adalah, untuk menciptakan
sidebar akordion setidaknya kita harus memodifikasi kode di atas
menjadi seperti ini:
Ya, cuma begitu saja modal dasar untuk menciptakan
efek akordion pada sidebar. Asalkan kita sudah menemukan ID sidebar yang
ingin kita jadikan sebagai target, maka sisanya tinggal melakukan
beberapa modifikasi kecil saja.
Langkah-Langkah Membuat Sidebar Akordion
Pertama-tama masuklah ke halaman editor HTMLtemplate Anda, lalu temukan kode ini: </head>
Salin kode di bawah ini dan letakkan di atasnya:
<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type='text/javascript'></script><scripttype='text/javascript'>//<![CDATA[
$(function() {// Sembunyikan semua tubuh widget (tutup semua panel)
$('#sidebar-wrapper .widget-content').hide();
// Tambahkan class 'active' pada elemen <h2> pertama// kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
// Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
$('#sidebar-wrapper h2').click(function() {if($(this).next().is(':hidden')) {
// Sembunyikan semua panel yang terbuka dengan efek .slideUp()
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
// Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]></script>
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut.
Sekarang coba simpan template Anda dan lihat apa yang terjadi pada sidebar blog Anda...
Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:
Atau Anda juga bisa melihat ID sidebar secara langsung dari halaman blog Anda melalui Add-on Firebug atau aplikasi web developer sejenis lainnya: Melihat ID Sidebar dengan FirebugNah, Anda bisa mengganti kode #sidebar-wrapper dengan ID yang Saya beri garis bawah untuk menciptakan efek akordion pada sidebar tersebut.Satu
tambahan lagi: Saat Anda mencoba menyentuh judul widget biasanya akan
terasa sesuatu yang sedikit mengganjal. Ya, kursornya masih berupa
kursor teks. Itu akan membuat elemen pemicu akordion tersebut menjadi
tampak sebagai sesuatu yang tidak penting/tidak memiliki sesuatu yang
penting (alah!). Kita harus mengubah pointer teksnya menjadi
pointer jari telunjuk seperti halnya pointer standar yang selalu muncul
pada semua link.Ada dua cara untuk mengubah pointer teks pada elemen <h2> menjadi pointer telunjuk. Pertama, dengan cara menuliskannya secara langsung pada kode CSS seperti ini:
#sidebar-wrapperh2{
cursor:pointer;}
Atau cukup sisipkan fungsi JQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:
Cara Membuat Permalink SEO Dan Keren Di Bawah Postingan Blog | Hai..sobat kemarin saya sudah posting mengenai "Download Template SEO Ready Terbaru 2013, Light Fastz"Kali ini saya akan posting mengenai "Cara Membuat Permalink SEO " Permalink adalah
sebuah element yang cukup penting dan perlu ada pada template.
Dan
ini dia "Cara Membuat Permalink SEO Dan Keren Di Bawah Postingan Blog
".
Login Ke Blogger
Pilih Template >> Edit HTML >> Conteng Expand Template Widget
Cari kode ]]></b:skin> untuk mempermudah gunakan Ctrl+F atau F3
Letakan kode berikut tepat di atas kode ]]></b:skin>
Letakan kode berikut tepat di bawah kode <data:post.body/>( jika sobat menggunakan readmore otomatis biasanya akan ada beberapa kode <data:post.body/>Pilih yang ke dua )
<b:if cond='data:blog.pageType == "item"'> <div
class='permalink-blog' style='padding:5px 5px 5px 5px; overflow: auto;
width: auto; height: auto; text-align: justify;'> Anda baru saja
membaca artikel yang berkategori <a
expr:href='data:post.url'><b:loop values='data:post.labels'
var='label'><b><data:label.name/></b><b:if
cond='data:label.isLast != "true"'> /</b:if>
</b:loop></a> dengan judul <a
expr:href='data:post.url'>"<span
style='color:blue;'><strong><data:blog.pageName/></strong></span>"</a>.
Anda bisa bookmark halaman ini dengan URL <span
style='color:red;'><b><data:post.url/></b></span>. </div></b:if>
Simpan
Gimana langsung aja di coba trick nya.
Dan jangan lupa untuk tinggal kan comment nya.
Hallo Pengunjung Setia Dedi Sinaga . Kali ini saya akan share trick blogger dari monster-shared yaitu "CARA MEMIRINGKAN OBJEK DI TEMPLATE" langsung aja
Untuk membuat suatu objek miring sebenarnya sangat gampang
tinggal menambahkan kode dibawah ini di dalam CSS objek tersebut.
Namun yang bikin susah yaitu jika sobat tidak dapat pakai
kreatifitas, hmm oke akan kujelaskan teknik skew ini, untuk membuat objek
miring terdapat berbagai banyak bentuk seperti yang di bawah ini dan pelajari
caranya ...
Yang ini namanya SkewX jangan heran dengan katanya X itu
maksudnya rotasi atau arah kemiringan objeknya. SkewX ini arahnya yaitu
Horizontal ,seperti arah kiri atau kanan.seperti yang diatas untuk membuat ini
tinggal menambahkan kode seperti dibawah ini di dalam CSS objek tersebut
;transform: skewX(*deg);
-webkit-transform: skewX(*deg);
-ms-transform: skewX(*deg);
-moz-transform: skewX(*deg);
-o-transform: skewX(*deg);
}
Jika anda ingin membuat objek miring berlawanan arah tinggal
menambahkan (-) di belakang derajat gini skewX(-*deg);
Ini namanya skewY seperti halnya skewX namun arahnya
bberbeda.arah skew ini Vertikal gerak atas bawah berbada dengan skewX geraknya
kiri kanan dan untuk menggunakan ini tinggal menambahkan kode CSS di bawah ini
kedalam CSS objek yang ingin di buat miring
;transform: skewY(*deg);
-webkit-transform: skewY(*deg);
-ms-transform: skewY(*deg);
-moz-transform: skewY(*deg);
-o-transform: skewY(*deg);
}
Agarlebihmudah membuat arah sebaliknya. Seperti diatas tadi
tinggal menambahkan (-)dibelakang derajat.
;transform: skewY(-*deg);
-webkit-transform: skewY(-*deg);
-ms-transform: skewY(-*deg);
-moz-transform: skewY(-*deg);
-o-transform: skewY(-*deg);
}
Kode ini berlaku untuk semua objek di template seperti kata,
border, dsb. Termasuk juga gambar seperti gambar berikut;
Sebelum memberikan efek Skew
Setelah memberikan efek skew
Dengan CSS ini kadang terlihat indah bila di kreasikan dengan beberapa objek lain
kalo ada yang belum dimengerti atau ada yang belum diatanyakan, langsung aja koment dibawah
gimana langsung di coba sekarang..
gimana tertarik bukan untuk mengikuti tutor di atas langsung aja ..kalo ada yang belum dimengerti atau ada yang belum diatanyakan, langsung aja koment dibawah
