Tahukah Anda tentang Cara Membuat Widget Testimonial Pada Blog Blogspot? Mengelola sebuah blog merupakan hal yang menyenangkan.
Selain dapat menjadi fasilitas berbagi info dan pengetahuan, blog juga dapat dijadikan sebagai sumber penghasilan tambahan.
Namun, tentunya mengelola blog ini bukanlah tanpa ilmu.
Terdapat beberapa hal yang harus diketahui bila ingin melakukan penyesuaian terhadap blog yang dimiliki, termasuk juga dengan ketika hendak menambahkan widget testimonial pada sebuah blog.
Cara Membuat Widget Testimonial Pada Blog Blogspot
Kamu juga belum tau tentang cara menambahkan widget testimonial pada sebuah blog?
Bila belum, coba yuk ikuti dulu artikel singkat dari kami yang berikut ini! Selamat menyimak!
1. Masuklah ke akun blogger, melalui Blogger.com
Disini kamu akan diharuskan untuk login dengan akun Gmail yang biasa kamu gunakan untuk akun blogger mu ya!
Ingat, jangan sampai salah akun bila ingin menemukan blog yang ingin kamu tambahkan widget testimonialnya!
2. Pilih blog yang kamu inginkan melalui tab halaman yang terdapat di tab kiri jendela pengaturan blog
Di tab halaman, kamu dapat mengelola banyaknya “halaman spesial” yang bisa kamu tampilkan kepada para pengunjung blog kamu.
Biasanya, di tab halaman ini juga terdapat halaman contact, disclaimer, dan privacy & policy yang telah kamu buat di masa lalu.
Bilapun belum pernah buat, besar kemungkinan tab halaman ini masih kosong, alias tidak ada isinya.
3. Buatlah halaman baru
Membuat halaman baru tidaklah sesulit yang kamu kira. Kamu hanya perlu menekan tombol untuk membuat halaman baru, dan jadilah!
Tapi, bilapun kamu ingin memanfaatkan halaman yang tidak terpakai, boleh-boleh saja kok!
Yang penting, jangan sampai bingung sebelum mencoba ya!
4. Pastikan kamu ada di bagian compose HTML
Nah, ketika kamu buat halaman baru, pastikan untuk masuk ke mode HTML nya ya!
5. Masukan script HTML dan CSS berikut:
<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=”Profile” title=”Profile” 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=”Profile” title=”Profile” class=”profile” />
<p>We are very pleased with our new brand identity. It has been a great experience working with him.</p>
</div>
<h3>Pebriyana F.<span>Graphic Designer</span></h3>
</div>
6. Silahkan edit script tadi sesuai dengan keperluan
Penyesuaian script tentu perlu dilakukan. Terutama, bila kamu ingin mengganti bagian nama, jabatan, kota, gambar, dan juga beberapa tulisan dari script yang kamu masukan tadi.
7. Simpan dan publish
Sebagus apapun halaman yang kamu buat tadi, tidak akan dapat diakses oleh pengunjung bila kamu tidak mempublishnya. Oleh karenanya, jangan lupa untuk tekan tombol publish ya! Bilapun
Selain diimplementasikan dalam halaman, widget testimony ini juga cocok untuk dipasangkan ke bagian sidebar blog atau di bagian postingan blog yang kamu miliki.
Selain menempelkan script tadi, kamu juga harus menempelkan baris kode berikut agar tanda kutipnya bisa muncul dengan sempurna.
<link href=’//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’ type=’text/css’/>
Sisipkan script tadi di sebelah atas kode </body> ya!
Oke, itulah tadi artikel singkat kami tentang cara mudah membuat widget testimonial pada sebuah blog.
Terimakasih telah menyimak artikel dari kami. Bilamana bermanfaat, tolong share juga ke teman-temanmu ya! Agar manfaatnya semakin membawa berkah!
Terimakasih telah menyimak artikel kami, sampai jumpa lagi di artikel kami yang selanjutnya!
Baca Juga : 2 Cara Menampilkan Author Profil Pada Blog WordPress
Hanya orang biasa yang berusaha memberikan informasi seakurat mungkin melalui blog sederhana ini.
