workwidget

Kiat dan Trik Blogger Kiat Terbaru Untuk Blogger Trik Blogger imgr = new Array (); imgr [0] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr [1] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr [2] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr [3] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; imgr [4] = "http://3.bp.blogspot.com/-Q1rsi1mma6I/UZDiiNy6guI/AAAAAAAAAYE/W9qgYs331f8/s1600/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "# 232c35"; bgTD = "# 000000"; thumbwidth = 50; thumbheight = 50; acolor = "# 666"; aBold = true; icon = ""; text = "komentar"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "# 666"; icon2 = ""; numposts = 10 ; home_page = " https://www-dte-web-id-com.blogspot.com/"; limitpy = 4 ; intervalspy = 4000 ;

Gulir Otomatis Widget Posting

Tips dan Trik Blogger Kiat Dan Trik Terbaru Trik Blogger
KODE WARNA WIDGET KATEGORI
GNOM PANEL
GNOM PANEL › KODE WARNA WIDGET KATEGORI

on

KODE WARNA WIDGET KATEGORI

T11: KODE WARNA WIDGET KATEGORI

 
oleh  | 8 Mar 2017 | Makanan Ringan Cepat | 10 komentar
T11: Kode Warna Widget Kategori
Teman baik saya dan sesama Divier, Randy A Brown baru-baru ini mencari tutorial tentang cara gaya widget kategori sehingga ia bisa mewarnai kode kategorinya untuk proyek baru. Dia menunjukkan bahwa ada sangat sedikit cara tutorial untuk sidebar jadi saya setuju untuk membantunya dan menulis satu.
Snack Cepat ini akan bekerja sangat baik dengan Blog Grid dengan tutorial Warna Categorized oleh Leslie Bernal dari A Girl And Her Mac.
LIHAT DEMO
Jadi mari kita memasak!

BAHAN


Beberapa kategori posting diatur, mereka hanya akan ditampilkan jika mereka memiliki konten jadi pastikan Anda memiliki beberapa posting yang ditugaskan untuk mereka.

WAKTUNYA MEMASAK


Maksimal waktu sekitar 5 menit.

PERSIAPAN


Ayo siapkan widget kita

Pergi ke  Appearance> Widgets dan tambahkan Widget Kategori WordPress default ke area Sidebardefault .
Anda dapat menambahkan judul khusus jika Anda mau, tetapi biarkan kotak centang tidak dicentang.
Kode warna widget kategori dalam tutorial Divi

SUKA KONTEN GRATIS KAMI? MAKA ANDA AKAN MENYUKAI KLUB EKSKLUSIF KAMI!

Kevi Academy Membership memberi Anda akses eksklusif ke lebih dari 110 sumber daya, termasuk tema anak, tata letak, lembar contekan, tutorial, pelatihan langsung, dan tunjangan anggota. Dan konten baru ditambahkan SETIAP Senin!
TEMUKAN LEBIH BANYAK LAGI

METODE



Sekarang kita hanya perlu menambahkan sedikit CSS, inilah yang sedang kita lakukan:
Pertama, kami mengatur tampilan tautan kategori untuk diblokir, ini memungkinkan kami untuk kemudian mengatur lebar hingga 100% sehingga mereka akan lebih mirip tombol daripada hyperlink, kami juga menambahkan sedikit bantalan dan mengatur warna teks tautan .
  1. .et_pb_widget.widget_categories ul a {
  2. display : blok ;
  3. lebar : 100% ;
  4. padding : 10px ;
  5. warna : # 000 ;
  6. }

Selanjutnya kita menambahkan efek transisi sehingga ketika kita mengarahkan kursor ke tautan, perubahannya lancar dan tidak tiba-tiba.
  1. .et_pb_widget.widget_categories ul li {
  2. WebKit-transisi : . 2s mudah ;
  3. -moz-transisi : . 2s mudah ;
  4. transisi : . 2s mudah ;
  5. }

Sekarang kita dapat mengatur warna kategori kita, kita menggunakan kelas semu anak ke-n untuk menargetkan setiap item daftar kita. Saya memiliki 4 kategori dalam demo saya jadi saya memiliki 4 deklarasi, cukup tukar kode warna latar belakang untuk Anda sendiri dan jika Anda memiliki lebih banyak kategori, cukup salin / tempelkan deklarasi terakhir dan ubah nomor anak ke-5 menjadi 5, dan seterusnya .
  1. .et_pb_widget.widget_categories ul li: nth-child (1) {
  2. latar belakang : # baded1 ;
  3. }
  5. .et_pb_widget.widget_categories ul li: nth-child (2) {
  6. latar belakang : # cccfc0 ;
  7. }
  9. .et_pb_widget.widget_categories ul li: nth-child (3) {
  10. latar belakang : # e0b6a6 ;
  11. }
  13. .et_pb_widget.widget_categories ul li: nth-child (4) {
  14. latar belakang : # a18075 ;
  15. }

Akhirnya, hover styling kami. Saya hanya memiliki set ini untuk mengurangi opacity pada hover tetapi Anda bisa mengubahnya menjadi warna latar belakang atau bahkan menjadi sedikit lebih berani dan menggunakan bayangan kotak atau mengubah efek.
  1. .et_pb_widget.widget_categories ul li: hover {
  2. opacity : . 7 ;
  3. }

Inilah semua CSS bersama. Salin dan tempel ke kotak Tema Gaya Anak atau Divi opsi kotak CSS kustom Anda.
KATEGORI KODE WARNA CSS
Dan itu saja. 
Jika Anda merasa ini membantu, silakan tinggalkan komentar dan berlangganan buletin saya untuk semua konten terkait Divi terbaru saya. tersenyum
Michelle X
Langganan: Posting Komentar (Atom)