Kenapa Alexa Rank Tak Kunjung Mengecil?

Kenapa Alexa Rank Tak Kunjung Mengecil? - Nilai trafik angka yang semakin tinggi dalam lalu lintas blog, maka semakin baik pula kualitas blog Anda oleh google. Namun tidak untuk angka pada Alexa Rank, yang jika semakin membesar maka popularitas dan kualitas blog Anda terlihat buruk oleh google.

Dalam mengoptimalkan SEO pada blog, kita dipaksa untuk mencapai nilai presentase minimal (paling sedikit) 80% agar dikatakan "A-grade", begitu juga nilai trafik pada blog yang di targetkan minimal 1000 PageView/hari. Dari kedua hal ini, maka Anda akan paham Kenapa Alexa Rank Tak Kunjung Mengecil?. Banyak faktor dan penyebab kenapa angka pada Alexa Rank tak kunjung mengecil, salah satunya adalah seberapa besar potensi Anda dalam mengelola blog agar terlihat selalu aktif.

➟ Cara Terbaik Mengoptimalkan SEO Pada Blog akan membantu Anda untuk menjawab keresahan Anda selama ini tentang Alexa Rank yang selalu membengkak, selebihnya saya akan berikan 5 faktor penyebab Kenapa Alexa Rank Tak Kunjung Mengecil dengan hal-hal sebagai berikut:


1. Up Date Content
Hal ini merupakan semua pekerjaan Anda yang berhubungan dengan konten artikel. Dari membuat artikel, mengelola/mengoptimalkan artikel yang semuanya itu ada tata cara dan peraturan yang harus kita patuhi sebelum mempublikasikan postingan Anda, untuk itu kita perlu memahami beberapa tips tentang ➟ 6 Hal Pembuatan Judul Yang Deskriptif pada sebuah postingan blog.

Seperti kata mas +Budi Smart konten artikel bagaikan bahan bakar pada sebuah kendaraan, begitu pula pada blog yang tanpa artikel, maka blog Anda tidak akan bisa berjalan dengan baik. jadi sangat penting untuk membuat dan mempublikasikan artikel minimal 4-5 postingan/hari. Apakah Anda sanggup?, mungkin hal ini berat karena kesibukan lain diluar off line. Namun Anda bisa lakukan ini:


2. Blog Walking
Media blog adalah sebuah wahana untuk saling berbagi ragam pengetahuan. Jika saya dalam bidang berbagi pengetahuan seputar tutorial blog dan kode-kode HTML, Anda berbagi di bidang kesehatan, dan masih banyak lagi sahabat lain yang berbagi hal di bidang yang berbeda. Namun saya, Anda dan mereka bisa bertemu dalam satu ruangan pada kolom komentar blog. Sehingga dengan saling berkunjung, akan banyak terjadi lalu lintas di blog kita, karena dengan blogwalking banyak manfaat yang bisa kita dapatkan, seperti ➟ Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking adalah salah satunya.


3. Take And Give
Saling memberi dan saling menerima, jika angka Alexa Rank blog Anda saat ini semakin membesar, berarti Anda belum memberikan sesuatu yang spesial buat si Alexa. "Buatlah Orang Lain Senang, Layaknya Anda Ingin Dibuat Senang", Alexa sudah memberikan tool gratis untuk menghitung kualitas blog Anda dengan trafik, lalu apa yang sudah Anda berikan pada Alexa?. Alexa tidak meminta untuk di beliin es krim, coklat dan makanan yang enak-enak, hehe..!! cukup buat satu artikel yang membahas seputar Alexa Rank, karena dengan begitu, Anda sudah menyertakan link Alexa pada blog Anda. Bukankah hal ini sama seperti keinginan Anda, yang mau menanam link pada sebuah komentar di blog lain?.

Kita kembali lagi pada poin ke-1 tentang membuat artikel, jika hal ini merupakan sesuatu yang sulit karena tidak tahu tema pembahasan apa yang akan Anda ceritakan disana, Anda bisa lakukan ini:


4. Alexa Rank Widget
Pasang widget Alexa Rank pada sidebar blog Anda, pada laman footer atau dimana saja widget ini akan Anda Tampilkan. Untuk cara membuat widget ini, saya tidak perlu jelaskan panjang lebar, karena sudah banyak blog yang membahas tutorial tentang ini. Anda bisa googling di google penelusuran.


5. Alexa Link In
Dapatkan dan kumpulkan sebayak mungkin link yang masuk ke blog Anda, jika Anda sudah memasang widget Alexa Rank, maka disna Anda dapat melihat seberapa banyak link yang masuk ke blog Anda. seperti blog ini Anda dapat melihatnya di siteinfo-sahabatblogger77.blogspot.com

Namun perlu diketahui, perhitungan link yang masuk ke blog Anda akan diberikan jika link tersebut memasang Alexa ToolBar pada blog yang bersangkutan. Misalnya, saya sudah memasang Alexa Toolbar pada blog ini dengan sistem auto approve pada komentar, jika Anda berkunjung dan selalu memberikan komentar, dan sebaliknya maka Anda sudah mendapatkan satu link yang berkualitas untuk satu artikel, lalu bagaimana jika 5-20 artikel yang Anda komentari?, hitung sendiri ya jumlah linknya. Jadi sebanyak dan serajin apapun Anda melakukan blogwalking dengan meninggalkan komentar pada blog yang tidak memasang Alexa Toolbar, maka link tersebut akan sia-sia (tidak terhitung) pada matriks Alexa.

Pokok-pokok pada 5 poin diatas saya bahas berdasarkan pengalaman blog ini yang Alexa Rank naik turun. Update nilai Alexa rank 2 minggu sebelumnya pada blog ini berkisar #243.589 dan terus membesar, dan akhirnya saya coba benahi dengan ke-5 poin diatas, alhasil saya berhasil merampingkan angka Alexa Rank blog ini menjadi #189.555.

Semoga dengan membagikan pengalaman pahit dan menyedihkan ini kepada sahabat semua pecinta SAHABAT BLOGGER 77 dapat memberikan sedikit manfaat. Terimakasih.

Membuat Gambar Dengan Efek Flip Animasi

Membuat Gambar Dengan Efek Flip Animasi - Jika Anda terjemahkan kata Flip dalam bahasa Indonesia berarti "Membalik". Memutar gambar dengan cara membalik posisi halaman depan untuk menampilkan atau melihat halaman belakang dengan durasi sekali putaran (180 derajat), cara seperti inilah yang disebut dengan efek "FLIP".

Tampilan gambar dan sistem kerja pada efek hampir sama dengan tutorial saya sebelumnya tentang ➟ Cara Membuat Animasi Teks Berputar Efek 3D, letak perbedaan hanya pada perintah kinerja efek. Sebagai tahap dasar, saya akan ilustrasikan tutorial kali untuk Membuat Gambar Dengan Efek Flip Animasi menggunakan kode CSS seperti ini:

.flip-container {
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;
   border: 2px solid #39f;
   margin:-2em auto;}

//durasi efek 3D with transition
.flipper {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   -o-transition: 0.6s;
   -o-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;}

.pic {
   background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
   z-index: 2;}

• CSS
• HTML
• ► Live DEMO

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  border: 2px solid #39f;
  margin:-2em auto;}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);}

.flip-container, .pic, .back {width: 220px;height: 327px;}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;}

.pic, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;left: 0;}

.pic {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9l6NA-k-T8yt6ZIGcPbCC8AEt8HW3oDvJjIo9l7qi2H3kwEhJ8GqsmyDYwvqbWIgodBSfkjLDYeNSBJvDtjh2gzUwSLL-C3iHSn8v2lKcv_2pq-yToM26-L3TAccCj1AIao-9an502w/s328/Devy-Indriyani.jpg) 0 0 no-repeat;
  z-index: 2;}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #f8f8f8;}

.pic .about {
  font-size: 1em;
  display: inline-block;
  background: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Helvetia;
  padding: 5px 10px;
  border-radius: 5px;
  border:2px solid aqua;
  float:right;
  right:10px;
  bottom:15px;
  position:absolute;}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
   <div class="flipper">
     <div class="pic">
       <span class="about">Devy Indriyani</span>
     </div>
   </div>
</div>

Devy Indriyani

Halaman Masih kosong, Lalu Hal apa yang akan Anda tampilkan "Di Sini" ?

Halaman dibalik gambar masih terlihat kosong, biasanya hal apa yang akan Anda tampilkan di sana?, sekedar membuat catatan singkat tentang memorandum yang berhubungan dengan gambar tersebut, atau saat ini Anda sudah menyimpan sebuah ide yang menarik untuk Anda tampilkan, mungkin?. Untuk menampilkan apa yang akan Anda tuliskan, saya sudah rangkai kodenya dengan CSS seperti ini:

.flip-container {
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;
   border: 2px solid #39f;}

.flip-container:hover .flipper, 
.flip-container.hover .flipper {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);}

.flip-container, .pic, .back {width: 320px;height: 427px;}
.flipper {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   -o-transition: 0.6s;
   -o-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;}

.pic, .back {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0;left: 0;}

.pic {
   background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
   z-index: 2;}

.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background: #f8f8f8;}

.pic .about {
   font-size: 1.4em;
   display: inline-block;
   background: rgba(33, 33, 33, 0.9);
   color: #f8f8f8;
   font-family: Helvetia;
   padding: 5px 10px;
   border-radius: 5px;
   border:2px solid aqua;
   float:right;right:10px;
   bottom:15px;position:absolute;}

.img-logo {
   position: absolute;
   top: 35px;border-radius:50%;
   left: 90px;width: 139px;height: 139px;
   background: url(URL-gambar Anda.png) 50% 50% no-repeat;}

.back-desc {
   font-weight: bold;
   position: absolute;
   top: 200px;text-align: center;
   left: 0;right: 0;font-size: 25px;
   text-shadow: 0.1em 0.1em 0.05em #C0C0C0;
   font-family: Lato;color: #00304a;
   background: linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-webkit-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-moz-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-o-linear-gradient(left, transparent 0%,red 50%,transparent 100%);}

.back p {
   position: absolute;
   bottom: 50px;left: 0;right: 0;
   text-align: center;padding: 0 20px;
   font-family: arial;
   line-height: 2em;color:#333;}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
   <div class="flipper">
      <div class="pic">
         <span class="about">
            Devy Indriyani
         </span>
      </div>
           <div class="back">
               <div class="img-logo">
               </div>
    <div class="back-desc">
      SAHABAT BLOGGER 77
    </div>
//Anda bisa tuliskan apa saja disini...
       <p>
         Your Descriptions Text
       </p>
           </div>
   </div>
</div>

Sehingga hasilnya akan jadi seperti ini:




DEMO SHOW



Bagaimana, setelah halaman kosong dibalik gambar di isi dengan sebuah tampilan akan terlihat lebih menarik dari efek sebelumnya bukan? hehe.... Semoga tutorial efek gambar kali ini dapat memberikan keceriaan buat sahabat semua pecinta SAHABAT BLOGGER 77. Salam manis **).

Menampilkan Bayangan Teks Saat Hover

Menampilkan Bayangan Teks Saat Hover - Hal seperti ini bukan lagi sebuah tutorial yang sulit buat Anda terapkan saat akan menampilkan bayangan pada sebuah teks dengan penggunaan CSS text-shadow. Dengan mengatur nilai pada sumbu masing-masing ofset, maka akan dengan mudah Anda ➟ Membuat Efek Tulisan Dengan CSS Text Shadow seperti ini:

SAHABAT BLOGGER 77

Layaknya teks pada sebuah link, yang jika di hover maka teks akan memberikan efek warna yang berbeda pada teks. Untuk tutorial kali ini merupakan pemecahan pada artikel sebelumnya tentang bagaimana ➟ Cara Membuat Teks Berkedip Dengan Animasi Blink, namun kodenya saya modifikasi sedikit untuk menampilkan efek bayangan pada teks tersebut dengan sistem hover.

Bisa saja apa yang akan saya tampilkan kali ini kurang menarik buat Anda, karena kesetiaan Anda yang selalu cinta kepada SAHABAT BLOGGER 77, saya akan berikan 7 Cara Menampilkan Bayangan Teks Saat Hover dengan berbagai model yang dapat Anda pilih dengan penggunaan CSS seperti ini:

1. Text Shadow With Hover

<style>
.word {text-align: center;margin:0 auto;font-weight:bold;}
.word, .word:before, .word:after {
  font: bold 60px/normal Helvetia;
  mix-blend-mode: screen;width: 100%;
  -ms-transition: -webkit-transform .3s;
  -o-transition: -webkit-transform .3s;
  -moz-transition: -webkit-transform .3s;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;}

.word:before, .word:after {
  display: block;
  content: attr(data-word);
  position: absolute;
  top: 0;left: 0;}

.word {color: #ddd}
.word:after {color: red;}
.word:before {color: #7FFF00;}

//hapus kode ini, lalu gantikan dengan kode efek pilhan anda. misal efek 2 (Trasform Rotate), efek 3,4 dan seterusnya...
.word:hover:after {
  -o-transform: translate(0.07em, -0.07em);
  -moz-transform: translate(0.07em, -0.07em);
  -webkit-transform: translate(0.07em, -0.07em);
  -ms-transform: translate(0.07em, -0.07em);
  transform: translate(0.07em, -0.07em);}

.word:hover:before {
  -o-transform: translate(-0.07em, 0.07em);
  -moz-transform: translate(-0.07em, 0.07em);
  -webkit-transform: translate(-0.07em, 0.07em);
  -ms-transform: translate(-0.07em, 0.07em);
  transform: translate(-0.07em, 0.07em);}
</style>
<div class="word" data-word="SAHABAT BLOGGER 77">
SAHABAT BLOGGER 77</div>

DEMO SHOW



2. Trasform Rotate

.word:hover:after {
  -0-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
  transform:rotate(-30deg);}

.word:hover:before {
  -o-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  -moz-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);}

DEMO SHOW



3. Rotasi
Efek ini merupakan gerak berputar, bayangan pada teks pertama akan berputar ke-kanan, dan teks ke-dua berputar ke-kiri dengan durasi 360, sehingga gerak putaran tidak searah seperti ini:

.word:hover:after {
  -0-transform:rotate(-360deg);
  -ms-transform:rotate(-360deg);
  -moz-transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
  transform:rotate(-360deg);}

.word:hover:before {
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);}

DEMO SHOW



4. Slide Top Down
Membuka teks asli dengan gerakan teks bayangan secara slide-top dan slide-bottom.

.word:hover:after {
  -webkit-transform:translate(0px, -90px);
  -moz-transform:translate(0px, -90px);
  -ms-transform:translate(0px, -90px);
  -o-transform:translate(0px, -90px);
  transform:translate(0px, -90px)}

.word:hover:before {
  -webkit-transform:translate(0px, 90px);
  -moz-transform:translate(0px, 90px);
  -ms-transform:translate(0px, 90px);
  -o-transform:translate(0px, 90px);
  transform:translate(0px, 90px)}

DEMO SHOW



5. Slide Out Left Right
Membuka teks asli dengan gerakan teks bayangan secara slide-left dan slide-right.

.word:hover:after {
  -webkit-transform:translate(1300px, 0px);
  -moz-transform:translate(1300px, 0px);
  -ms-transform:translate(1300px, 0px);
  -o-transform:translate(1300px, 0px);
  transform:translate(1300px, 0px)}

.word:hover:before {
  -webkit-transform:translate(-1300px, 0px);
  -moz-transform:translate(-1300px, 0px);
  -ms-transform:translate(-1300px, 0px);
  -o-transform:translate(-1300px, 0px);
  transform:translate(-1300px, 0px)}

DEMO SHOW



6. Rotasi And Shrink Text

.word:hover:after {
  -webkit-transform:rotateZ(360deg);
  -moz-transform:rotateZ(360deg);
  -ms-transform:rotateZ(360deg);
  -o-transform:rotateZ(360deg);
  transform:rotateZ(360deg)}

.word:hover:before {
  -webkit-transform:rotateX(-60deg);
  -moz-transform:rotateX(-60deg);
  -ms-transform:rotateX(-60deg);
  -o-transform:rotateX(-60deg);
  transform:rotateX(-60deg)}

DEMO SHOW



7. Slide Top-Zoom And Down-small

.word:hover:after {
  -webkit-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -moz-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -ms-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  -o-transform:translate(0px, -100px) scaleX(1) scaleY(2);
  transform:translate(0px, -100px) scaleX(1) scaleY(2)}

.word:hover:before {
  -webkit-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -moz-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -ms-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  -o-transform:translate(0px, 70px) scaleX(1) scaleY(0.5);
  transform:translate(0px, 70px) scaleX(1) scaleY(0.5)}

DEMO SHOW



Jika Anda bisa membuat efek warna yang berbeda pada link saat di hover. Maka dengan ini, Anda bisa berinovasi untuk membuat teks pada link dengan memberi efek bayangan pada teks-nya.

Membuat Widget Jam Analog Dengan CSS

Membuat Widget Jam Analog Dengan CSS - Cara menampilkan widget pengukur waktu seperti ini, mungkin sudah sering Anda lihat pada beberapa blog yang menggunakannya. Sekarang coba lihat halaman depan di HP (Hand Phone) Anda, saya yakin pasti menggunakan widget seperti ini juga, hanya versi yang berbeda seperti (stopwatch second dan analog style). Sehingga Inspirasi pada tutorial kali ini, saya mengambil tema tentang "Bagaimana cara Memindahkan Jam Dinding Di rumah Anda, untuk kita tempatkan pada halaman widget di blog" seperti tampilan gambar berikut:

Baca juga - 10 Pilihan Efek Loading Blog



Hal yang tersulit dalam Membuat Widget Jam Analog seperti ini adalah membuat gerakan detik layaknya sebuah jam, yang bergerak berputar melintasi angka-angka pada jam tersebut, dan saya coba membuat gerakan tersebut dengan css-animasi, dan berhasil, akan tetapi waktu yang ditunjukkan pada widget tidak sesuai dengan jam pada laptop saya. Akhirnya saya hapus kembali, dan mendesain ulang dengan penggunaan perintah script untuk mendapatkan GMT-waktu setempat sesuai lokasi Negara dengan kode seperti ini:

<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>

Dan hasilnya sesuai harapan seperti ini:




DEMO SHOW



Bagaimana? terlihat keren dan menarik bukan tampilan jam ini.!, buat sahabat semua pecinta SAHABAT BLOGGER 77 yang ingin Membuat Widget Jam Analog seperti ini, versi kode jam analog dengan lengkap sudah saya siapkan untuk Anda copy dan letakkan pada formulir halaman HTML/javascript di widget blog Anda.
Kode lengkapnya seperti ini:

<style type="text/css">
.watch {
  background: #34495e;
  border-radius: 50%;
  height: 20em;
  left: 50%;
  margin-left: -10em;
  margin-top: -10em;
  position: absolute;
  top: 150%;
  width: 20em;}

.watch:after, .watch:before {
  content: '';
  background-color: #bfbfbf;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFBFBFBF', endColorstr='#FFECF0F1');
  background-image: -moz-linear-gradient(top, #bfbfbf 0%, #ecf0f1 100%);
  background-image: -webkit-linear-gradient(top, red 0%, red 100%);
  background-image: linear-gradient(to bottom, #C0C0C0 0%, #FFF8DC 100%);
  border-radius: 50%;
  position: absolute;
  height: 22em;left: -1em;
  top: -1em;width: 22em;z-index: -1;}

.watch:before {
  box-shadow: -0.2em -0.4em 0.5em rgba(0, 0, 0, 0.2);
  height: 24em;left: -2em;
  transform: rotate(180deg);
  top: -2em;width: 24em;}

.watch-face {border-radius: 50%;height: 100%;width: 100%;}
.watch-face ul {list-style: none;}
.watch-face ul li {
  background: #34495e;
  border-radius: 50%;
  color: #ecf0f1;
  font-size: 2.8em;
  height: 1.5em;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
  width: 1.5em;}

.watch-face ul li:first-child {top:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(2) {margin-top:-0.75em;right:0;top:50%;}
.watch-face ul li:nth-child(3) {bottom:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(4) {margin-top:-0.75em;left:0;top:50%;}

.watch-face:after {
  content: '';
  background-image: -moz-linear-gradient(left bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  background-image: -webkit-linear-gradient(left bottom, rgba(55, 45, 155, 0) 0%, rgba(55, 45, 155, 0) 60%, rgba(55, 45, 155, 0.1) 60%);
  background-image: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  box-shadow: inset 0.5em 1em 2em rgba(0, 50, 136, 0.3), inset -0.5em -1em 2em rgba(0, 50, 136, 0.1);
  border-radius: 50%;
  position: absolute;
  height: 20em;left: 0;top: 0;
  width: 20em;z-index: 5;}

.watch-face:before {
  border-radius: 50%;
  border: 0.25em solid #ecf0f1;
  box-shadow: 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.9), inset 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.3), inset -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.9), -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.3);
  content: '';
  height: 80%;left: 9.5%;
  position: absolute;top: 9.5%;width: 80%;}

[class*="watch-hand"] {
  background: #bfbfbf;
  border-radius: 0.4em 0.4em 0 0;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
  left: 9.8em;
  position: absolute;top: 2em;
  z-index: 4;transform-origin: 50% 100%;}

.watch-hand-second {width:0.2em;top:0.9em;height:9em;left:50%;}
.watch-hand-minute {width: 0.4em;top: 2.1em;height: 8em;}
.watch-hand-hour {width: 0.6em;top: 4em;height: 6em;}

.watch-center-circle {
  background: #FAEBD7;
  box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  height: 1.5em;
  left: 50%;
  margin-left: -0.75em;
  margin-top: -0.75em;
  position: absolute;top: 50%;
  width: 1.5em;z-index: 5;}

.watch-center-circle:after {
  background: #7f8c8d;
  border-radius: 50%;
  content: '';
  height: 0.9em;left: 0.3em;
  position: absolute;
  top: 0.3em;width: 0.9em;}

.stop-watch {
  position:relative !important;
  background:#fff;
  color:#222;
  text-align:center;
  margin:24.6em auto;
  border:2px inset red;
  width:65px;
  font:bold 9px/normal arial;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/analog-clock.js"></script>
<div class="watch">
  <div id="cssclock">
    <div id="clockanalog">
      <div class="watch-center-circle"></div>
<div class="watch-hand-second" id="analogsecond"></div>
<div class="watch-hand-minute" id="analogminute"></div>
<div class="watch-hand-hour" id="analoghour"></div>
    </div>
       <div class="watch-face">
         <ul>
           <li>12</li>
           <li>3</li>
           <li>6</li>
           <li>9</li>
         </ul>
       </div>
  </div>
</div>
<div class="stop-watch">
<h2>
<time id="clock"></time>
<script type="text/javascript">
(function() {
    var clock = document.getElementById('clock');
    setInterval(function() {
        var time = new Date().toString().split(' ')[4];
        clock.innerHTML = time;
    }, 13);
})();
</script></h2>
</div>

Jam ini saya jual Rp. 50.000,- saja, gak terlalu mahal kok, karena otomatis tanpa penggunaan battray, hehhe...!! Selamat berInspirasi, good night..**

Membuat Artikel Terbaru Auto Slide Di Sidebar Blog

Membuat Artikel Terbaru Auto Slide Di Sidebar Blog - Tidak jauh berbeda dengan tampilan popular post pada umumnya yang terdapat pada halaman sidebar blog. Di sana akan terdapat 10 daftar artikel terbaru yang telah Anda publikasikan dengan menampilkan judul-judul artikel blog Anda, dengan mengkombinasikan sedikit sentuhan efek slide, artikel terbaru ini akan menghias tampilan halaman sidebar blog Anda menjadi lebih keren dan menarik yang tampak kurang lebih seperti gambar berikut:

Cara Membuat Tampilan Popular Post Dengan Slideshow sebelumnya, Anda dapat melihat penggunaan kode script yang sama, namun tampilannya saya buat untuk widget halaman beranda. Karena lebar halaman beranda/home tidak sama dengan sidebar, maka untuk tampilan artikel terbaru kali ini, saya mengubah struktur letak kodenya agar sesuai dengan lebar halaman sidebar blog Anda dengan script seperti ini:

<script type="text/javascript">
var tinycarousel_config = {
    nav: {
        //tombol berikutnya dan selanjutnya
        prevText: 'Prev',
        nextText: 'Next'
    },
    carousel: {
        axis: "y", //bentuk tampilan
        itemwidth: 200, //lebar widget
        itemheight: 370, //tinggi widget
        itemmargin: 10, //jarak sisi (left,top,bottom,right)
        itempadding:5, //jarak isi widget
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000, //waktu slide
        animation: true,
        duration: 1000, //kecepatan slide
        easing: "swing",
        //kembali ke awal jika sudah menampilkan artikel terakhir
        callback: function() {}
    }
};

DEMO SHOW



Untuk mendukung hasil performa yang lebih menarik, Anda bisa gunakan CSS berikut untuk membuat bentuk desain tempilan artikel terbaru Anda dengan kode perintah seperti ini:

<style type="text/css">
.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;margin:0 auto;}

.tinycarousel-viewport {
  overflow:hidden;position:relative;
  background-color:#333;border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

.tinycarousel-overview {
  list-style:none;margin:0;padding:0;
  position:absolute;left:0;top:0;}

.tinycarousel-overview li {
  list-style:none;float:left;padding:0;
  background:#fff;height:auto;color:#666;}

.tinycarousel-inner {
  padding:10px;border:1px solid #080;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;overflow:hidden;position:relative;}

li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;width:100%;height:auto;
  border:none;outline:none;
  margin:0;padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;}

.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;margin:0 0 6px;
  padding:10px 0 3px;background:none;
  border-bottom:3px double orange;text-align:center;}
</style>

CATATAN
Perlu di ketahui, untuk Membuat Artikel Terbaru Auto Slide Di Sidebar Blog seperti ini, pastikan template Anda sudah dilengkapi dengan script-jQuery. Jika belum, Silahkan Copy jQuery ini, lalu letakkan diatas tag penutup </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Galeri Gambar Efek Slider Desain Terbaru

Galeri Gambar Efek Slider Desain Terbaru - Banyak cara dalam membuat tampilan gambar dengan berbagai efek, salah satunya dengan mengubah tampilan galeri gambar dengan efek slider seperti ini:




DEMO SHOW



Galeri merupakan sekumpulan gambar dalam satu wadah yang kesemuanya dapat kita lihat layaknya seperti "ALBUM FOTO". Desain kali ini saya mengambil tema efek slider terbaru dikarenakan pada efek-efek gambar sebelumnya, saya banyak mengubah elemen kodenya dengan penggunaan perintah JavaScript. Sehingga banyak yang khawatir menggunakannya dengan alasan beban loading pada blog akan mempengaruhi, koleksi efek galeri gambar sebelumnya dapat Anda lihat pada TAB di bawah ini:

Gallery Image

• Descriptions Hover
• Slide No Jump
• Keyframes Show
• According Effect
• Carousel 3D

Jika dengan penggunaan JavaScript yang menjadi alasan sahabat semua, maka rangkaian kode berikut saya akan coba membuat tampilan galeri gambar dengan efek slider hanya dengan CSS. Jadi sudah tidak ada alasan lagi ya untuk khawatir terhadap beban loading blog, hehe..!!
Kodenya seperti ini:

<style type="text/css">
/*slider images radio type with css only
input[type='radio'] {input code='no-script'}
design from: devy indriyani
url='http://sahabatblogger77.blogspot.com/'
*/
.slider-img {
  background: #A0522D;
  height: 355px;
  padding: 10px;
  position: relative;
  margin:-4em auto;
  border:2px solid #e06666;
  border-radius:8px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;}

label{
  width: 134px;
  height: 73px;
  cursor: pointer;
  position: relative;
  margin: 280px 0 0 10px;
  float: left;
  box-sizing: border-box;}

label:hover{border: solid 3px #ccc;}
#slide1:checked ~ .slide1{border: solid 3px #7FFFD4;}
#slide2:checked ~ .slide2{border: solid 3px #7FFFD4;}
#slide3:checked ~ .slide3{border: solid 3px #7FFFD4;}
#slide4:checked ~ .slide4{border: solid 3px #7FFFD4;}
#slide5:checked ~ .slide5{border: solid 3px #7FFFD4;}

.pic {
  background: #ccc;
  width: 100%;
  height: 73%;
  margin:-20px 0 0 -3px;
  border:2px inset #ddd;
  transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -moz-transition: background .3s linear;}

input[type='radio'] {opacity: 0;position: absolute;z-index: -9999;}
input[type='radio']:checked {content: '';border: solid 3px #ccc;}
input[type='radio']:hover{border: solid 3px #7FFFD4;z-index: 9999;}

.slide1 {background: url(.../img-1.jpg);background-size: cover;}
.slide2 {background: url(.../img-2.jpg);background-size: cover;}
.slide3 {background: url(.../img-3.jpg);background-size: cover;}
.slide4 {background: url(.../img-3.jpg);background-size: cover;}
.slide5 {background: url(.../img-3.jpg);background-size: cover;}

#slide1:checked ~ .pic {background: url(.../img-1.jpg)}
#slide2:checked ~ .pic {background: url(.../img-2.jpg)}
#slide3:checked ~ .pic {background: url(.../img-3.jpg)}
#slide4:checked ~ .pic {background: url(.../img-3.jpg)}
#slide5:checked ~ .pic {background: url(.../img-3.jpg)}
</style>

Perhatikan kode yang saya beri warna MERAH - background: url(.../img-1.jpg), belum ada gambar. Anda bisa gunakan URL gambar berikut sebagai bahan percobaan, agar nantinya Anda bisa mengubahnya dengan URL-gambar Anda sendiri.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvRXefnARzhGtk_pYtdhosLEc5fhQw810DMLR2Ho1bbsbONT4CI2QkaaxYvyj8NMdBqXnZyOQo18OowXiUbu9gAXvZCAkGE1fboC6ZnU6KBO59gl5ZbO2bM7a4aewt_7oQ9k4d2EvJbY/s1600/img-1.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCLu8LVSHdbRtxBO5qMxBNBsfQcyg_Y1kz0s1Xnd-IGUWsMSYwYFa1Nam_LuSZiiv0J26O9JCMehsRk0X4Tgv5rBB62nzqUoeqIY-jL_ygNvELq2mJY5Gdb7tI4_tt3l1O8KoOIPCtM0/s1600/img-2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnwnulroxZZeMjdVLF7XIfolT9AKNwNRCjcK3JmUlZpi47bCJulWN4Pz8NBCV-05wZ0_6MI1cw0GY9_UZtuoQw-vK6p0bX0NX-HDY5x4_5hR8ClxVAg6xfe96wh7h2Wxr5vM8Bed2ewrI/s1600/img-3.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnhw6i8_R4ZPAGVO68y7qrhDGWK1hh66dUlZvQMGI1yVsrlWtRzJBxB4ctuutpTfHv8WrumRokmeucnZTrW923H833Q536xDXqn6HaiyB5WMGHyG5QCzdiE6QBHaXXcJ4PccfqUvvqQc/s1600/img-4.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJaPGQyrmxObWwh3xeqv3IHp5TuTxIAStdQLerVYbhuNh3hxgGfSGC-RBhJQUB7dozFuk-yvr7q-xPJPIIXo7JntBDhJs9fmkhIax73ps5_0ybY0356E9kjg7Fa7PfpvPQWI_PKjDmBpk/s1600/img-5.jpg

Saatnya penerapan hasil kerja Anda dengan penempatan HTML seperti ini:

<div class='slider-img'>
<input checked='' id='slide1' name='thumbnail' type='radio' /><label class='slide1' for="slide1"></label>
<input id='slide2' name='thumbnail' type='radio' /><label for="slide2" class='slide2'></label>
<input id='slide3' name='thumbnail' type='radio' /><label for="slide3" class='slide3'></label>
<input id='slide4' name='thumbnail' type='radio' /><label for="slide4" class='slide4'></label>
<input id='slide5' name='thumbnail' type='radio' /><label for="slide5" class='slide5'></label>
   <div class='pic'>
   </div>
</div>

Seseorang akan terlihat senang jika apa yang sebelumnya tidak mereka ketahui, tetapi dapat dengan mudah membuatnya, karenanya tutorial tentang Galeri Gambar Efek Slider Desain Terbaru kali ini, saya persembahkan terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.

Semoga bermanfaat. Happy blogging..!!

10 Pilihan Efek Loading Blog

10 Pilihan Efek Loading Blog - Ini bukan pilihan tentang bagaimana cara mempercepat loading blog, karena Tips Membuat Proses Loading Blog Semakin Cepat sudah pernah saya bahas pada artikel sebelumnya. Hal ini terinspirasi saat saya mengunjungi sebuah blog yang sudah beberapa kali sering di buat menunggu halaman komentar terbuka, dan selama menunggu diberikan tampilan efek loading yang seperti Anda sudah pasti mengenal dan melihat efek seperti ini:

Please wait...!!

Baca juga - Penyebab Menurunnya Kualitas SEO Pada Blog


Semua Template yang digunakan untuk rangka blog, saya yakin pasti memiliki efek loading blog, hanya saja tampilan efek animasi yang berbeda-beda. 10 pilihan efek loading blog kali ini, bisa Anda jadikan referensi untuk memberikan hasil tampilan yang berbeda pada efek sebelumnya. Tenang saja, rangkaian kode ini tidak akan memberikan beban berat pada speed blog Anda, karena saya menyusun kode ini tanpa JavaScript. Hanya menggunakan efek CSS-animasi keyframes untuk memberikan objek gerakan dengan kode ini:

@keyframes logopulse {
  0% {
    margin: 0 1px;
    opacity: 1;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
  100% {
    margin: 0 8px;
    opacity: 0.1;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}

@keyframes dotleftpulse {
  0% {
    margin-left: 1px;
    opacity: 1;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
  100% {
    margin-left: 8px;
    opacity: 0.1;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}

@keyframes dotrightpulse {
  0% {
    margin-right: 1px;
    opacity: 1;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
  100% {
    margin-right: 8px;
    opacity: 0.1;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}

Sehingga Anda akan mendapatkan hasil efek loading yang berbeda pula dan terlihat lebih keren seperti tampilan di bawah ini:





DEMO SHOW




Pekerjaan Anda belum selesai sampai disana, Anda perlu membangun tema objek geraknya dengan pengaturan CSS seperti ini:

.section h3 {
  height: 60px;
  margin: 0;
  line-height: 60px;
  font-weight: 300;
  text-align: center;
  font-size: 20px;}

.loading-container {height: 60px;text-align: center;}
.loading-container:before {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";}

.loading {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  backface-visibility: hidden;}
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  font-smoothing: antialiased;
  osx-font-smoothing: grayscale;}

.icon-logo {
  margin: 0 5px;
  font-size: 18px;
  color: #7FFF00;
  animation: logopulse 500ms alternate infinite;}

.icon-logo.poop {font-size: 50px;}
.icon-logo:before {content: "NOW";}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  vertical-align: middle;
  border-radius: 100%;}

.dot.left.one {animation-delay: 150ms;}
.dot.left.two {animation-delay: 300ms;}
.dot.left.three {animation-delay: 450ms;}
.dot.left {
  margin-left: 5px;
  animation: dotleftpulse 500ms alternate infinite;}

.dot.right.one {animation-delay: 150ms;}
.dot.right.two {animation-delay: 300ms;}
.dot.right.three {animation-delay: 450ms;}
.dot.right {
  margin-right: 5px;
  animation: dotrightpulse 500ms alternate infinite;}

Selanjutnya, kita panggil elemen kelas CSS diatas dengan pengaturan HTML seperti ini:

<div class="section bouncy">
  <h3>Loading</h3>
    <div class="loading-container">
      <div class="loading">
        <div class="dot left three"></div>
          <div class="dot left two"></div>
            <div class="dot left one"></div>

<i class="icon icon-logo"></i>
   <div class="dot right one"></div>
     <div class="dot right two"></div>
       <div class="dot right three"></div>
      </div>
    </div>
</div>

SELESAI...

Bagaimana, apakah diantara 10 Pilihan Efek Loading Blog diatas sudah Anda temukan yang sesuai dengan tampilan blog Anda?. Jika sudah ketemu, saya menunggu respon sahabat semua pecinta SAHABAT BLOGGER 77 di kolom cerita dibawah.

Sampai ketemu..!!

Membuat Teks Berkedip Dengan Animasi Blink

Membuat Teks Berkedip Dengan Animasi Blink - Elemen blink digunakan untuk membuat teks berkedip, namun efek ini tidak dapat bekerja pada semua vendor browser. Kita buat contoh seperti ini misalnya:

<blink>SAHABAT BLOGGER 77</blink>

Coba lihat hasil tampilannya pada browser chrome, teks tidak berkedip seperti yang kita harapkan, tetapi elemen ini masih dapat bekerja pada M.fx (Mozilla Firefox pada versi-versi tertentu). Membuat penasaran, mencari tahu apa sih penyebabnya?, dan alhamdulillah sampai sekarang saya belum menemukan solusinya,hehe..!! mungkin sahabat setia pecinta SAHABAT BLOGGER 77 dapat membantu rasa penasaran ini, Devy tunggu ya di kolom komentar.

Sambil menunggu pemecahan masalah ini, Membuat teks berkedip tidak harus selalu dengan elemen blink, Anda bisa membuatnya dengan penggunaan CSS untuk memainkan peran warna menggunakan efek animasi seperti ini:

<style type="text/css">
.anim-blink {
  color: white;
  margin:0 auto;
  font-size: 55px;
  position: relative;}

@keyframes noise-anim {
  0% {clip: rect(3px, 9999px, 77px, 0);}
  5% {clip: rect(92px, 9999px, 90px, 0);}
  10% {clip: rect(20px, 9999px, 53px, 0);}
  15.0% {clip: rect(49px, 9999px, 67px, 0);}
  20% {clip: rect(98px, 9999px, 83px, 0);}
  25% {clip: rect(81px, 9999px, 18px, 0);}
  30.0% {clip: rect(79px, 9999px, 34px, 0);}
  35% {clip: rect(33px, 9999px, 33px, 0);}
  40% {clip: rect(3px, 9999px, 48px, 0);}
  45% {clip: rect(30px, 9999px, 65px, 0);}
  50% {clip: rect(59px, 9999px, 34px, 0);}
  55.0% {clip: rect(59px, 9999px, 70px, 0);}
  60.0% {clip: rect(22px, 9999px, 49px, 0);}
  65% {clip: rect(1px, 9999px, 51px, 0);}
  70% {clip: rect(76px, 9999px, 88px, 0);}
  75% {clip: rect(49px, 9999px, 75px, 0);}
  80% {clip: rect(74px, 9999px, 84px, 0);}
  85.0% {clip: rect(95px, 9999px, 76px, 0);}
  90% {clip: rect(97px, 9999px, 1px, 0);}
  95% {clip: rect(91px, 9999px, 89px, 0);}
  100% {clip: rect(15px, 9999px, 17px, 0);}}

.anim-blink:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -3px 5px red;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;}

@keyframes noise-anim-2 {
  0% {clip: rect(99px, 9999px, 75px, 0);}
  5% {clip: rect(27px, 9999px, 55px, 0);}
  10% {clip: rect(2px, 9999px, 33px, 0);}
  15.0% {clip: rect(75px, 9999px, 57px, 0);}
  20% {clip: rect(12px, 9999px, 84px, 0);}
  25% {clip: rect(98px, 9999px, 13px, 0);}
  30.0% {clip: rect(50px, 9999px, 25px, 0);}
  35% {clip: rect(70px, 9999px, 48px, 0);}
  40% {clip: rect(71px, 9999px, 8px, 0);}
  45% {clip: rect(8px, 9999px, 99px, 0);}
  50% {clip: rect(11px, 9999px, 2px, 0);}
  55.0% {clip: rect(33px, 9999px, 49px, 0);}
  60.0% {clip: rect(74px, 9999px, 86px, 0);}
  65% {clip: rect(52px, 9999px, 62px, 0);}
  70% {clip: rect(30px, 9999px, 88px, 0);}
  75% {clip: rect(46px, 9999px, 14px, 0);}
  80% {clip: rect(86px, 9999px, 68px, 0);}
  85.0% {clip: rect(42px, 9999px, 24px, 0);}
  90% {clip: rect(91px, 9999px, 57px, 0);}
  95% {clip: rect(57px, 9999px, 60px, 0);}
  100% {clip: rect(78px, 9999px, 67px, 0);}}

.anim-blink:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 3px 5px #39f;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;}
</style>
<div class="anim-blink" data-text="SAHABAT BLOGGER 77">
SAHABAT BLOGGER 77</div>

DEMO SHOW



Walau tidak seindah tampilan blink, tetapi hasilnya lumayan cantik dan keren bukan..!! Karena disana kita hanya membuat ilustrasi untuk memanipulasi pergantian warna dengan pengaturan nilai-nilai pada ►text-shadow, seperti saat Anda Menciptakan Efek Pelangi Pada Text.

Fungsinya bisa Anda jadikan untuk membuat "BANNER LINK" atau untuk membuat rasa ketertarikan pembaca dengan membuat teks berkedip pada judul widget di blog Anda.

Selamat berinovasi ya..!! happy blogging.

Contoh Bentuk-Bentuk Konsep Animasi

Contoh Bentuk-Bentuk Konsep Animasi - Langkah penting untuk mendapatkan dan membuat bentuk sebuah konsep animasi adalah properti yang digunakan untuk memanggil dan mengendalikan jumlah gerak yang dihasilkan dari prefiks keyframes animasi. Itu sebabnya jika kita ingin membuat sebuah bentuk konsep animasi, disana akan terdapat kode @keyframes yang harus kita tuliskan seperti ini:

//durasi
@keyframes (NAME-YOUR-ANIMATION) {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

//multiple step
@keyframes (NAME-YOUR-ANIMATION) {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

//combinasi animasi
@keyframes (NAME-YOUR-ANIMATION) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Jika Anda mengatakan konsep animasi merupakan elemen gerak untuk menjalankan objek dengan jumlah 2 kali gerak yang selalu bergantian, maka saat Anda membuat bentuk animasi yang memiliki awal dan akhir yang sifatnya sama, salah satu cara untuk melakukannya adalah dengan memisahkan koma pada awal 0% sampai akhir 100%, karena nilai-nilai pada individu properti animasi adalah ruang kosong. Sedangkan untuk nilai urutan bisa Anda tentukan sendiri, kecuali untuk nilai durasi dan delay seperti ini:

1s = duration, 2s = delay, 3 = iterations.

Update.!
Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, sampai pada akhir urutan animasi, yang kemudian akan berbalik keawal secara otomatis.

CONTOH BENTUK KONSEP ANIMASI
Berikut beberapa contoh bentuk elemen gerak yang dapat di hasilkan dari konsep properti keyframes animasi:

# ROTASI BLINK COLOR

<style type="text/css">
#color-blink {
  background:black;
  text-align:center;
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px black,
    178px 0 0 -20px red,
    -178px 0 0 -25px black,
    -178px 0 0 -20px red,
    0 0 0 20px black,
    0 0 0 30px red,
    0 0 0 130px black,
    0 0 0 135px red;
  -moz-animation: rotate 3s linear infinite;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;}

#color-blink:before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:black;
  border: 5px solid #00FF7F;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px #00FF7F;
  -moz-animation: reverseRotate 3s linear infinite;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;}

#color-blink:after {
  content: " ";
  position: absolute;
  height:280px;
  width:280px;
  left:-90px;
  top:-90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index:2;
  -moz-animation: segmentRotate 300s linear infinite;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;}

@keyframes rotate {
  0%   { transform: rotate(  0deg); } 
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black;
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px #40E0D0,
      -178px 0 0 -25px black,
      -178px 0 0 -20px #40E0D0,
      0 0 0 20px black,
      0 0 0 30px #40E0D0,
      0 0 0 130px black,
      0 0 0 135px #40E0D0;}
  12.5%, 37.5%, 62.5%, 87.5% {
    background: #FFFF00;
    box-shadow:
      178px 0 0 -25px #39f,
      178px 0 0 -20px #39f,
      -178px 0 0 -25px #39f,
      -178px 0 0 -20px #39f,
      0 0 0 20px black,
      0 0 0 30px #39f,
      0 0 0 130px black,
      0 0 0 135px #39f;}   
  100% { transform: rotate(360deg); }}

@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); } 
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px magenta; }
  12.5%, 37.5%, 62.5%, 87.5% {
    background: magenta; box-shadow: 0 355px 0 -5px magenta, 0 355px 0 0px magenta; }   
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }}

@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }}
</style>
<div id='color-blink'>
SAHABAT BLOGGER 77
</div>

Hasilnya:




DEMO SHOW



Disana Anda bisa menyaksikan beberapa contoh bentuk-bentuk konsep animasi dengan berbagai variasi. Namun perlu diketahui, dengan CSS-animasi (syntax @keyframes) itu tidak semudah yang Anda bayangkan untuk membuat objek gerak seperti ini. Anda perlu mendapatkan dukungan pada browser yang Anda gunakan seperti :

syntax animasi:
  @-webkit-animation for ( Chrome, Safari 4+ )
  @-moz-animation for ( Fx 5+ )
  @-o-animation for ( Opera 12+ )
  @animation for all browser ( IE 10+, Fx 29+ )

Terkadang demi untuk mempersingkat atau memperpendek potongan kode, [( mengatakan: dengan penggunaan -webkit dan -moz pada halaman yang tidak menggunakan prefiks adalah tidak valid )] penggunaan kode ini sering tidak di ikut sertakan saat membuat konsep animasi, sehingga hasilnya tidak dapat bekerja saat ditampilkan. Tetapi pada dasarnya dengan menyertakan kode tersebut wajib kita gunakan untuk mendapatkan dukungan pada semua vendor browser.

Animasi, seperti transisi, dapat mengubah elemen halaman dari waktu ke waktu. Dalam membuat dan membentuk konsep Animasi yang lebih kuat dan lebih kompleks, Anda perlu mendeklarasikan animasi dengan sintaks khusus sebelum Anda dapat menggunakannya, dan menentukan nilai untuk beberapa properti pada persentase yang berbeda dari awal sampai akhir animasi selesai (keyframes). Kemudian ketika Anda akan menggunakan dan menampilkannya, ada banyak nilai-nilai yang dapat Anda tentukan untuk tampilan konsep animasi Anda. Sehingga dengan semua itu, maka disana akan banyak terdapat bentuk animasi yang menarik untuk di saksikan.

Pelajari lebih lanjut pada LINK-SUMBER di bawah ini:

• Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi
• Memahami Dengan Mudah Bentuk Kinerja CSS Animasi

Menampilkan Gambar Berbeda Saat Hover

Menampilkan Gambar Berbeda Saat Hover - Apakah Anda selalu Menampilkan Gambar di setiap postingan blog?, namun coba sentuh (hover) gambar tersebut, apa yang terjadi?. Tutorial kali ini saya akan coba menciptakan ilustrasi untuk menampilkan gambar berbeda (Gambar ke- 2) saat gambar di postingan Anda di hover oleh mouse, sehingga Anda mempunyai 2 buah gambar, namun yang terlihat hanya 1 gambar yang tampil, karena gambar yang kedua sudah disembunyikan jauh yang tidak dapat di jangkau oleh tangan kita, tetapi dengan cepat akan datang saat Anda memanggilnya untuk menemani gambar pertama. (setia banget ya gambarnya, hehe..!!).

Pertama kita rangkai dahulu media penyimpanan untuk gambar kedua dengan pengaturan CSS position seperti ini:

img2 {
  position: fixed !important;
  position: absolute; /*internet expoler-6*/
 
  //lay-out posisi tampil
  top: -1000px;
  left: -980px;
  bottom: -1000px;

  //jarak tampilan gambar
  padding:0 15px 0 0;
  margin: 0 auto;
}

Maka untuk Menampilkan Gambar Berbeda Saat Hover sudah bisa Anda nikmati dengan berbagai gaya seperti tombol DEMO SHOW di bawah ini:




DEMO SHOW



Saatnya menampilkan ilustrasi tersebut untuk menampilkan gambar kedua, hanya jika gambar pertama di hover dengan CSS seperti ini:

#descript span {display: none;}
#descript a:hover span {
  position:absolute;
  margin:0 0 0 -240px;
  display: inline;
  -webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}

<div id="descript">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qin1ZhzixGvb1ZeVSMpjveXnKnMeFNfIopX2MUKSLa0qbUz6bxTHHKRpQJh4DryIiWeV44MSGLTAHny0t1dNN6N3KtRjMLKQQM-L8KTuil8JLYSUuANesro4f-2w8SNgJaQ0eLWyXKM/s1600/mobil-1.jpg" width="240" height="165"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyTP6332fMY00SddqCrj0_Ave5xFQa4WJ0BLEoXp_fEBUNC7qAEWB6J7cZvrF4Egera0jnzQp_8QkseIHfpoaTeKDitwyM9eygUGJry2LYm0MdrtMaiS4-9neYPhfTnPm4n8nHScW6bU/s1600/mobil-2.jpg" width="240" height="165"></span></a>
</div>

Sekarang kita coba dengan tampilan yang berbeda, menggabungkan perintah CSS-animasi untuk menghasilkan gaya tampilan gambar saat di hover dengan elemen perintah seperti ini:

#descript span {display: none;}
#descript a:hover span {
  position:fixed !important;
  position:absolute;
  display: inline;
  margin: 0 0 0 10px;
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}


@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

Dan hasilnya:




DEMO SHOW



Bagaimana, menarik bukan.? hehe...!!
Seperti artikel sebelumnya tentang Mengubah Variasi Tooltip Dengan Efek Transisi. Hal ini sama dengan pekerjaan "TOOLTIP" yang menampilkan teks saat link dihover.

Jika Anda sudah Mengenal Elemen CSS Animasi Dan Transisi, maka saya yakin untuk menampilkan gambar yang berbeda dari tutorial kali ini akan dengan mudah Anda ciptakan.

Referensi URL - Memahami Dengan Mudah Bentuk Kinerja CSS Animasi

Membuat Animasi Teks Berputar Efek 3D

Membuat Animasi Teks Berputar Efek 3D - Efek gerak pada sebuah teks hanya bisa dihasilkan dengan penggunaan CSS-animasi, dari efek berputar, efek berjalan dan hover show. Sedangkan rotate, preserve-3d, falling effect dan lain sebagainya merupakan sebuah atribut untuk menentukan gaya atau style efek. Yang terpenting adalah nilai efek yang akan Anda ciptakan, seperti tampilan teks kali ini, saya akan coba membuat animasi teks berputar dengan Efek 3D (3 Dimensi).

Namun sebelumnya, saya akan membahas sedikit ulasan tentang bentuk dan ragam efek animasi yang dapat kita buat, diantaranya:

1. Motion Anime
Ini merupakan objek gerak pada sebuah simbol, yang berfungsi untuk menerangkan perasaan dengan gambar bergerak (motion effect). Dan efek seperti ini sering kita gunakan untuk mengganti teks pada kolom komentar seperti "Smile" yang kita tulis dengan simbol :)


2. Animasi Marquee
Pergerakan objek dengan penggunaan kode <marquee>...</marquee> sudah dapat membuat objek dapat bergerak, namun karena penggunaan efek ini tidak semua peramban dapat mendeteksi, animasi marquee sudah sangat jarang digunakan sebagai penghasil efek gerak.
Hasilnya Baca - Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan


3. Animasi Fade
Animasi gerak dengan cara pemudaran elemen objek, seperti objek akan berubah pudar saat digerakkan atau sebaliknya. Animasi seperti ini juga bisa dikategorikan sebagai fade in (pemudaran ke dalam) dan fade out (pemudaran keluar).
Hasilnya Baca - Kumpulan Ragam Efek Pada Gambar


4. Blink
Blink adalah efek gerak dengan style "berkedip". Biasanya efek ini banyak digunakan untuk menarik perhatian, seperti membuat banner, tampilan gambar space Iklan dan lain sebagainya.
Hasilnya Baca - Menciptakan Efek Pelangi Pada Text


5. Transform Shape
Gerakan untuk mengubah bentuk objek menjadi objek lain dan berbeda, seperti gambar menjadi teks dan teks menjadi gambar. Animasi seperti ini disebut juga dengan Morph Effect.
Hasilnya Baca - Membuat Teks Descripsi Pada Gambar Hover


6. Animasi Rotasi (Berputar)
Seperti efek gerak putaran pada jarum jam, baling-baling dan lainnya, efek seperti ini disebut animasi rotasi.
Dan Hasilnya:




DEMO SHOW



Buat sahabat setia pecinta SAHABAT BLOGGER 77, barang kali menginginkan efek rotasi seperti ini untuk Membuat Animasi Teks Berputar Efek 3D, cukup Copy kode elemen dibawah ini, lalu tempatkan dimana Anda ingin menampilkannya seperti ini:

<style type="text/css">
@-webkit-keyframes spinner {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(-360deg);}}

@-ms-keyframes spinner {
  from {-ms-transform: rotateY(0deg);}
  to {-ms-transform: rotateY(-360deg);}}

@-o-keyframes spinner {
  from {-o-transform: rotateY(0deg);}
  to {-o-transform: rotateY(-360deg);}}

@keyframes spinner {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(-360deg);}}

@-moz-keyframes spinner {
  from {-moz-transform: rotateY(0deg);}
  to {-moz-transform: rotateY(-360deg);}}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
  background: rgba(0,0,0,0.5);}

#spinner, #spinner p {
  background: rgba(0,0,0,0.5);
  text-align: center;
  color: #fff;
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;

  -moz-animation-name: spinner;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 6s;

  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;}

#spinner:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;}
</style>
<div id="stage">
   <p id="spinner">
       Hover Me.!! To Stop
   </p>
</div>

Anda bisa mengambil alternatif untuk mengganti teks dengan ucapan "Well Come To My Blog" misalnya, lalu tempatkan diarea wilayah Header atau halaman Beranda.
Dan semoga Cara Membuat Animasi Teks Berputar Efek 3D pada kesempatan kali ini dapat memberikan manfaat buat sahabat semua. Happy blogging guys..!!