26.7.14
10
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




Home page widget image


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 >>
= TERIMA KASIH =

10 komentar

  1. halaman beranda dengan kata sambutan cocok banget nih buat libur ngeblog pas lebaran, ijin kopi kodenya yia, sekalian praktek, hehehe...

    BalasHapus
  2. mantap halaman beranda dengan kata sambutan bisa diterapkan di blog saya
    terima kasih tutorialnya ijin copy kodenya... :)

    BalasHapus
    Balasan
    1. untuk menerapkan tutorial ini, terlebih dahulu daftar postingan yang ada pada halaman home harus dihilangkan, jangan dihapus, namun gantikan dengan widget kosong gadget
      setelah berhasil, lalu letakkan semua kode diatas pada formulir halaman gadget tadi (tambahkan gadget), maka hasilnya kurang lebih seperti ini:

      Modifikasi Tampilan Halaman Beranda

      Hapus
  3. Sangat cocok nih buat ngucapin selamat idul fitri ke para pengunjung :)

    BalasHapus
  4. selamat idul fitri mbk, minal aidin wal faizin mohon maaf lahir dan batin..

    BalasHapus
  5. dengan memodivikasi halaman beranda dengan kata kata, jadi unik dan sangat mengena bagi para pengunjung ya.

    Minal Aidin wal faidzin 1435 H, mohon maaf lahir batin yah

    BalasHapus
  6. bagus nieh memberikan efek kenyamanan bagi pengunjung yang mengunjungi blog kita .Dan membuat blog jadi terlihat friendly dan tampilan cantik.

    BalasHapus
  7. wah ,,,, keren keren .... tapi bikin loading lambat nggak mbak ?

    BalasHapus
  8. Saya memang lagi nyari tutorial mengubah beranda agar lebih menarik. Makasi tutorialnya.

    BalasHapus
  9. IJIN MINYAK DULU,,,,,,,,,,,,,,KEREN BGT .

    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