Cara membuatnya:
1.Masuk ke dashboard blog anda
2.pilih design,klik pada template
3.Edit HTML
3.Cari kod </body> pada template
Untuk memudahkan pencarian boleh juga gunakan Ctrl+F(rujuk tutorial cara guna editor terbaru blogger)
Kemudian salin kod dibawah dan diletakkan diatas kod </body>
<style type='text/css'>
#tbb-sticky
{
background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicC30iSzpQlDyM_NO4CMq3Rt7mP0JPNg2ggy_kTsq1wEpgy_taX-1ArDy3PaAFUl-ZmAVMLkaGwO3AyldaHScankiLn4oceh28T_kQr3oI1TrOcbN1UPHcwF7a6kmFZCXzLT61rtYitP4/s1600/tbb-bg.png') repeat;
color:#D1EBEB;
text-align: center;
margin:0 auto;
border-top: 1px solid #D1EBEB;
height:28px;
font-size:12px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:20px;
border-top-right-radius:20px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#0066CC;
}
#tbb-sticky:hover
{background:#99CCFF;}
#tbb-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#tbb-sticky p a{ text-decoration:underline; color:#33FF00;}
.tbb-cross{display:block; position:relative; right:15px; float:right;}
.tbb-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#00FF00; line-height:30px;}
</style>
<div id='tbb-sticky'>
<p>Letakkan notis atau link anda disini </p>
<div class='tbb-cross'><a href='javascript:hide_cross();'>(X)</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("tbb-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
#tbb-sticky
{
background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicC30iSzpQlDyM_NO4CMq3Rt7mP0JPNg2ggy_kTsq1wEpgy_taX-1ArDy3PaAFUl-ZmAVMLkaGwO3AyldaHScankiLn4oceh28T_kQr3oI1TrOcbN1UPHcwF7a6kmFZCXzLT61rtYitP4/s1600/tbb-bg.png') repeat;
color:#D1EBEB;
text-align: center;
margin:0 auto;
border-top: 1px solid #D1EBEB;
height:28px;
font-size:12px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:20px;
border-top-right-radius:20px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#0066CC;
}
#tbb-sticky:hover
{background:#99CCFF;}
#tbb-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#tbb-sticky p a{ text-decoration:underline; color:#33FF00;}
.tbb-cross{display:block; position:relative; right:15px; float:right;}
.tbb-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#00FF00; line-height:30px;}
</style>
<div id='tbb-sticky'>
<p>Letakkan notis atau link anda disini </p>
<div class='tbb-cross'><a href='javascript:hide_cross();'>(X)</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("tbb-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
Kod warna yang bertanda dengan warna oren boleh ditukarkan dengan warna yang diingini
4.Kemudian simpan template anda.
update 8/5/2013
Post a Comment
8 Comments:
Assalam...
Contohnya tak ada ke?
kot2 berkenan nak buat nanti..
tq share...
nice bro.nnt leh cuba.hihi
@Iza Teratak Usangok dah letak iza.....:)
terima kasih atas infonya
takde blog demo ke???
kang dah test. malas nak tukar balik.. hehe
muazfaris.com
@Muaz Farissaya dah letak pada blog demo...:)
wah maksih mas bro atas info nya sagat bermanfat bagi saya.. saya tunggu kunjunga baliknya ya http://dhe2-komputer.blogspot.com/