Kali ini aku akan menciptakan sebuah widget testimonial sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda.
Widget ini bahwasanya hampir menyerupai dengan widget author box, namun ada sedikit desain yang membuatnya sedikit berbeda dengan widget profil penulis tersebut.
Di sini aku menambahkan tanda petik menyerupai quote atau perkataan yang diucapkan oleh pelanggan Anda sehingga widget ini dinamakan sebagai widget testimoni card.
Jika Anda seorang pedagan atau penjual online yang mengandalkan website eksklusif atau blog sebagai daerah untuk menampilkan barang dagangan Anda, maka yang paling penting dan harus ada di dalam website Anda ialah testimoni dari pelanggan yang sudah pernah membeli atau memakai layanan dan jasa yang Anda miliki.
Dengan menampilkan widget testimonial di blog atau website, tentu akan menambah iman calon pembeli terhadap Anda.
Sehingga memasang widget testimoni di website itu sangat penting apabila Anda menjual barang-barang atau produk lainnya secara online.
Nah, pada kesempatan kali ini aku akan menciptakan sebuah widget testimoni memakai instruksi html dan css saja, tentu tidak akan menciptakan loading blog atau website Anda menjadi berat.
Cara Membuat Widget Testimonial di Halaman Blogger
1. Masuk ke Blogger.com
2. Klik Halaman
3. Silahkan buat halaman gres atau edit salah satu halaman yang ada
4. Kemudian pastikan Anda berada dibagian Compose
5. Masukkan instruksi HTML dan CSS ini:
<style> .testimoni { font-family: 'Roboto', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 230px; max-width: 315px; width: 100%; color: #ffffff; text-align: left; line-height: 1.4em; background-color: #d6dbff; padding-top: 120px; border-radius: 10px; } .testimoni * { -webkit-box-sizing: border-box; box-sizing: border-box; } .testimoni img { max-width: 100%; vertical-align: top; opacity: 0.85; } .testimoni .pic { width: 100%; background-color: #2961ff; padding: 25px; position: relative; } .testimoni .pic:before { position: absolute; content: ''; bottom: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 55px 0 0 400px; border-color: transparent transparent transparent #2961ff; } .testimoni .profile { border-radius: 50%; position: absolute; bottom: 100%; left: 25px; z-index: 1; max-width: 90px; opacity: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .testimoni h3 { font-size: 1.3em; margin: 25px; font-weight: 300; position: absolute; top: 0; right: 0; text-align: right; } .testimoni h3 span { display: block; font-size: 0.65em; color: #2980b9; } .testimoni p { margin: 0 0 10px; padding: 0 0 30px; letter-spacing: 1px; font-style: italic; font-weight: 300; } .testimoni p:after { font-family: 'FontAwesome'; content: "\201C"; position: absolute; font-size: 180px; line-height: 1em; color: #3a40ff; font-style: normal; content: "\201D"; right: 20px; bottom: -105px; } </style> <div class="testimoni"> <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/f7724395822a1ecdbbc5e2e0c9d751fc/5BEFCC20/t51.2885-19/s320x320/36136511_2123433711204178_4166035719258636288_n.jpg" alt=" sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda Cara Membuat Widget Testimonial di Blog" title="Cara Membuat Widget Testimonial di Blog" class="profile" /> <p>He has been very professional and very clear in all communications, which I appreciate.</p> </div> <h3>Ficri P.<span>Web Designer</span></h3> </div> <div class="testimoni"> <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/d5f7ba3445ca5f7331c1af137fda8a6b/5BF7F22E/t51.2885-19/s320x320/38170706_2095171754054300_307298068145897472_n.jpg" alt=" sederhana dengan instruksi html dan css untuk dipasang pada blog atau website A<style> .testimoni { font-family: 'Roboto', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 230px; max-width: 315px; width: 100%; color: #ffffff; text-align: left; line-height: 1.4em; background-color: #d6dbff; padding-top: 120px; border-radius: 10px; } .testimoni * { -webkit-box-sizing: border-box; box-sizing: border-box; } .testimoni img { max-width: 100%; vertical-align: top; opacity: 0.85; } .testimoni .pic { width: 100%; background-color: #2961ff; padding: 25px; position: relative; } .testimoni .pic:before { position: absolute; content: ''; bottom: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 55px 0 0 400px; border-color: transparent transparent transparent #2961ff; } .testimoni .profile { border-radius: 50%; position: absolute; bottom: 100%; left: 25px; z-index: 1; max-width: 90px; opacity: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); } .testimoni h3 { font-size: 1.3em; margin: 25px; font-weight: 300; position: absolute; top: 0; right: 0; text-align: right; } .testimoni h3 span { display: block; font-size: 0.65em; color: #2980b9; } .testimoni p { margin: 0 0 10px; padding: 0 0 30px; letter-spacing: 1px; font-style: italic; font-weight: 300; } .testimoni p:after { font-family: 'FontAwesome'; content: "\201C"; position: absolute; font-size: 180px; line-height: 1em; color: #3a40ff; font-style: normal; content: "\201D"; right: 20px; bottom: -105px; } </style> <div class="testimoni"> <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/f7724395822a1ecdbbc5e2e0c9d751fc/5BEFCC20/t51.2885-19/s320x320/36136511_2123433711204178_4166035719258636288_n.jpg" alt=" sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda Cara Membuat Widget Testimonial di Blog" title="Cara Membuat Widget Testimonial di Blog" class="profile" /> <p>He has been very professional and very clear in all communications, which I appreciate.</p> </div> <h3>Ficri P.<span>Web Designer</span></h3> </div> <div class="testimoni"> <div class="pic"><img src="https://instagram.fcgk8-2.fna.fbcdn.net/vp/d5f7ba3445ca5f7331c1af137fda8a6b/5BF7F22E/t51.2885-19/s320x320/38170706_2095171754054300_307298068145897472_n.jpg" alt=" sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda Cara Membuat Widget Testimonial di Blog" title="Cara Membuat Widget Testimonial di Blog" class="profile" /> <p>We are very pleased with our new merk identity. It has been a great experience working with him.</p> </div> <h3>Pebriyana F.<span>Graphic Designer</span></h3> </div>6. Silahkan edit seperlunya, menyerupai mengganti nama, jabatan / kota, gambar / foto, dan tulisannya
7. Silahkan klik Simpan atau Publikasikan
Anda juga dapat menyimpan widget testimoni ini di sidebar blog atau di bab postingan blog, namun yang paling cocok berdasarkan aku untuk widget testimonial ini disimpan pada halaman blogger.
Jangan lupa untuk menambahkan instruksi css bundle font awesome ini semoga tanda kutip dapat muncul. Silahkan simpan instruksi ini di atas instruksi
</body><link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Itulah artikel mengenai cara menciptakan widget testimonial di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
Related Posts
- Cara Memasang Dan Modifikasi Label Cloud Keren Di Blogger Mempercantik tampilan blog merupakan hal yang perlu dilakukan oleh setiap blogger, ada banyak cara untuk menciptakan tampilan blog semakin menarik ...
- Cara Menghapus Pagination Di BlogNumbered Page Navigation atau biasa disebut juga dengan istilah Pagination merupakan kode JavaScript yang berfungsi untuk membagi beberapa halam ...
- Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly Blog yang baik itu blog yang menyerupai apa sih? Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu ...
- Cara Sharing Printer Di Windows 7 Melalui Jaringan Lan / Wifi Tips dan Trik Komputer - Cara Sharing Printer di Windows 7 Melalui Jaringan LAN / Wifi. Sharing Printer merupakan salah satu manfaat dari sebu ...
- Cara Semoga Link Eksternal Terbuka Di Tab BaruSebagian orang mungkin ingin supaya eksternal link yang ada di blog sanggup dibuka pada tab gres secara otomatis tanpa perlu menggantinya secara manu ...
- Cara Mematikan Klik Kanan Pada Gambar Di BlogBagi kalian yang bekerja sebagai Graphic Designer kemudian sering mengupload atau mengunggah gambarnya ke website atau blog, maka Anda perlu menonakt ...
