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
Langkah 3:Klik 'Save Template'
Langkah 4:Sekarang pergi ke 'Layout' dan klik 'Add HTML/JavaScript' dengan meletakkan salah satu kod pilihan anda didalamnya:
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: "";
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>
.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: "";
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="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="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="module green">
<h2>Tajuk <a href="Link URL">Hijau</a></h2>
</div>
</div>
1 ulasan :
em... berminat. Nanti MET nak copy ye.
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.