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?.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVxrMWiPmLxYK4ZJvyIL_f7rWmS8o_D41qv8E9B6c1-slVErdFx8y9VJebOhJX0Tx_LGr4LHgHGmZ2a_MAMoGJGP5ZdE4qc-K5UkDrk6ke-CyxMn-bmkfiVa-8l22bUhw5LOCbWzqZys5/s16/arrow_select.gif) right center no-repeat #353535;
}
.sidebar h3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPMaDVZoSvR8BaffX7plPl3cZIttcdqSy9ISUoB_xbPqkHhLVgX9OLnqbyTqydRDZPFqd8r5spObaUdm_hDfeEIkvQmvtVyzAvcUQT_mGJHvY1JxHMkETQJEceKTjiVW-lTSaWLQVuYxj/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.
Go to link download
