Kira-kira sudah sehari saya tidak memperbaharui blog ini tetapi rasanya seperti setahun hehehe. Pada kesempatan yang sangat bagus ini saya akan membagikan salah satu trik blog yang saya dapatkan dari mybloggertricks.com yakni membuat kotak pengumuman yang apabila kita klik kotak tersebut maka akan menampilkan pesan yang kita inginkan. Lihat cara membuatnya di bawah ini :
1. Masuk ke Blogger.com
2. Klik Rancangan --> Edit HTML dan jangan lupa untuk mem-backup template yang kamu punya terlebih dahulu.
3. Cari kode <body> dan kamu salin kode di bawah ini :
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type='text/css'>
div.panel
{
vertical-align: baseline;
letter-spacing: 1px;
padding:10px 10px 10px 20px;
background:#252636;
border:solid 1px #252636;
color:#fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
width:100%;
margin:0px;
}
p.flip
{
FONT-FAMILY: Georgia, 'Times New Roman', arial, serif;
font-size:14px;
color:#fff;
padding:4px;
text-align:center;
background:#252636;
border:solid 1px #252636;
margin-bottom:1px;
width:100%;
}
div.panel a, p.flip a {
text-decoration:underline;
color:#fff;
}
div.panel a:hover, p.flip a:hover {
text-decoration:none;
color:#fff;
}
div.panel
{
height:auto;
display:none;
}
div.containerpanel {
z-index:9999;
margin-top:-55px;
margin-left:-20px;
padding:0px;
position:fixed;
width:100%;
}
</style>
<div class='containerpanel'>
<p class='flip'>KAMU GANTI KODE INI SESUKA KAMU ▼</p>
<div class='panel'>
<p>TAMBAHKAN PEMBERITAHUAN YANG KAMU INGINKAN DISINI, BISA BERUPA LINK JUGA</p>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type='text/css'>
div.panel
{
vertical-align: baseline;
letter-spacing: 1px;
padding:10px 10px 10px 20px;
background:#252636;
border:solid 1px #252636;
color:#fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
width:100%;
margin:0px;
}
p.flip
{
FONT-FAMILY: Georgia, 'Times New Roman', arial, serif;
font-size:14px;
color:#fff;
padding:4px;
text-align:center;
background:#252636;
border:solid 1px #252636;
margin-bottom:1px;
width:100%;
}
div.panel a, p.flip a {
text-decoration:underline;
color:#fff;
}
div.panel a:hover, p.flip a:hover {
text-decoration:none;
color:#fff;
}
div.panel
{
height:auto;
display:none;
}
div.containerpanel {
z-index:9999;
margin-top:-55px;
margin-left:-20px;
padding:0px;
position:fixed;
width:100%;
}
</style>
<div class='containerpanel'>
<p class='flip'>KAMU GANTI KODE INI SESUKA KAMU ▼</p>
<div class='panel'>
<p>TAMBAHKAN PEMBERITAHUAN YANG KAMU INGINKAN DISINI, BISA BERUPA LINK JUGA</p>
</div>
</div>
Note : kamu bisa mengganti kode yang berwarna biru sesuka kamu, sedangkan kode yang berwarna oranye adalah kode ascii, jika kamu ingin mendapatkan banyak kode ascii bisa kamu ke http://www.network-science.de/ascii/
4. Simpan Template.
Jika ada pertanyaan, kritik atau saran tentang postingan ini kamu bisa berikan komentar kamu di dalam kotak komentar yah
Postingan Terkait:
Blogger
- Cara Menghapus Komentar Spam Secara Otomatis
- Cara Membuat Blog Terindeks Google dengan Cepat
- 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
- Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
- Apa Itu Niche Blogging ?
- Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
- Cara Menghindari Blog Dihapus Oleh Google
- Cara Memilih Nama Blog & Situs yang Ramah SEO
- Cara Mengembalikan Mood Blogging
- Mengapa Subscriber Feedburner Menjadi 0 ?
- 7 Tips SEO untuk Blogger
- 10 Tips Mantap Untuk Meningkatkan Trafik Organik
- 7 Trik Membuat Artikel Lama Menjadi Populer
- 7 Cara Mendapat Pengunjung Dengan Mudah
- Tutorial Blog dan SEO Terkena Malware ?
- Bagaimana Mengefektifkan Backlink Dalam SEO
- 8 Tips Membuat Loading Blog Lebih Cepat
- Cara Membuat Kotak Fanpage Facebook Hitam Putih
- Optimasi Gambar Untuk Dapatkan Pengunjung
- Cara Menghindari SEO yang Berlebihan
- 8 Tips Untuk Seorang Blogger Pemula
- Cara Mendapatkan Google Sitelink Dengan Cepat
- Cara Membuat dan Tips Pengaturan Meta Tag
- Cara Meningkatkan Ranking Alexa Dengan Cepat
- Cara Mengklaim Situs di Alexa
ini dia om yang ane cari2...
ReplyDeletethanks om infonya ya,,
terus berjuang..
:D
Cerita Tentang Cinta
saya baru nyari pemberitahuan, tapi agan di halaman pertama kebetulan gan, makasih lagi gan..??? hehhe
ReplyDeleteWah gan gimana kalau Blog aku jadi rusak dan tidak jalan...? cara balikinnya susah Gan. cara yang lebih mudah misal lewat widget apa gak bisa???
ReplyDeleteNah, ini yg saya cari...
ReplyDeletethanks gan...