Tutorial Menyusun Gambar Sejajar Pada Postingan

Tutorial Menyusun Gambar Sejajar Pada Postingan - Pembeli adalah RAJA, begitupun dalam blog pengunjung adalah segalanya, karena tanpa kehadiran mereka blog anda tidak akan ada artinya, untuk menghargai mereka yang singgah di blog anda, kita sebagai pemilik blog wajib memberikan yang terbaik untuk mereka komsumsi, agar nantinya mereka akan mengenali dan sayang dengan blog anda.
Dan salah satu hal yang terbaik dan menarik adalah terletak pada gambar postingan, itu sebabnya kenapa situs-situs dewasa yang menyediakan konten tentang nice HOT, SEX PICTURES dan semacamnya yang paling banyak dicari dikalangan browsing internet.

Sehubungan dengan itu kerapian dalam menyusun gambar pada postingan juga perlu diperhatikan, terlebih jika anda pemilik blog dengan GAMBAR SHARE sebagai tutorial utama, sehingga berapapun banyak gambar yang kita posting tidak akan memanjang kebawah, Gambar akan sejajar dan terlihat rapi pada postingan, andapun bisa menambahkan sedikit kalimat basa-basi setelahnya.

Lihat pola gambar dibawah ini

Pelajaran MATEMATIKA, menempatkan beberapa obyek pada 1 halaman, jika lebar halaman 900 dan obyek 250, maka berapa besar ukuran yang dibutuhkan untuk 1 obyek agar ketiga obyek tersebut dapat tersusun secara sejajar pada 1 halaman. Nah.! itu pelajaran Matematika, kalau untuk blog menggunakan KODE CSS Perhitungan ( Margin, Padding dan Float )

Dibawah ini hasil gambar setelah disusun menggunakan kode CSS Perhitungan, lebih terlihat rapi bukan.? dibanding memanjang kebawah. Dan gambarnya sudah saya sisipkan beberapa efek yang berbeda-beda, sehingga sedikit akan terlihat menarik saat klik pointer mouse.

Sedikit penjelasan tentang ketiga kode ini

1. MARGIN - Kode ini untuk mengatur jarak sisi layout keseluruhan suatu obyek, sehingga kita akan tahu untuk menentukan value-nya dengan PIXEL, EM atau PERSEN
2. PADDING - Sama dengan margin,tetapi kode ini hanya untuk menentukan jarak sisi pada isi obyek
3. FLOAT - Kode ini untuk menentukan posisi suatu obyek (right, center, left dan sebagainya)

OK dech.! Berikut Tutorial Menyusun Gambar Sejajar Pada Postingan mengunakan kode CSS perhitungan (Margin, Padding dan Float).

KODE OBYEK (Gambar. I)

<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo2 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}
.demo2:hover {opacity:0.2;}</style>
<div style="margin-left: 10%; margin-right: auto;">
<img class="demo2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bZvb_VU6h_CPFhwCjIVxACj0cZtoN3CEzdTAtGwYx86vSMFmIhrDztaDpWmeCJsuJIyPcr3p_J61RcekJTfoQYgyLox5msDPRt9l3H69l4Drnpla6SP-MQF3WTf22mCSxsA0JbpqM3c/s1600/130.png%3C/span>" /></div>

KODE OBYEK (Gambar. II)

<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo4 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo4:hover {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}</style>
<div style="margin-left: 40%; margin-top: -13.3em;">
<img class="demo4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifArJ1xCRYb2DDEbBnz1XZaNOnayeHE6_4QmstyV2rmJVf9VcSy8KDVBKq9YZfpbfWNOmce6s_3FqVIPv7YKt1CsRyqrVlJr8hA2M5duqCuE7bw_eeThaDu44RFzb4imdi2yurvs1xaXI/s1600/1000.jpg%3C/span>" /></div>

KODE OBYEK (Gambar. III)

<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo3 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:0.2;}
.demo3:hover {opacity:1;}</style>
<div style="margin-left: 70%; margin-right: auto; margin-top: -13.5em;">
<img class="demo3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKyVXnFlD0GUiG-017CjrbwQDp6TXoMzE4TPCbn_tYzNeOCcUi0Y9vlE27Udes8pisIiM1HBgpOiYlnw-oFKDxTx3U2efXlpeWBBIRw-kt6hKgjILY9CZcXYknu_yyt9SN8UFDax5EO6s/s1600/010.jpg%3C/span>" /></div>

Kode ini untuk tampilan hasil gambar sejajar diatas, saya sesuaikan dengan kondisi lebar halaman postingan blog saya, jika anda ingin copy kodenya silahkan anda ganti dahulu kodenya dan sesuaikan dengan lebar halaman postingan anda, namun jika anda menggunakan kode auto width layout pada Tempalte anda, cukup ganti text MERAH dengan URL gambar anda. Jika ingin menyusun gambar sejajar 4 kekanan dan 3 kebawah, berarti jumlah gambar ada 12, anda cukup atur ulang kode value pada MARGIN dan PADDING, dan gunakan kode FLOAT pada susunan gambar 1,4,5,8,9 dan 12

Semakin banyak gambar termuat,maka hasil tampilan gambar akan terlihat mengecil, anda boleh gunakan kode CSS3 untuk membuat efek Hover pointer klik untuk ZOOM gambar.

LIHAT KODE

Semoga Bermanfaat, dan jika mengalami kesulitan, yukk.!! tanyakan dikomentar, hehe..

HAPPY BLOGGING guys.!

Kumpulan Ragam Efek Pada Gambar

Kumpulan Ragam Efek Pada Gambar - Menyisipkan gambar pada sebuah artikel sangatlah penting, karena dengan adanya gambar pada artikel akan sedikit memperjelas tujuan dan makna dari artikel tersebut, tetapi tidak banyak yang melakukan modifikasi pada gambar artikelnya sehingga artikel yang terkesan fresh terlihat mati karena gambarnya tidak memberi kesan kepada pembaca, tetapi jangan memuat gambar 18+ (gambar HOT) ya, ntar tidak nyambung dengan konten, hehe..

Kali ini, SAHABAT BLOGGER 77 sudah menyiapkan beberapa kode CSS yang dapat anda kelola sendiri nantinya, untuk menciptakan efek baru pada gambar dengan style anda. Jika sebelumnya saya sudah pernah share Efek Remote Link Pada Gambar, kali ini saya akan berikan Kumpulan Ragam Efek Pada Gambar yang dapat anda pilih untuk mempercantik tampilan gambar pada artikel anda nantinya.

*/
.imagecss3 .hover {-webkit-transition:all .5s ease-out;transition:all .5s ease-out;transform:translate(0px,-10px);tranparent transparent #ce35aF transparent;border:solid transparent whitecrome;}
design by.http://sahabatblogger77.blogspot.com/script_jscss3
author:devyindriyani
.image {no margin,no padding,no float}
.demoimage .hover {id=class;opacity:0.2;1;all}
/*

Kode diatas jangan di copy ya! karena tidak akan menghasilkan apa-apa, saya hanya menggunakan kode CSS diatas untuk memberi efek dengan berbagai ragam pada gambar dibawah ini.

EFEK BUMPING

.demo1 {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
.demo1:hover {-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}

EFEK FADE OUT

.demo2 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}
.demo2:hover {opacity:0.2;}

EFEK FADE IN

.demo3 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:0.2;}
.demo3:hover {opacity:1;}

EFEK ROTASI

.demo4 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo4:hover {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

EFEK POINTER ZOOM

.demo5 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo5:hover {-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-ms-transform:scale(2,2);-o-transform:scale(2,2);transform:scale(2,2);}

EFEK FOTO CSS3

img.foto {background-color:#ffffff;border:0px;outline:none;padding:5px 5px 20px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);box-shadow:0 1px 3px rgba(0,0,0,0.7);}
img.foto:hover {-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}

EFEK CLEAR IMAGE

.efect {...}
.efect .hover {...}

Bagaimana? sudah menemukan ragam efek untuk gambar yang sesuai dihati anda? Tetapi pada efek foto CSS3 gambarnya jangan diambil ya, itu sudah ada yang punya, kalau kodenya silahkan dicopy bebas dan gratis, hehe.!

Saatnya menerapkan Kumpulan Ragam Efek Pada Gambar diatas pada blog

1. Anda boleh taruh kode pilihan anda pada HTML template, letakkan diatas atau sebelum kode ]]></b:skin>, namun jika takut edit kode templatenya, cukup tambahkan kode :
 <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>KODE DISINI</style> 
2. Kode-kode diatas sudah saya permudah susunannya menggunakan artribut ID(class="atribut gambar")dari angka 1,2 dan seterusnya, pada postingan cukup tambahkan kode class="kode atribut pilihan anda" mode HTML (bukan Compose)
   contoh misal pilihan anda efek bumping, maka kodenya akan seperti ini
   
   <style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
   .demo1 {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}
   .demo1:hover {-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}
   </style>
   <div class="separator" style="clear: both; text-align: center;">
   <img class="demo1" src="URL gambar anda.jpg" /></div>
3. Pada efek terakhir (efect clear image) value-nya masih kosong, silahkan anda tambahkan jika ada kode efek baru dari anda, saling berbagi kan pahalanya besar sob, saya tunggu kodenya dikolom komentar ya, hehe.!!
4. Dan tidak lupa saya ucapkan terimakasih, semoga Kumpulan Ragam Efek Pada Gambar ini dapat bermanfaat. I Miss U guys.! emmm...muachh,,daaaaa...!!

Efek Tumpukan Kertas Pada Laman Posting

Efek Tumpukan Kertas Pada Laman Posting - Secara berturut-turut saya memberikan banyak kode CSS untuk mengatur atau sekedar mempercantik tampilan sidebar widget, tidak satupun artikel saya yang menuju tentang pembahasan laman posting, karena apa yang bisa kita ubah dari laman tersebut, paling hanya memberi warna pada sisi bordernya saja, membuat efek transisi 3D bayangan pada lamannya, selebihnya ya untuk menuliskan artikel, upload gambar, publikasikan jadi dech artikel baru.

Tetapi setelah tadi iseng-iseng design HTML kode Template, ternyata laman posting ibarat sebuah kertas tempat kita menuliskan artikel, dan posisinya mempunyai kode tersendiri pada struktur template yang dapat kita ubah bentuk dan gaya tampilannya, dengan sedikit sentuhan CSS kode saya coba memberi tumpukan kertas baru pada laman posting, sehingga kolom posting yang biasa menampilkan artikel akan terlihat ada 3 kertas yang tertumpuk layaknya sebuah buku.

Berikut kode CSS yang saya tambahkan didalamnya, Saya menambahkan 2 lembar kertas dengan ukuran yang sama, 2 lembar kertas kosong dan 1 kertas untuk postingan, jadi ada 3 lembar kertas yang menumpuk

.paper1 {
  width:auto;                                                /*(830 + 0)*/
  background:#fff;
  border:1px solid #cecece;}
.paper1:before {
  width:754px;                                            /*(830 + 26)*/
  background:#fafafa;
  border:1px solid #ccc;}
.paper1:after {
  width:761px;                                           /*(830 + 31)*/
  background:#fafafa;
  border:1px solid #cecece;}

Hasilnya

Gambar diatas membuat saya tertarik untuk memberikan sedikit HOVER pointer klik pada kodenya, Kode ini akan mengatur tampilan back/kembali ke-dafault, detailnya jika postingan terbuka akan terlihat seperti biasanya, tetapi saat pointer klik mouse melintas, maka akan terjadi efek yang secara otomatis akan menampilkan tumpukan kertas baru yang kita beri pada kode pertama

Berikut kode CSS untuk memanggil efek tumpukan kertas untuk laman posting

.paper1 {
  padding:15px;
  height:100%;
  position:relative;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);}

.paper1:after, .paper1:before {
  content:'';
  bottom:-3px;
  height:100%;
  left:1px;
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}

.paper1:before {
  bottom:-5px;
  left:5px;}

.paper1:hover:after {
  -webkit-transform:rotate(-3deg) translate(-20px,0);
  -moz-transform:rotate(-3deg) translate(-20px,0);
  -ms-transform:rotate(-3deg) translate(-20px,0);
  -o-transform:rotate(-3deg) translate(-20px,0);
  transform:rotate(-3deg) translate(-20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}

.paper1:hover:before {
  -webkit-transform:rotate(3deg) translate(20px,0);
  -moz-transform:rotate(3deg) translate(20px,0);
  -ms-transform:rotate(3deg) translate(20px,0);
  -o-transform:rotate(3deg) translate(20px,0);
  transform:rotate(3deg) translate(20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}

Hasilnya

DEMO SHOW

Seperti biasa, saya akan selalu memberikan keterangan kode-kode CSS diatas agar pengunjung setia SAHABAT BLOGGER 77 dapat dengan mudah memahami dan meng-custom untuk penerapan pada blog. Mudah-mudahan Membuat Efek Tumpukan Kertas Pada Laman Posting dapat bermanfaat.

KETERANGAN KODE

1. Perhatikan kode I, Ada 3 CSS Code, 1 untuk tampilan default laman posting dan 2 kode berikutnya kertas kosong sebagai tumpukan, disamping masing-masing kode sudah saya beri ukuran yang sesuai dengan lebar laman posting saya, jadi silahkan sesuaikan karena template saya belum tentu sama dengan anda
2. Kita lanjut pada kode II, Kode ini untuk menentukan gaya tampilan hover efek tumpukan kertas postingan, ROTATE kecepatan untuk muncul saat pointer klik, sedangkan transisi adalah pemanggil efek-nya per second out. Jadi saya sarankan jangan mengedit kode ini jika belum yakin
3. Kode CSS diatas sudah saya susun pada tempat yang sebenarnya (No potition edit, OK guys.!!) dan membuang kode yang error, jadi kodenya aman untuk di komsumsi, hehe..!!
4. Saatnya penerapan ke Blog, Kita kembali lagi pada kode I, disana ada kode .paper1 {..}, kode ini sudah merupakan atribut class, jadi pada postingan cukup anda tambahkan class="paper1"

Contoh-

<div class="paper1">ISI TULISAN ANDA</div>

SELAMAT MENCOBA..!!

Cara Mudah Memberi Efek Pada Text Box

Cara Mudah Memberi Efek Pada Text Box - Text Area adalah salah satu cara termudah untuk memberi efek pada text sehingga tampilannya terlihat seperti box, kotak atau kubus. Penerapan kodenya juga cukup simple hanya dengan kode <textarea>ISI KONTEN</textarea> jadi dech sebuah box yang dapat kita tuliskan sebuah teks. Namun untuk menghasilkan yang lebih menarik dan elegan banyak cara yang bisa kita lakukan untuk sekedar memberi efek pada sebuah text box. Seperti minggu lalu tepatnya dihari kasih sayang saya turut menyapa pengunjung setia pecinta SAHABAT BLOGGER 77 dengan ucapan HAPPY VALENTINE DAY'S dengan balutan efek pita pada tex box-nya seperti ini:



TAMPILKAN



Nah kali ini saya akan memberikan beberapa kode yang dapat anda kembangkan dengan mudah untuk memberi efek pada text box sesuai kreatif anda masing-masing. Kita coba menggunakan kode default pembuka textarea dengan penggunaan kode seperti ini:

<style type="text/css">
.box-satu {
  background-color: #cecece;
  border-left: 5px solid green;
  padding: 10px; text-align: left;
  margin:0 0 0 10%;
}
</style>
<div class="box-satu">
....
ISI KONTEN
...
</div>

Maka hasilnya akan seperti ini:

SAHABAT BLOGGER 77 (http://sahabatblogger77.blogspot.com) berdiri sejak October 22, 2013 dengan Nice Blog Share tentang : Berbagi pengetahuan seputar Tutorial Blog, Blogging Tips, SEO informasi, CSS, HTML Coding Editing, Template Design, Informasi Umum dan Kehidupan Sosial yang di kelola oleh: Devy Indriyani

Tampilannya hampir sama dengan text area, kurang menarik dan terkesan biasa-biasa saja, Ok.!! sekarang mari kita timpah kodenya dengan penggunaan kode CSS berikut:

<style type="text/css">
.box-dua {
  background-color:green;
  border-left:5px solid red;
  border-right:5px solid red;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
  padding:10px;
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-radius:35px;
}

.isi-content {
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  background-color: #cecece;
  border-bottom: 1px solid red;
  border-left: 6px solid red;
  border-radius: 35px;
  border-right: 6px solid red;
  border-top: 1px solid red;
  margin:0 5px 0 5px;
  padding: 10px;
  text-align: left;
}
</style>
<div class="box-dua">
   <div class="isi-content">
....
ISI KONTEN
...
   </div>
</div>

Hasilnya :

SAHABAT BLOGGER 77 (http://sahabatblogger77.blogspot.com) berdiri sejak October 22, 2013 dengan Nice Blog Share tentang : Berbagi pengetahuan seputar Tutorial Blog, Blogging Tips, SEO informasi, CSS, HTML Coding Editing, Template Design, Informasi Umum dan Kehidupan Sosial yang di kelola oleh: Devy Indriyani

Kode diatas hanyalah kode yang biasa kita gunakan, kita edit untuk mendapatkan tampilan yang sesuai keinginan. Tidak sulit dan terasa mudah bukan? pada dasarnya anda harus memahami kode padding, margin, dengan jeli kapan harus menggunakan satuan pixel, em, untuk mengatur layout tampilan, karena kode padding dan margin hampir memiliki fungsi yang sama.

Coba Anda Perhatikan kode berikut, Saya menggunakan CSS default dasar untuk pembentukan text box seperti efek diatas. Namun kodenya akan saya gabungkan untuk menampilkan 2 efek yang berbeda dengan atribut class='note' dan class='note-radius'. Mari kita coba pisahkan efek apa yang dapat dihasilkan oleh kedua kode CSS ini:

//effect-1 style
.note {
  position:relative;
  width:30%;padding:1em 1.5em;
  margin:2em auto;
  color:white;
  background:#97C02F;
  overflow:hidden;}

.note:before {
  content:"";
  position:absolute;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:white white #658E15 #658E15;
  background-color:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  display:block;width:0;}

//effect-2 style
.note-radius {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;}

.note-radius:before {
  border-width:8px;
  border-color:white white transparent transparent;
  -webkit-border-radius:0 0 0 5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;}

Sampai pada tahapan ini Anda sudah memiliki 2 kode dengan efek yang berbeda, selanjutnya membentuk rangka kode untuk membungkus isi konten Anda dengan perintah HTML seperti ini:

<div class="note">
...
ISI KONTEN
...
</div>


<div class="note-radius">
...
ISI KONTEN
...
</div>

Maka kedua kode CSS diatas akan menghasilkan 2 efek pada text box seperti ini:

SAHABAT BLOGGER 77

SAHABAT BLOGGER 77

Bagaimana, mudah bukan.? demikian yang dapat saya sampaikan, semoga tutorial diatas dapat membantu anda memberi efek pada text box dengan mudah. SELAMAT BERKREASI
(February 23, 2014 By. Devy Indriyani)

Modifikasi Spoiler Box Dengan CSS3 Efek Toggle

Modifikasi Spoiler Box Dengan CSS3 Efek Toggle - Spoiler Box seperti yang sudah kita ketahui merupakan sebuah kotak yang kita gunakan untuk menyimpan sebuah text, gambar atau beberapa widget yang terdapat pada sidebar blog, namun jarang sekali yang menggunakan cara ini dikarenakan tampilan spoiler box yang default mode, sehingga pada pertemuan sebelumnya saya telah modifikasi spoiler box dengan tampilan PANEL HOVER, selengkapnya anda boleh baca artikel saya sebelumnya tentang Membuat Panel Slide Untuk Menyimpan Text.

Tidak jauh berbeda pada artikel sebelumnya, jika pada panel sebelumnya saya menggunakan sentuhan CSS default code, kali ini saya akan coba membalut kodenya dengan CSS3 Efek Toggle.

<div class="css3droppanel">
.codefile_design  .css3file {http://googlecode.com/sahabatblogger77.blogspot.com/input_css3code;}
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle">
div.css3droppanel {position: relative; margin: 0; margin-bottom: 1em;}
</ div>
</ label>

Coba perhatikan kode diatas, sekilas tidak ada kesalahan, namun coba kita kirimkan kode tersebut kepada W3C Validator, maka akan ada beberapa kode yang error, tidak mau bukan meng-copy kode yang error untuk HTML Template blog anda? hehe..!!
Mari kita modifikasi kode berikut dan kita kembangkan untuk menampilkan Spoiler Box Dengan CSS3 Efek Toggle versi terbaru. Kode dibawah ini akan saya susun dengan pemapatan EXTRA dan menempatkan susunan letaknya diarea yang benar, agar anda lebih mudah memahami dan meng-custom buat tampilan spoiler box pada postingan blog anda.

CSS3 Kode

div.css3droppanel {position: relative;margin-bottom: 1em;}
div.css3droppanel > div {height: 10px;padding: 5px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;background: #b5e5e0;position: relative;opacity: 0;-moz-transition: all 0.2s ease-in-out 0.1s;-o-transition: all 0.2s ease-in-out 0.1s;-webkit-transition: all 0.2s ease-in-out 0.1s;transition: all 0.2s ease-in-out 0.1s;}
div.css3droppanel:after {content: '';display: block;position: absolute;width: 100%;height: 10px;box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);}

div.css3droppanel input[type="checkbox"] {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;z-index: 10;cursor: pointer;opacity: 0;}
div.css3droppanel input[type="checkbox"]:checked ~ div {height: 250px;opacity: 1;overflow: auto;}
div.css3droppanel label {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;cursor: pointer;z-index: 5;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;}

div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;}
div.css3droppanel label:after {content: '';position: absolute;display: block;border: 12px solid transparent;border-color: white transparent transparent transparent;top: 18px;left: 18px;box-shadow: 0 0 7px gray inset;}

Kode HTML

<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="OPEN"> </ label>
<div class="content">
<p> TULIS TEKS ANDA DISINI </ p>

Buat semua kawan pecinta SAHABAT BLOGGER 77, jika ingin membuat Spoiler Box Dengan CSS3 Efek Toggle versi terbaru, berikut tutorial pemasangan kode css3 pada HTML Template anda

1. Pada dashboard pilih Template + SESUAIKAN + Tingkat Lanjut, selanjutnya gulir menu kebawah, lihat dan temukan icon tambahkan CSS
2. Cukup copy kode diatas pada kolom CSS3 Code, Paste kode tersebut pada tab halaman CSS, lihat gambar

3.  Terapkan ke Blog 
4. Selanjutnyan copy kode HTML diatas, letakkan pada halaman postingan mode HTML bukan Compose, ganti text Merah dengan tulisan anda
5. Tambahkan kode </div> </div> pada akhir tulisan anda
6. Publikasikan tulisan anda, jika anda melakukannnya dengan benar akan seperti ini tampilan hasilnya

DEMO

Efek Slidding Pada Gambar Postingan

Efek Slidding Pada Gambar Postingan - Gambar atau Foto merupakan sebuah kenangan, oleh karenanya banyak yang membuat tulisan atau sekedar kata-kata dibalik gambar, berawal dari gambar ini tercetus ide bagaimana menampilkan tulisan tersebut saat kita berada pada halaman depan gambar, seperti saat kita sedang melihat gambar/foto, pasti akan membalikkan foto itu untuk melihat tulisan yang ada dibaliknya, nah..istilah inilah yang disebut efek SLIDDING.

Slidding merupakan efek pergantian pada halaman depan ke halaman setelahnya atau halaman kedua, jika pada foto tepatnya seperti ALBUM FOTO. Tidak jauh berbeda dengan postingan saya sebelumnya tentang Membuat According Efek Pada Gambar, yang mana saya menumpuk gambar layaknya sebuah album, dan gambar tersebut dapat kita lihat satu persatu dengan pointer KLIK. Nah kali ini saya akan menampilkan tulisan-tulisan pada gambar menggunakan slidding efek dengan balutan CSS Code Image Box Wrapper

Persiapkan dahulu gambar anda dengan balutan kode seperti ini

<div class="image-box-wrapper" id="image-box-wrapper">
<!-- `.image-box` start -->
<div class="image-box">
<div class="image-container">
<img alt="Devy Indriyani" src="URL-gambar.jpg"/></div>

*//..kode berikut untuk memotong tulisan dibalik gambar
<div class="image-details">
<div class="details">
<h4>SAHABAT BLOGGER 77</h4>
<a class="more" href="URL-Anda" target="_blank">Teks Anda</a></div>
</div>
</div>
<!-- `.image-box` end -->
<div class="clear">
</div>
</div>

Maka hasilnya akan tampak seperti gambar berikut

Coba letakkan kursor anda pada gambar diatas, Slidding Efek pada gambar tidak merespon, pada tahap ini kita butuh CSS code untuk memanggil efeknya

.image-box-wrapper {
  width:642px;
  margin:50px auto;}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  -webkit-transition:margin-top .4s ease-out .4s;
  -moz-transition:margin-top .4s ease-out .4s;
  -ms-transition:margin-top .4s ease-out .4s;
  -o-transition:margin-top .4s ease-out .4s;
  transition:margin-top .4s ease-out .4s;}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;}

.image-details h4 {
  font-size:120%;
  height:auto;
  text-align:center;}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

KETERANGAN KODE

1. Dibawah kode <div class="image-container"> silahkan ganti dengan URL gambar anda
2. Kode <h4>SAHABAT BLOGGER 77</h4> merupakan tulisan yang ada dibalik gambar, silahkan ganti sesuai selera anda
3. Jika ingin menyertakan beberapa link pada tulisan, anda tinggal ganti kode yang saya beri warna Merah, namun jika tidak hapus saja

Penerapan Ke- Blog

1. Kode CSS sudah pasti meletakkan pada HTML Template, silahkan buka Template anda,lalu Klik icon EDIT HTML, Copy CSS lalu Paste diatas atau sebelum  ]]</b:skin> 
2. Namun jika anda lagi tidak ingin utak-atik HTML Template (Dikarenakan takut terjadi error), kita lakukan pada postingan
3. Tambahkan kode berikut <style .CSSfile {sahabatblogger77.blogspot.com;}> sebagai tag pembungkus diawal kode CSS, dan akhiri dengan tag penutup </style> diakhir kode CSS
4. Jika ingin menerapkan pada postingan, copy semua kodenya pada mode HTML bukan Compose, namun jangan lupa untuk menambahkan kode pada poin ke-3

Jika sudah OK, maka hasilnya akan seperti gambar berikut ini

SAHABAT BLOGGER 77

Follow My Blog

NICE BLOG SHARE
Tutorial Blog | CSS & HTML Code | Template Design | Blogging Tips | SEO Information

Kode diperbaharui pada Wednesday April,09 2014

Kirim Link Berhadiah Backlink | Mau?

Kirim Link Berhadiah Backlink | Mau? - Jika ada kesempatan cara ini hampir setiap saat kita lakukan, berupaya sebisa mungkin untuk menanam link pada sebuah situs yang ber-pagerank tinggi, terlebih jika situs tersebut ber-atribut dofollow, jika link berhasil terkirim sudah pasti backlink sebagai hadiahnya. Tetapi cara tersebut tidak semudah yang kita harapkan, selain tidak tersedianya profil link untuk berkomentar, moderasi juga turut sebagai syarat yang diaktifkan oleh sipemilik situs, sehingga kesempatan klik kanan pada link komentar akan menunggu persetujuan apabila komentar kita di approve.

Profil Name/URL pada box komentar merupakan cara tercepat untuk kirim link, akan tetapi sangat jarang sekali pilihan ini diikut sertakan oleh sipemilik situs pada kolom komentarnya, masih ada kesempatan ke-dua yaitu dengan OpenID, tetapi tahukah anda? berkomentar dengan openID ini sudah dilarang oleh mbah google, google menganggap cara ini adalah cara licik hanya demi keuntungan sepihak, sehingga cara demikian sudah dianggap SPAMMING karena banyak komentar dengan ucapan "Nice POST" tetapi menggunakan openID, karena openID sudah merupakan tautan link.

Selanjutnya dengan cara bagaimana Backlink tersebut bisa kita dapatkan?, Jika berusaha dan selalu berupaya saya yakin jalan buntu tidak akan pernah kita temukan, jika kesempatan pada situs ber-pagerank tinggi sudah tidak menemukan harapan, coba kirim link pada directory maupun forum yang sebelumnya pernah saya bahas pada artikel Mencari Backlink Melalui Kolom Komentar, akan tetapi cara ini sedikit lebih sulit dari pilihan pertama, karena selain komentar tidak tersedia, bahasa juga sulit kita cerna karena dominan menggunakan bahasa inggris, terkecuali situs anda sudah aktif sebagai member.

Nah.! kali ini SAHABAT BLOGGER 77 sudah merangkum beberapa situs yang dapat anda gunakan secara bebas, saya akan urutkan daftar situs berikut dari yang SUPER POPULER, TOP POPULER dan POPULER MENENGAH, kirim link anda, dapatkan backlink buat blog anda, semuanya GRATIS. ( tetapi jangan keterlaluan ya, jangan serakah donk, hehe.!)

ALEXA RANK- 14,899 PAGERANK- 5

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDQQFjAB&url=http%3A%2F%2Fwww.cancer.ucla.edu%2Fredirect.aspx%3Furl%3Dhttp%3A&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNG6mRWMtDvXosn0KIAbHYpBRuDXvA&sig2=8tyYQm93f3TzbJl9SzlsYw&bvm=bv.59026428,d.bmk

ALEXA RANK- 54,009 PAGERANK- 4

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=9&cad=rja&ved=0CHQQFjAI&url=http%3A%2F%2Fwww.parkcity.org%2Fredirect.aspx%3Furl%3Dhttp&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNGIGPGR57iyQ5Rynxjl0xvuLrh6Jg&sig2=G1-1L3PnGYAKA1RQqo4Ohw&bvm=bv.59026428,d.bmk

ALEXA RANK- 114,091 PAGERANK- 2

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDUQFjAB&url=http%3A%2F%2Fwww.newportbeachca.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=gInRUqmsE8GXrge3oYGIAQ&usg=AFQjCNHjnt6KQP3u3Oem5Y-GDSTSzjbL8w&sig2=n45aV5Gp7Jo5L9QVbkEnBw&bvm=bv.59026428,d.bmk

ALEXA RANK- 174,133 PAGERANK- 2

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=27&cad=rja&ved=0CF4QFjAGOBQ&url=http%3A%2F%2Fwww.reedleycollege.edu%2Fredirect.aspx%3Furl%3Dhttp&ei=jo3RUoKVGsWLrQfEnIDIAw&usg=AFQjCNEh9vgtoOuQmcSb02DJrCjvh0amBA&sig2=HCF121rJZ_uylrILmaPj5Q&bvm=bv.59026428,d.bmk

BACKLINK TIPS

1. Silahkan salin salah satu alamat situs diatas sesuai pilihan anda, lalu masukkan link blog anda, terserah link pada laman mana yang akan anda kirim. Tunggu beberapa saat sampai proses loading selesai, paling cuma 10 detik kok, hehe..
2. Jika sudah selesai, maka link yang telah anda kirim akan ditampilkan, selanjutnya klik kanan link tersebut, atau klik tombol  "Go External Link"  Maka pada tab baru akan tampil link laman yang anda kirim tadi, jangan tutup halaman windows anda, biarkan 1- 2 menit
3. Jika berhasil anda boleh check link anda sudah diterima atau belum jika Popularity Link Check terpasang di blog anda, maka sebelah kiri pada link yang anda kirim akan menunjukkan angka 1,2..dst, pertanda jumlah backlink yang anda dapatkan dari link yang anda kirim
4. Gunakan cara ini maksimal 1 minggu 3 kali dengan kirim link 7-8 link per sesinya agar tidak terlalu mencolok
5. SELESAI. semoga dapat membantu, kumpulkan backlink sebanyak mungkin (mumpung lagi GRATIS mbak brow dan mas brow), SALAM SUKSES

Membuat Panel Slide Untuk Menyimpan Text

Membuat Panel Slide Untuk Menyimpan Text - Tidak jauh berbeda dengan text area yang mungkin sudah banyak orang menggunakan untuk menyimpan text, baik itu berupa CSS Code maupun kode-kode html, namun menyimpan text dengan metode text area sudah sangat jarang sekali yang menggunakannya, dikarenakan metode text area ini sudah banyak di modifikasi sehingga tampilannya semakin menarik, seperti kotak SPOILER atau Membuat Text Area Dengan Tombol Buka Tutup merupakan salah satu versi yang telah dikembangkan oleh banyak webmaster untuk menyimpan text, gambar dan lain sebagainya yang dapat kita gunakan.

Dan cara demikian, sedikit akan membantu untuk menyimpan beberapa text, sehingga kolom postingan dapat terlihat satu halaman tanpa harus scroll untuk melihat tulisan yang ada dibawah, karena beberapa text sudah kita simpan. Setelah banyak perkembangan, saya coba-coba memodifikasi kode pada kotak spoiler tersebut menggunakan jQuery dengan Membuat Panel Slide Untuk Menyimpan Text, versi hampir sama dengan Spoiler Box namun style/gaya yang berbeda. Jika pada spoiler bok memuat tombol "BUKA" untuk membuka/melihat text, pada versi ini saya menggunakan icon "PANEL HOVER" sehingga saat akan membuka tombol panel ini, tombol text terkesan menyala (Hover).

Buat SAHABAT BLOGGER 77 yang tertarik ingin mencoba menggunakan metode ini, berikut kode CSS Membuat Panel Slide Untuk Menyimpan Text:

CSS Code 1

/*
February 19,2014 :: Devy Indriyani
Design Code: http://sahabatblogger77.blogspot.com
*/
#panelsahabatblogger77 {display:block}
#panel {
  background-color#ea9999:;
  border:2px solid #a7cc54;
  border-width:2px 2px 0 2px;
  height:250px;
  margin:0;
  padding:10px;
  color:#111;
  font:normal 12px Times,Serif;
  -webkit-box-shadow:inset 0 0 7px #222;
  -moz-box-shadow:inset 0 0 7px #222;
  box-shadow:inset 0 0 7px #222;
  display:none;}

CSS Code 2

.tombolpanel {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:magenta;
  border-top:3px solid #a7cc54;
  color:#e5e5e5;
  text-align:center;
  font:bold 14px Times,Sans-Serif;
  font-style:italic;
  -webkit-box-shadow:0 -1px 2px #222;
  -moz-box-shadow:0 -1px 2px #222;
  box-shadow:0 -1px 2px #222;
  -webkit-border-radius:0 0 14px 14px;
  -moz-border-radius:0 0 14px 14px;
  border-radius:0 0 14px 14px;}

CSS Code 3

.tombolpanel:hover {color:#ccc}
.tombolpanel:after {
  content:'';
  position:absolute;
  top:100%;
  margin-top:-10px;
  left:5%;
  width:0;
  height:0;
  display:block;
  border-width:20px;
  border-style:solid;
  border-color:#333 #333 transparent magenta;}

Script jQuery

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $('.tombolpanel').click(function() {
        $('#panel').slideToggle('slow');
        $('.tombolpanel span.in').toggle();
    });
});
</script>

HTML Mode Code

<div id="panelsahabatblogger77">
<div id="panel">

... TULISAN ANDA DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>

Hasilnya akan seperti di bawah ini:

Keterangan:

1. Perhatikan pada kode script jQuery diatas, jika template anda sudah menggunakan jQuery, abaikan kode yang sudah saya beri tanda, karena penggunaan jQuery lebih dari satu akan membuat template menjadi error
2. Copy kode CSS 1,2 dan 3, selanjutnya Pastekan pada postingan anda mode HTML, namun jangan lupa untuk menambahkan kode pembuka ini pada awal CSS <style type="text/css"> dan kode penutup pada akhir CSS </style> 
3. Selanjutnya Copy HTML Mode Code lalu letakkan tepat setelah atau dibawah kode penutup </style> pada kode CSS
4. Silahkan ganti text yang berwarna Merah dengan tulisan anda
5. Terimakasih dan Selamat Mencoba.

Buka Panel
Tutup Panel

Ingin Tahu Banyak Tentang Optimasi SEO?

SEO ( Search Engines Optimasi ), Saya tidak terlalu banyak tahu tentang SEO, tetapi keseriusan saya untuk membangun blog SAHABAT BLOGGER 77 membuat saya selalu mengejar untuk menggapai Blog yang SEO Optimasi ke-level yang lebih tinggi. SEO tidak akan bisa kita lepaskan dalam membangun suatu blog, karena google akan menganalisis suatu web berdasarkan unsur SEO pada web tersebut. Banyak email yang masuk dan bertanya tentang SEO, ingin belajar SEO, tetapi saya harus jawab apa? karena pemahaman SEO tidak menggunakan kode CSS atau HTML seperti yang banyak saya share di artikel blog saya untuk kita pasang pada Template.

Berdasarkan apa yang pernah saya baca, dan beberapa kiriman tips SEO oleh webmaster, saya akan rangkum menjadi 10 tips, tips-tips berikut akan saya lengkapi dengan unsur level didalamnya, sehingga akan memudahkan anda untuk menghindar, perbaharui, dan mencobanya.
Beberapa TIPS SEO berikut sudah lebih dari cukup buat referensi kita kedepannya:

1. Penggunaan Tanda Hubung dan Underscores Dalam Domain (PRIORITAS RENDAH)
Bila Anda menempatkan kata kunci dalam domain dan URL, Anda harus mempertimbangkan memisahkannya dengan tanda hubung (-) daripada menumbuk semua secara bersama-sama atau menggunakan garis bawah ( _ ).  Jika anda salah menempatkan kedua tanda tersebut, maka Search engine spider tidak bisa meng-index di mana kata akan dimulai dan berakhir, karena kebanyakan komputer mengenali tanda hubung sebagai akhir kata, tapi melihat underscores sebagai bagian dari kata.
Gunakan Vertical Bar ( | ) untuk kata kunci (PRIORITAS TINGGI)

2. Link Rusak Pada Situs (HINDARI)
Broken link membuat situs Anda akan terlihat buruk, dan google menganggap bahwa Anda tidak mengelola situs dengan baik. Search engine hanya ingin memiliki situs dengan hasil kualitas tertinggi, jika ini anda biarkan berlarut-larut dan semakin menumpuk, google akan menghukum situs yang memiliki banyak link rusak. Gunakan link checker secara berkala untuk memastikan bahwa link Anda masih berlaku.

3. Penggunaan Meta Refresh Tag (HINDARI)
Meta refresh tag merupakan pengalihan situs, hal ini memang baik tetapi ini bisa menjadi ide yang buruk. Banyak spammer menggunakan cara ini untuk mencoba dan menipu mesin pencari dengan berpikir bahwa halaman adalah tentang satu hal, dan kemudian menyegarkan untuk sesuatu yang sama sekali berbeda. Meta refresh juga tidak memberikan informasi kepada mesin pencari tentang mengapa redirect ini terjadi. Ini jauh lebih baik untuk membuat sebuah HTTP 301 redirect permanen ketika Anda perlu untuk mengarahkan pelanggan Anda ke URL baru.

4. Frase Kata Kunci Domain (PRIORITAS TINGGI)
Domain adalah URL dan kata kunci adalah NAMA BLOG ANDA, Menempatkan frase kata kunci Anda dalam nama domain adalah cara yang bagus untuk mengoptimalkan frase tersebut, tetapi jangan terlalu banyak pengulangan, cukup pada awal, isi konten dan akhir jika diperlukan (Standart SEO)

5. Link Domain EDU, GOV, ORG (PRIORITAS TINGGI)
Coba usahakan untuk mendapatkan link dari situs ini, ini merupakan Situs yang menyala. Situs edu,gov dan Org adalah top-level domain yang memiliki sejumlah besar kredibilitas karena untuk mendapatkan link ke situs ini sangat sulit, disini saya sudah siapkan daftar link yang bisa anda coba untuk menanam link pada situs mereka. klik link ini DAFTAR LINK DOMAIN.
Tips- jangan terlalu sering melakukan hal ini, sebaiknya 2-3hari per 3 link, dan jangan terlalu mengarah pada home page link, gunakan juga pada link item.

6. Pilih Frase Yang Tidak Terlalu Populer (PRIORITAS TINGGI)
Ketika mencoba untuk memutuskan suatu frase kata kunci, Anda ingin menemukan satu yang populer tetapi jangan terlalu populer. Hal ini mungkin tampak kontra-intuitif, tetapi kenyataannya adalah bahwa kata kunci yang sangat populer adalah sangat diinginkan dan sangat kompetitif. Lebih baik untuk mencoba frase yang menarik, karena dengan pilihan frase ini Anda akan mendapatkan lebih banyak tampilan halaman dari kata kunci yang kurang populer ketika Anda berada di halaman pertama atau kedua dari mesin pencari, daripada memilih kata kunci super populer itu hanya membuat halaman anda pada posisi 50 dari search engine.

7. Tulis meta description (PRIORITAS MENENGAH)
Mesin pencari menggunakan deskripsi meta tag sebagai deskripsi dalam indeks Google. Jadi, penting untuk menggambarkan halaman Anda secara akurat, Hal ini akan membantu pelanggan menemukan halaman Anda secara rinci, dan memudahkan mesin pencari untuk meng-indeks halaman anda.

8. Gambar Tak Terlihat (HINDARI)
gambar tak terlihat adalah gambar yang berukuran 1x1 pixel, tidak terlihat dengan mata telanjang pada halaman Web, biasanya gambar ini banyak pada widget, demi mendongkrak traffik mengarahkan link kebeberapa prioritas dalam peringkat halaman Web dalam bentuk "Klik OUT", Jangan menggunakan cara ini, dampaknya sangat serius dan besar pada web anda - Situs Anda Akan Banned, cara ini mirip dengan menyembunyikan teks atau menampilkan konten yang berbeda ke mesin pencari daripada pelanggan Anda. Dan jangan menganggap bahwa mesin pencari tidak dapat membaca CSS atau HTML tag yang mengubah ukuran gambar berukuran penuh. Jika Anda melakukan hal ini dengan maksud untuk mengoptimalkan halaman Anda, situs Anda akan diblokir.

9. Teks Tak Terlihat (HINDARI)
Menyembunyikan teks dengan membuat warna yang sama dengan warna latar belakang dapat menipu pelanggan Anda, tapi tidak akan menipu mesin pencari.
Variasi lain dari ini adalah di mana Anda membuat ukuran font begitu kecil bahwa itu tidak terbaca oleh mata telanjang, Search engine memahami CSS dan font begitupun warna latar belakang. Teks yang tersembunyi dari pembaca Anda, tetapi terlihat oleh mesin pencari akan dianggap spam dan situs anda akan langsung masuk daftar hitam database Google sebagai situs terlarang.

10. Format Frase Kata Kunci (PRIORITAS MENENGAH)
Gunakan <strong> dan <em>, silahkan pilih mana yang tepat untuk membuat frase kata kunci Anda menonjol. Search engine dapat membaca tag tersebut, hal ini merupakan isyarat bahwa teks tersebut sangat penting daripada teks yang berada disekitarnya.
sehingga cara anda untuk mengarahkan pembaca ke link URL baru tidak dianggap spam.

Sebenarnya masih banyak lagi yang harus kita ketahui tentang SEO Optimasi, tetapi 10 tips diatas sudah saya rangkum dari yang penting, menengah agar kita dapat meng-optimalkannya dilain waktu.
Semoga Tips ini dapat menjawab pertanyaan sahabat pecinta SAHABAT BLOGGER 77 yang telah mengirimkan email kepada saya. Terima kasih. SALAM SUKSESS

Mendesain Gambar Menggunakan Skew Efek

Mendesain Gambar Menggunakan Skew Efek - Banyak pola gambar yang sering saya jumpai pada artikel blog sahabat lain yang menampilkan beragam style/gaya pada tampilan hover gambar, dari efek FADE IN, FADE OUT, atau mendesain gambar menggunakan efek ROTASI dan lain sebagainya, dan CSS/XML Code yang diberikan juga sangat beragam dan panjang. Terlepas dari semua itu, Penampilan pada blog memang sangat penting sehingga banyak cara yang harus dikejar untuk menarik pengunjung sebanyak mungkin agar betah berlama-lama diblog kita, tentunya dengan menyuguhkan sesuatu yang menarik untuk mereka dengan Mendesain Gambar Menggunakan Skew Efek.

Skew efek merupakan seni untuk mengubah tampilan gambar menjadi miring kekanan/kiri dalam satu titik fokus, singkatnya saya tidak mengubah bentuk default gambarnya, disini saya hanya menggunakan kode hover untuk memanggil efeknya yang bilamana kursor mouse melewati gambar tersebut, maka efek skew pada gambar akan bekerja. Seperti yang sudah pernah saya share sebelumnya tentang Link Hover Pada gambar, maka saat gambar tersentuh akan mengarah pada teks yang ada disamping gambar, dan bila diklik akan menuju URL halaman yang anda tentukan. Detailnya anda boleh lihat pada link SAHABAT BLOGGER 77/file CSS Code efek for Gallery Gambar.

Setiap gambar memiliki pola, maka pola ini yang kita edit dan ganti, contoh X011gift-6L7VM1dk/Uv5dNAZ031I/AAAAAAAAABc/WIG3wVV51as/s1600/934656_4947000AB275522_218000653_n+%25281%2529, kode ini untuk menampilkan gambar, ini saya ambil dari album google picasa, cukup kita tambahkan kode tag untuk membungkus pola ini, lalu kita kirimkan kembali ke spell-check, untuk menentukan/mengetahui apakah ada kode yang error, tunggu beberapa saat maka kita akan mendapatkan kiriman kode baru dari spell-check yang sudah dihapus dan diperbaharui secara otomatis kode-kode yang error, sehingga kodenya akan menjadi sperti ini:

U
R
L

X0-6L7VM1dk/Uv5dNAZ031I/AAAAAAAAABc/WIG3wVV51as/s1600/934656_494799377275358_218000653_n+%25281%2529

Coba perhatikan kode gambar diatas, sekilas tidak ada perubahan, namun ada beberapa kode yang dihapus dan diganti, teks Merah pada kode yang saya kirim, tidak lagi ada pada kode perbaikan oleh spell-check, nah..! saatnya mendesain gambar ini dengan pola kode yang aman tanpa virus menggunakan CSS Code

Untuk memanggil efek skew-nya saya menggunakan kode CSS berikut

C
S
S

C
O
D
E

.demo6 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo6:hover {
  -webkit-transform:skew(30deg,20deg);
  -moz-transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg);
  -o-transform:skew(30deg,20deg);
  transform:skew(30deg,20deg);
}

Kode berikut untuk menentukan gambar mana yang akan anda beri efek skew untuk gambar postingan anda

H
T
M
L

<div class="separator" style="clear: both; text-align: center;">
<img class="demo6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1sK-VUdftZOFiqg_kMcNU1-9j4rtEcEWUB0fgdOKwdTXJ30-RL_cHfj9t6Mx9N0Gk6yMvMKsvnIv_9VFNnDj4nyvuiVRpmS6kqZZqAElP8QPuZm2UX2YNithlP0fBCFDD5-67smUE5Oz/s1600/934656_494799377275358_218000653_n+%25281%2529.jpg" /></div>

Dengan penerapan kode CSS diatas, apakah sudah dapat bekerja untuk memberi efek skew pada gambar.? Untuk hasilnya silahkan LETAKKAN PANAH KURSOR MOUSE anda pada gambar dibawah ini, sebelum melakukannya ada baiknya ucapkan dahulu " Bismillahi rohmani Rohim " hehe..!! Selamat Mencoba

Memberi Efek Pita Pada Text Box

Memberi Efek Pita Pada Text Box - Sebelum melanjutkan artikel ini, saya mengucapkan HAPPY VALENTNE buat semua sahabat pecinta SAHABAT BLOGGER 77 yang turut merayakannya, semoga semakin sayang dan cinta dengan muatan konten yang ada pada blog ini, yang mau ucapin sayang dan cinta sama adminnya boleh melalui SMS/BB. Hehhe..!!
Kebetulan masih dalam suasana Valentine Day's, so pasti banyak dekorasi dengan hiasan pita, seperti yang anda lakukan mungkin buat kekasih tercinta, memberi COKLAT dengan balutan pita sebagai penghias agar efek romantisnya dapet, betul guys.!?

Dengan surprise kado yang diterima, semua dengan pita sebagai pemberi keindahan, sempat berpikir bagaimana jika seandainya pita-pita ini dapat juga dirasakan oleh semua sahabat?, tak terkecuali yang JOMBLO sekalipun, Karena dengan niat diatas, idenya saya tuangkan untuk mengambil pita sebagai tema pembahasan untuk Memberi Efek Pita Pada Text Box, sehingga yang ingin memberi kado boleh menyertakan kata-katanya dengan hiasan pita pada text box.

Tanpa mengubah desain awalnya, saya tetap menggunakan kode <text area>, hanya sedikit tambahan CSS yang saya gabungkan dengan XML Code agar efek pita pada text box-nya dapat tampil.

Berikut CSS yang saya gunakan

.ribbon:before,.ribbon:after {content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #986794;z-index:-1;}
.ribbon:before {left:-2em;border-right-width:1.5em;border-left-color:transparent;}
.ribbon:after {right:-2em;border-left-width:1.5em;border-right-color:transparent;}
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {content:"";position:absolute;display:block;border-style:solid;border-color:#804f7c transparent transparent transparent;bottom:-1em;}
.ribbon .ribbon-content:before {left:0;border-width:1em 0 0 1em;}
.ribbon .ribbon-content:after {right:0;border-width:1em 1em 0 0;}

Kode berikut saya tambahkan untuk menentukan model pita efeknya

.ribbon {width:60%;font:normal bold 16px Arial,Sans-Serif !important;position:relative;background-color:#ba89b6;color:white;text-align:center;padding:1em 2em;margin:0 auto 3em;
/* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.2);}

Saatnya Penerapannya untuk menampilkan di blog

Perhatikan kode berikut. Kode textarea saya hilangkan dan saya ganti dengan kode berikut, kode ini untuk tempat kita menuliskan text pada box yang sudah diberi efek pita, anda cukup mengganti text yang saya beri warna Merah

<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Tuliskan Text Anda</strong>
</p>
</div>

Biasanya penempatan CSS Code kita letakkan pada HTML Template, tetapi kode berikut sudah saya susun sehingga anda tidak perlu membentangkan kode-kode HTML Template anda.

Cukup Copy kode ini, dan letakkan pada mode HTML saat anda menuliskan postingan baru

<style>
.rb-wrap {
  position:relative;
  z-index:1;
}

.ribbon {
  width:60%;
  font:normal bold 16px Arial,Sans-Serif !important;
  position:relative;
  background-color:#ba89b6;
  color:white;
  text-align:center;
  padding:1em 2em;
  margin:0 auto 3em;
  /* Content javaScript text='http://sahabatblogger77.blogspot.com' google-code-versi-ID='ribbon77' */
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
}

.ribbon:before,
.ribbon:after {
  content:"";
  position:absolute;
  display:block;
  bottom:-1em;
  border:1.5em solid #986794;
  z-index:-1;
}

.ribbon:before {
  left:-2em;
  border-right-width:1.5em;
  border-left-color:transparent;
}

.ribbon:after {
  right:-2em;
  border-left-width:1.5em;
  border-right-color:transparent;
}

.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
  content:"";
  position:absolute;
  display:block;
  border-style:solid;
  border-color:#804f7c transparent transparent transparent;
  bottom:-1em;
}

.ribbon .ribbon-content:before {
  left:0;
  border-width:1em 0 0 1em;
}

.ribbon .ribbon-content:after {
  right:0;
  border-width:1em 1em 0 0;
}</style>

<div class="rb-wrap">
<p class="ribbon">
<strong class="ribbon-content">Tulis text anda disini.....</strong>
</p>
</div>

Maka hasilnya akan seperti ini

HAPPY VALENTINE DAY'S