Cara Membuat Galeri Foto di Blog/Website

Sebelumnya saya sudah posting mengenai “Cara Membuat Kotak Script di Postingan Blog” dengan berbagai versi.

Sekarang saya akan lanjut ke topik pembahasan baru yaitu, bagaimana cara membuat galeri foto di Blog/Website dengan style grid.

Tutorial cara membuat galeri foto di blog/website ini, sangat recommended bagi teman yang hobi di bidang OLShop alias jualan online. Terutama untuk display produk.

Menariknya tips ini juga berlaku bagi yang maniak selfi. Makanya dibaca sampai selesai yah, karena ini penting banget lho!

Well! Sebagai Author, ada banyak cara yang bisa kita lakukan untuk optimasi pada website. Salah satunya mempercantik tampilan blog, dengan cara membuat galeri foto di blog/website.

Membuat galeri foto di blog sangat perlu diperhatikan. Sama halnya seperti tulisan, gambar atau foto juga memiliki peran penting untuk meningkatkan kualitas konten.

Bahkan banyak opini yang mengatakan bahwa sebuah gambar jauh lebih menarik perhatian daripada sebuah teks. Makanya nggak usah herman kalau netizen +62 suka bilang “nggak ada gambar = Hoax”. Cerdas!!

Melihat pertimbangan itu, dengan cara membuat galeri foto di blog. Maka artikel akan lebih informatif sehingga bisa meningkatkan daya tarik pengunjung dan tentunya mereka akan menyukainya.

Meng-upload foto atau gambar di postingan blog, bukan perkara yang sulit. Seperti yang kita tahu secara default, platform seperti blogspot, wordpress dan website lainnya masing-masing theme sudah menyediakan fitur "insert image".

Namun jika kita menggunakan cara ini, maka hasilnya hanya akan menyisipkan satu gambar per paragraf. Tak ada opsi lain, selain tata letak gambar (kanan, kiri dan tengah). Artinya gambar secara otomatis berderet memanjang ke bawah dan tidak mau gandengan. *Tjaahh

Kalau hanya meng-upload 1 – 3 foto mungkin tidak terlalu kentara, tapi bagaimana dengan jumlah yang banyak. Wuah bisa gempor deng!

Nah untuk memecahkan masalah tersebut, kita bisa dengan cara membuat galeri foto di blog/website dengan style grid. Sehingga ketika kita memasukan banyak foto sekaligus di dalam sebuah postingan, maka grid akan menampilkan foto di dalam kotak – kotak yang tersusun rapi sedemikian rupa.

Galeri foto style grid

Sebagai contoh mungkin sobat bisa lihat interface di Instagram, Marketplace atau OLShop seperti : bukalapak, tokopedia, dan sejenisnya. Biasanya di sana sobat akan menemukan display produk berupa foto/gambar yang disusun rapi di dalam tiga baris – kolom dan memanjang ke bawah.

Umumnya pula foto/gambar yang ditampilkan akan lebih kecil dari aslinya, namun jika diklik akan menampilkan gambar secara penuh atau bahkan langsung menuju link tertentu (bisa diatur).

Sedangkan untuk blog personal, konsep grid ini bisa kita gunakan untuk memajang rangkaian foto selfi, foto dokumentasi acara seremonial atau perjalanan wisata, dan karya lainnya. Sehingga tampilan blog akan terlihat lebih profesional.

Nah beda caranya meng-upload foto dengan fitur "insert image" bawaan platform. Cara membuat galeri foto di blog/website kita memerlukan keterampilan khusus agar tampilan foto-foto tersebut menjadi menarik, yaitu dengan menambahkan kode script-nya secara manual ke bagian HTML pada postingan.

OK then, let's get started.. :)

Bagaimana cara membuat galeri foto di Blog/Website??

Berikut cara membuat galeri foto di blog/website. Silahkan ikuti step by step- nya :

1. Masuk ke Dashboard

2. Buat Posting/New Entry

3. Ganti mode penulisan dari “Compose” menjadi “HTML”

4. Copy script code di bawah ini, dan Paste-kan pada laman kerja sobat (masih di mode HTML lho). 

Script code -nya :

<div class="snap_preview">
<style type="text/css">
.gallery{margin : auto ;}
.gallery-item{float : left ; width : 33% ;}
.gallery-caption { margin-left : 0; }
</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar1" target="_blank"><img border="0" height="200" src="URL gambar1" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar2" target="_blank"><img border="0" height="200" src="URL gambar2" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar3" target="_blank"><img border="0" height="200" src="URL gambar3" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar4" target="_blank"><img border="0" height="200" src="URL gambar4" width="150" /></a>
</dt></dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar5" target="_blank"><img border="0" height="200" src="URL gambar5" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar6" target="_blank"><img border="0" height="200" src="URL gambar6" width="150" /></a>
</dt>
</dl>
</div>
</div>

Keterangan script code di atas :

*Perhatikan tulisan berwarna merah!

• 33 % : tampilan gambar berjajar sebanyak 3 (100/3), jika ingin berjajar 4 (100/4) diubah jadi 25%, atau jika ingin berjajar 2 diubah jadi 50%.
• “150”dan“200” : lebar dan tinggi gambar (bisa diatur). Silahkan sesuaikan dengan keinginan sobat, dan upayakan jangan melebihi lebar area konten.
• URL gambar : ganti dengan URL gambar.
• Link gambar : ganti dengan link gambar (jika tidak ada cukup masukkan URL gambar) 

5. Sebelum dipublish, silahkan klik “Pratinjau” untuk memastikan script sudah berjalan. Kalau hasilnya telah sesuai dengan keinginan sobat, silahkan publikasikan. DONE

Sekarang lihat hasilnya *Jrenjengjreng!!!

Jika sobat ingin menambah foto, silahkan copy script code di bawah ini, lalu paste-kan tepat di bawah  </dl> 

 

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="Link gambar" target="_blank"><img border="0" height="200" src="URL gambar" width="150" /></a>
</dt>
</dl>

Selanjutnya! Jika sobat ingin menulis konten penjelasan galeri foto tersebut. Silahkan kembali ganti mode penulisan dari “HTML” menjadi “Compose”. Lalu tulis konten seperti biasa sampai selesai. Sebelum dipublikasikan, jangan lupa di simpan dulu ya, nanti capek lagi ngetiknya. 😊

Kalau sudah paham kode script-nya, bisa kita modifikasi sendiri. Misalnya kalau galeri foto di atas saya modif dengan menggunakan “Caption” dan “Link”. Sehingga ketika foto di bawah ini di-klik, maka akan menuju halaman baru.

Lihat hasilnya! *Jrenjengjreng!!!

Espresso

Kati-kati

Kopi Sumatra

Atau siapa tahu gitu ada yang mau nyoba bagaimana cara membuat galeri foto di blog/website, seperti punya miminho di bawah ini.

Lihat hasilnya! *Jrenjengjreng lagi. Ah.. stop it you! 😆

Nah kira-kira seperti itu cara membuat galeri foto di Blog. Silahkan sobat berkreasi sendiri, mainkan proferti di CSS -nya. K(e)reatifitas setiap insan manusia itu kan berbeda - beda.

⚠ Saran : Agar tidak acak – acakan! Sebaiknya terlebih dahulu buat galeri foto (album), selanjutnya tulis konten.

Omong-omong tutorial cara membuat galeri foto di blog/website ini tidak hanya berlaku di platform blog ya. Kalau sudah ngerti sih, tips ini juga bisa kok diterapkan pada website yang di design sendiri. Seperti galeri foto untuk display product punya miminho (Lihat capture paling atas).

Demikian pembahasan tentang cara membuat galeri foto di Blog/Website, semoga bermanfaat khususnya bagi sobat newbie. Selamat mencoba!

Oh iya, seandainya sobat kurang tertarik dengan galeri foto dengan style grid. Mungkin sobat bisa mencoba “Cara Membuat Galeri Foto dengan Fitur Scroll”. Terima kasih

See you on top.. :)

Nite & GBU more. Bye..!!

Cara Membuat Kotak Scroll di Postingan Blog/Website

Ngopi sadayana! 😎

Pembahasan kali ini masih seputar kotak amal.. eh kotak amal, kotak script dong maksudnya anak muda! ^ _ ^

Uniknya kotak script yang satu ini memiliki fitur scroll, atau disebut juga kotak scroll (scroll box). So, saya akan membahas bagaimana cara membuat kotak scroll di postingan blog/website.

Sebelum saya lanjutkan :

Sebetulnya kalau pembahasan ini mau saya buat dengan format serius, bisa. Materinya digabung atau dipadatkan dalam satu artikel. Tapi saya sengaja tidak menggunakan pendekatan itu.

Di sini saya hanya sekedar latihan, sekaligus mengajak sobat (khususnya newbie) agar sama-sama belajar dalam memahami kode script dan fungsinya secara perlahan, tapi PASTI! Jadi kalau terkesan bertele-tele, mohon disori. 😄

Okey! Back to topick..

Bicara soal kotak script (text box area) atau kotak catatan di postingan blog/website memiliki banyak versi yang bisa kita modifikasi.

Misalnya : kotak script minimalis, kotak script sudut melengkung, kotak script efek bayangan, dan termasuk kotak script dengan fitur scroll seperti yang sedang kita obrolkan ini.

Jadi gini! Membuat artikel yang informatif “singkat – padat – jelas” memang sangatlah disarankan. Tapi terkadang ada juga yekan artikel yang membutuhkan pembahasan yang lebih intens, sehingga membuat wrapper (isi artikel) menjadi panjangggg..! *kyak Tol Cipali

So, dont worry!! Solusi untuk artikel yang kepanjangan adalah dengan membuat kotak scroll di postingan blog.

Kotak scroll (scroll box) adalah kotak yang memiliki fitur scroll bar yang akan membuat teks yang berada di kotak tersebut bisa dituliskan sepanjang-panjangnya tanpa menampilkan banyak teks pada wrapper.

Apa itu Scroll Bar??

Scroll bar adalah salah satu kode script bahasa program HTML. Scroll bar inilah yang menjadi alat kontrol yang akan kita gunakan untuk menggulung sebagian tulisan di dalam kotak.

Jadi, kotak scroll fungsinya untuk mempersingkat teks atau meringkas tulisan yang panjang di artikel. Artinya tulisan panjang tersebut dapat digulir (di-scroll) di dalam kotak scroll yang sudah dibuat.

Intinya dengan membuat kotak scroll di postingan blog, maka akan lebih efisien meminimalkan tempat pada halaman artikel. Sehingga tidak boros tempat dan tentu saja tampilan postingan akan terlihat dinamis.

Berikut ini ada tiga versi kotak scroll, sangat bagus digunakan di postingan blog personal. Langsung saja yuk meluncur ke TKP. Check it out :

1. Kotak Scroll Vertikal

Kotak Scroll Vertikal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah atas–bawah. Sehingga tulisan ini bisa digulir naik–turun atau secara vertikal.

Script– nya :

<div style="background-color: #111111; border-radius: 5px; border: 4px solid red; color: green; height: 100px; width: auto; overflow: auto; padding: 10px; text-align: left; "> Tulis artikel anda di sini..! </div>

Hasilnya :

Ini Contoh kotak scroll vertikal dengan menggunakan kode script di atas. Maka tulisan di dalam kotak ini bisa digulir naik – turun atau secara vertikal.

Cara membuat kotak scroll vertikal cukup mudah yaitu dengan menseting  overflow : auto ;  tanpa setingan “paksa” pada tag paragraf  <p>  sehingga secara otomatis tulisan di dalam kotak akan memanjang vertikal (atas – bawah)

2. Kotak Scroll Horizontal

Kotak Scroll Horizontal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah kiri–kanan. Sehingga tulisan ini bisa digulir menyamping atau secara horizontal. 

Script– nya :

<div style="background-color: #ffeb7e; border-radius: 0px; border: 4px solid rgb(255, 0, 0); width: auto; height: 100px; overflow-x: scroll; overflow-y: hidden; overflow: scroll hidden; padding: 10px; text-align: left; "><p style="width: 250%;"> Tulis artikel anda di sini..! </p></div></div>

Hasilnya :

Ini contoh kotak scroll horizontal dengan menggunakan kode script di atas, maka tulisan di dalam kotak ini bisa digulir ke samping atau secara horizontal. Cara membuat kotak scroll horizontal yaitu dengan menggunakan fungsi overflow–x  dan perlu menyeting “paksa” pada tag paragraf  <p>  dengan memberi value width : 250% artinya konten di dalam kotak akan lebih lebar 250% daripada kotak scroll. Sehingga hal ini akan memaksa terjadinya overflow (scroll bar horizontal).

3. Kotak Script Vertikal & Horizontal

Kotak Scroll Vertikal & Horizontal artinya scroll bar akan menggulung artikel di dalam kotak dengan bentuk memanjang ke arah kiri–kanan, dan ke arah atas–bawah. Sehingga tulisan ini bisa digulir naik–turun dan menyamping atau secara vertikal & horizontal.

Script– nya :

 

<div style="background-color: #ff5c5c; border: 4px solid rgb(2, 209, 68); box-shadow: 0px 0px 10px; height: 100px; overflow-y:scroll; overflow-x:scroll; padding: 10px; text-align: left; width: auto;"><p style="width: 250%;"> Tulis artikel anda di sini..! </p></div>

Hasilnya :

Ini contoh kotak scroll vertikal & horizontal dengan menggunakan kode script di atas, maka tulisan di dalam kotak ini bisa digulir naik – turun dan menyamping atau secara vertikal & horizontal.
Cara membuat kotak scroll vertikal & horizontal yaitu dengan menggunakan fungsi overflow-x dan overflow-y, serta perlu menyeting “paksa” pada tag paragraf <p> dengan memberi value width : 250%,
Artinya konten di dalam kotak akan lebih lebar 250% dan lebih tinggi 250%. Sehingga hal ini akan memaksa terjadinya overflow (menyebabkan munculnya scroll bar vertikal & horizontal).

Ket :

• Overflow-x : posisi scroll pada sumbu x
• Overflow-y : posisi scroll pada sumbu y
• Height : tinggi kotak scroll (bisa diatur)
• Width : lebar kotak scroll (bisa diatur)
• <p width : 250%> : lebar paragraf di dalam kotak scroll (bisa diatur)

Kesimpulan :

Cara membuat kotak scroll di postingan blog, kita hanya perlu menambahkan value height, width, dan overflow ke dalam tag <div> di HTML-nya. Ketiga value tersebut akan menentukan seberapa besar kotak scroll dan arah scrolling yang akan ditampilkan.

Baca juga :

● Cara Membuat Kotak Script Minimalis

---

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Nah Kira–kira seperti itu sob, cara membuat kotak scroll di postingan blog.

Silahkan sobat berkreasi sendiri, misalnya coba bagaimana cara membuat kotak scroll dengan background gambar. Seperti punya miminho di bawah ini. Keren yekan! Tunggu apa lagi, langsung saja di-scroll.. *maksa* 😄

Ini contoh kotak scroll vertikal dengan background gambar - So, demi menambah kreasi di Blog, penguasaan dan teknik design kecil - kecilan seperti ini sangat diharapkan sedikit.
Saran : Sebaiknya gunakan kotak scroll sesuai kebutuhan terutama dalam pemakaian di artikel. Selamat mencoba!
By : Rico Sihaloho

Ketahuilah Sobat!!
“Orang boleh pandai setinggi langit, tapi selama ia tak menulis, ia akan hilang di dalam masyarakat dan dari sejarah " - Pramoedya Ananta Toer

Next..

Bagaimana cara memasang kotak scroll di postingan blog/website?

Berikut cara memasang kotak scroll di postingan blog. Silahkan ikuti step by step-nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai.
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis artikel anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak scroll.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Sekian pembahasan tentang cara membuat kotak scroll di postingan blog/website. Semoga tips dan trick di atas cukup jelas dan mudah dipahami.

Monmaap kalau ada kata-kata saya yang kurang berkenan. Kalau ada yang kurang jelas. Ingatlah! Kolom komentar terbuka untuk umum kok anak muda.. hehe. Terima kasih!

Happy blogging..

Nite & GBU more. Bye..!!

Cara Membuat Kotak Catatan dengan Efek Bayangan di Postingan Blog/Website

Ngopi sadayana! 😎

Well, waktu luang kali ini saya akan membahas bagaimana cara membuat kotak catatan dengan efek bayangan di postingan blog/website.

Kotak catatan atau kotak script atau disebut juga text box area fungsinya sama, yaitu : sebagai tempat meletakkan kode-kode script (khususnya buat arahan tutorial) atau tempat khusus poin-poin penting atau catatan penegasan pada postingan di blog, agar halaman posting telihat responsive.

Sehingga pesan ataupun informasi yang kita sampaikan dalam artikel tersebut dapat di mengerti dengan baik oleh pembaca.

Jadi ya, penting nggak penting! Kalau seseorang berminat berkecimpung dalam dunia karya tulis, terutama yang berhubungan dengan dunia teknologi informasi. Kita perlu (wajib) mempunyai sedikit keahlian yang bisa kita aplikasikan pada artikelnya.

Setidaknya dari hal-hal kecil. Seperti judul thread di atas, cara membuat kotak catatan dengan efek bayangan di postingan blog. Ya, agar tulisan pada postingan kita lebih ada feel -nya gitu. Nggak mau kan blognya polos aje kyak gedebong pisang?? 😆

Pernah dong lihat kotak catatan dengan efek bayangan di beberapa artikelnya para Blogger? “PERNAH!!!”. Tapi bisa nggak bikinnya? “NGGAK!!”. Kalau belum bisa, sinih belajar yuk..

“Ini contoh kotak catatan dengan efek bayangan di postingan blog/website” – Rico Sihaloho

Keren yakan!! Semacam ilusi optik gitu..

Djujur! Awalnya saya kira ini sebuah gambar hasil sotoshop, yang kemudian di-upload. Sebagai pemilik blog gado-gado rasa pare, tentu saja hal tersebut menjadi suatu ancaman yang serius bagi saya pribadi. Kenapa yang lain bisa, saya nggak? Padahal platformnya sama – Think Big!!

So, what the next step?

“Jikalaupun saya akan mati esok hari,
saya akan tetap bahagia hari ini”
- Ngopi sadayana! 😎

Cari solusi.. googling-googling!

Caranya sebetulnya tidak terlalu sulit, tetapi tidak mudah juga. Minimal kita tahu apa itu arti kode script -nya, bagaimana memakainya dan apa fungsinya.

Cara membuat kotak catatan dengan efek bayangan di postingan blog, kita hanya perlu menambahkan kode script CSS (Cascading Style Sheet) pada tag <div> di HTML-nya, yaitu "box-shadow".

Apa itu box-shadow?

Box shadow (box-shadow) adalah salah satu properti bahasa program CSS3, dan box-shadow fungsinya untuk membuat efek bayangan pada sebuah element HTML.

Shorthand untuk box-shadow ini adalah

“box-shadow : [value] ;” atau  box-shadow : [h-shadow v-shadow blur spread color] ; 

Contoh penulisannya : box-shadow : 10px 10px 5px 7px red ;

Ket :

h-shadow : posisi dan besar bayangan horizontal

v-shadow : posisi dan besar bayangan vertikal

blur : besaran dan jarak blur (opsional)

spread : ukuran bayangan (opsional)

color : warna bayangan (opsional)

Oke daripada tambah puyeng. Langsung saja kita meluncur ke TKP.

Berikut ini cara membuat kotak catatan dengan efek bayangan di postingan blog, lihat kode script dan wujudnya di bawah ini. Check it out :

#. Mengatur posisi efek bayangan

Misalnya :  box-shadow : 10px 10px ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Selanjutnya...

Kalau sobat ingin membuat bayangan ke arah kiri dan atas, kita tinggal menggunakan angka negatif (-) saja pada value -nya.

Misalnya :  box-shadow : -10px -10px ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kiri dan 10 pixel ke atas. 

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) -10px -10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengatur efek blur bayangan

Selain posisi bayangan, kita juga bisa mengatur seberapa ‘samar’ bayangan yang ditampilkan. Dalam istilah design, ini dikenal dengan istilah blur.

Sebagai catatan "semakin tinggi nilai blur, semakin samar-samar bayangan yang ditampilkan".

Misalnya :  box-shadow : 10px 10px 15px; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah dengan blur sebesar 15 pixel.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 15px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengatur besar bayangan

Value berikutnya yang bisa di-input ke dalam properti box-shadow yaitu spread. Spread akan menentukan seberapa besar bayangan yang dibentuk.

Misalnya :  box-shadow : 10px 10px 0px 7px ; 

Maka akan menghasilkan efek bayangan akan terlihat lebih besar dari sebelumnya. Ini karena kita memberi spread dengan value sebesar 7 pixel.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 0px 7px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengganti warna bayangan

Secara default bawaan web browser bayangan akan tampil dengan warna hitam. Namun untuk mengganti warna bayangan ini, kita bisa menambahkan input value untuk warna ke dalam properti box-shadow.

Misalnya :  box-shadow : -10px -10px 5px 7px red ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kiri, 10 pixel ke atas, blur sebesar 5 pixel, spread sebesar 7 pixel, dan bayangan berwarna merah.

Lihat hasilnya :

<div style="background-color: khaki; border-radius: 7px; box-shadow: -10px -10px 5px 7px red, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Selanjutnya! Bisa kita modifikasi dengan mengganti warna bayangan, tanpa efek blur dan tanpa spread.

Misalnya,  box-shadow : 10px 10px red; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah, dengan bayangan warna merah

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: 10px 10px red, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Kesimpulan : untuk properti box-shadow setidaknya perlu memiliki 2 value utama, yaitu h-shadow & v-shadow yang menentukan seberapa jauh jarak bayangan yang akan ditampilkan.

Baca juga :

● Cara Membuat Kotak Script Minimalis

---

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Kira-kira seperti itu cara membuat kotak catatan dengan efek bayangan di postingan blog.

Silahkan  sobat bereksperimen dengan nilai vertikal, horizontal, blur, warna dan efek jatuhnya bayangan. Misalnya coba menggunakan fitur solid single-border, double-border, inset, outset, ridge, groove, etc. Dicari-cari saja di bagian widget blog ini (gratis kok!).

Yaps! dikondisikan saja sob sesuka hati, agar postingannya tambah sipp! Kalau kata para mastah nih yee, biar tampilan blog jadi "eye-catching" gitu.. 😄

Atau siapa tahu ada yang mau nyoba bagaimana cara membuat gambar dengan efek bayangan (box-shadow) seperti punya miminho di bawah ini.

Next..

Bagaimana cara memasang kotak catatan dengan efek bayangan di postingan blog/website?

Berikut cara membuat kotak catatan dengan efek bayangan di postingan blog. Silahkan ikuti step by step- nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai
• Ganti mode penulisan dari "Compose" menjadi "HTML"
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau
• Kembali ganti mode penulisan dari "HTML" menjadi "Compose", lalu edit “Tulis catatan penting di sini..!” dan ganti dengan tulisan sobat yang mau dimasukan dalam kotak catatan
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Sekian pembahasan tentang cara membuat kotak catatan dengan efek bayangan di postingan blog/website, yang bisa saya sharing-kan di sini. Semoga bermanfaat bagi yang membutuhkan, dan sukses dalam segala urusan. Eimen!

Kalau ada yang kurang jelas, silahkan berikan komentar atau sekedar menambah informasi. Terima kasih!

See you on top..

Nite & GBU more. Bye..!!

Membuat Kotak Script dengan Sudut Melengkung di Postingan Blog/Website

Ngopi sadayana! 😎

Sesuai judul thread, kali ini saya akan membahas cara membuat kotak script dengan sudut melengkung di postingan blog/website.

Yaps! Dengan membuat kotak script sudut melengkung di postingan blog, maka kotak script atau text box akan terlihat lebih menarik. Jadi bentuknya nggak kotak-kotak aje kyak papan catur ^ _ ^.

Cara membuat kotak script dengan sudut melengkung di postingan blog, tidak jauh beda dengan “Cara membuat kotak script sederhana” Hanya saja ada penambahan kode script CSS (Cascading Style Sheet) pada tag <div> di HTML-nya, yaitu “border-radius”.

Apa itu border-radius?

Border radius (border-radius) adalah salah satu property bahasa program CSS3, dan border-radius fungsinya untuk membuat lengkungan pada sudut kotak tag html.

Jadi gini! Biasanya jika kita memberi nilai height dan width pada tag html, maka unjungnya otomatis akan membentuk sudut 90° atau persegi. Nah, dengan border-radius ini kita bisa membuat lengkungan di sudut tadi.

Contoh kotak script dengan sudut melengkung di postingan blog/website - Rico Sihaloho

Awalnya saya sempet bingung melihat tutorial cara membuat kotak script dengan sudut melengkung di beberapa artikelnya para mastah. Saya menemukan dua versi, ada yang menggunakan markup “-moz-border-radius”. Dan ada juga yang menggunakan “border-radius”.

Well, pengalaman adalah guru yang terbaik. Jadi saya akan berbagi pengalaman yang mungkin tidak bernilai ini. Alih-alih dengan alesan penisirin, saya pun sudah mencoba kedua markup tersebut. Ternyata hasilnya sama saja.

FYI, setelah ngulik sana sini, informasi yang saya dapat bahwa sebelum markup “border-radius” punya CSS3 belum support di beberapa browser. Firefox sudah terlebih dahulu membuat versi mereka sendiri yaitu “-moz-border-radius”.

Kesimpulan, markup “-moz-border-radius dan border-radius” fungsinya sama yaitu untuk membuat kotak dengan sudut melengkung. Bisa dikatakan “border-radius” itu markup yang sudah di-update dan sudah support di beberapa browser. Seperti : Chrome, Safari, Firefox dan Opera, IE (Internet Explorer).

Ah, lupakan mengenai browser, back to topick!

Shorthand untuk border-radius ini adalah

“border-radius : [value] ;” atau  “border-radius : [topleft topright bottomright bottomleft] ;”  

Contoh : border-radius : 0px 50px 50px 0px ;

Sebagai catatan : cara penulisan value sesuai dengan arah jarum jam, dan jika semua nilai border radius-nya sama, kita cukup mengetikkan satu value saja.

Contoh : border-radius : 10px ; (artinya semua sudut akan sama melengkung sebesar 10 pixel).

Namun sebelum kita masuk ke cara membuat kotak script dengan sudut melengkung di postingan blog, terlebih dahulu kita mempelajari kode script yang akan kita gunakan, dan lihat preview gambar kotak script-nya.

Mau coba?? 😎

Di bawah ini ada beberapa listing code untuk membuat kotak script dengan sudut melengkung di postingan blog, yang bisa sobat pilih. Check it out :

Kotak Script minimalis tanpa lis border

<div style="background-color: #ffad08; border-radius: 20px; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px

<div style="background-color: #6fa8dc; border-radius: 20px; border: 2px solid rgb(178, 34, 34); padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px

<div style="background-color: #f3f3f3; border-radius: 20px; border: 4px solid rgb(153, 153, 153); padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border

<div style="background-color: #ff5c5c; border-radius: 20px; border: 3px double rgb(255, 255, 255); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border
 

<div style="background-color: white; border-radius: 30px; border-top: 10px solid red; color: green; overflow: auto; padding: 10px; text-align:center;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border

<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-right border

<div style="background-color: ghostwhite; border-left: 10px solid gray; border-radius: 30px; border-right: 10px solid gray; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)

 

<div style="background-color: chartreuse; border-radius: 20px; border: 4px dotted rgb(34, 136, 221); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak Script dengan dashed-border (garis terputus-putus)

 

<div style="background-color: #fff952; border-radius: 20px; border: 4px dashed rgb(220, 20, 60); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan inset-border (seperti tertaman pada halaman postingan)

<div style="background-color: lightskyblue; border-radius: 20px; border: 4px inset white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan outset-border (seperti keluar dari halaman postingan)

<div style="background-color: darkturquoise; border-radius: 20px; border: 4px outset red; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak script dengan ridge-border (seperti timbul)

 

<div style="background-color: red; border-radius: 20px; border: 4px ridge rgb(0, 191, 255); color: white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan groove-border (seperti masuk kedalam halaman)

 

<div style="background-color: #ffe599; border-radius: 20px; border: 4px groove rgb(170, 170, 170); padding: 10px;"> Tulis script anda di sini..! </div>

Keterangan :

• border-radius : semakin besar value-nya maka sudut kotak script semakin melengkung.
• background-color : warna kotak script, silahkan diganti dengan warna kesukaan sobat (boleh pakai nama warna, kode warna/ hexadesimal, atau RGB / red-green-blue)
• text-align atau t-align : posisi tulisan (left-center-right)

Silahkan berkreasi sendiri, misalnya coba bagaimana cara membuat gambar dengan sudut melengkung (border-radius) , seperti punya miminho di bawah ini. Keren yekan?? 😄

Next..

Bagaimana cara membuat kotak script dengan sudut melengkung di postingan blog/website?

Berikut cara membuat kotak script dengan sudut melengkung di postingan blog. Silahkan ikuti step by step-nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai.
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis script anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Demikian pembahasan cara membuat kotak script dengan sudut melengkung di postingan blog/website. Semoga membantu dan bermanfaat bagi sobat yang membutuhkan. Selamat mencoba!

Baca juga :

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Jika tutorial ini dirasa agak membingungkan, silahkan bertanya di kolom komentar atau by direct message email juga boleh kok. Terima kasih!

See you on top..

Nite & GBU more. Bye!!

Cara Membuat Kotak Script di Postingan Blog/Website

Pada kesempatan kali ini, saya akan membahas cara membuat kotak script di postingan blog/website.

Tutorial membuat kotak script di postingan blog ini saya buat sekadar latihan, sekaligus menyimpan arsip untuk saya jadikan referensi buat diri sendiri. Namun semoga juga bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya.

To the point..

Dalam menyampaikan sebuah informasi berbasis web, tentu membuat kotak script di postingan blog itu sangat penting.

Selain untuk mempermudah pembaca memahami tulisan kita, halaman postingan juga akan telihat rapi dan terkesan lebih elegan. Sehingga pembaca bisa membedakan mana script dan mana artikelnya.

Kotak script atau text box area adalah sebuah kotak khusus yang bisa digunakan untuk meletakkan kode script HTML, CSS, Java script, atau bahasa pemograman lainnya.

Tidak hanya itu, kotak script juga bisa digunakan untuk catatan penting atau tulisan penegasan pada postingan di blog.

Sebetulnya kotak script sendiri hanya sebuah text box biasa pada umumnya. Namun dengan membuat kotak script di postingan blog, konten yang ditampilkan akan lebih profesional.

Jadi tidak tercampur antara kode script dengan wrapper (tulisan artikel). Bisa dikatakan kotak script semacam kutipan atau blockquote.

Secara default, platform Blogspot dan Wordpress masing-masing theme sudah menyediakan fitur “blockquote”.

Kita hanya tinggal menseting, dengan cara drag paragraf-nya dan klik “tanda kutip dua” di bagian toolbar pada panel postingan. Hanya saja layout-nya kurang menarik (menurut saya). Dan modelnya juga cuma itu-itu saja.

Berbeda dengan blockquote, cara membuat kotak script di postingan blog kita perlu menambahkan kode script-nya secara manual ke bagian HTML pada postingan. Dan kita bisa modifikasi dengan berbagai macam gaya.

Contoh kotak script sederhana di postingan blog :

Cara Membuat Kotak Script di Postingan Blog/Website – Rico Sihaloho

Dengan embel-embel kotak script tentunya visualnya lebih menarik bukan? Tertarik?

Namun sebelum kita masuk ke cara membuat kotak script di postingan blog, terlebih dahulu kita mempelajari kode script yang akan kita gunakan, dan lihat preview gambar kotak script-nya.

Di bawah ini ada beberapa listing code untuk membuat kotak script di postingan blog, yang bisa sobat pilih. Check it out :

Kotak Script sederhana tanpa lis border

 

<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px

 

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px

 

<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border

 

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border

 

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border

 

<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)

 

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dashed-border (garis putus-putus)

 

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan inset-border (seperti tertanam pada halaman postingan)

 

<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan outset-border (seperti keluar dari halaman postingan)

 

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan ridge-border (seperti timbul)

 

<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan groove-border (seperti masuk ke dalam halaman postingan)

 

<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Note :

• background-color (warna kotak script)
• border-color (warna garis border)
• border : (..)px (ketebalan garis border)
• text-align (posisi script).

Nah kira-kira seperti itu cara membuat kotak script sederhana di postingan blog/website.

Selanjutnya silahkan berkreasi sendiri untuk warna, bentuk dan ukuran kotak script bisa kita custom sesuka kita.

Baca juga :

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tombol Spoiler di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Next..

Bagaimana cara membuat kotak script di postingan blog?

Berikut cara membuat kotak script di postingan blog. Silahkan ikuti step by step nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis script anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.

DONE. Demikian pembahasan cara membuat kotak script di postingan blog/website. Semoga membantu dan bermanfaat bagi sobat yang membutuhkan. Salam CMIIW aje dah! 😎

Kalau ada yang kurang paham boleh tanya-tanya di kolom komentar atau by direct message email. Terima kasih!

See you on top..

Nite & GBU more. Bye!!