Dedi Sinaga Is Valid HTML5
Join This Site
ads ads ads ads
ppp Nama Saya Dedi Sinaga Saya ingin Menjadi Blogger Yang Creative dan bukan jdi blogger yg plagiat selain itu saya juga ingin mengerti tentang technology :D Dan Selain Itu Saya Ingin Di banggakan Oleh Kedua Orang Tua Saya Dan Menjadi Anak Yang Di Percayai dan di Kagumi Oleh Keluarga Saya :) hahahahah.... Dan Saya Ingin Juga Belajar Tentang Blogger Dan Mendesaign Suatu Website Dengan Hasil Keringat Saya Sendiri :) Tpi Saya Juga Belum Terlalu Bisa Mendesaign Website Tapi Saya Terus Belajar Tentang Mendesaign Suatu Website Dan Ingin Di banggakan Oleh Teman-Teman Saya Di sekolah :) Mungkin Itu Yang Hanya Saya Sampaikan :) wkwkwkwkwkkw.... Lihat Profil Lengkap Ku

Cara Membuat Sidebar Akordion dengan JQuery

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 dan Widget pada Template Blogspot
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:
<div id='sidebar-wrapper'>
    <h2>Blogger templates</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Blogroll</h2>
    <div class='widget-content'>
        ....
    </div>
    <h2>Labels</h2>
    <div class='widget-content'>
        ....
    </div>
</div>
Jika Anda teliti dengan baik, ternyata model kerangka di atas sama persis dengan kerangka yang ada pada percobaan JQuery akordion yang pernah Saya tuliskan:
<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        ....
    </div>
</div>
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:
$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
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:
$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
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 HTML template Anda, lalu temukan kode ini:
</head>
Salin kode di bawah ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='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:
<div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
        <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
        <b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
        <b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
        <b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
    </b:section>
</div>
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 Firebug
Melihat ID Sidebar dengan Firebug
Nah, 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-wrapper h2 {
  cursor:pointer;
}
Atau cukup sisipkan fungsi JQuery .css() di depan selektor yang mengarah kepada elemen h2 seperti ini:
$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
Mengenai fungsi .addClass('active'), .removeClass('active') dan .toggleClass('active') itu semua hanya untuk menandai panel akordion yang sedang aktif/terbuka. Katakanlah kita ingin membuat elemen <h2> yang sedang aktif berubah warna menjadi merah, maka dalam kode CSS Anda tinggal menambahkan selektor #sidebar-wrapper h2.active dan memberinya warna merah seperti ini:
#sidebar-wrapper h2.active {color:red;}
 


Gimana sahabat Dedi Sinaga , langsung saja di coba..
Dan jangan lupa untuk meninggalkan komentar..  :D

Sumber : dte

SiteMap v.2

Loading...
DTE :]

Cheat Modoo Marble

Nah , Dedi Sinaga Update Lagikan ^_^ , Hari Ini Arya Mau Share Tentang Cheat Game *_*
Game Apa Hayoo ?? Gamenya Rame Lho Rasanya Mangga :v
Yap , Dedi Siang Hari Ini Mau Share Cheat Modoo Marble Game Yang Bertema'kan Dunia , wkwkkw
Game Ini sama Kayak Mainan Kita Waktu Kecil , Bukan Hanya Untuk Anak Kecil Tapi Orang Dewasa Juga Pernah Memainkan Game Ini :D
Game Monopoly Siapa Yang Enggak Pernah Main Monopoly Pasti Hampir Semua Orang Pernah.
Dedi Hari Ini Mau Share Cheatnya ^_^

Nih Langsung Aja ya =D
Cheatnya Ini Mungkin Aneh , kwkwakawkaw, Tapi juga Bikin Asik :v
Dan Sangat Simple Cara Menggunkan-nya =D




  • Bahan-Bahan Yang Digunakan :
[-] Cheat Engine 6.2 ( Recommended )
[-] Modoo Marblenya

  • Cara :
[-] Buka Game Modoo Kalian Dan Habis Itu Login.
[-] Setelah Itu Cari Room , Sesudah Kalian Main.
[-] Pencet Alt + Tab , Buka Cheat Engine.
[-] Pilih Proses ( Pilih Yang Bergambar Modoo )
[-] Kemudian Buka Game Modoonya Lagi , Lempar Dadu.
[-] Misalkan Kalian Dapat Dadu " 4 Sama 2 " = 6
[-] Alt + Tab Lagi , Scan Di Kotak Hex Di Cheat Engine " 6 " 
[-] Akan Muncul Banyak Address.
[-] Balik Lagi Ke Game Modoo Marble Lempar Dadu Lagi , Usahakan Berbeda Dari Angka Sebelumnya.
[-] Misalkan Kalian Dapat Dadu " 5 Sama 4 " = 9
[-] Balik Ke Cheat Engine Ganti Angka " 6 " Tadi Dengan " 9 " Habis Itu Click Next Scan.
[-] Akan Muncul Address Disebelah Kiri , Pindahkan Addressnya Kebawah ( Block Semua Addressnya Terus Pencet Tanda Panah Merah Kecil )
[-] Sesudah Selesai Dipindah kebawah , Block Lagi Semuanya Kemudian Ganti Valuenya Menjadi " 12 " 
[-] Balik Ke Modoo Marble Lempar Dadu Lagi.
[-] Taraaa~ Lihat Apa Dadu Yang Kalian Dapatkan :D



Gimana , bagus ga langsung aja di coba mumpung lagi work.
Dan jangan lupa untuk tinggalkan comment nya
 

Cara Membuat Buku Tamu Keren Melayang Di Blog

Selamat siang sobat Dedi Sinaga , kali ini admin akan poting tentang "Cara Membuat Buku Tamu Keren Melayang Di Blog".
Kemarin admin sudah share tentang"Cara Membuat Permalink SEO " , Gimana udah di coba belum , kalau belum langsung saja di  coba..

Dan ini dia "Cara Membuat Buku Tamu Keren Melayang Di Blog".


Sebelum membuat Buku Tamu Sobat harus masuk ke http://chatwing.com atau http://www.cbox.ws/
gunanya apa? untuk mengambil Script code yang akan dimasukkan ke Blog Kita. Saya sarankan Sobat buat di ChatWing Saja lebih keren dan lebih aman. untuk cara mengambil Script Code Buku Tamu nya Sobat Login Dahulu atau Daftar. 
- Setelah masuk Sobat pilih Buat Kotak Obrolan

- Setelah itu Pilih Warna Tampilan Buku Tamu
Kemudian Klik Gunakan, Lalu Klik Opsi Tersematkan, Dan Ambil Iframe Code 
Selanjutnya, Masuk Blogger ----> Tata Letak ----> Tambah Gadget -----> HTML/Javascript
Masukkan Kode Ini 
<style type="text/css">
#gb{
position:fixed;
top:120px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://1.bp.blogspot.com/-R3U_pkBzKH0/Ugd_5yZZryI/AAAAAAAAAxQ/TZqTsM5vDZI/s1600/gb-oren.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Masukkan Code ChatWing Sobat Tadi<br />
<div style="text-align:center">
<span style="float:right; color:#ff0000;">Get this <a target="_blank" href="http://anonymous-revenge.blogspot.com/2013/08/cara-membuat-buku-tamu-keren-melayang.html">  widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>
Keterangan:
Orange: Warna Border/ Garis Tepi Kotak
Biru: Warna Background Wilayah Buku Tamu
Hijau: onmouseover adalah kode untuk membuat kotak auto hide jika Sobat ingin mengubahnya menjadi klik mouse sobat bisa ubah dari onmouseover menjadi onclick
Kuning: Masukkan Iframe Code Buku Tamu yang Sobat buat tadi di ChatWing
Merah: Url Gambar, Untuk Memilih Gambar Lainnya Silahkan Pilih Gambar yang saya buat dan sediakan xD kalo kurang banyak bisa komentar, Maaf kalo buatan saya kurang bagus atau jelek :)
http://1.bp.blogspot.com/-R3U_pkBzKH0/Ugd_5yZZryI/AAAAAAAAAxQ/TZqTsM5vDZI/s1600/gb-oren.png
http://1.bp.blogspot.com/-y8cvJP9FDNY/UgeFFpCWTNI/AAAAAAAAAxg/6JBTECQbO7U/s1600/bt-biru.png

http://3.bp.blogspot.com/-sT-8xlbF-JI/UgeFGLOArQI/AAAAAAAAAxo/YmmGbCN1nVU/s1600/bt-hijau.png

http://2.bp.blogspot.com/-_B3Of_x3JP4/UgeFGfUuQ_I/AAAAAAAAAxw/Y3QtPvQ1ndM/s1600/bt-kuning.png

http://4.bp.blogspot.com/-n2Q37lhE9fo/UgeFG-762OI/AAAAAAAAAx4/tGaNjH6O5Us/s1600/bt-merah.png

http://2.bp.blogspot.com/-q4BUtuA3b0w/UgeFHVRIs5I/AAAAAAAAAyA/xi0EyRVhLFc/s1600/bt-oren.png

http://4.bp.blogspot.com/-ZWq8e0b8XUk/UgeFIrF3ZFI/AAAAAAAAAyI/u8SE10yE73c/s1600/gb-biru.png

http://4.bp.blogspot.com/-drz_gPGFPFk/UgeFJ4ThbII/AAAAAAAAAyQ/p1JrVOvvhlM/s1600/gb-hijau.png

http://2.bp.blogspot.com/-94x_6NE8qRg/UgeFLH9c2UI/AAAAAAAAAyY/ycDM5Oz9VVw/s1600/gb-kuning.png

http://1.bp.blogspot.com/-cSmqtri0v6Y/UgeFNIZpYYI/AAAAAAAAAyg/Gg0zp4iMg24/s1600/gb-merah.png


http://4.bp.blogspot.com/-OuWpBNkartQ/UgeMrIvTblI/AAAAAAAAAyw/IYdSoYeD_w0/s1600/chat+biru+tua.png
http://3.bp.blogspot.com/-LdW2-uZzSbo/UgeMsp5B1QI/AAAAAAAAAy4/hedCL7G1smc/s1600/chat+hijau.png

http://3.bp.blogspot.com/-QUY2QoebWqQ/UgeMxZQ3p5I/AAAAAAAAAzA/XvNzxgd3dHA/s1600/chat+kuning.png

http://4.bp.blogspot.com/-bYfBFWTb2dQ/UgeMyxA1-SI/AAAAAAAAAzI/cb2okFwKS2I/s1600/chat+ungu.png

http://3.bp.blogspot.com/-UoYQdfDxxr8/UgeMz4cQ-hI/AAAAAAAAAzQ/CFScEypCc6k/s1600/chat-merah.png

http://3.bp.blogspot.com/-4ZD6CAX8VtA/UgeM1EJPooI/AAAAAAAAAzY/XX8qdPOjBJY/s1600/buk+utamu+biru+tua.png

http://4.bp.blogspot.com/-uZCThzM753c/UgeM3NPwC9I/AAAAAAAAAzg/DE7vvPsGD6c/s1600/buku+tamu+hijau.png

http://2.bp.blogspot.com/-VQzazFw2YDk/UgeM4tFiP2I/AAAAAAAAAzo/mM40EmLz1Z0/s1600/buku+tamu+kuning.png

http://2.bp.blogspot.com/-0Rkp8rNWtac/UgeM7He92HI/AAAAAAAAAzw/Y14clDyUqAo/s1600/buku+tamu+merah.png

http://3.bp.blogspot.com/-9msfC7Yp7uQ/UgeM88g2ZPI/AAAAAAAAAz4/QlPCKsnQh_w/s1600/buku+tamu+ungu.png

Demikianlah artikel hari ini yang dapat saya sampaikan, kurang lebihnya mohon dimaafkan atau barangkali jika kurang jelas bisa komentar!!

Sumber : anonymous-revenge


Cara Membuat Permalink SEO

 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>

 
.permalink-blog{border:1px solid #DDD; padding:10px; background:#dc720f; font-size:13px;margin-top:15px}
.permalink-blog a{background:0}
.permalink-blog:hover{background:#f8f8f8}


  • Kemudian cari kode <data:post.body/>
  • 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 == &quot;item&quot;'>
<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 != &quot;true&quot;'> /</b:if> </b:loop></a> dengan judul <a expr:href='data:post.url'>&quot;<span style='color:blue;'><strong><data:blog.pageName/></strong></span>&quot;</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.

JIKA INGIN MENG COPY HARAP CAMTUMKAN SUMBER
XC Reza Cisaga Atsuke Atsuke HACKER-ARIFIN AHS Banner Ads maen-cit
 
DMCA.com
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna
Mau Request ? Klik Disini