28.5.14
31
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));}


my web image

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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Kalimat Pembuka Pada Halaman Beranda Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

31 komentar

  1. selamat malam mb devy,,_
    izin langsung ke TKP untuk blog saya yang laen :-p

    BalasHapus
  2. Waduh mumet saya, ijin nyimak saja y... salam dari pulau dollar

    BalasHapus
  3. sepertinya sih oke, tapi postingannya jadi ga kelihatan bos,

    lah biara ada pembuka tapi ada postingannya juga gimana caranya bos..

    BalasHapus
    Balasan
    1. efek seperti ini biasanya untuk digunakan jika halaman beranda blog terpisah dengan postingan bos, singkatnya halaman beranda yang tersendiri tanpa ada postingan yang ditampilkan.
      tetapi jika ingin membuat satu, tempatkan HTMLnya pada wilayah header,

      Hapus
    2. ok deh, saya coba praktekan, thx yia bos...

      Hapus
  4. bagus banget ngelihat demonya...kelihatan menjadi lebih profesional yambak

    BalasHapus
  5. Wah, Ishmah baru lihat yang beginian *suer :D *duh hehe, Semangat terus bagikan ilmunya, mba
    salam kenal ya mbaa :)

    BalasHapus
  6. Wah, Ishmah baru lihat yang beginian *suer :D *duh hehe, Semangat terus bagikan ilmunya, mba
    salam kenal ya mbaa :)

    BalasHapus
    Balasan
    1. biasa kok mbak,hehe..
      salam kenal juga mbak

      Hapus
  7. mbak devy memang kreatif ya, kalau saya boleh saran ni mbak, sepertinya blog mbak ini tepat sekali diganti domainnya, tapi ini saran aja, jangan marah ya

    BalasHapus
    Balasan
    1. gak apa-apa mas, kalau masalah domainnya belum kepikiran kesana mas,terlebih belum menemukan penyedia yang tepat, ya kalau mas ada yang disarankan untuk situs penyedianya, nanti akan saya pikirkan kembali

      Hapus
    2. kalau saya masih menggunakan idwebhost mbak, karena mudah dan murah heehee

      Hapus
  8. Makasih teh Devi ilmunya. Walau sulit tapi mau coba-coba dulu CSSnya.

    BalasHapus
    Balasan
    1. belajar CSS tidak sulit kok mas, yang terpenting mengerti sedikit bahasa inggris, karena jika ingin membuat sesuatu perintah, maka kode yang harus kita tuliskan sudah pasti dengan style itu

      Hapus
  9. Balasan
    1. dipecah-pecahlah Mba Dev, gak trjangkau..!

      Hapus
    2. mas aldino kok malah menangis..gak dibeliin es krim ya,,
      'hehehe

      Hapus
    3. mohon mba Dev, buatkan widget popular post yg lain dari yg lain pliss, memang byk tp..sepertinya sdah byk yg pake..kebtulan sdh brapa kli ganti pop post blom ada yg nyangkut..! desain abstrak..!, Tatto desain style (underground style) yg pastinya mesti keren seperti...heheeh maunya..!, td dah keliling tp nda nemu di daftar makanan, :)) :>). maksi jika berkenan .. :))

      Hapus
    4. saya kan tidak tahu mas style yang mas inginkan seperti apa, jika nanti say buatkan belum tentu juga mas aldino suka dan sesuai keinginan.

      tetapi akan saya buatkan mas,namun agak lama ya,karena sekarang lagi bahas tentang efek gambar dan menu navigasi dulu,
      ditunggu ya.OK

      Hapus
    5. any of you I am still happy, thank you for your attention (f)

      Hapus
  10. Keren banget tipsnya. harus di pelajari dulu nich!

    BalasHapus
  11. ijin bookmark dulu mbak devy

    BalasHapus
  12. keren,tapi lagi gak ada laptop :)

    BalasHapus
  13. setiap pengunjung dikasih ucapan selamat datang, pasti admin blognya ramah :)

    BalasHapus
  14. ntar mau saya praktekkan mbak soalnya ini penting banget utk memberi sambutan kpd pembaca biar keren blognya hehehe :d

    skrg saya bookmark dulu utk dipelajari, makasih sharingnya x-)

    BalasHapus
  15. Kunjungan balik mbak devy, lg baca2 nih, sapa tau ada tutorial yg bagus tuk dipraktekkan di blogku...

    BalasHapus
    Balasan
    1. dengan senang hati mas, tujuan kita ngeblog kan berbagi informasi,,hehe
      terimakasih sudah berkunjung di blog pernak-pernik ini

      Hapus
  16. terima kasih atas tipsnya ya mbak, oya tampilan home page nya kok ndak kelihatan ya mbak kenapa ya? :D

    BalasHapus
    Balasan
    1. home pages di blog ini lagi saya desain mas, saya mau buat tampilan sedikit berbeda,
      sengaja saya sembunyikan,mau saya padukan dengan desain template yang berbeda, mau coba sih..hehe

      Hapus
  17. Hasilnya keren Mba, seperti penampilan blog yang profesional dalam menyambut pembacanya, asyik juga kalau bisa berinovasi dengan hasil yang cantik. :D

    Salam

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK