Assalamualaikum warahmatullahi wabarakatuh.
Salam ceria selalu buat sahabat blogging yang tercinta. Semoga pada pertemuan ini Anda baik dan sehat selalu amin.. Untuk terus menghiasi hari hari yang menyenangkan. Pada hari ini saya akan sedikit berbagi yang saya ketahui salah satunya seperti apa yang saya tulis pada post ini, Mengenai Tips dan trik cara
"Cara Membuat Gallery Foto Cantik Dengan CSS" Sebetulnya tanpa rekayasa dengan Kode
CSS yang saya akan bagikan nanti. Mengunggah gambar/foto pada blog tetap bisa tampil dan muncul, Namun dengan standar yang tersaji oleh
Blogger hanya tampilan standar pada umumnya. Setelah kemarin saya publikasikan tentang :
Waspadalah Dengan Popok Bayi Rekondisi. Maka kesempatan yang baik ini saya akan berbagi cara membuat tampilan gambar atau gallery foto diblog akan semakin menarik dan cantik tentu kesanya agar enak dan nyaman untuk di lihat oleh semua pengunjung blog anda, Agar kesanya bisa memikat visitor yang sengaja datang ke blog Anda, Ataupun yang tidak sengaja mengunjungi blog anda. Gimana Sob penasaran..? Mari silahkan membaca artikelnya lebih lanjut dibawah ini.
Gallery Foto yang Cantik :
Bagi anda yang suka dengan berbagai koleksi gambar atau foto, atau juga background dan wallpaper lainya yang anda koleksi. Namun anda ingin di simpan disuatu situs atau blog agar moment atau gambar kesenanganya bisa tersimpan dengan aman dan rapi tidak ada salahnya penyimpananya dihiasi dengan tampilan yang menarik agar tidak bosan mata memandangnya. Disini saya akan memberikan tutorial cara membuat gallery foto sekaligus sedikit foto moment crew saya saat mentas pada salah satu tempat. Itu sebagai figuran saja sebagai pelengkap contoh pada tutorial ini. Jika gambar foto nya kurang cakep maklum ya,, itu semata hanya figuran saja.
Membuat Gambar-Foto lebih Menarik :
Ada beberapa cara agar gambar postingan atau kumpulan foto diblog menjadi lebih menarik. Contohnya seperti yang saya posting ini. Dengan serangkaian kode CSS Sebagai penghias agar gamabar foto tersebuat terkesan punya nilai lebih. Seperti pada web situs besar penyedia Gallery foto itu nanti jika trik ini bisa anda pasang. Karena saya terinfirasi dengan tampilan foto foto di situs tersebut maka saya ingin mencobanya di pajang pada blog saya. Dan dari pengalaman itu saya dapatkan maka pada hari ini saya ingin berbagi apa yang pernah saya ingin dan saya dapatkan.
Cara memasang Gallery foto dengan CSS :
Seperti biasa masuk Dashboard blog anda jangan lupa sign in : Setelah dashboard terbuka silahkan buka template selanjutnya pilih edite template. Selanjutnya Anda cari kode : ]]></b:skin> atau kode : </style> Tekan pada keyboard pc/laptop anda Ctr + F untuk memudahkan pencarian kodenya. Setelah ketemu kodenya, Selanjutnya copy kode dibawah ini dan pastekan tepat diatas kode : ]]></b:skin> atau kode : </style> Dibawah ini kode CSS nya :
.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; }
.ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; }
.ribbon-gallery img:hover { border:5px solid #52e052; }
.ribbon-gallery p { display: inline; }
.ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); }
.ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; }
.ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute;
Sampai pada tahap ini save/simpan dulu template blog anda, dan lanjutkan tahap berikutnya.
Cara memasang URL Foto pada halaman postingan :Setelah kode CSS diatas sudah tersimpan pada template anda. Maka agar gambar atau Foto anda bisa membentuk sebuah Gallery foto yang cantik dan menarik. Silahkan Masukan kode HTML dibawah ini pada area postingan, berikut dengan URL foto yang hendak anda pajang pada gallery tersebut. Pada kolom postingan pilih HTML jangan di kolom Compose, Dan saat Anda mempublikasikan artikelnya juga harus ada pada Kolom HTML. Di bawah ini kode Html nya :
<div class="ribbon-gallery">
<a href="http://karristaent.blogspot.com/"><img alt="NAMA FOTO1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51RA7VZKoo1OXUCyBqY463FlNHPQMguphzG6gQVEw4tJiya-9Io9KrGa0UVNpI0mWc5P0mY0Ek3hZRZIEazSMyLghYg7jPYkoUnjAStf8cr-S3zUHZpmx3T4pqqPpqM-aZgW_HPuPUhI/s1600/Gadizz+Melodyz+Mega+pwdTATI+KARRYSTA.jpg" /></a><p>
<span>NAMA FOTO1</span></p>
</div>
<div class="ribbon-gallery">
<a href="http://karristaent.blogspot.com/"><img alt="NAMA FOTO2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQjrmm2LaCtcFKWoT80lUIYcxc4RIU1OosCl-bvCUIxDc4-24Pdxeo4CL-mJHvJ5WO1yfwHpLDZk8CmAk1CoRpIL4-OdNiwKGtXmkUG5J9d2VvY95gAfFOY3EzhIZLZvhps65A2DWiCk/s1600/A.WINDA+S.JPG" /></a><p>
<span>NAMA FOTO2</span></p>
</div>
<div class="ribbon-gallery">
<a href="http://karristaent.blogspot.com/"><img alt="NAMA FOTO3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqw5gGwl-D3ObwJe_o1cWOm2Qc7ymoBqbBPSFdmhRqXK8LGNDzubEHEpig6NAghdJGq7S-X9naE1EiHXlcI_EQnEq1Ih2kAMpMkvgpFAHvWoJMTvY5h6WLJohDLCK6FrV2IMpWtxT3tNwR/s1600/NADA+KARRYSTA.jpg" /></a><p>
<span>NAMA FOTO3</span></p>
</div>
<div class="ribbon-gallery">
<a href="http://karristaent.blogspot.com/"><img alt="NAMA FOTO4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRok3AcSeqzFUFG4KJjuKPK8-VKN3I_jjK7ofa0SVxuUr6Ak9xzX7qiWHRnTQpxixoQ79bXrcm2cAeNhUgdTRV0BQ8VhsWDBuLYGosI91idOFtZyWA2FoUmsNre2AVhpBufh0FDvZbc4/s1600/Ade+Tati-The+Shoreline-10R-+print.jpg" /></a><p>
<span>NAMA FOTO4</span></p>
</div>
Keterangan :01. Yang perlu anda edit dan diganti agar sesuai dengan blog juga foto yang anda posting, Maka Ganti yang berwarna MERAH Dengan Url blog anda dan URL Foto yang akan di pasang pada galerry. 02. Ganti tulisan yang berwarna BIRU dengan Nama Foto/Gambar yang akan anda pajang. 03. Contoh Kode HTML diatas hanya berjumblah 4.foto saja. Jika anda ingin menambahkan foto lebih banyak lagi pada Gallery foto anda. Copy paste Kode yang berwarna ORANGE pastekan dibawah kode </div> yang terakhir. Jangan lupa kasih nama pada masing masing foto yang terpasang agar captionya bisa menampilkan selendang pading yang menyamping di sudut kanan atas pada setiap tampilan foto pada Gallery anda. Setelah semuanya diterapkan sesuai petunjuk. Yang Terakhir publikasikan artikel anda. Dan ingat saat mempublikasikan posisinya harus ada pada area posting di kolom HTML jangan di Kolom Compose.
Untuk melihat DEMO Tutorial ini silahkan buka halaman Demonya di bawah ini : Buka halaman ini untuk melihat : DEMO GALLERY 1Atau halaman ini untuk melihat : DEMO GALLERY 2Haturan :
Demikianlah kiranya yang bisa saya hadirkan buat anda semua. jika ada kesulitan silahkan diskusikan lewat form komentar dibawah ini. Mohon maaf jika ada kesalahan pada semua isi tulisan pada artikel ini. Jika anda bersedia melengkapi post yang saya bagikan ini. silahkan taburi dengan teks komentar. Semoga bisa di pahami, Selamat mencoba semoga berhasil "Cara Membuat Gallery Foto Cantik Dengan CSS" ini. Salam santun yang saya haturkan Salam Ceria yang saya bawa. Semoga sukses dan keberhasilan selalu bisa anda raih.. Happy Blogging...