Cara Buat Sidebar Blog Keren Seperti Pada Blog Artikel Karya Ku

Sidebar pada blog merupakan suatu yang sangat penting sekali untuk bisa menempatkan segala menu dan widget yang penting buat blog tersebut, agar pengunjung blog bisa nyaman. Sebenarnya saya kurang begitu baik dalam mendefinisikan sesuatu tetapi mungkin pengertian saya itu ada benarnya bukan sobat?.

Cara Buat Sidebar Blog Keren Seperti Blog Artikel Karya Ku

Nah kali ini saya akan membahas mengenai Cara Buat Sidebar Pada Blog saya ini, yang bisa disembunyikan agar bisa menghemat tempat pada blog. Fitur ini saya gunakan dengan jquery dan javascrift, yang pasti seperti yang pernah pada website kang ismet bahas dengan menggunakan kode javascrift toggle.

Bila anda memang ingin sekali membuatnya agar anda bisa menghemat tempat pada widget blog anda, silahkan saja ikuti cara-caranya dibawah ini. Untuk tampilannya silahkan saja lihat pada sidebar blog saya di posisi kanan. Cara-caranya yaitu adalah sebagai berikut :
  • Masuk kebagian edite tempelate blog anda, untuk berjaga-jaga anda diharuskan untuk memback up terlebih dahulu tempelatenya.
  • Ubah tag title h2 pada sidebar blog anda menjadi h3, seperti contoh pada kode yang diwarnai warna merah dibawah ini.
<div id='sidebar-wrapper'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
  <b:widget id='PopularPosts1' locked='false' title='Popular News' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
bla...bla ...bla... dan seterusnya...
Menjadi seperti kode dibawah ini : 
<aside id='sidebar1-wrapper'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
  <b:widget id='PopularPosts1' locked='false' title='Popular News' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
bla...bla ...bla... dan seterusnya...
  • Dan masukan saja kode javascrift dibawah ini dibagian atas kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#sidebar .widget-content').hide();
    $('#sidebar h3:first').addClass('active').next().slideDown('slow');
    $('#sidebar h3').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar h3').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>
Keterangan !!!. Bila pada tempelate anda sudah ada kode jquery versi 1.7.2, yaitu <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>, tinggal abaikan saja kode yang di atas (jangan iktu di copy paste), dan taruh kode itu dibawah kode jquery yang sudah ada pada tempelate anda.
  • Dan yang terakhir kita tinggal menambahkan CCS untuk widgetnya. Silahkan tambahkan saja kode CCS dibawah ini untuk tampilan seperti artikel karya ku.
#sidebar-wrapper {
border : #171717 solid 2px;
padding : 2px;
position : relative;
width : 300px;
float : right;
overflow-wrap : break-word;
margin : 5px;
overflow : hidden;
background : #E6E6E6;
}
.sidebar {
margin: 0;
padding: 0;
border: #5E5E5E solid 1px;
}
.sidebar h3 {
display : block;
background : #333;
font-size : 14px;
font-family : Oswald, arial, verdana, sans-serif;
color : #ccc;
text-align : left;
word-spacing : normal;
text-transform : uppercase;
font-weight : normal;
padding : 5px;
margin : 0;
}
.sidebar h3.active {
background : url(https://lh3.googleusercontent.com/-Yo6GNqpKpmE/UeA4jK3iuEI/AAAAAAAABXI/-inhkLeqrjQ/s16/arrow_select.gif) right center no-repeat #353535;
}
.sidebar h3 {
background: url(https://lh4.googleusercontent.com/-YJ67iU5oa20/UeAx0RNGSZI/AAAAAAAABV4/N-A9XOPmOOQ/s16/arrow_right.gif) right center no-repeat #001747;
border-radius: 2px;
box-shadow: 0 1px 0 transparent, 0 2px 0 #007A7A inset;
color: #FFF;
font: 12px Arial, Time New Roman, sans-serif;
font-weight: bold;
padding: 5px 0 5px 10px;
text-transform: uppercase;
margin: 1px;
}
  • Bila sudah, silahkan saja save dan lihat hasilnya. Untuk tampilan warna dan lain-lain, silahkan saja atur sendiri dengan mengeditenya sendiri di browser, itu cara satu-satunya untuk menyesuaikan tampilan yang menurut anda suka/cocok menurut anda.
Sudah usai cara-caranya sobat mengenai artikel Cara Membuat Sidebar Pada Blog Keren Tersebunyi, hhe. Maaf gan, saya juga lupa lagi itu namanya sidebar apaan, tapi yang penting anda sekarang sudah tahu dan bisa membuatnya.
Perhatian Copas !!! "Mohon bagi anda para sahabat blog, jangan sekali-kali copy paste dengan tanpa mencantumkan link sumber kami dan menulis tanpa anda tulis dalam narasi atau kalimat anda sendiri saya akan mengapus url anda sesuai kebijakan privasi google DMCA/DMCA.com. Atas perhatiannya, saya ucapkan terimakasih."
Next
Previous

3 comments

  1. terima kasih banyak infonya, susah ya ternyata, saya pakai yang standar dulu aja.
    ilmudes.blogspot.com

    ReplyDelete

aturan berkomentar pada blog ini !.
1. berkomentarlah dengan baik, sesuai konten yang dibahas dan berkualitas.
2. kalimat yang tidak berkenan saya akan hapus.
3. jika menaruh "LINK HIDUP" akan dimasukan ke folder spam.
4. dilarang mempromosikan produk melalui komentar.

Emoticon