Membuat Kalimat Pembuka Pada Halaman Beranda Blog

Membuat Kalimat Pembuka Pada Halaman Beranda Blog - " Weel Come To My Blog " kalimat ini sering kita temukan pada beberapa blog dengan tujuan memberikan ucapan salam pada pengunjung saat blog terbuka. Dengan mengabungkan beberapa efek yang pada tutorial sebelumnya telah saya publikasikan, kesempatan kali ini SAHABAT BLOGGER 77 akan memberikan trik sederhana untuk Membuat Kalimat Pembuka Pada Halaman Beranda Blog dengan tampilan efek teks animasi dan efek background slide animasi.

Agar kalimat dapat terlihat atau tidak tertutup dengan background, saya membuat susunan rangka body dengan posisi background melayang (CSS-position:fixed) seperti ini

body {background: repeat right left;}
.sb77-container {
   position: fixed;
   top: 0px;left: 0px;
   width: 100%;height: 100%;
   z-index: 0;
   background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1),
   rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
   background: -moz-radial-gradient(rgba(0, 0, 0, 0.1),
   rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
   background: -ms-radial-gradient(rgba(0, 0, 0, 0.1),
   rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
   background: radial-gradient(rgba(0, 0, 0, 0.1),
   rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));}

Tahap selanjutnya membuat konten kalimat pembukanya dengan efek animasi. Untuk CSS berikut ini, saya menggunakan efek tunggal pada kontent kalimat dengan kode frame-animasi-delay, sehingga kontent kalimat akan tampil secara bergantian dengan jarak waktu yang sudah ditentukan dengan value delay.
Jika Anda ingin membuat efek yang berbeda, Silahkan Anda pilih beberapa kode efek animasi pada tutorial sebelumnya tentang cara Membuat Efek CSS Animasi Pada Tulisan, CSSnya seperti berikut

.sb77-container h2.frame-1 {
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -ms-animation-delay: 0s;
   animation-delay: 0s;}

.sb77-container h2.frame-2 {
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -ms-animation-delay: 3s;
   animation-delay: 3s;}

.sb77-container h2.frame-3 {
   font-size: 75px;
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;}

.sb77-container h2.frame-4 {
   font-size: 200px;
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -ms-animation-delay: 9s;
   animation-delay: 9s;}

.sb77-container h2.frame-5 {
   font-size: 50px;
   -webkit-animation: none;
   -moz-animation: none;
   -ms-animation: none;
   animation: none;
   color: transparent;
   text-shadow: 0px 0px 1px #fff;}
  /* dan seterusnya, jika kalimat Anda lebih banyak lagi

DEMO SHOW        GET IN CODE


Untuk mengganti link beranda blog "HOME", saya sudah mengubah tampilannya dengan rotasi-show-backwards CSS, yang akan tampil pada konten kalimat penutup, kodenya sebagai berikut
sumber - Membuat Link Hover Efek Rolling Right

.sb77-link {
   position: absolute;
   left: 50%;bottom: 70px;
   margin-left: -50px;text-align: center;
   line-height: 100px;
   width: 95px; height: 95px;
   padding: 3px;
   background: #fff;color: #3f1616; font-size: 20px;
   border:8px solid rgba(225,225,225,.5);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;border-radius: 50%;
   -webkit-animation: fadeInRotate 1s linear 16s backwards;
   -moz-animation: fadeInRotate 1s linear 16s backwards;
   -ms-animation: fadeInRotate 1s linear 16s backwards;
   animation: fadeInRotate 1s linear 16s backwards;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);}
.sb77-link:hover {background: #080;color: #fff;}

Sampai pada tahap ini, pekerjaan Anda sudah selesai. Selanjutnya pembentukan CSS media untuk memberikan respon pada efek kalimat dan background sebagai berikut

@-webkit-keyframes blurFadeInOut{
    0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);}
    20%,75%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);}
    100%{
    opacity: 0;
    text-shadow: 0px 0px 50px #fff ;
    -webkit-transform: scale(0);}}

@-webkit-keyframes blurFadeIn{
    0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);}
    50%{
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    -webkit-transform: scale(1.1);}
    100%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);}}

@-webkit-keyframes fadeInRotate{
    0%{
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);}
    100%{
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);}}

<div class="sb77-container">
<div class="sb77-content">
<div class="sb77-joinweb">
</div>
<h2 class="frame-1">
Well Come To My Blog</h2>
<h2 class="frame-2">
SAHABAT BLOGGER 77</h2>
<h2 class="frame-3">
Dapatkan Yang Kamu Cari Disini...</h2>
<h2 class="frame-4">
Sekarang!</h2>
<h2 class="frame-5">
<span>
Berbagi Hal Seputar Tutorial Blog, CSS, Template Design, SEO Informasi & so.
</span>
<span>Desain Blog Anda</span>
<span>Tunggu Apa Lagi?</span>
</h2>
<a class="sb77-link" href="sahabatblogger77.blogspot.com">Join now!</a>
</div>
</div>

Rangkaian kode-kode diatas sudah saya beri tanda dengan warna, silahkan Anda ganti dengan nice Anda sendiri. Semoga Tutorial ini dapat memberikan inpirasi buat sahabat semua, akhir kata Terimakasih dan sampai jumpa.

happy blogging