• Beranda
  • Artikel
  • Umum
  • Bagaimana cara membuat halaman Penawaran yang bagus hanya dengan CSS dan HTML khusus di situs WordPress mana pun?

Bagaimana cara membuat halaman Penawaran yang bagus hanya dengan CSS dan HTML khusus di situs WordPress mana pun?

Diterbitkan: 2019-01-10
Cara Membuat Halaman Penawaran yang bagus di situs WordPress

Pada titik tertentu, ada ribuan penawaran yang tersedia di pasar. Penawaran kain, furnitur, utilitas dan juga plugin WordPress, tema, layanan, hosting, dan sebagainya.

Membuat halaman Deals adalah salah satu impian bagi semua blogger. Ada beberapa plugin di luar sana yang membantu Anda membuat halaman Deals yang bagus.

Sudahkah Anda memeriksa halaman Penawaran? https://crunchify.com/deals/.

Kami baru-baru ini memperbarui halaman Penawaran kami dengan format yang berbeda tetapi tutorial ini masih menghasilkan halaman Penawaran yang bagus dan berfungsi dengan sempurna.

Jika tidak, periksa dan beri tahu saya pendapat Anda. Di Crunchify, kami telah membuat halaman Penawaran khusus ini. Kami belum menggunakan plugin khusus apa pun. Dibangun hanya berdasarkan CSS khusus.

Jika Anda ingin membuat halaman Penawaran khusus yang serupa, maka Anda berada di tempat yang tepat. Kami akan membahas kode CSS dan HTML untuk membuat halaman yang sangat mirip untuk Anda semua.

Mari kita mulai:

Langkah-1 CSS (style.css)

Buka file style.css tema WordPress Anda dan tambahkan kode di bawah ini ke dalamnya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* For Deals Box */
div . crunchify - panel {
float : left ;
width : 43 % ;
margin : 25px ;
padding : 35px 30px 30px 30px ;
border : 1px solid #ececec;
font - size : 15px ;
position : relative ;
box - shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 3 ) , 0 0 40px rgba ( 0 , 0 , 0 , . 1 ) inset ;
height : 420px
}
 
div . crunchify - panel img {
border : 1px solid #e8e8e8
}
 
/* For Rectangle Dotted box */
. crunchify - deals - coupon {
     border : 2px dashed #dd7127;
     padding : 3px 3px 5px 8px ;
     border - radius : 5px ;
     color : #464646;
     font - size : 13px ;
     display : inline - block ;
     margin - bottom : 15px ;
     width : 100 % ;
}
 
. crunchify - deals - coupon : : before {
     font - size : 18px ;
     vertical - align : top ;
     content : "\f0a4" ;
     font - family : "Font Awesome 5 Free" ;
     color : #b11f24;
     margin : 5px 10px ;
}
 
. crunchify - deals - coupon : hover {
border : 2px solid #dd7127;
text - decoration : none
}

Kode CSS di atas akan membuat tata letak yang bagus untuk bagian penawaran Anda.

Kami menggunakan font FontAwesome di Crunchify. Itu sebabnya ikon panah tangan berasal. Jika Anda ingin menambahkan Font Awesome ke tema WordPress Anda, ikuti tutorial FontAwesome yang mendetail.

Langkah-2 (halaman HTML)

  • Pergi ke Pages
  • Klik Add New
  • Buat halaman Full width baru
  • Letakkan kode di bawah ini ke bagian HTML halaman
  • Menyimpan file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
< div class = "crunchify-panel" >
     < a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png" alt = "Genesis WordPress Framework Logo" width = "100" height = "100" / > < / a >
     < h3 style = "text-align: center;" > < a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > Genesis WP < / a > < / h3 >
     < p style = "text-align: center;" > Best WordPress design frameworks . Quickly and easily build incredible websites - < a href = "https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/" target = "_blank" rel = "noopener noreferrer" > Details < / a > < / p >
 
< / div >
< div class = "crunchify-panel" >
 
     < a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > < img class = "aligncenter size-full" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png" alt = "WP Engine" width = "100" height = "100" / > < / a >
     < h3 style = "text-align: center;" > < a title = "Premium WordPress Themes that Work" href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > WP Engine < / a > < / h3 >
     < p style = "text-align: center;" > Crunchify and WP Engine have teamed up to give you a special offer . Vibrant and Fully Managed WordPress Hosting < / p >
 
     < div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > crunchify25 < / a > < / div >
< / div >
< div class = "crunchify-panel" >
 
     < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png" alt = "MaxCDN Logo" width = "100" height = "100" / > < / a >
     < h3 style = "text-align: center;" > < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > MaxCDN < / a > < / h3 >
     < p style = "text-align: center;" > One of the best CDN for WordPress &amp; used at Crunchify . MaxCDN speeds up your website - < a href = "https://crunchify.com/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >
 
     < div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > CRUNCHIFY < / a > < / div >
< / div >
< div class = "crunchify-panel" >
 
     < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png" alt = "Bluehost Logo" width = "100" height = "100" / > < / a >
     < h3 style = "text-align: center;" > < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Bluehost < / a > < / h3 >
     < p style = "text-align: center;" > One of the largest and most trusted web hosting services powering millions of site - < a href = "https://crunchify.com/bluehost-wordpress-hosting/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >
 
     < div class = "crunchify-deals-coupon" > Upto < b > 40 % < / b > off link : < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Click here < / a > < / div >
< / div >

Kode di atas akan menambahkan 4 bagian Penawaran yang berbeda untuk Anda. Cukup ganti link dan gambar sesuai kebutuhan.

Beri tahu saya jika Anda menghadapi masalah dalam menempatkan kode di atas ke tema Anda.