Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation

Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation
Propellerads

Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation. Pada kali ini saya kembali hadir berbagi tutorial ngeblog. Kebiasaan saya, selalu menyapa para sahabat sahabat saya sesama blogger. Kita majukan blogger indonesia yang hebat, inovatif dan kreatif. Kita ajaka rekan-rekan lain untuk ikut tulis menulis di dunia maya menjadi seorang blogger. Blogger adalah sebuah hobi, Menjadi blogger bisa menjadi hobi yang digaji.

Ketika saya memperbaiki blog adik yang terurus, setelah selesai saya coba bagikan di facebook. Effek dari bagikan itu, ada teman blogger yang minta crip kata ucapan selamat yang ada dihidenkan dipojok kiri bawah. Dari permintaan itu, muncullah ide saya untuk menuliskannya di blog ini.

Fisika

Langsung saja, kali saya akan bebagi cara membuat kata sambutan atau ucapan selamat oleh admin blog kepada pengunjung setianya. Kata ucapan ini dibuat dengan CSS Animation. Pada kata ucapan ini hiden tapi ada foto adminnya terletak dipojok kiri bawah, sehingga dengan mengklik foto tersebut maka muncul kata ucapannya sepenuh layar, tapi tidak mengganggu tampilan blog karena kata ucapan tersebut muncul dengan menempel. Nantinya tinggal klik Icon Close maka tampilan blog tampak kembali utuh. Kelebiahannya ucapan dengan css animation ini adalah tampilan warna hijau yang transaparan. Sehingga tampilan blog dibelakangnya masih bisa terlihat sehingga terkesan khusus.

Bisanya Ucapan selamat pada website atau blog oleh admin adalah menggunan Banner. Saya juga sering membuat kata ucapan, misal ucapan selamat puasa, selamat idul fitri, selamat ujian naional. Tapi ucapan itu saya buat dalam bentuk banner dan saya tampilkan dihalaman depan blog saya. Nah, Sekarang ucapan selamat bisa anda ucapkan dengan menghidenan, tapi ketika di klik muncul sepenuh layar. Ini termasuk sebuah kreatifitas sehingga kata ucapan yang dibuat terkesan keren oleh para pembaca.

Untuk melihat contohnya, Silahkan klik Demo dibawah. Memang sengaja tidak saya tampilkan di blog Tutorial Salim dengan alasa tertentu.


Jika anda tertarik untuk mebuat ucapan selemat atau kata sambutan anda sebagai admin blog anda, silahkan simak langkah-langkah berikut :

1# Silahkan anda copy semua kode berikut

 <style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

2# Silahkan anda anda masuk ke blogger anda - Template - Edit HTML Kemudian cari kata </head> 

3# Pastekan kode pada langkah 1 tepat diatas Kode </head> tersebut

4# Selanjutnya silahkan anda kopy kode dibawah

 <img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='https://2.bp.blogspot.com/-luZWlvMiab4/VyHlA-FHL6I/AAAAAAAAADw/diaU6tyCRYUXoHvp4s0AIWh_uldxMUOigCLcB/s1600/SALIM%2BOK.png' width='50' title="Click Saya!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"FISIKA PAK SALIM"</h2>
    <p>Blog Pak Salim Berbagi semua tentang fisika.
      <br/><br/> Saya, <b>NAMA ANDA</b> selaku admin blog <b>Fisika Pak Salim</b> mengucapkan:
      <br/>
      <b>"Selamat menikmati hasil sajian saya di Fisika Pak Salim"</b>.</p>
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='https://2.bp.blogspot.com/-luZWlvMiab4/VyHlA-FHL6I/AAAAAAAAADw/diaU6tyCRYUXoHvp4s0AIWh_uldxMUOigCLcB/s1600/SALIM%2BOK.png' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

5# Silahkan anda cari kode </body> dan pastekan kode langkag 4 tepat diatas kode </body>. Pada langkah ini anda bisa menyesuiakan dengan template blog anda. Yang intinya kode tersebut dinatara kode <body> dan </body>. Silahkan menyesuaiakan tempat mempastekanny, sesuai kan dengan template blog anda. Kalau memungkinkan tepat pas diatas kode </body> itu lebih baik.

6# Silahkan simpan template blog anda kembali  - Selesai

Itulah cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation. Cara ini bisa anda buat utuk yang lain, tidak hanya pada kata sambutan anda sebagai admin blog. Tapi ini bisa anda gunakan untuk Memasang iklan pada blog anda, bisa untuk mengucapkan kata-kata selamat. Selamat Tahun Baru, Selamat Lebaran, Selamat Ulang tahun dll.

Refensi : Kompiajaib

Propellerads
Admin
Tutorial Salim adalah sebuah blog berkembang tentang tutorial, teknologi dan solusi yang dikelola oleh seorang abdul salim. Silahkan berikan komentar, kritik dan saran untuk kemajuan blog Tutorial Salim.

Sign out
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Tool Hide Parse Tool

How to get ID DISQUS - http://disq.us/p/[ID DISQUS]

strong em u strike
pre code pre code spoiler
embed

0 Comment

Add Comment

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih. Show Parse Tool Hide Parse Tool


Propellerads