2 Style Caption Keren Pada Gambar Di Postingan Blogger
2 Style Caption Keren Pada Gambar Di Postingan Blogger - KUBIS.online - Cara Membuat Caption Keren Pada Gambar Di Postingan Blogger mungkin saja bagi sebagian orang hal tersebut tidak dianggap penting.
 |
| 2 Style Caption Keren Pada Gambar Di Postingan Blogger (www.kubis.online) |
Tetapi bagi yang suka melihat tampilan rapi pada postingan dan tentu saja hal ini akan berpengaruh terhadap nilai SEO karena masuk ke dalam ranah optomasi gambar di postingan blogger maka hal sepele seperti ini bisa memiliki nilai plus buat kita coba.
Caption pada foto atau gambar di postingan blog tentu harus memberikan informasi mendasar terkait dengan relevansi postingan tersebut.
Keterangan pada caption tentunya akan membawa atau mengarahkan pembaca terkait dengan apa yang mereka cari, sehingga disini diharapkan dalam memberikan caption atau deskripsi pada gambar postingan harus jelas, singkat dan sesuai isi konten.
Agar tidak bosan dengan tampilan caption blog yang monoton atau standar, berikut ini akan saya bagikan beberapa style caption gambar pada postingan blog yang bisa anda aplikasikan anntinya di situs anda.
Caption Gambar Postingan Blogger Mirip Template Link Magz
Jika anda yang suka berkreasi dengan membuat tampilan postingan di blog menjadi lebih keren, maka opsi caption style pertama ini bisa menjadi pilihan yang tepat.
Tampilannya sangat mirip dengan caption gambar di template Link Magz dan juga web populer seperti idntimes, untuk tampilannya anda bisa lihat pada gambar berikut.
Hasilnya seperti ini.
Langkahnya:
1. Buka dashbord blogger anda lalu masuk ke opsi Tema
2. Selanjutnya klik menu yang ada di samping sesuaikan lalu anda pilih Edit HTML
3. Jika sudah selanjutnya silahkan anda cari code ]]></b:skin> atau </style> dan letakkan kode sebelumnya atau setelahnya, sesuaikan dengan kondisi template anda.
/** Caption By www.kubis.online **/
.post-body table.tr-caption-container {
margin-bottom: 16px;
margin-bottom: 1rem;
position: relative;
overflow: hidden; }
.post-body td.tr-caption {
font-size: 12px;
font-size: 0.73rem;
position: absolute;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 3px 10px;
color: #fff;
border-radius: 6px 0 0 0;
word-break: break-word; }
.post-body table.tr-caption-container a, .post-body table.tr-caption-container img {
display: block;
margin-bottom: 0 !important; }
4. Klik Simpan
Silahkan anda lihat hasilnya untuk bisa disesuaikan nantinya untuk ukurannya biar pas dan enak dipandang.
Baca juga: 4 Cara Menghapus/ Menghilangkan Tanggal Di Postingan Blog
Caption Gambar Postingan Blog Style Simple
Apabila anda suka dengan design minimalis, simpel tetapi elegan, maka style kedua ini bisa menjadi pilihan anda. Kodenya lebih sedikit sehingga lebih ringan dimuat pada blog anda, tampilannya seperti dibawah ini.
Langkahnya sama saja seperti langkah sebelumnya, hanya kodenya saja yang berbeda, disini saya berikan kode yang lebih simpel, siapa tau anda suka dengan design simpel aesthetic atau apalah istilahnya.
1. Buka dashbord blogger anda lalu masuk ke opsi Tema
2. Selanjutnya klik menu yang ada di samping sesuaikan lalu anda pilih Edit HTML
3. Jika sudah selanjutnya silahkan anda cari code ]]></b:skin> atau </style> dan letakkan kode setelahnya.
NOTE: Untuk penerapan setiap template bisa saja berbeda, ada diletakkan sebelum kode diatas, namun beberapa diantaranya ada yang setelahnya! Silahkan anda coba..
/** Caption Model Simpel by www.kubis.online**/
.tr-caption {font-size:12px; color:#777;float:left;margin-bottom:-18px}
4. Terakhir klik Save
Disana anda sesuaikan kembali tampilannya supaya sesuai dengan keinginan, seperti Padding, font size dll.
Baca juga: Cara Membuat Popular Post Keren DI Blog Dengan Rating Bintang dan Bisa Discroll
Penutup
Demikian tutorial dan penjelasan singkat saya kali ini mengenai 2 Style Caption Keren Pada Gambar Di Postingan Blogger, semoga bisa membantu teman -teman blogger, mari kita belajar bersama, silahkan tinggalkan komentar anda di kolom komentar dibawah ini jika ada yang perlu ditayakan atau didiskusikan. Terimakasih
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !