Showing posts with label Tutorial Blogspot. Show all posts

Membuat Notification Bar Dengan Background Animasi Warna

Membuat Notification Bar Dengan Background Animasi Warna - Notification Bar atau bisa juga kita sebut sebagai welcome bar. Untuk pengguna wordpress tentu sudah akrab dengan Notification Bar, penerapannya pun juga sangat mudah tanpa harus script atau coding karena ia merupakan plugin berbeda dengan blogspot harus menggunakan css, html dan javascript untuk penerapan.

Membuat Notification Bar Dengan Background Animasi Warna

Notification Bar ini befungsi untuk memberikan informasi atau pengemuman kepada para visitors tentang hal-hal tertentu. sebenarnya tutorial ini saya ambil dari Blog Kompi Ajaib namun saya akan sedikit memodifikasi agar welcome bar ini bisa lebih menarik visitor untuk melihatnya karna saya akan memberi efek animasi background colors. Tidak panjang lebar lagi langsung saja kita menuju cara penerapannya :


Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum  ]]></b:skin> atau </style>

@keyframes color {height:50px;
 0%   { background: #33CCCC; }
 20%  { background: #33CC36; }
 40%  { background: #B8CC33; }
 60%  { background: #FCCA00; }
 80%  { background: #33CC36; }
 100% { background: #33CCCC; }
}

#welcome_bar{width:auto;height:auto;display:block;text-align:center;line-padding:8px 20px;color:#fff;position:relative;margin:0 auto;font-weight:normal
  background:#33CCCC;
animation: color 9s infinite linear;
  text-align: center;
  padding: 2em;
}
#welcome_bar a{background:#3B81DE;color:#fff;padding:0 6px;border:1px solid transparent;border-radius:4px;font-weight:bold;}
#close_welcome_bar {display:inline-block;cursor:pointer;padding:0 4px;position:absolute;top:0px;right:5px;font-weight:bold;font-size:18px}

Step 3 > Copy kode HTML di bawah ini, setelah itu paste tepat di bawah atau setelah tag <body>

<div id='welcome_bar'>
    Domain TLD Gratis Dari com, silahkan klik <a href='#' title='Unduh Update'>di sini</a>
    <span data-target='#welcome_bar' id='close_welcome_bar'>&#215;</span>
</div>

Step 4 > Setelah itu simpan kode javascript di bawah ini tepat diatas atau sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>

Step 5 > Simpan Template dan lihat hasilnya.....

Jika anda ingin menaruhnya di bagian bawah silahkan taruh kode HTMLnya di  tepat diatas atau sebelum tag </body>

Demikian tutorial kali ini tentang Membuat Notification Bar Dengan Background Animation Colors semoga dapat bermanfaat. Thank to Blog Kompi Ajaib.

Efek Loading Ala Blogger.com

Efek Loading Ala Blogger.com - Efek loading blog dimaksudkan agar blog memiliki sensasi tampilan yang berbeda pada saat visitors berkunjung. Efek loading pada blog juga dapat menambah kesan stylish sehingga dapat mempercantik tampilan blog. Untuk membuat Efek loading blog cukup mudah dan simple. Lantas bagaimana cara membuat efek loading pada blog...? Berikut langkah-langkah penerapannya pada blogspot :



Efek Loading Ala Blogger.com, efek loading blog,efek loading pada blog, membuat efek loading blog, membuat efek loading pada blog

Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Simpan kode external jQuery library di bawah ini, tepat diatas atau sebelum tag </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika template blog anda sudah terdapat jQuery library abaikan saja step ini


Step 3 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum tag </head>

<style>
/* LOADING EFEK BLOG WAHABSAPUTRA.com */
#blogger-gear {
background:url(http://1.bp.blogspot.com/-p0CHmMzLHhU/VTiq0KrOdsI/AAAAAAAAEbU/FErqzwBYMBI/s1600/Blogger%2BLoading%2BBlog%2BWahab%2BSaputra.gif) no-repeat center;
background-color:#eee;
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}
</style>


Step 4 > Copy kode HTML di bawah ini, setelah itu paste tepat di bawah atau setelah tag <body>

<div id="blogger-gear"></div>


Step 5 > Setelah itu simpan kode jQuery di bawah ini tepat diatas atau sebelum tag </body>

<script>
//<![CDATA[
$(window).bind("load", function() {
    $('#blogger-gear').slideUp(1000);
});
//]]>
</script>


Step 6 > Simpan Template dan lihat hasilnya.....


Efek Loading ini hanya direkomendasikan untuk blog yang "fast loading"

Demikian tutorial singkat tentang cara membuat efek loading pada blogspot semoga dapat bermanfaat sekian dan terima kasih.