Cara Mengganti Halaman Beranda Dengan Kata Sambutan

Cara Mengganti Halaman Beranda Dengan Kata Sambutan - Saat Anda bertamu kerumah kerabat, maka dengan mengetuk pintu Anda ucapkan "Assalamu alaikum" sebagai kata salam kepada pemilik rumah. Dan sebaliknya si pemilik rumah mengucapkan "Wa'alaikum salam" sebagai kata sambutan pertanda menerima Anda sebagai tamunya, mungkin begitulah cerita singkat untuk menggambarkan tutorial berikut.
Dengan Cara Mengganti Halaman Beranda Dengan Kata Sambutan seperti ini, setidaknya dapat mencerminkan keramahan Anda kepada mereka yang berkunjung ke blog Anda, dengan begitu, mereka yang berkunjung akan merasa dihormati dan disenangi, tidak menutup kemungkinan esok hari mereka akan datang berkunjung kembali karena keramahan Anda.

Pada umumnya, halaman beranda sudah pasti disana terdapat kumpulan artikel-artikel blog Anda, sehingga di pertemuan sebelumnya saya pernah membuat tutorial tentang Cara Membuat Kalimat Pembuka Pada Halaman Beranda Blog. Hasilnya dapat Anda lihat pada tombol DEMO SHOW di bawah ini:




DEMO SHOW

Untuk Desain halaman beranda kali ini, agar tampilan teks pada kata sambutan terlihat lebih menarik dan cantik, saya memecah title descripsi, dan membalutnya dengan sentuhan efek animasi dengan value second-delay;, sehingga teks pada kata sambutan akan secara bergantian tampil dengan CSS seperti ini:

.text-wrapper{
   width: auto;
   position: relative;
   margin: 0 auto;
   font-family: 'Bree Serif';
   padding: 10px;}

.text-sentence{
   margin: 0;
   text-align: left;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.text-sentence span{
   color: #444;
   white-space: nowrap;
   font-size: 130%;
   font-weight: normal;}

.text-words{display: inline;text-indent: 10px;}
.text-words span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   width: 100%;
   color: red;}

.text-words-1 span{
   -webkit-animation: rotateWordsFirst 18s linear infinite 0s;
   -moz-animation: rotateWordsFirst 18s linear infinite 0s;
   -o-animation: rotateWordsFirst 18s linear infinite 0s;
   -ms-animation: rotateWordsFirst 18s linear infinite 0s;
   animation: rotateWordsFirst 18s linear infinite 0s;}

.text-words-2 span{
   -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
   -moz-animation: rotateWordsSecond 18s linear infinite 0s;
   -o-animation: rotateWordsSecond 18s linear infinite 0s;
   -ms-animation: rotateWordsSecond 18s linear infinite 0s;
   animation: rotateWordsSecond 18s linear infinite 0s;}

.text-words span:nth-child(2) {
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -o-animation-delay: 3s;
   -ms-animation-delay: 3s;
   animation-delay: 3s;
   color: green;}

.text-words span:nth-child(3) {
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
   color: #38f; }

.text-words span:nth-child(4) {
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -o-animation-delay: 9s;
   -ms-animation-delay: 9s;
   animation-delay: 9s;
   color: #25cf55;}

.text-words span:nth-child(5) {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;
   color: #8d6b9d;}

.text-words span:nth-child(6) {
   -webkit-animation-delay: 15s;
   -moz-animation-delay: 15s;
   -o-animation-delay: 15s;
   -ms-animation-delay: 15s;
   animation-delay: 15s;
   color: blue;}

@-webkit-keyframes rotateWordsFirst {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsFirst {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsFirst {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsFirst {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@keyframes rotateWordsFirst {
0% {opacity: 1;
    animation-timing-function: ease-in; height: 0px;}
8% {opacity: 1; height: 60px;}
19% {opacity: 1; height: 60px;}
25% {opacity: 0; height: 60px;}
100% {opacity: 0;}}

@-webkit-keyframes rotateWordsSecond {
0% {opacity: 1;
    -webkit-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-moz-keyframes rotateWordsSecond {
0% {opacity: 1;
    -moz-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-o-keyframes rotateWordsSecond {
0% {opacity: 1;
    -o-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@-ms-keyframes rotateWordsSecond {
0% {opacity: 1;
    -ms-animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@keyframes rotateWordsSecond {
0% {opacity: 1;
    animation-timing-function: ease-in; width: 0px;}
10% {opacity: 0.3; width: 0px;}
20% {opacity: 1; width: 100%;}
27% {opacity: 0; width: 100%;}
100% {opacity: 0;}}

@media screen and (max-width: 768px){
.text-sentence { font-size: 18px; }}
@media screen and (max-width: 320px){
.text-sentence { font-size: 9px; }}

#text-space span {margin:-1.35em 0 0 58%;}
#text1 span {
   margin:-1.35em 0 0 11%;
   width:363px;
   border-bottom:3px solid indigo;
   max-height:43px;}

.ribbon-box2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;width:50%;
  padding:6px;background-color:#35ecf9;
  position:relative;
  margin:100px auto;border-left:8px double red;}

.ribbon-box2:after {
  content:"";position:absolute;
  top:0px;left:100%;width:0px;
  height:0px;border:24px solid transparent;
  border-left-color:#35ecf9;}

Dan hasilnya:




DEMO SHOW



Apakah sudah selesai? (hhmm..menurut kamu?!).
Sampai pada tahap ini, pekerjaan Anda belum selesai, sebagai tahapan akhir, Anda tinggal letakkan HTML berikut pada halaman kosong widget HTML/JavaScript pada tata letak halaman beranda. Selanjutnya simpan perubahan.

<section class="text-wrapper">
    <h2 class="text-sentence">
          <span>WELL COME TO MY BLOG</span>
             <span>Title : </span>
    <div class="text-words text-words-1" id="text1">
<span style="color:#080;">SAHABAT BLOGGER 77</span>
<span style="color:#660000;">SAHABAT BLOGGER 77</span>
<span style="color:#38f;">SAHABAT BLOGGER 77</span>
<span style="color:#8d6b9d;">SAHABAT BLOGGER 77</span>
<span style="color:blue;">SAHABAT BLOGGER 77</span>
<span style="color:red;">SAHABAT BLOGGER 77</span>
    </div>

<span class="ribbon-box2">Berbagi pengetahuan seputar</span>
     <div class="text-words text-words-2" id="text-space">
<span>Tutorial Blog</span>
<span>Desain Template</span>
<span>HTML code</span>
<span>CSS dan JavaScript</span>
<span>SEO Tips</span>
<span>Blogging tips</span>
     </div>
   </h2>
</section>

Sebagai pilihan untuk tampilan DAFTAR MENU ARTIKEL, silahkan Anda pilih widget mana yang sesuai dengan nice blog Anda pada tutorial berikut:

➟ Membuat Tampilan Popular Post Dengan Slideshow
➟ Membuat Artikel Terbaru Desain Gallery Dan Tooltip
➟ Cara Membuat Widget Slideshow Efek 3D Gallery


Diam itu emas, namun dengan diam tidak akan pernah mengubah kecerdasan kita dalam berkarya. Untuk itu, saya akan selalu setia menunggu pertanyaan dari sahabat semua pecinta SAHABAT BLOGGER 77 jika kiranya mengalami kesulitan dalam menerapkan kode-kode di atas.

Semoga dapat bermanfaat. Terimakasih.!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mengganti Halaman Beranda Dengan Kata Sambutan
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 >>

http://sahabatblogger77.blogspot.com/2014/07/cara-mengganti-halaman-beranda-dengan-kata-sambutan.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77