Penyebab Artikel Tidak Muncul Dalam Penelusuran

Penyebab Artikel Tidak Muncul Dalam Penelusuran - Ini ibarat sebuah pertanyaan : "Apakah situs Anda ada di Google indeks (Hasil Penelusuran), lalu dimana posisinya.?" Semua itu adalah mutlak hak Google indeks untuk menempatkan sebuah situs diposisi yang semestinya, jadi jika saat ini artikel dalam situs Anda ada diurutan posisi 50, 77 atau bahkan 100, maka disanalah letak yang semestinya berdasarkan perhitungan algoritme Google data, karena kita hanya sebagai pengguna, setelah google malakukan perhitungan, perayapan dan menjelajah semua isi konten, Google akan menentukan apakah situs tersebut layak dan relevan untuk ditempatkan diposisi pertama hasil penelusuran atau tidak. Namun sebelum itu mari sama-sama kita cari tahu apa Penyebab Artikel Tidak Muncul Dalam Hasil Penelusuran.

Google mempunyai tujuan untuk memberikan hasil yang sangat relevan untuk setiap kueri yang Anda tuliskan dalam sebuah artikel. Setelah Google melakukan indeks, maka hasilnya akan ditampilkan dalam urutan posisi penelusuran, perhatikan Cara Kerja Google Merayapi Situs. Perkembangan Indeks penelusuran Google terus berkembang secara konstan, semua ini karena milyaran situs yang ditambahkan dan juga adanya perubahan konten di beberapa situs web. Setiap konten yang berubah, serta adanya pembaharuan dalam setiap algoritme peringkat dalam data indeks, dapat menyebabkan URL akan berpindah posisi di hasil penelusuran, bahkan akan terhapus walaupun kemungkinannya sangat kecil.

Itu sebabnya terkadang saat artikel berada di posisi pertama penelusuran yang kemudian berpindah posisi di urutan bawah bisa terjadi, penyebabnya mungkin karena keterkaitan situs yang ditautkan kehalaman lain tidak baik, karenanya dengan Mendaftarkan Artikel Blog Agar Terindex Google perlu kita lakukan untuk memberitahu google saat artikel baru dibuat.

Apabila artikel atau situs Anda tidak muncul dalam hasil penelusuran Google, atau semakin rendah tingkat kemunculannya, lakukan langkah-langkah berikut ini untuk mengidentifikasi dan memperbaiki kemungkinan Penyebab Artikel Tidak Muncul Dalam Penelusuran:

• Cek apakah situs Anda sudah masuk dalam database Google indeks
• Periksa apakah situs Anda telah dipengaruhi oleh tindakan spam manual
• Permudah Google untuk menemukan dan merayapi situs Anda
• Pastikan bahwa Google dapat mengindeks situs Anda
• Pastikan konten Anda bermanfaat dan relevan

Cek apakah situs Anda sudah masuk dalam database Google indeks
* Lakukan penelusuran site:
Saat webmaster memeriksa dan memberitahu bahwa ada situs yang tidak masuk dalam hasil telusur, mungkin situs masih dalam tahap indeks sampai akhirnya akan ditampilkan dalam hasil penelusuran. Untuk mengetahui dengan cepat apakah situs Anda masih di indeks atau tidak, cukup lakukan pencarian situs dengan mengetikkan keseluruhan URL. Jika situs Anda ditampilkan, itu berarti situs tersebut telah masuk dalam indeks Google.

Akan tetapi, jika situs Anda tidak ditampilkan atau tidak ada dalam data indeks Google, mungkin situs Anda telah dihapus karena melanggar Petunjuk dan Ketentuan Google Webmaster. Tinjau ulang dengan mengikuti petunjuk-petunjuk pada webmaster, setelah Anda melakukan perbaikan adanya masalah pada situs, kirimkan kembali pertimbangan untuk di indeks ulang.

* Verifikasi situs untuk nama domain
Coba ketikkan dalam penelusuran Google dengan URL seperti ini: www.[domainAnda].com. Jika situs Anda tidak muncul dalam hasil, atau jika peringkatnya buruk di hasil penelusuran, hal ini merupakan tanda bahwa situs Anda mungkin memiliki tindakan spam manual akibat pelanggaran terhadap Pedoman Webmaster. Sebelum itu terjadi Tips Mencegah Komentar Spam Masuk Ke Situs bisa Anda coba untuk merawat situs Anda dari hal-hal seperti ini.

* Beritahu setiap kali Anda membuat artikel baru
Google tidak tahu jika Anda telah membuat artikel/konten baru apabila Anda tidak memberitahukan hal tersebut. Satu cara untuk mempercepat penemuan Google terhadap laman baru di situs Anda adalah dengan mengirimkan Peta Situs, sekalipun situs Anda sudah terdaftar dan telah masuk dalam data indeks Google.
Peta Situs adalah cara terbaik untuk memberi tahu Google tentang laman yang Anda anggap paling penting, konten baru ataupun konten yang diperbaharui.

Periksa apakah situs Anda telah dipengaruhi oleh tindakan spam
Saat Google bergantung pada sistem otomatis untuk merayap, mengindeks, dan melayani laman pada suatu situs, Google juga akan mengambil dan melakukan tindakan manual untuk mengoreksi kembali hasil indeks. Google akan sepenuhnya melindungi kualitas pada hasil penelusuran, jika situs Anda telah dipengaruhi oleh tindakan spam, maka Google akan mendemokasikannya serta manghapus situs tersebut dari semua hasil penelusuran. Tanda seperti ini akan diberitahukan melalui pesan dalam webmaster tool Google.

Permudah Google untuk menemukan dan merayapi situs Anda
Merayap adalah cara Googlebot menemukan laman baru, laman yang diperbarui untuk ditambahkan ke Google indeks. Proses perayapan akan dimulai dengan daftar URL pada laman situs tersebut, yang dihasilkan dari proses perayapan pada laman sebelumnya, dan dihubungkan dengan penambahan data peta situs yang disediakan oleh webmaster. Saat mengunjungi setiap situs, Googlebot akan mendeteksi setiap tautan yang ada pada tiap laman dan menambahkannya ke dalam daftar untuk dirayapi, seperti situs baru, perubahan terhadap situs yang ada, link mati atau link rusak (brokenlink) akan dicatat dan digunakan untuk memperbarui Google indeks, jadi jangan pernah menyimpan atau membiarkan tautan buruk dalam situs Anda, segera hapus dan musnahkan bila ada.

• Periksa situs terhadap adanya Kesalahan perayapan di Alat Webmaster, ini akan memberikan detail tentang URL di situs Anda yang saat google malakukan perayapan tidak dapat di akses. Jika Anda menemukan beberapa keselahan perayapan segera perbaiki, karena Googlebot akan mencatat setiap perubahan pada situs saat melakukan perayapan ulang dan beritahu hal itu untuk memperbarui indeks Google.
• Tata dan tinjau ulang struktur pada situs Anda dan pastikan dapat diakses dengan mudah, karena sebagian besar mesin telusur adalah berbasis teks. Jika Anda menggunakan JavaScript, HTML, gambar, untuk membuat tautan atau konten, Googlebot dan spider lainnya mungkin akan mengalami masalah saat merayapi situs Anda.
• Selalu pertimbangkan untuk membuat dan mengirimkan peta situs setiap ada laman baru dalam situs Anda, sekalipun situs Anda telah diindeks.

Pastikan bahwa Google dapat mengindeks situs Anda
Googlebot memproses setiap laman yang dirayapi untuk menyusun indeks dalam jumlah sangat besar, semua berisi kata yang ditemukan serta lokasi bahasa pada kata-kata tersebut pada setiap laman. Bukan hanya itu, googlebot juga akan memproses konten informasi yang didalamnya disertakan tag dan atribut, seperti tag judul dan atribut alt. Google dapat memproses berbagai jenis konten, namun kesulitan merayapi dan mengindeks jenis file tanpa tag dan atribut. Jadi pastikan Anda sudah melakukan hal yang benar dan tepat agar Google lebih mudah mengindeks situs Anda dengan cara Pemasangan Title Tag Dan Atribut Pada Link URL.

SAHABAT BLOGGER 77

Mesin telusur Google dan yang lainnya umumnya adalah mesin telusur yang berbasis teks, ini berarti Googlebot tidak dapat membaca teks yang disertakan dalam gambar atau di sebagian besar file multimedia selain file Flash, serta laman yang tersembunyi dibalik JavaScript. Dengan memastikan bahwa konten Anda berbasis teks dan dapat dibaca akan membantu konten Anda dapat diakses pengguna/pengunjung dan Googlebot dengan lebih baik.
Selengkapnya baca : Pentingnya Atribut | Title Tag Untuk Optimasi SEO

Pastikan konten Anda bermanfaat dan relevan
Ini merupakan cara dimana Anda memberitahu secara mudah buat pengguna untuk mereka melakukan KLIK pada salah satu artikel di situs Anda dari penelusuran. Kolom pertama menunjukkan hasil penelusuran Google tentang apa yang paling sering muncul dari situs Anda. Laman tersebut juga mencantumkan jumlah tayangan, jumlah klik, dan CTR (Rasio Klik-Tayang) untuk setiap kueri. Informasi ini sangat berguna karena memberikan wawasan tentang apa yang ditelusuri pengguna (kueri kata kunci), jika posisi dimana situs Anda selalu berada dalam urutan pertama, dipastikan jumlah tayangan dan kueri yang sering diklik pengguna di situs Anda akan selalu meningkat. Dalam hal ini adalah tentang pemahaman Bagaimana Menentukan Judul Artikel Yang Benar?

Menanggapi masalah ini, cobalah merevisi konten Anda untuk membuatnya lebih menarik dan relevan. Hindari penjejalan kata kunci, karena dapat menyebabkan peringkat situs Anda menurun, serta mempersulit pembaca. Selalu menganalisa Jumlah Kata Yang Ideal Untuk Membuat Artikel, dengan memahami cara pengguna melihat situs Anda, Anda dapat mengetahui cara terbaik untuk memikat pengunjung karena teks yang berguna serta deskriptif cenderung akan diklik oleh pengunjung.

Konten atau artikel yang berisi » Efek Gambar yang hebat dapat menjadi cara terbaik untuk mendatangkan lalu lintas yang banyak kesitus Anda, karenanya saat mempublikasikan gambar dalam tulisan artikel, pikirkan dengan baik bagaimana Anda menciptakan dan mengubah gambar tersebut agar bisa menarik perhatian mereka.

Perlu Diketahui :
Hampir tidak ada hal sedikitpun yang dapat dilakukan pesaing untuk mengganggu peringkat situs Anda atau menghapus situs Anda dari indeks Google, jadi Jika Anda saat ini mencemaskan tentang adanya situs lain yang menautkan ke situs Anda dalam bentuk salinan, sebaiknya hubungi webmaster dan melaporkan situs itu untuk di proses, karena Google tidak mengontrol konten laman dengan tindakan seperti itu, namun Google akan mengumpulkan dan mengelola laporan setiap informasi yang sebelumnya sudah dipublikasikan.

Tidak ada yang mudah, namun semua itu akan terasa sangat mudah bila kita mau belajar dan menganalisa setiap kesalahan yang tersemat dalam situs, jadi jika Anda merasa Google melupakan situs Anda atau lama mengindeks laman Anda, itu tidak benar. Terkadang, fluktuasi ataupun keterlambatan hasil telusur disebabkan oleh perbedaan di pusat data Google. Ada banyak pusat data, dan dipengaruhi beberapa faktor (seperti lokasi geografis dan lalu lintas penelusuran) untuk menentukan tujuan kueri yang dikirimkan, semua tergantung pada pusat data yang menangani kueri Anda saat ini.

Tips Mencegah Komentar Spam Masuk Ke Situs

Tips Mencegah Komentar Spam Masuk Ke Situs - Tidak ada yang bisa melarang seorang pembaca untuk masuk ke situs Anda dan menyisipkan komentar spam dalam bentuk teks, bahkan sekalipun Anda sudah menuliskan informasi singkat sebagai pemberitahuan kepada mereka (pengunjung blog) dengan Cara Membuat Pengaturan Pesan Untuk Berkomentar, tetapi pesan Anda tidak akan di hiraukan mereka, dan tetap saja mengotori situs Anda dengan tindakan jahat dengan sengaja Spammer. Jika hal semacam ini Anda biarkan, atau tidak berusaha untuk mencegah tindakan seperti itu, maka reputasi blog yang sudah Anda kelola sebaik mungkin akan cepat hancur hanya karena sebaris teks yang dituliskan pengunjung dalam bentuk komentar spam.

Komentar adalah cara yang terbaik bagi sesama blogger untuk membangun komunitas dan meningkatkan jumlah pembaca/pengunjung (trafik blog). Hanya masih banyak diantara mereka yang seringkali menyalahgunakan cara seperti ini dengan sengaja memberi komentar dalam bentuk Iklan Promosi, padahal Manfaat Sering Berkomentar Di Blog Lain itu akan sangat membantu untuk saling mengenal dan memberitahukan kepada orang banyak tentang situs Anda. Nah..!!! Jika Anda pernah menerima komentar (comment text) yang terlihat seperti iklan promosi atau tautan acak ke situs yang tidak memiliki hubungan, berarti Anda sedang menghadapi spam ulasan (sekalipun itu tidak berupa link AKTIF). Karena percuma jika Anda membalas komentar mereka dengan teks pemberitahuan untuk memperingati, atau menghapus komentar itu, dan yang pasti hal semacam itu akan masuk kembali diwaktu lain dan didalam artikel Anda yang lain.

Ada sebuah istilah "Semakin besar dan tinggi sebuah pohon, maka semakin besar pula hembusan angin untuk meniup pohon itu agar tumbang" sama seperti situs blog, karena tindakan seperti ini sudah menyerang dan meresahkan situs blog SAHABAT BLOGGER 77, biarkanlah hal ini terjadi di situs ini aja, jadi saya akan berikan beberapa ide dan tips untuk mengurangi atau mencegah komentar spam masuk ke situs web Anda dengan 6 tindakan :

1. Menggunakan alat anti-spam
1.1 CAPTCHA

Ini merupakan sistem audio atau alat pengembang situs web untuk mendeteksi profil pengunjung yang akan menuliskan komentar ke blog Anda. Umumnya kita sebagai sipemberi komentar akan disajikan dengan gambar yang terdistorsi, dimana dalam gambar tersebut ada sebuah perintah untuk mengetikkan huruf atau angka, inilah yang disebut dengan CAPTCHA, atau sebuah alat yang bekerja secara otomatis untuk membedakan antara komputer dan manusia. Layanan reCAPTCHA gratis milik Google sangat mudah diterapkan pada situs Anda, karena data yang dikumpulkan dari layanan tersebut akan digunakan untuk meningkatkan proses pemindaian teks sebelum akhirnya komentar pengunjung akan diterbitkan.

Cara ini cukup efektif untuk mencegah spam masuk ke situs Anda yang sengaja dibuat pengunjung. Proses ini juga dapat mengurangi jumlah pembaca iseng yang meninggalkan komentar di laman Anda dengan membuat profil pengguna palsu. Dan yang pasti cara ini akan mencegah mereka yang sengaja Mencari Backlink Melalui Kolom Komentar.


1.2 Aktifkan JavaScript Anti LINK AKTIF
Sebuah teks tautan yang di buat menjadi hyperlink, maka akan dituliskan dalam bahasa tag HTML seperti ini:

<a href="http://sahabatblogger77.blogspot.com/">LINK</a>

Jika situs Anda belum mengkonfirmasi atau tidak mengaktifkan perintah javascript untuk menolak tautan, maka saat pengunjung menuliskan teks komentar dengan bentuk bahasa tag seperti diatas, maka LINK AKTIF akan tertulis disana.
Caranya baca - Menghapus Link Dengan Mengaktifkan Deteksi Komentar Spam


2. Moderasi Komentar
Moderasi komentar merupakan penundaan komentar yang masuk, artinya tidak ada komentar yang akan muncul di situs Anda sampai Anda meninjau dan menyetujuinya secara manual. Tindakan seperti ini akan memberikan waktu yang banyak buat Anda untuk menyeleksi teks komentar mana yang nantinya akan Anda terbitkan, namun gunakan cara ini secara bijak, karena hal ini akan membuat pembaca merasa tidak dipercaya oleh Anda.

INFO :
Sebelum terkena masalah ini, blog ini menggunakan sistem auto approve on comment, tetapi untuk sementara blog SB-77 Design akan mengaktifkan moderasi Komentar, jadi saya selaku admin meminta maaf yang sebesar-besarnya atas ketidak nyamanan Anda berkomentar di blog ini. Masih dalam tahap pembersihan komentar dan link spam, jadi saya mohon maaf jika komentar Anda akan saya moderasi terlebih dahulu. Terimakasih..!!

3. Aktifkan Link Dengan Atribut "nofollow"
Ini adalah tag mikro format dari Google, yang artinya : "Jenis tautan apapun yang menggunakan atribut rel="nofollow" tidak akan menghambat sebuah situs untuk menghitung PageRank atau menentukan keterkaitan laman Anda dengan kueri pengguna". Sebagai contoh misalnya, jika seorang spammer menuliskan sebuah teks dengan tautan seperti ini:

<a href="http://www.URL.com">Teks Komentar</a>

maka secara otomatis tautan itu akan langsung dikonversi menjadi:

<a href="http://www.URL.com" rel="nofollow">Teks Komentar</a>

Artinya, tautan atau link dengan pemberian atribut seperti itu tidak akan mempengaruhi situs Anda saat google melakukan penghitungan PageRank. Akan tetapi tautan/link seperti itu tidak akan mencegah spam, hanya membantu menghindarkan situs Anda dari masalah saat melewati PageRank, karena link tidak dikaitkan.
Selengkapnya baca - Sedikit Pembahasan Tentang Atribut Nofollow


4. Blok Beberapa Laman Dengan Robots.txt Atau Tag META
Dengan file robot.txt Anda dapat memblokir akses Google ke beberapa laman disitus Anda. INGAT..!! gunakan file ini secara hati-hati, karena salah memberi batas akan berakibat situs blog Anda diabaikan oleh Google-crawl.

Spam bukan bersumber dari komentar pengunjung saja, tetapi beberapa widget yang menampilkan tautan link didalamnya juga sumber spam, seperti buku tamu, recent comment, about profil komunitas dan masih banyak lagi. Arsipkan beberapa widget yang menurut Anda bisa mendatangkan tindakan spam, dengan begitu widget akan tetap aman dipasang karena hal ini akan menghalangi Google mengindeks laman Anda yang berada dalam berkas robot.txt

Pikir dua kali jika Anda ingin mengaktifkan bukutamu.
Banyak spam yang pasti tidak memberikan kesan baik tentang situs Anda. Jika fitur seperti widget buka tamu tidak menambahkan banyak nilai pada pengguna atau widget yang bisa bermanfaat buat pengunjung situs Anda, bahkan Anda tidak punya banyak waktu untuk memonitor dan mengelola bukutamu itu secara teratur, pertimbangkan untuk mematikan fitur buku tamu seperti itu, atau jangan pernah terapkan disitus Anda. Sebagian besar perangkat lunak blogging, seperti Blogger khususnya, akan mengharapkan Anda untuk tidak menggunakan fitur tersebut jika untuk penempatan unsur individual.

5. Menghapus Profile Yang Mengandung Spam
Biasanya hal ini bisa kita temukan saat mengKLIK sebuah tautan, namun tautan tersebut tidak tersedia. Dalam hal ini adalah profil palsu yang tertanam pada sebuah komentar yang tertaut kedalam domain yang sama, saat Anda menemukan satu saja profil yang berisi spam, segera HAPUS untuk selamanya (terlebih dalam komentar bertingkat).


6. Periksa Situs Anda Dari Laman Yang Mungkin Berisi Spam
Tindakan ini adalah salah satu cara untuk memantau situs Anda saat akan menerbitkan konten baru yang menarik, singkatnya membuat sebuah lansiran konten dengan sebuah alat Google Alerts. Mungkin Anda tidak akan pernah menyadari, saat menulis sebuah artikel bisa saja disana tertulis beberap teks yang mengarah pada konten khusus dewasa, namun semua teks yang tertulis akan terdeteksi sebagai kata kunci saat Google melakukan perayapan ke situs Anda. Dengan alat ini, Anda bisa menolak untuk tidak muncul di situs Anda.
Google Alerts juga dapat membantu mendeteksi laman yang diretas, jadi ini adalah sebuah tips yang bagus untuk memeriksa penggunaan kata kunci dari kosa kata volatil yang tidak diinginkan secara berkala.


Mungkin informasi tips seperti ini tidak sepenuhnya saya pahami, karena secara individu lebih ke web-design. Namun hal ini saya alami dan hampir membuat situs ini hancur hanya karena komentar spam. Jadi sebelum hal yang sama terjadi di situs blog Anda, saya memberikan 6 Tips Mencegah Komentar Spam Masuk Ke Situs, dan berharap semoga mereka yang suka spam cepat sadar dan taubat, hehe..!! semoga bermanfaat dan akhir kata saya ucapkan terimakasih.

2 Efek Berbeda Dalam 1 Tampilan Gambar

Scale And Rotate Effect

2 Efek Berbeda Dalam 1 Tampilan Gambar - Selain widget-widget keren yang Anda sisipkan untuk membuat tampilan blog semakin cantik, menampilkan gambar dalam postingan juga dapat membuat pembaca betah berlama-lama di blog Anda. Karena dengan adanya gambar dalam sebuah informasi artikel, akan menjelaskan apa tujuan dan alur cerita yang tertulis dalam postingan tersebut, namun untuk menarik perhatian mereka, Anda harus membuat gambar tersebut dengan tampilan yang berbeda. Seperti gambar di postingan dengan Efek Zoom Gambar Mode Slide Teks misalnya, saat pengunjung asyik membaca tulisan Anda, dan pada saat itu pula efek dalam gambar itu memberikan kesan takjub saat panah mouse mereka menyentuh gambar itu.

Pertemuan kali ini, seperti biasa saya akan berikan 2 model efek yang berbeda, namun efek itu bisa terjadi dalam 1 tampilan gambar. Scale effect merupakan pergerakan transisi suatu objek menjadi membesar dalam satu batas area, sedangkan Rotate effect adalah gerakan berputar saat cursor mouse berada diatasnya.
Contoh efek » Katakan Cinta Dengan Tampilan Gambar Efek Rotate

Semua itu hanyalah sebuah pilihan, mana yang menurut Anda menarik untuk dipasang di post Anda. Sekarang kita tinggalkan cerita model-model efek diatas, karena saatnya meramu 2 efek berbeda diatas untuk digabungkan dalam 1 tampilan gambar dengan resep kode CSS seperti ini:

<style type="text/css">
/* Scale And Rotate Effect In Hover Image
Data: Pure CSS input
Visit: http://sahabatblogger77.blogspot.com/
Released Publish on April 20, 2015
Design Author: Devy Indriyani */
.scaleRot {
  position:relative;display:inline-block;overflow:hidden;width:300px;height:200px;
  margin:10px;cursor:pointer;border:4px solid #fff;box-shadow:0 0 3px #777}

.scaleRot span {
  background:rgba(0,0,0,.42);position: absolute;color:yellow;
  font:bold italic 10px Verdana,sans-serif;padding:180px 0 0 10px;z-index: 1;
  width:300px;height:200px;display: block;top: 0;transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out}

.scaleRot img {
  width:100%;height:100%;-webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;transition: all 1.5s ease-in-out}

.scaleRot:hover img {
  -moz-transform: scale(1.2) rotate(10deg);
  -webkit-transform: scale(1.2) rotate(10deg);
  transform: scale(1.2) rotate(10deg)}

.scaleRot:hover span {
  opacity:0;transition: .01s linear;-moz-transition: .01s linear;
  -webkit-transition: .01s linear;-webkit-transition: .01s ease-out;
  -moz-transition: .01s ease-out;transition: .01s ease-out}
</style>

Dan hasilnya :




DEMO SHOW



SELESAI..!! tinggal menaruh URL gambar pada HTML seperti ini, namun ganti terlebih dahulu teks kode yang saya beri warna MERAH dengan gambar posting Anda, dan beri title gambar tersebut dengan mengganti tulisan pada teks warna ORANGE seperti ini:

<div class="scaleRot">
   <img alt="SB-77 Design" src="http://URL-Gambar.jpg" />
      <span>SB-77 Design</span>
</div>

Mudah, simple dan menarik. Saya yakin setelah ini pengunjung yang bertamu di blog Anda akan bermain-main dengan gambar itu, sehingga akan terfokus untuk tertarik membaca semua pesan dalam tulisan posting Anda.
Selamat Berkreasi guys..!! dan mimpi yang indah ya, bay....!!!

Animasi Gambar Berjalan Ala SB-77

Animasi Gambar Berjalan Ala SB-77

Cara Membuat Gambar Berjalan Dengan CSS - Pekerjaan untuk membuat gambar berjalan diblog seperti ini hanya membutuhkan syntax CSS media keyframes animasi, tujuannya untuk membuat gambar bergerak ataupun berjalan sesuai perintah yang menjadi target dengan animation-infinite (gerakan tak terbatas). Sebagai contoh saat Anda akan membuat teks berjalan dengan efek marquee, pada beberapa browser peramban efek ini dapat bekerja dengan baik, namun IE (Internet Explorer) tidak dapat membaca efek seperti marquee data, sehingga objek akan tetap diam tidak bergerak sesuai yang Anda perintahkan.

Efek slide selalu menggunakan perintah JavaScript didalamnya, dalam CSS syntax keyframes seperti inilah yang digunakan untuk menggantikan perintah js jika ingin membuat gambar berjalan dengan efek gerak animasi yang harus kita tuliskan seperti ini:

@keyframes left-right {
0% {left:0;transform:translate(-100%, 0)}
100% {left:100%;transform:translate(-100%, 0)}}

@keyframes right-left {
0% {right:0;transform:translate(0, 0)}
100% {right:100%;transform:translate(100%, 0)}}

Perhatikan media diatas, disana saya menggunanakan 1 konsep properti-duration, namun dengan 2 fungsi gerakan : left-right (30s) dan right-left (35s). Gambar diposisi pertama akan berjalan dari kiri kekanan, dan gambar diposisi kedua akan berjalan dari kanan kekiri dan akan berbalik setelah gambar ditampilkan semua seperti ini:




DEMO SHOW

BACA JUGA

Image Slider Effect With CSS Only




Bagaimana.? pekerjaan yang cukup mudah bukan.!!, yang terpenting saat membuat objek gerak seperti ini adalah nilai pada masing-masing target, sehingga gambar yang Anda jadikan target bisa berjalan mengikuti perintah pada nilai-nilai durasi yang sudah Anda tentukan. Namun sebelum itu efek ini akan bekerja sempurna pada All peramban browser jika semua perintah syntax Anda tuliskan disana. (Baca Selengkapnya ► Memahami Dengan Mudah Bentuk Kinerja CSS Animasi)


Cara Membuat Gambar Berjalan Dengan CSS
Penerapan Element
1.1 CSS Input

<style type="text/css">
.picSB-77 {position:relative}
.picSB-77__list {position:absolute;height:244px;white-space:nowrap}
.picSB-77__list:nth-child(1) {top:0px}
.picSB-77__list:nth-child(2) {top:247px}
.picSB-77__list:nth-child(3) {top:494px}
/* Jika ingin menambahkan lebih banyak gambar lagi,
letakkan kode fungsinya disini dengan nilai selisi top:247px */

.picSB-77__list--img-css1 {
  animation:left-right 30s infinite;
  animation-direction:alternate;
  animation-timing-function:linear}

.picSB-77__list--img-css2 {
  animation:right-left 35s infinite;
  animation-direction:alternate;
  animation-timing-function:linear}

.picSB-77_item {
  display:inline-block;
  overflow:hidden;
  height:244px;
  box-sizing:border-box;
  margin-right:3px;}

@keyframes left-right {
0% {left:0;transform:translate(-100%, 0)}
100% {left:100%;transform:translate(-100%, 0)}}
@keyframes right-left {
0% {right:0;transform:translate(0, 0)}
100% {right:100%;transform:translate(100%, 0)}}
</style>

1.2 HTML Markup

<div class='picSB-77'>
  <ul class='picSB-77__list picSB-77__list--img-css1'>
<li class='picSB-77_item'><img alt='pic1' class='picSB-77_image' src='URL-gambar'></li>
<li class='picSB-77_item'><img alt='pic2' class='picSB-77_image' src='URL-gambar'></li>
<li>...Tambahkan lebih banyak gambar lagi disini...</li>
....
  </ul>

  <ul class='picSB-77__list picSB-77__list--img-css2'>
<li class='picSB-77_item'><img alt='pic1' class='picSB-77_image' src='URL-gambar'></li>
<li class='picSB-77_item'><img alt='pic2' class='picSB-77_image' src='URL-gambar'></li>
<li>...Tambahkan lebih banyak gambar lagi disini...</li>
....
  </ul>
</div>

Semoga pertemuan kita kali ini dalam pembahasan Cara Membuat Gambar Berjalan Dengan CSS dapat memberikan inspirasi buat sahabat semua pecinta SAHABAT BLOGGER 77. Semoga bermanfaat, terimakasih and happy blogging

Icon Media Share With Hover Slide

Icon Media Share With Hover Slide - Salah satu cara meningkatkan trafik blog agar banyak yang mengenal dan berkunjung ke blog Anda adalah dengan berbagi (membagikan ulang artikel blog) ke sosial media seperti facebook like, twitter dan google plus share. Namun sangat tidak mungkin blog Anda mendapat kunjungan minimal 1000 pageview/hari jika itu hanya Anda yang melakukannya, Anda harus bisa mengajak pengunjung untuk melakukan hal yang sama.

Jika berkunjung ke blog lain bisa Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking, maka dengan membuat dan memasang widget icon media share di blog juga tidak kalah penting, karena widget tombol share seperti ini akan sangat-sangat membantu untuk memperkenalkan keberadaan blog Anda ke orang banyak. Untuk membuat pengunjung tertarik membagikan ulang beberapa artikel di blog Anda, tampilan widget tombol share seperti ini banyak saya modifikasi dengan berbagai efek, beberapa diantaranya bisa Anda lihat pada TAB Artikel dibawah ini:

• Article-1
• Article-2
• Article-3

Membuat Tombol Share Terbaru Efek Transisi

Desain Icon Media Share Dengan Efek Transisi - Cara terbaik membantu reputasi blog agar dikenal banyak orang adalah dengan membagikan ulang artikel blog ke situs-situs media sosial seperti google plus, facebook dan twitter...
► Baca Selengkapnya

Tombol Share Bouncing Fixed Shadow

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalu media Facebook, 20 orang dari Twitter dan 20 orang dari Google Plus, maka blog Anda sudah mendapat kunjungan 60 visitor dalam sehari untuk 1 posting atikel...
► Baca Selengkapnya

Cara Mudah Membuat Tombol Share Di Blog

Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share...
► Baca Selengkapnya

Icon media share kali ini saya bentuk dengan tampilan yang berbeda, saya hanya mengambil nilai seberapa banyak pengunjung yang sudah membagikan ulang artikel blog Anda untuk ditampilkan disana, dan untuk melihat hasilnya saya hubungkan dengan efek hover slide seperti ini:




DEMO SHOW



Semua akan saya buat mudah, pada masing-masing icon media sudah aktif saat widget ini terpasang di blog Anda, artinya pengunjung yang membagikan ulang artikel blog Anda akan ditampilkan dengan jumlah angka, tanpa Anda melakukan edit kode ID akun pada icon media target, karena pada HTML pemanggil masing-masing data icon sudah saya sertakan perintah JavaScript aktif untuk mengambil URL-data saat pengunjung melakukan share, kode lengkapnya seperti ini:

<div id="media">
   <div class="facebook share"> // Icon media Facebook
     <i class="icon"><i class="icon-facebook"></i></i><div class="slide">
         <p>facebook</p></div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe>
   </div>
   <div class="twitter share"> // Icon media Twitter
     <i class="icon"><i class="icon-twitter"></i></i><div class="slide">
         <p>twitter</p></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">Tweet</a>
<script>
  !function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
      js=d.createElement(s);
      js.id=id;
      js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
   </div>
   <div class="google share"> // Icon media Google+
     <i class="icon"><i class="icon-google-plus"></i></i><div class="slide">
         <p>google+</p></div>
            <div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
   </div>
   <div class="linkedin share"> // Icon media Linkedin
     <i class="icon"><i class="icon-linkedin"></i></i><div class="slide">
         <p>linkedin</p></div>
<script type="IN/Share" data-counter="right"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
    lang: en_US
  </script>
   </div>
</div> <!..ending id tag 'media'..!>

Pekerjaan sudah selesai, tinggal membuat bentuk rangka tampilan pada masing-masing icon media. Konsepnya kita bentuk dengan susunan CSS element, akan tetapi jika Anda kurang menyukai bentuk tampilan widget seperti diatas, Anda bisa merubah tampilannya sesuai keinginan dan warna di blog Anda, silahkan Anda edit beberapa kode CSS berikut untuk membuat tampilan tombol share lebih keren lagi dari ini, CSS lengkapnya sebagai berikut:

#media {
  border-radius: 5px;
  padding: 14px 7px;
  background: white;
  width: 660px;
  overflow: hidden;
  margin: 50px auto 0;
  box-shadow:0 2px 3px rgba(71, 71, 71, 0.31)}

.share {
  background: #DCE0E0;
  position: relative;
  display: block;
  float: left;
  height: 40px;
  margin: 0 7px;
  overflow: hidden;
  width: 150px;
  border-radius: 3px}

.icon {
  display: block;
  float: left;
  position: relative;
  z-index: 3;
  height: 100%;
  vertical-align: top;
  width: 38px;
  border-radius: 3px 0px 0px 3px;
  text-align: center}

.slide {
  z-index: 2;
  display: block;
  margin: 0;
  height: 100%;
  left: 38px;
  position: absolute;
  width: 112px;
  border-radius: 0px 3px 3px 0px}

.slide p {
  font:400 16px Open Sans;
  border-left: 1px solid #fff;
  border-left: 1px solid rgba(255,255,255,0.35);
  left: 0;
  margin: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 100%}

.share .slide {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out}

.icon i {color:#fff;line-height:42px;text-shadow:1px 2px 1px #111}
.facebook iframe,.twitter iframe,.google #___plusone_0,
.linkedin .IN-widget {display:block;position:absolute;top:10px;z-index:1}
.linkedin .IN-widget {right:22px}
.facebook iframe {right:16px}
.twitter iframe {width:90px !important;right:5px}
.google #___plusone_0 {width:70px !important;right:15px}
.facebook:hover .slide,.twitter:hover .slide {left:150px}
.google:hover .slide,.linkedin:hover .slide {left:-150px}
.facebook .icon,.facebook .slide {background:#305c99}
.twitter .icon,.twitter .slide {background:#00cdff}
.google .icon,.google .slide {background:#d24228}
.linkedin .icon,.linkedin .slide {background:#007bb6}

Jika kode CSS diatas terlalu panjang, sangat banyak sehingga takut akan loading blog menjadi berat, bisa Anda ringkas dengan Cara Memperkecil Ukuran File CSS. Sampai disini dulu ya cerita dari Devy, next time saya akan memberikan widget yang lebih menarik lagi dari ini, semoga Icon Media Share With Hover Slide kali ini dapat bermanfaat buat sahabat semua pecinta SAHABAT BLOGGER 77 yang selalu setia berkunjung disini. Dan pastinya dapat membuat blog Anda lebih terkenal lagi dan sukses selalu. Amin..!!

Cara Memperkecil Ukuran File CSS

Meringkas | Kompres Data Element Kode CSS, HTML Dan JavaScript

Cara Memperkecil Ukuran File CSS - Setiap file yang Anda tambahkan secara langsung dalam area Template, seperti kode CSS, HTML, jQuery dan JavaScript, maka semakin bertambah pula baris dan kolom pada susunan struktur element HTML secara keseluruhan dalam Template Blog Anda. Resikonya waktu yang dibutuhkan browser untuk membuka halaman Anda akan bertambah, sehingga terjadi apa yang banyak dikeluhkan pengunjung dengan istilah "Loading Blog Berat".

Lalu bagaimana cara memperkecil ukuran file tersebut, namun tidak merusak bentuk tampilan yang diatur oleh masing-masing element tersebut?. Memperkecil ukuran file bukan dengan menghapus beberapa kode didalamnya, sehingga banyak sahabat yang menghapus beberapa widget yang menurut mereka dapat membuat loading blog menjadi berat, padahal widget itu sangat dibutuhkan untuk membuat tampilan blog semakin menarik, apakah perlu kita HAPUS..?

Jika widget itu dapat membuat tampilan blog Anda menjadi menarik dan cantik, mengapa harus dihapus.! cukup perkecil ukuran file kode yang mangatur widget tersebut, untuk melakukannya kita mulai dengan element CSS. Contoh file CSS dalam Template selalu terkonsep dengan struktur susunan seperti ini:

.span {
  position:absolute !important;
  width:100%;
  overflow:hidden;
  display:block;
  content:"";
  background-color: #39f;
  color:#111;
  font-family:"arial",georgia,sans-serif;
}

div .content {
  width:320px;
  height:186px;
  border-radius:10px;
  border:red 2px solid;
  font:bold italic medium Georgia;
  padding:10px 15px;
  color:#fff;
  background:#333;
}

// File CSS setelah diperkecil...
.span {position:absolute !important;width:100%;overflow:hidden;display:block;content:"";background-color: #39f;color:#111;font-family:"arial",georgia,sans-serif}
div .content {width:320px;height:186px;border-radius:10px;border:red 2px solid;font:bold italic medium Georgia;padding:10px 15px;color:#fff;background:#333}

Ukuran file CSS diatas tersusun dalam 2 baris perintah dengan 18 kolom, dan lihat setelah file diringkas atau diperkecil. Sekarang kita ambil sebuah widget dari » 2 Desain Tampilan Blockquote Info pada artikel saya sebelumnya, untuk mempermudah bagaimana cara memperkecil ukuran kodenya, saya akan tampilkan susunan CSS untuk membuat tampilan "Blockquote Skew".

File CSS susunan default

<style type='text/css'>
.skew-quote {max-width: 650px;font-family: 'PT Serif',serif;font-style: italic}
.skew-quote p {
  position: relative;margin: 0 10px;padding: 15px 0;
  font: italic 18px/24px 'PT Serif',serif;
  border-top: 4px double #8c8c8c;
  border-bottom: 1px solid #8c8c8c}

.skew-quote p:after {
  content: '';position: absolute;
  bottom: -9px;left: 42px;width: 15px;height: 15px;
  background: #333;border-left: 2px solid #8c8c8c;
  border-bottom: 1px solid #8c8c8c;
  transform: skew(45deg) rotate(-45deg)}

.skew-quote footer:before {content:'\201C';font:700 25px/normal serif;margin:6px}
.skew-quote footer {font-size: 14px;line-height: 20px;margin:8px 0 0 12%}
</style>
<blockquote class='skew-quote'>
   <p>Tulis Teks Anda Disini...</p>
       <footer>By. Devy Indriyani</footer>
</blockquote>

File CSS setelah diperkecil

<style type='text/css'>
.skew-quote{max-width:650px;font-family:'PT Serif',serif;font-style:italic}
.skew-quote p{position:relative;margin:0 10px;padding:15px 0;font:italic 18px/24px 'PT Serif',serif;border-top:4px double #8c8c8c;border-bottom:1px solid #8c8c8c}
.skew-quote p:after{content:"'';position:absolute;bottom:-9px;left:42px;width:15px;height:15px;background:#333;border-left:2px solid #8c8c8c;border-bottom:1px solid #8c8c8c;transform:skew(45deg) rotate(-45deg)}
.skew-quote footer:before{content:'\201C';font:700 25px/normal serif;margin:6px}
.skew-quote footer{font-size: 14px;line-height:20px;margin:8px 0 0 12%}
</style>
<blockquote class='skew-quote'>
   <p>Tulis Teks Anda Disini...</p>
       <footer>By. Devy Indriyani</footer>
</blockquote>

Tampilan widget tidak ada yang berubah, tidak ada yang rusak karena yang barusan Anda lakukan adalah membuang semua lekukan dalam setiap susunan CSS, menghapus tanda penutup disetiap akhir kode, sehingga dimensi ukurannya menjadi ringkas (sebaris). Untuk melihat hasilnya, silahkan COPY kedua file tersebut, tampilan widget sama bentuk namun widget mana yang lebih cepat terbuka, File CSS susunan default atau Ukuran file CSS setelah diperkecil, jika Anda sudah merasakan perbedaannya, maka lakukan hal yang sama pada semua susunan struktur kode HTML dalam Template Anda. Tanpa menghapus widget yang menurut Anda memberatkan loading blog, biarkan widget itu tampil disana, namun loading blog akan tetap cepat terbuka (fast loading).

Blog yang cepat terbuka akan membuat pengunjung betah bertamu diblog Anda, dan google sangat menyukai tampilan blog dengan kesederhanaan, terutama terhadap kecepatan muat halaman pada blog tersebut. Jadi jangan biarkan pengunjung menunggu terlalu lama untuk melihat halaman Anda, percepat loading blog Anda, namun tetap selalu setarakan dengan tehnik-tehnik SEO dengan memahami beberapa hal seperti dibawah ini:

• Cara Terbaik Mengoptimalkan SEO Pada Blog
• 6 Hal Pembuatan Judul Yang Deskriptif
• Penyebab Menurunnya Kualitas SEO Pada Blog
• 8 Hal Yang Perlu Dihindari Tentang Optimasi SEO

Widget Recent Post Show Hide Content

Widget Recent Post Show Hide Content - Recent post secara umum selalu menampilkan beberapa content item didalamnya, seperti:

• Gambar Posting
• Deskripsi content post
• Link read more (Baca Selengkapnya)

Akan tetapi saat link di KLIK, maka Anda akan diarahkan ke tab baru untuk melihat isi content secara menyeluruh, dan itu terjadi diluar halaman. Sekarang saya akan coba mendesain tampilan recent post blog Anda dengan effect SHOW (Content akan ditampilkan secara menyeluruh saat link (read more) di KLIK, dan seluruh isi content akan ditampilkan saat itu juga atau pada halaman yang sama), dan effect HIDE (Untuk menutup isi content ketampilan semula). Yang hasilnya akan tampil seperti ini:




DEMO SHOW

Pekerjaannya sama dengan spoiler box, dimana beberapa content kita sembunyikan, dan untuk melihat isi content seluruhnya dialihkan dengan perintah tombol "OPEN". Agar memudahkan semua pekerjaan Anda, beberapa pilihan spoiler box dibawah ini, bisa Anda jadikan referensi untuk menyembunyikan tampilan content post Anda, pilihannya lihat pada TAB Content dibawah ini:

Box Spoiler

• Box Spoiler Alert
• Konten Light Box With On Off
• Panel Slide Text Box
• Spoiler Box CSS3 Efek Toggle

Penerapan Content Recent Post
1.1 CSS input element

Efek show pada saat content ditampilkan akan mengikuti lebar halaman posting Anda, dengan efek transition membuat pergeseran content text tampil berjalan, kode lengkapnya seperti ini:

CSSfigure {
  margin: 0 0 1.3rem 0;
  -webkit-transition: 2s linear;
  -moz-transition: 2s linear;
  -ms-transition: 2s linear;
  -o-transition: 2s linear;
  transition: 2s linear;
  text-align:center}

figure img {max-width: 100%}
body {margin: -180px auto}
p {margin-bottom: 1.3rem }
article {margin-bottom: 3rem;position: relative;*zoom: 1}
article:before, article:after {content: "";display: table}
article:after {clear: both }
article figure {float: left;width: 32.5%}
article section:first-of-type {float: right;width: 62.5%}
article section:last-of-type {display: none;visibility: hidden}
section {
  -webkit-transition: 1.5s linear;
  -moz-transition: 1.5s linear;
  -ms-transition: 1.5s linear;
  -o-transition: 1.5s linear;
  transition: 1.5s linear}

input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute}

[for="read_more"] {
  position: absolute;
  bottom: -3rem;
  color:#fff;
  left: 0;
  width: 100%;
  text-align: center;
  padding: .65rem;
  background: #39f}

[for="read_more"]:hover {background: red}
[for="read_more"] span:last-of-type {display: none;visibility: hidden}
input[type=checkbox]:checked ~ section {display: block;visibility: visible;width: 100%}
input[type=checkbox]:checked ~ figure {width: 100%}
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {display: none;visibility: hidden}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {display: block;visibility: visible}

1.2 HTML Markup

Tampilan tema pada recent post sudah selesai kita bentuk, saatnya memanggil semua element CSS diatas untuk menampilkan hasilnya dengan perintah HTML seperti ini, namun sebelum itu, Anda ganti teks yang saya beri tanda dengan garis bawah, HTML lengkapnya seperti ini:

HTML<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick="">
   <span>Baca Selengkapnya</span>
   <span>Close Content</span>
</label>    
<figure><img src="http://URL-Gambar" alt="My Blog" /></figure>
   <section>
     <p>...Description text post...</p>
   </section>

   <section>
        <p>...Letakkan Content Anda Disisni...</p>
   </section>
</article>

Anda bisa modifikasi semua tampilan content recent post diatas, Anda tinggal meletakkan apa saja disana. Karena semua ini saya berikan khusus buat sahabat semua pecinta SAHABAT BLOGGER 77 yang selalu setia hadir memberikan kesan dan pesan lucu dalam kolom cerita komentar dibawah. Semoga postingan ini bermanfaar buat Anda semua. Happy blogging.

Concept Design CSS Box Shadow

10 Model Tampilan Box Dengan Efek Bayangan (Box Shadow)

Concept Design CSS Box Shadow - Concept kali ini merupakan penyempurnaan dari artikel sebelumnya tentang » Mengenal CSS Dasar Box Shadow, dimana pekerjaan sahabat semua pecinta SAHABAT BLOGGER 77 untuk membuat efek banyangan pada box akan saya permudah cara penerapannya. Dibawah ini sudah saya siapkan 10 pilihan bentuk design teks box dengan efek bayangan, Anda tinggal memilih model box yang mana untuk membuat teks box Anda terlihat lebih menarik. Penulisan kode lengkapanya seperti ini:

<style type="text/css">
.box-shadow {
  position: relative;float: left;width: 40%;padding: 1em;margin: 2em 10px 4em;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1),0 0 40px rgba(0,0,0,.1) inset}
.box-shadow:before,.box-shadow:after {content: "";position: absolute;z-index: -2}
.box-shadow p {font-size: 16px;font-weight: bold}

/* Lifted Corners */
.lifted {border-radius: 4px}
.lifted:before, .lifted:after {
  bottom: 15px;left: 10px;width: 50%;height: 20%;max-width: 300px;max-height: 100px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);-ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);transform: rotate(-3deg)}

.lifted:after {
  right: 10px;left: auto;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg)}

/* Curled Corners */
.curled {border: 1px solid #efefef;border-radius: 0 0 120px 120px / 0 0 6px 6px}
.curled:before, .curled:after {
  bottom: 12px;left: 10px;width: 50%;height: 55%;max-width: 200px;max-height: 100px;
  box-shadow:0 8px 12px rgba(0,0,0,.5);-webkit-transform:skew(-8deg) rotate(-3deg);
  -moz-transform: skew(-8deg) rotate(-3deg);-ms-transform: skew(-8deg) rotate(-3deg);
  -o-transform: skew(-8deg) rotate(-3deg);transform: skew(-8deg) rotate(-3deg)}

.curled:after {
  right: 10px;left: auto;-webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);-ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);transform: skew(8deg) rotate(3deg)}

/* Perspective Style */
.perspective:after {display: none}
.perspective:before {
  left: 80px;bottom: 5px;width: 50%;height: 35%;max-width: 200px;max-height: 50px;
  box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4);-webkit-transform: skew(50deg);
  -moz-transform: skew(50deg);-ms-transform: skew(50deg);-o-transform: skew(50deg);
  transform:skew(50deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;
  -ms-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%}

/* Raised Box */
.raised { box-shadow:
  0 15px 10px -10px rgba(0, 0, 0, 0.5),
  0 1px 4px rgba(0, 0, 0, 0.3),
  0 0 40px rgba(0, 0, 0, 0.1) inset}

/* Single Vertical Curve ( v1 ) */
.curved:before {
  top: 10px;bottom: 10px;left: 0;right: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);border-radius: 10px / 100px}
.curved.v2:before {right: 0}

/* Single Horizontal Curve ( h1 ) */
.curved.h1:before {top:50%;bottom:0;left:10px;right:10px;border-radius:100px / 10px}
.curved.h2:before {top:0;bottom:0;left:10px;right:10px;border-radius:100px / 10px}

/* Rotated Box */
.rotated {
  box-shadow: none;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg)}

.rotated > :first-child:before {
  content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 40px rgba(0,0,0,.1) inset}

/* Multi Shadow */
.multi {box-shadow:
  0 1px 1px rgba(0,0,0,0.15),
  0 10px 0 -5px #999,
  0 10px 1px -4px rgba(0,0,0,0.15),
  0 20px 0 -10px #ccc,
  0 20px 1px -9px rgba(0,0,0,0.15),0 0 40px rgba(0, 0, 0, 0.1) inset}
</style>

Dan pilihannya Seperti ini :




DEMO SHOW

TOOL BOX SHADOW

CSS3 Input Generator Box Shadow



Jika sudah menemukan style yang cocok, Anda tinggal memanggil pengaturan CSS diatas dengan perintah fungsi HTML seperti ini:

<div class="box-shadow lifted">// For shadow style lifted
  <p>Lifted corners</p>
</div>

<div class="box-shadow curled">// For shadow style curled
  <p>Curled corners</p>
</div>

<div class="box-shadow perspective">// For shadow style perspective
  <p>Perspective</p>
</div>

<div class="box-shadow raised">// For shadow style raised
  <p>Raised box</p>
</div>

<div class="box-shadow curved v1">// For shadow style curved (v1)
  <p>Single vertical curve</p>
</div>

<div class="box-shadow curved v2">// For shadow style curved (v2)
  <p>Vertical curves</p>
</div>

<div class="box-shadow curved h1">// For shadow style curved (h1)
  <p>Single horizontal curve</p>
</div>

<div class="box-shadow curved h2">// For shadow style curved (h2)
  <p>Horizontal curves</p>
</div>

<div class="box-shadow lifted rotated">// For shadow style rotated
  <p>Rotated box</p>
</div>

<div class="box-shadow multi">// For shadow style multi
  <p>Multi Shadow</p>
</div>

Sangat mudah dan sederhana bukan.!?, semoga concept yang saya berikan ini kelak bisa membantu sahabat semua untuk membuat tampilan teks box yang lebih menarik lagi, sampai disini dulu ya, waktunya bercerita dan berkirim-kirim salam di kolom komentar, Devy tunggu ya, hehe..!!

Efek Gerak Animasi Dengan CSS3

Efek Gerak Animasi Dengan CSS3 - Bila melihat sesuatu yang bergerak, sudah pasti kita ingin memperhatikannya. Efek seperti itulah yang sering digunakan pada sebuah tampilan banner iklan atau objek gambar, tujuannya hanya untuk menarik mata pengunjung agar tertarik dan betah berlama-lama berada disana.

Animasi bisa kita artikan sebagai element untuk membuat sebuah objek dapat bergerak secara otomatis atau tanpa ada perintah, akan tetapi fungsi penggunaan CSS-animation ini tidak dapat berdiri sendiri, artinya animasi effect hanya dituliskan untuk mengatur bentuk gerak pada objek target, sedangkan efek gerak akan dihasilkan dengan media keyframes (@keyframes [objek name]) seperti ini:

// Efek gerak dengan nilai persentasi
@keyframes text {
  0%{transform:rotateX(-5deg) rotateY(-50deg)}
  50%{transform:rotateX(10deg) rotateY(50deg)}
  70%{transform:rotateX(5deg) rotateY(70deg)}
  100%{transform:rotateX(-5deg) rotateY(-50deg)}
}

Selengkapnya Anda bisa pelajari pada Contoh Bentuk-Bentuk Konsep Animasi di postingan sebelumnya, karena disana sudah saya jelaskan bagaimana cara membuat efek gerak otomatis dengan CSS dan keyframes media syntax. Pertemuan kali ini saya akan memberikan efek ke- 11 lanjutan dari 10 Gaya Efek CSS Animasi Pada Teks, tampilan yang simple dan pekerjaan yang cukup mudah, tinggal Copy semua kode dibawah ini, lalu letakkan pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:

<style type="text/css">
.txt-css3{text-align:center;perspective:500}
.text{
  font:bold 60px/90px Tahoma;color:#DC143C;text-shadow:1px 3px 2px #111;
  animation:text 2s infinite;-webkit-animation:text 2s infinite;
  -moz-animation:text 2s infinite;border:4px solid;transform:skew(5deg);
  -webkit-transform:skew(5deg);-moz-transform:skew(5deg)}

@keyframes text {
0%{transform:rotateX(-5deg) rotateY(-50deg)}
50%{transform:rotateX(10deg) rotateY(50deg)}
70%{transform:rotateX(5deg) rotateY(70deg)}
100%{transform:rotateX(-5deg) rotateY(-50deg)}}

/* Support all peramban browser, use.. */
@-webkit-keyframes text { ... }
@-moz-keyframes text { ... }
</style>
<section class="txt-css3">
<article class="text">Sahabat Blogger 77</article>
</section>

Dan hasilnya :




DEMO SHOW



Sambil memahami susunan konsep CSS3 diatas, sambil bermain game yuk disini, ada hadiahnya loh, mau pilih game yang mana..?, tetapi jangan sampai KALAH ya, soalnya hadiahnya akan diberikan hanya kepada juara #1 (top one) saja, hehe...!! selamat bermain.

» Game Menyusun Angka
» Game Test Kecerdasan Ala SAHABAT BLOGGER 77
» Memory Game Picture With jQuery

Image Slider Effect With CSS Only

Membuat Efek SlideShow Hanya Dengan CSS

Image Slider Effect With CSS Only - Sebagian orang akan berpikir jika untuk membuat sebuah tampilan gallery gambar yang keren dengan efek slider/slideshow hanya bisa diterapkan dengan penggunaan perintah javascript, namun dengan menyusun fungsi-fungsi element CSS pengaturan seperti: label-link, radio type figure, hover checked pada sebuah objek target, maka Anda sudah bisa membuat gallery gambar efek slider hanya dengan menggunakan CSS. Pekerjaannya pun cukup mudah, sama seperti cara » Membuat Efek Figure According Pada Gambar di pembahasan sebelumnya, hanya bentuk desain tampilan saya modifikasi dengan menambahkan beberapa item seperti:

• Tombol NEXT dan PREV,
• Text deskripsi saat gambar di hover,
• Pagination number (saya ganti dengan thumbanail gambar),
• seperti tampilan gambar berikut:

Efek ini saya bentuk dari sumber ➞ CSS3 Slider Concept Design, lalu saya kembangkan untuk membuat sebuah tampilan Image Slider Effect, tanpa javascript perintah, semuanya hanya dengan CSS element seperti ini:

.slider {display: inline-block;padding: 3px;border: 2px solid #333;height:auto}
.slider input {display: none}
.slider img {vertical-align: top}
.slider label {cursor: pointer}
.slider-window {
 position: relative;margin-bottom: 20px;
 box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.7),
            0 1px 4px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(0, 0, 0, 0.2) inset}

.slider-window:hover figcaption {opacity: 1}
.slider-window>label {
 position: absolute;top: 0;bottom: 50px;left: 0;
 right: 0;display: none;z-index: 1}

.slider-window, .slider-preview {
 overflow: hidden;-webkit-transition: width 0.3s ease;
 -moz-transition: width 0.3s ease;-o-transition: width 0.3s ease;
 transition: width 0.3s ease}

.slider-images>figure {position: relative;display: inline-block;margin: 0}
.slider-images figcaption {
 position: absolute;padding-top: 13px;height: 40px;bottom: 0;
 left: 0;right: 0;color:#fff;background: rgba(204, 0, 0,.5);
 text-shadow: 1px 1px 3px #333;text-align:center;opacity: 0;
 -webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;
 -o-transition: opacity 0.3s ease;transition: opacity 0.3s ease}

.slider-thumbnails img {
 margin: 0 2.5px 4px 0;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.7);
 border:1px solid red;opacity: 0.75;-webkit-transition: opacity 0.3s ease;
 -moz-transition: opacity 0.3s ease;-o-transition: opacity 0.3s ease;
 transition: opacity 0.3s ease}

.slider-thumbnails img:hover {opacity: 1}
.slider-images, .slider-thumbnails {
 position: relative;white-space: nowrap;-webkit-transition: left 0.3s ease;
 -moz-transition: left 0.3s ease;-o-transition: left 0.3s ease;
 transition: left 0.3s ease}

/* Prev & Next buttons */
#img01:checked~.slider-window:hover>label[for="img02"],
#img02:checked~.slider-window:hover>label[for="img03"],
#img03:checked~.slider-window:hover>label[for="img04"],
#img04:checked~.slider-window:hover>label[for="img05"],
#img05:checked~.slider-window:hover>label[for="img06"],
#img06:checked~.slider-window:hover>label[for="img07"] {left: 50%;display: block}
#img01:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img02:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img06"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img07"]:hover:after {
 content: "Next";position: absolute;right: 0;color:#fff;
 text-shadow:1px 2px 1px #333;top: 20px;display: block;
 padding: 10px 30px;border-radius: 22px 0 0 22px;background: #39f}

#img02:checked~.slider-window:hover>label[for="img01"],
#img03:checked~.slider-window:hover>label[for="img02"],
#img04:checked~.slider-window:hover>label[for="img03"],
#img05:checked~.slider-window:hover>label[for="img04"],
#img06:checked~.slider-window:hover>label[for="img05"],
#img07:checked~.slider-window:hover>label[for="img06"] {right: 50%;display: block}
#img02:checked~.slider-window:hover>label[for="img01"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img07:checked~.slider-window:hover>label[for="img06"]:hover:after {
 content: "Prev";position: absolute;left: 0;color:#fff;
 text-shadow:1px 2px 1px #333;top: 20px;display: block;
 padding: 10px 30px;border-radius: 0 22px 22px 0;background: #39f}

/* Image */
#img01:checked~.slider-window>.slider-images {left:0px}
#img01:checked~.slider-window, #img01:checked~.slider-preview {width:600px}
#img02:checked~.slider-window>.slider-images {left:-600px}
#img02:checked~.slider-window, #img02:checked~.slider-preview {width:600px}
#img03:checked~.slider-window>.slider-images {left:-1200px}
#img03:checked~.slider-window, #img03:checked~.slider-preview {width:600px}
#img04:checked~.slider-window>.slider-images {left:-1800px}
#img04:checked~.slider-window, #img04:checked~.slider-preview {width:600px}
#img05:checked~.slider-window>.slider-images {left:-2400px}
#img05:checked~.slider-window, #img05:checked~.slider-preview {width:600px}
#img06:checked~.slider-window>.slider-images {left:-3000px}
#img06:checked~.slider-window, #img06:checked~.slider-preview {width:600px}
#img07:checked~.slider-window>.slider-images {left:-3600px}
#img07:checked~.slider-window, #img07:checked~.slider-preview {width:600px}

/* Thumbnails */
#img01:checked~.slider-preview>.slider-thumbnails {left:0px}
#img02:checked~.slider-preview>.slider-thumbnails {left:-120px}
#img03:checked~.slider-preview>.slider-thumbnails {left:-241px}
#img04:checked~.slider-preview>.slider-thumbnails {left:-361px}
#img05:checked~.slider-preview>.slider-thumbnails {left:-482px}
#img06:checked~.slider-preview>.slider-thumbnails {left:-602px}
#img07:checked~.slider-preview>.slider-thumbnails {left:-723px}

Hasilnya :





DEMO SHOW



Pada pengaturan CSS diatas, saya menyisipkan 7 buah gambar sebagai contoh. Selanjutnya Anda tinggal menambahkan beberapa gambar lagi sebagai koleksi sebanyak yang Anda mau, tinggal diatur nilai posisi left per selisih 600px pada gambar, dan 121px pada thumbanail jika dimensi gambar Anda berukuran 600x380 (width:600px dan height:380px).

Tahap akhir tinggal meletakkan URL-Gambar Anda pada pemanggil HTML dibawah ini. Tugas Anda cukup mengganti kode dan teks yang sudah saya beri WARNA sesuai perintah masing-masing area letak. Kode lengkapnya seperti ini:

<form class="slider">
<input type="radio" id="img01" name="img" checked="checked"/>
<input type="radio" id="img02" name="img"/>
<input type="radio" id="img03" name="img"/>
...
// Teruskan sebanyak gambar yang Anda inginkan
    <div class="slider-window">
       <label for="img01"></label>
       <label for="img02"></label>
       <label for="img03"></label>
       // teruskan...
           <div class="slider-images">
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic1.jpg" alt=""/></figure>
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic2.jpg" alt=""/></figure>
       <figure><figcaption>..Deskripsi Image..</figcaption>
          <img src="http://URL-Gambar/pic3.jpg" alt=""/></figure>
       ...
       // Tambahkan lebih banyak gambar lagi...
    </div><!..ending slider-images..>
    </div><!..ending slider-window..>

    <div class="slider-preview">
    <div class="slider-thumbnails">
       <label for="img01">
          // Gunakan url-gambar yang sama dengan (slider-images...)
          <img src="http://URL-Gambar/pic1.jpg" width="116" height="75" alt=""></label>
       <label for="img02">
          <img src="http://URL-Gambar/pic2.jpg" width="116" height="75" alt=""></label>
       <label for="img03">
          <img src="http://URL-Gambar/pic3.jpg" width="116" height="75" alt=""></label>
       ...
       // Tambahkan lebih banyak gambar lagi...
    </div><!..ending slider-thumbanails..>
    </div><!..ending slider-preview..>
</form>