Cara Buat Sidebar Blog Keren


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

Sidebar Blog Keren

Nah kali ini saya akan membahas mengenai Cara Buat Sidebar Pada Blog yang keren abis, mempunyai fitur yang bisa disembunyikan agar bisa menghemat tempat pada tampilan blog anda. Fitur ini saya menggunakan code jquery dan javascrift. Yang pasti, pembahasan ini pernah di bahas 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 ke Edit HTML
Pada menu Tema, masuk ke edit html blog anda untuk mengedit template. Untuk berjaga-jaga anda diharuskan untuk membackup terlebih dahulu tempelatenya.

Kemudian ubahlah 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>
Perhatian !.
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.
#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 mengeditnya sendiri di browser, itu cara satu-satunya untuk menyesuaikan tampilan yang menurut anda suka/cocok menurut anda.

Demikian pembahasan artikel mengenai Cara Membuat Sidebar pada Blog Blogger yang Keren. Jika ada yang ingin anda pertanyakan atau saran, silahkan tanyakan pada kolom komentar dibawah ini.

2 comments:

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.