5 Cara Mudah Untuk Meningkatkan SEO Dari Blog

5 Cara Mudah Untuk Meningkatkan SEO Dari Blog
5 Cara Mudah Untuk Meningkatkan SEO Dari Blog

Seorang blogger harus tahu setidaknya minimum pada SEO. Untuk itu, Anda tidak perlu menjadi seorang ahli SEO tetapi Anda perlu tahu batas minimal dari SEO sehingga posting Anda baik diindeks di mesin pencari.

Ungkapan "konten adalah raja" maksudnya adalah  salah satu penyebaran Internet terluas yang digunakan oleh banyak blogger, dengan gagasan bahwa Anda harus fokus pada memiliki kualitas konten, sedangkan sisanya tidak terlalu penting.

Peryataan itu jelas tidak benar. Kualitas konten sangat  penting, tetapi seharusnya tidak menjadi satu-satunya perhatian bagi para blogger. Selain memproduksi konten berkualitas, teks Anda perlu dioptimalkan untuk mesin pencari.

5 Cara Mudah Untuk Meningkatkan SEO Dari Blog


Sekarang, mari kita lihat apa yang akan menjadi dasar bahwa setiap blogger perlu belajar tentang SEO dan pengetahuan SEO sederhana lainnya. Berikut adalah 5 tips mudah untuk meningkatkan SEO dari blog Anda:

1. Tentukan Kata Kunci


Ketika Anda menulis konten lalu diposting, dianjurkan untuk memilih kata kunci (atau istilah) cocok untuk teks Anda. Apa yang Anda inginkan adalah bahwa kata kunci ini - atau istilah - yang akan dicari di Google, dan kemudian mendapatkan posting Anda di antara bagian atas. Untuk ini, Anda perlu menggunakan kata kunci ini beberapa kali dalam teks.

Misalnya, di sini kata kunci bisa SEO, tetapi istilah ini terlalu generik dan saya hampir tidak bisa di bagian atas untuk pencarian ini. Lalu saya akan bekerja dengan frase atau kata kunci ekor panjang, sehingga posting ini akan lebih baik untuk istilah "cara mudah untuk meningkatkan SEO dari blog". Saya akan menggunakan frase ini beberapa kali, tetapi tanpa berlebihan.

2. Gunakan Kata Kunci Dalam Judul Posting


Sekarang bahwa saya telah menetapkan kata kunci, saya akan menggunakannya dalam judul posting. Langkah ini sangat penting, dan pasti akan membantu Anda untuk mendapatkan peringkat yang lebih baik di mesin pencari. Seperti yang Anda lihat, apa yang saya miliki dalam judul adalah cara mudah untuk meningkatkan SEO dari blog kata kunci, bersama dengan kata lain untuk membentuk judul yang menarik dan dioptimalkan untuk SEO.

3. Gunakan Kata Kunci Dalam Tag H2


Anda juga harus menggunakan tag pos (h2, h3) dalam posting Anda. Di sini, saya menggunakan kata kunci " cara mudah untuk meningkatkan SEO dari blog " di H2 pos. Lakukan ini selalu, karena juga membantu untuk menjadi posisi yang baik dalam hasil pencarian. Jika Anda tidak tahu atau tidak mengerti apa yang dimaksud, mari lihat gambar yang saya paparkan berikut ini :

5 Cara Mudah Untuk Meningkatkan SEO Dari Blog
5 Cara Mudah Untuk Meningkatkan SEO Dari Blog

4. Gunakan Kata Kunci Dalam Teks


Menggunakan kata kunci yang Anda pilih seluruh teks. Terutama di paragraf pertama (harap dicatat bahwa saya telah mengulangi judul dalam huruf miring dalam kalimat pertama). Tapi hati-hati ketika melakukan hal ini, ada batas maksimum dan minimum untuk itu. Sebuah kepadatan kata kunci yang baik adalah antara 1,5% hingga 4,5% untuk hasil terbaik. Kurang dari itu tidak akan berpengaruh dan lebih dari itu dapat mengingatkan mesin pencari dan teks Anda mungkin dianggap spam.

5. Publikasikan Posting Dengan 300 Kata atau Lebih


Tulisan di bawah 300 kata memiliki sedikit kesempatan untuk menjadi salah satu hasil teratas di mesin pencari. Tentu saja, Anda akan dapat peringkat untuk beberapa kata kunci yang kurang populer dengan kurang dari 300 kata, tapi untuk kata kunci yang paling kompetitif yang memiliki potensi untuk membawa lebih banyak kunjungan, itu akan hampir mustahil.

Dengan demikian, disarankan untuk menulis posting dengan lebih dari 300 kata. Ini tidak sulit ketika Anda benar-benar memahami topik yang Anda bicarakan.

Kesimpulan


Seperti yang Anda lihat, dengan beberapa teknik SEO sederhana yang dapat meningkatkan traffic (lalu lintas) yang datang ke blog Anda dari mesin pencari. Saya harap Anda menikmati 5 cara mudah ini untuk meningkatkan SEO dari blog !.

Cara Menulis Optimasi SEO Posting Blog

Cara Menulis Optimasi SEO Posting Blog
Cara Menulis Optimasi SEO Posting Blog

Saya bukan ahli SEO, atau apa yang Anda akan membaca lebih lanjut adalah rahasia, tapi ini adalah tentang optimasi dasar bahwa setiap orang harus berlaku bagaimana menulis optimal SEO di posting blog . Dan dengan teknik ini, usaha, dan dengan sedikit kesabaran, Anda dapat menempati tempat terbaik di hasil pencarian dari mesin pencari yang berbeda.

Jelas, tidak semua skenario sama, tidak semua blog diposisikan dengan cara yang sama, beberapa mungkin memiliki kompetisi yang lebih besar daripada yang lain, tergantung pada bagaimana populernya  topik yang mereka tangani; Oleh karena itu, ketika berada ke peringkat web, tidak ada waktu khusus yang berlaku untuk semua web. Setelah mengerti maksud saya, mari masuk ke dalam subjek.

Berikut Beberapa Cara Menulis Optimasi SEO Postingan Blog

 

Fokus Pada Topik


Apapun topik blog Anda, ketika Anda mencoba untuk menulis seo dioptimalkan posting blog, fokus pada subjek tertentu yang memiliki tujuan yang jelas, tanpa gangguan. Misalnya, jika Anda menulis tentang "Kamera Digital", maka awal dan akhir dari posting Anda harus hanya tentang hal itu. Jangan mulai berbicara tentang kamera digital dan berakhir menceritakan tentang apa yang telah Anda lakukan akhir pekan lalu.

Seorang pembaca pergi ke halaman lain karena mencari informasi yang lebih spesifik. Jadi, kecuali itu bukan blog pribadi (di mana Anda menulis tentang kehidupan sehari-hari Anda), tidak menyimpang dari topik. Jadi it’s okey aja.

Menentukan Judul Posting


Judul posting harus singkat dan to the point, sehingga Anda secara singkat dapat meringkas isi posting, tetapi Anda tidak harus penyalahgunaan tentang hal ini. Meskipun harus ringkas, jangan mencoba untuk kata-kata 'menyelamatkan' yang mungkin kunci untuk pencarian.

Contoh:
Collection of all the cameras that have been released last year on the market
The best digital cameras of 2013

Jelas, yang pertama belum ditetapkan dengan tepat, dan yang kedua adalah tidak hanya lebih akurat, tetapi juga lebih relevan untuk apa yang dicari orang di internet.

Kata Kunci


Kata kunci adalah istilah-istilah yang paling dicari orang di internet dan Anda harus mencoba fokus pada mereka ketika menulis posting; kata kunci ini perlu dimasukkan di seluruh pos, tapi hati-hati untuk tidak terlalu berlebihan memasukkan kata kunci ke dalam konten Anda.

Contoh:
During the fourth week of the technology, there were many products that are utilized today, and the most famous experts gave a speech on them.
At the opening of the fourth Technology Week, the experts talked about various topics, including how to choose a digital camera, had discussions about the pros and cons of the iPad, and which are the best smartphones.

Dalam contoh pertama, kami telah menulis tanpa memperhatikan istilah. Sementara, dalam satu detik, kami menggunakan frase yang dicari di internet oleh sebagian besar pengguna.

Jadi, kata yang paling populer harus dimasukkan secara bijaksana tanpa mengacaukan posting Anda dengan mereka, atau dapat menjadi kontraproduktif.

Sekali lagi, kata kunci tersebut harus dimasukkan dalam judul tulisan, juga.

Mengandalkan Sinonim


Sementara itu strategi yang baik untuk menggunakan kata kunci tertentu, kita tidak harus membatasi diri untuk satu kata. Disarankan menggunakan sinonim karena pengguna tidak menyebutkan hal-hal dengan cara yang sama dan menggunakan kata kunci  yang kurang, kita bisa menghindari dengan meninggalkan kesan bahwa kita menjadi terlalu repetitif dan ngotot.

Contoh:
For those who like good quality pictures, Nikon D7000s Digital Camera is a 16.2 megapixel digital camera that takes great pictures.
For those who like good quality images, Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures.

Dalam contoh pertama, kita telah mengulangi kata 'kamera digital' dan 'gambar' dua kali. Sementara, dalam satu detik, kami menggunakan kata kunci kamera digital sekali dan mengubah kata 'gambar' dengan 'gambar'.

Dengan cara ini, pembaca akan menemukan keragaman yang lebih besar dari kata-kata dan mungkin menikmati artikel tersebut.

Menggunakan Huruf Tebal dan Miring


Sebuah praktek yang baik ketika Anda menulis seo dioptimalkan posting blog, akan membuat kata kunci yang berani dengan membungkus mereka dalam tag yang kuat, sehingga mereka akan berdiri keluar dari sisanya. Namun perlu diingat bahwa ini tidak harus dilakukan dengan CSS, tapi dengan HTML, yaitu mereka tidak harus ditandai dengan font-weight: bold; melainkan dengan </ b> atau bahkan lebih baik <strong>

Contoh:
For those who like good quality images, Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures.

Hasilnya tampak sama, tetapi tidak. Meskipun ketiga kata kunci ini dalam huruf tebal, hanya satu yang lebih menarik bagi robot, yang merupakan pertama: 
For those who like <strong>good quality images</strong>, <b>Nikon D7000s</b> is a 16.2 megapixel <span style="font-weight: bold;">digital camera</span> that takes excellent pictures.

Hal yang sama berlaku untuk miring. Menggunakannya untuk menyoroti kata-kata penting, tetapi tidak menempatkan mereka antara font-style: italic melainkan antara <i> atau bahkan lebih baik <em>
For those who like <strong>good quality images</strong>, <em>Nikon D7000s</em> is a 16.2 megapixel <span style="font-style: italic;">digital camera</span> that takes excellent pictures.

Sekali lagi, yang pertama memiliki kesempatan yang lebih baik peringkat dari yang lain. Dengan demikian, dianjurkan untuk menyorot kata kunci dalam huruf tebal dan miring, atau untuk menempatkan mereka antara <strong> dan </ strong> atau antara <em> Dan </ em>.

Menggunakan Link Eksternal


Beberapa orang mungkin mengatakan bahwa kita tidak harus menggunakan link dalam posting karena dengan cara ini kita memberikan diri Page Rank di website kita. Hal ini tidak sepenuhnya benar.

Menggunakan link referral ke situs yang sudah berbentuk kredibilitas mereka, juga akan membantu kita untuk membentuk kita sendiri. Tentu saja, kita tidak harus membanjiri postingan kita dengan link, tapi kita bisa melakukannya ketika diperlukan dan terutama dengan situs yang berbicara tentang topik yang sama.

Hal lain yang penting lagi adalah bahwa, kita harus menghindari menempatkan khas "klik di sini" atau teks yang serupa. Bila Anda menempatkan link, anchor text harus cukup deskriptif.

Contoh:
<a href="Link URL">Click here</a> to know more
More information about <a href="Link URL">digital cameras</a>

Dalam contoh pertama, jangkar teks tidak relevan dan deskriptif, tetapi dalam kedua itu. Peringkat dengan gambar Anda.

Posting dengan gambar tidak hanya menarik secara visual, tetapi mungkin membantu pembaca untuk memahami apa yang Anda bicarakan. Jadi, setiap kali Anda , menggunakan gambar dalam posting Anda untuk menulis, tapi jangan berlebihan. Banyak gambar faktor yang sangat besar dapat memperlambat waktu loading blog.

Konten Baru dan Relevan


Anda harus fokus tidak hanya pada menulis postingan, tetapi juga membuat konte  yang relevan untuk pembaca Anda. Konten Baru ddan asli harus lebih menarik untuk mesin pencari, daripada copy tempel (sebenarnya, itu bisa dihukum). Jadi cobalah untuk menuliskan hal-hal baru, bahkan jika Anda berpikir bahwa semua yang telah dikatakan. Setiap orang memiliki cara yang berbeda untuk mengatakan hal-hal nya sendiri.

Juga, selalu mendapatkan informasi sebelum menulis posting. Melakukan penelitian dan melihat apakah informasi tersebut valid; berdasarkan itu, Anda akan mendapatkan kepercayaan dari pembaca Anda.

Kata-Kata Akhir


Dengan beberapa teknik yang dapat meningkatkan peluang peringkat posting Anda lebih tinggi dalam mesin pencari. Seperti yang saya sebutkan sebelumnya, ini bukan hal tentang  tidak ada yang mendengar , tapi saya tahu bahwa banyak pemula dan mungkin tidak tahu bagaimana menulis posting blog seo dioptimalkan.

Tidak ada salahnya mengulangi bahwa hasil tidak akan muncul dalam semalam, namun dengan beberapa usaha dan kesabaran, Anda akan melihat hasil yang diinginkan dari waktu ke waktu

Cara Menambahkan Widget dibawah Post Pertama Pada Blogger

Cara Menambahkan Widget dibawah Post Pertama Pada Blogger
Cara Menambahkan Widget dibawah Post Pertama Pada Blogger

 

Berikut Cara Menambahkan Widget dibawah Post Pertama Pada Blogger


Tutorial ini akan menunjukkan cara untuk membuat gadget / widget supaya muncul tepat di bawah posting Blogger pertama.

Pertama, Anda harus memahami bahwa gadget biasa disediakan oleh Blogger dapat ditambahkan hanya di mana bagian desain. Namun, kita dapat menunjukkan setiap elemen, misalnya, iklan AdSense, gambar, file flash atau video dll ...

Jadi, apa yang akan kita lakukan dalam tutorial ini adalah untuk menampilkan elemen di bawah posting pertama, ini berarti bahwa itu tidak akan terlihat di bawah tulisan lainnya.

Baca Juga : Cara Membuat Auto Read More Untuk  Blogger / Blogspot Posts 
meskipun bukan keharusan.

Cara Menambahkan Widget dibawah Post Pertama Pada Blogger


Hal ini mudah dilakukan dan kita akan menggunakan tag kondisionaluntuk post pertama untuk elemen yang menunjukkan di bawah posting pertama diterbitkan di blog kita.

Menambah Gadget atau Widget Berikut Pertama Post pada Blogger                                        


Langkah 1. Dari Dashboard Blogger Anda, pergi ke Template dan klik pada tombol Edit HTML:

Cara Menambahkan Widget dibawah Post Pertama Pada Blogger


Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger

Cara Menambahkan Widget dibawah Post Pertama Pada Blogger


Langkah 3. Ketik atau tempel baris ini di bawah di dalam kotak pencarian dan tekan Enter untuk menemukannya:
<b:include data='post' name='post'/> 

Langkah 4. Tepat di bawah itu menambahkan kode ini:
<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin:10px auto;">
Disini kode elemen yang ingin anda tampilkan
</div>
</b:if>

Catatan:


Tebal Teks menunjukkan ke mana Anda harus paste kode dari elemen (iklan AdSense misalnya., Widget).

Margin Di merah atas (margin-atas) dan margin bawah (tombol-margin), ini adalah jika anda ingin elemen bergerak menuju atau menjauh dari entri, juga Anda dapat menambahkan gaya apapun seperti warna latar belakang, perbatasan dll ..

Langkah 5. Preview untuk memastikan semuanya ok, maka Simpan Template Anda dengan mengklik tombol Template ,Simpan.

Itu dia!

Manakah Widget Hashtag Instagram Harus Kita Pilih?

Manakah Widget Hashtag Instagram Harus Kita Pilih?

Ada aplikasi widget yang berguna untuk semua, tapi satu hal yang kurang adalah widget yang menghubungkan salah satu jaringan sosial paling populer berbasis gambar ke website Kita.

Sayangnya, Instagram belum merancang sebuah widget resmi yang akan memungkinkan Kita untuk dengan mudah dan cepat menanamkan gram di website Kita.

Widget adalah seperti meja aksesori yang memungkinkan pengguna untuk menjalankan fungsi tertentu dalam sebuah halaman web. Ini mengambil informasi dari sumber tertentu dan kemudian menampilkannya pada daerah yang dituju. Hal ini dapat dirancang untuk memberikan akses mudah ke cuaca, peta, update olahraga, kalender dan banyak lainnya. Android dan WordPress adalah dua kontributor terbesar dari web dan widget mobile, namun Instagram masih harus mengejar ketinggalan.

Sementara mereka masih mencoba untuk mencari tahu bagaimana membuat sebuah widget Instagram, mengambil keuntungan dari salah satu widget pihak ketiga untuk Instagram. Tapi karena banyaknya dari mereka di luar sana, memilih yang tepat. Yah, kami melakukan penyortiran atau bias anda pilih  3 top widget  pilihan:

Intensif


Intensif adalah generator widget untuk Instagram yang dapat Kita gunakan secara gratis atau tanpa biaya. Kedua versi praktis memiliki fitur yang sama, kecuali untuk beberapa  foto-foto refresh. Ini hanya terjadi sekali per hari dengan versi gratis, tapi selalu up to date dengan versi premium. Jika Kita ingin melakukan jauh dengan pembatasan widget Instagram ini, siap untuk membuat investasi kecil.

Manakah Widget Hashtag Instagram Harus Kita Pilih?
Intensif


Fitur Intensif                                                                                                                                             

- Tampilan foto dan hashtags di grid, slideshow atau kolom.
- Sesuaikan jumlah kolom dan baris
- Tambahkan efek hover
- Menampilkan atau menyembunyikan Keterangan Gambar (LINKNYA ARTIKEL 3 DI SEO)
- Foto dihubungkan langsung ke Instagram
- Menawarkan dukungan asli untuk Drupal dan WordPress.

Untuk biaya satu kali sebesar $ 5, Kita dapat meng-upgrade ke versi premium.

Intensif, bagaimanapun, tidak sempurna dibandingkan dengan widget pihak ketiga lainnya untuk Instagram, karena telah membatasi fitur dalam hal kustomisasi, display, dan frekuensi penyegaran. Bahkan jika Kita membayar biaya minimal, hanya foto akan tetap up-to-date, tetapi tidak ada fitur lain akan ditambahkan. Tapi lihat sisi baiknya, itu adalah responsif.

Intagme


Intagme cukup sederhana dan mudah, yang dapat bonus jika Kita harus mengelola banyak akun media sosial dan widget. Fitur-fiturnya juga mendapatkan pekerjaan yang dilakukan.

Manakah Widget Hashtag Instagram Harus Kita Pilih?
Intagme


Fitur Intagme


- Tarik foto atau hashtags dan menampilkan mereka dalam grid atau slideshow

- Dapatkan untuk menyesuaikan tata letak, thumbnail, ukuran dan padding gambar

- Mengedit foto dengan menambahkan perbatasan dan / atau warna latar belakang

Dari semua ini, Intagme adalah 100% gratis, yang mungkin akan meletakkan semua widget pihak ketiga lainnya di bagian bawah daftar Kita. Sebelum Kita membuat keputusan akhir, bagaimanapun, tahu bahwa Intagme tidak memiliki satu fitur display - kolom, mirip dengan apa yang akan Kita lihat di Pinterest. Hal ini tidak responsif dan telah membatasi pilihan kustomisasi. Selain itu, foto yang terkait dengan halaman di Intagme.com, bukannya langsung ke Instagram.

Terkait: Cara Menambahkan Instagram Widget di Blogger 

SnapWidget


Di antara widget Instagram, snap widget adalah yang paling populer dan digunakan oleh lebih dari 100.000 website sehari-hari. Hal ini dapat digunakan secara gratis atau dengan biaya bulanan sebesar $ 6.99.

Fitur SnapWidget


- Tarik foto atau hashtags, kemudian menampilkan mereka di grid, papan, slideshow, peta atau bergulir.

- Ukuran Thumbnail dan tata letak dapat disesuaikan

- Tata letak efek warna Background melayang dan foto bantalan dapat digunakan untuk menyesuaikan Foto

- Menampilkan atau menyembunyikan berbagi tombol

Fitur Premium Versi
- Semua yang di atas
- Buat hingga 10 widget
- Saring foto berdasarkan username & amp; tkita pagar
- Link foto ke Instagram atau halaman lain menambahkan CSS kustom jika diinginkan
- Memiliki pilihan kustomisasi yang lebih maju, seperti integrasi kontrol pagination dari Google Analytics dan foto pop-up fungsi

Untuk harga $ 6,99 per bulan, widget Instagram ini adalah investasi yang layak, terutama karena versi gratis iklan yang didukung. Ini berarti thumbnail dihubungkan ke halaman SnapWidget mana foto muncul di samping iklan. Bonus tambahan adalah bahwa apakah gratis atau berbayar, ada pilihan yang tersedia yang memungkinkan Kita membuat widget responsif untuk penggunaan mobile.


Manakah Widget Hashtag Instagram Harus Kita Pilih?  
                                                                                    

Bahkan jika hanya 3 pilihan yang disajikan, membuat pilihan masih belum berjalan-jalan di taman, tapi setidaknya Kita tidak perlu mengocok untuk memilih widget yang harus kita pilih. Dari informasi di atas, Kita dapat membuat keputusan untuk yang Instagram widget untuk digunakan.

Atau, Kita dapat mempersempit pilihan Kita berdasarkan pada anggaran Kita - apakah Kita memiliki satu atau tidak, fitur yang Kita butuhkan, dan berapa banyak kustomisasi kontrol Kita ingin memiliki.

Kita juga harus berpikir tentang bagaimana sebuah widget Instagram dapat mempengaruhi upaya SEO Kita. Jika Kita ingin menjadi SEO friendly sebagai sisa dari situs Kita, cari tahu bagaimana itu dikembangkan atau dibuat, seperti beberapa platform yang digunakan mungkin tidak terlihat ke mesin pencari. Mempertimbangkan semua faktor di atas dan pekerjaan Kita akan lebih mudah.

Cara Membuat Judul Bergaya di Blogger

Cara Membuat Judul Bergaya di Blogger
Cara Membuat Judul Bergaya di Blogger

Berikut Cara Membuat Judul Bergaya Dengan CSS


Anda dapat melihat di berbagai  efek blog yang menarik pada beberapa link. Sebagian besar , ketika Anda membawanya ke blog anda yang berupa link perubahan, sesuatu perubahan itu dalam gaya: itu baik akan berubah warna atau latar belakang atau akan menjadi unggulan di blog anda. Bagaimana efek keren ini yang terdiri dalam transisi bertahap dari satu gaya ke yang lain, seperti yang Anda lihat di demo bawah ini:

Mau seperti ini
Jebret!

Transisi ini didapat dengan menggunakan properti transisi CSS3 - properti yang didukung di semua browser utama seperti Chrome, Firefox, Opera, Safari (untuk Safari kita akan membutuhkan awalan -webkit- untuk mendapatkan efek ini).

Lankah -langkah Transisi CSS                                                            

Langkah-langkah  transisi mendukung tiga nilai:

- Properti dipengaruhi oleh transisi, seperti warna, border, background, lebar, dll.

- Durasi transisi ini dalam hitungan detik, yaitu, berapa lama waktu yang dibutuhkan untuk mengubah gayanya.

- Waktu tunda untuk transisi akan diseleksi  juga dalam detik, yaitu, berapa lama waktu yang dibutuhkan untuk transisi untuk memulai ketika kursor mouse di berada di peralihan tersebut .

Lihat kode di bawah ini:
.example {
 transition-property: width; /* property that undergoes a transition */
 transition-duration: 2s; /* duration of the transition */
 transition-timing-function: linear; /* timing-function */
 transition-delay: 0; /* length of time to delay the start of a transition */
/* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */
 -webkit-transition-property: width;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 -webkit-transition-delay: 0;
}

Dalam contoh di atas, HTML itu yang membuat transisi tersebut. Contoh akan menjadi lebar dalam waktu dua detik mouse melewati mereka.

Ketika kita mendefinisikan gaya link, biasanya kita perlu menggunakan sebuah: pemilih Link, dan ketika mendefinisikan gaya ketika kursor mouse di atas transisi, kita perlu menggunakan :  (Judul). Namun, transisi dapat digunakan dalam setiap elemen HTML, bukan hanya link.

Untuk membuat efek transisi agar bekerja dengan baik, kita harus mendefinisikan dua blok dari gaya untuk elemen itu, yaitu gaya normal untuk tag / id / kelas dan gaya pada mouse: JEBRET (Judulnya) untuk tag / id / kelas khusus.

Sebagai contoh:
tag, #id, .class {
/* insert here the styles that you want for the selector */
/* insert below the transition effects */

}
tag:jebret, #id:jebret, class:jebret {
/* Insert here the styles for when the mouse is over the element */
/* here it is not necessary to repeat the declaration of the transition */

}

Anda dapat menambahkan gaya yang sama di beberapa penyeleksi dan dipisahkan dengan koma seperti yang saya lakukan di atas, walaupun itu tidak diperlukan.

Berikut adalah beberapa contoh transisi dengan masing-masing kode.

Saya tidak akan menggunakan transisi-waktu-fungsi dalam contoh ini karena tidak ada bedanya, karena nilai pertama adalah durasi dalam detik dan yang kedua adalah penundaan.

Contoh 1

Mau Seperti Ini

Tambahkan kode dibawah ini
/* with a single property */
#example1 {
 background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}

Contoh 2

Atau Mau Seperti Ini

Masukkan  kode dibawah ini jika mau seperti ini
/* with four properties and delay */
#example2 {
background-color: #9c3;
border: 8px solid #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}

Contoh 3 

Atau Yang Ini

Tambahkan kode dibawah ini jika mau seperti ini
/* with seven properties and delay */
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}

Contoh 4 

Ini Yang Terakhir

Tambahkan kode dibawah ini jika mau seperti ini 
/* with all the properties simultaneously */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}

Akhir kata:                                                                 


- Tambahkan kode  diatas (CSS) letakkan diatas  ]] </ b: skin>

- Seperti yang Anda lihat pada contoh di atas, Anda dapat menetapkan aturan yang berbeda untuk transisi dari unsur-unsur yang berbeda dalam satu aturan - hanya pisahkan dengan koma.

- Itu tidak wajib untuk menggunakan empat sifat dalam deklarasi transisi, tapi pesanan mereka harus selalu terlihat seperti ini: properti / durasi / waktu-fungsi / delay.

- Durasi dan keterlambatan nilai harus dinyatakan dalam detik, tapi kadang-kadang kedua adalah waktu yang lama untuk transisi. Dalam hal ini Anda dapat menggunakan nilai-nilai dengan milidetik, misalnya, .5s berarti setengah detik.

- Dalam interval waktu kecil, waktu properti transisi-fungsi tersebut tidak memberikan efek yang luar biasa yang paling berguna hanya dalam animasi . Nilai yang mungkin baik meringankan (default, yang membuat transisi dengan awal yang lambat, maka akan lebih cepat dan berakhir perlahan), linear (kecepatan transisi yang sama dari awal sampai akhir), kemudahan dalam (transisi dimulai perlahan dan kemudian kecepatan meningkat), kemudahan-luar (transisi dimulai cepat dan melambat di akhir) dan kemudahan-dalam-luar.

Itu dia!, nikmatilah keindahan dari Transisi CSS Untuk Judul Bergaya di Blog Anda.

Saya tunggu anda di komentar :)