Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation - Hallo temen-temen Youtuber!!! Tutorial Adsense Youtube, Kali ini saya akan menulis tutorial Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation, Semoga dapat memberikan manfaat bagi youtuber semua. Baca postingan Artikel Blog, Artikel Internet, sampai selesai agar tidak ada langkah yang terlewat, jangan malas membaca dan selamat menikmati.

Judul : Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation
link : Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation

Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation

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.

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.

DEMO

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6RJmRNIE4fxgjO6fCKSPcd0UswW3ZrXEd8ELh96AQ-93iWhRZUdjWVMQIs-7elDW-kB2iEG4B-f_6ktK7Phij7jYG0z-IDPNpliZvvMGmb3NlbZzkVHLSzPZW7v3l805WYvTMxEUMWYo/s1600/SALIM+OK.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6RJmRNIE4fxgjO6fCKSPcd0UswW3ZrXEd8ELh96AQ-93iWhRZUdjWVMQIs-7elDW-kB2iEG4B-f_6ktK7Phij7jYG0z-IDPNpliZvvMGmb3NlbZzkVHLSzPZW7v3l805WYvTMxEUMWYo/s1600/SALIM+OK.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

Jadi sepertiitulah kira-kira tutorial Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation

saya rasa cukup tutorial Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation kali ini, semoga dapat membuat youtuber indonesia semakin maju dan jangan lupa baca tutorial youtube lainnya.

Anda sekarang membaca artikel Cara Membuat Kata Sambutan Admin Blog Dengan CSS Animation dengan alamat link https://2007ahmad.blogspot.com/2016/10/cara-membuat-kata-sambutan-admin-blog.html