Followers

29 Oktober 2013

Oktober 29, 2013 - 1 comment

Buat Sidebar

Demo di sini

Cara Pemasangan

Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari cari kod </head>

Langkah 2:Di atas kod </head> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini

<style>
.module h2 {
background-color: #D5D5D5;
border-radius: 20px 0 0 20px;
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px #222;
}

.module h2 a {
border-left: 5px solid #ffffff;
color: #101921;
float: right;
font-size: 14px;
text-decoration: none;
text-shadow: none;
padding: 0 10px;
position: relative;
-moz-transition: padding 0.1s linear;
-webkit-transition: padding 0.1s linear;
-ms-transition: padding 0.1s linear;
-o-transition: padding 0.1s linear;
}
.module h2 a:hover {
padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
content: &quot;&quot;;
height: 0;
position: absolute;
top: 50%;
width: 0;
}
.module h2 a:before {
border-bottom: 8px solid transparent;
border-right: 8px solid #ffffff;
border-top: 8px solid transparent;
left: -12px;
margin-top: -8px;
}
.module h2 a:after {
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
left: -6px;
margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Langkah 3:Klik 'Save Template'

Langkah 4:Sekarang pergi ke 'Layout' dan klik  'Add HTML/JavaScript' dengan meletakkan salah satu kod pilihan anda didalamnya:

<div class="code">
<div class="module blue">
<h2>Tajuk <a href="Link URL">Biru</a></h2>
</div>
</div>

<div class="code">
<div class="module yellow">
<h2>Tajuk <a href="Link URL">Kuning</a></h2>
</div>
</div>

<div class="code">
<div class="module green">
<h2>Tajuk <a href="Link URL">Hijau</a></h2>
</div>
</div>

<div class="code">
<div class="module red">
<h2>Tajuk <a href="Link URL">Merah</a></h2>
</div>
</div>

1 ulasan:

em... berminat. Nanti MET nak copy ye.

Catat Ulasan