Align Gambar Teks Widget Blogger

Post Comment

Pengguna biasa, Blogger, jarang atau tidak tahu cara menata gambar dan teks di dalam widget blog-nya. Ternyata untuk melengkapi keindahan tampilannya tidak semudah dan sesederhana yang dikerjakan sebelumnya.

Keluhan itu datang setelah berhasil mengganti pola (template) blog di blogspot, Blogger. Di dalam template yang baru, seperti ada beberapa keharusan. Menambahkan beberapa widget, membariskan (align) gambarnya, membariskan teksnya, dan seterusnya. Dari semua pekerjaan yang diharuskan tersebut semata-mata untuk mempercantik tampilan blog-nya.

Letak widget blog berada di samping kiri, kanan, atas, bawah dan di tengah-tengah halaman dari keseluruhan tampilan sebuah template blog. Agar tampilan keseluruhan blog terlihat rapih dan indah sangat perlu menata letak-letak widget-nya dan isi di dalamnya. Mengerjakan hal itu sedikitnya harus menguasai bahasa pemograman, .html.

Pengguna dituntut cerdas menurut kepada panduan pemasangan dari template-nya. Perihal kesulitan dari template Blogger Lifestyle-free-version, mengilhami kami untuk menulis penataan gambar atau foto dan tulisan, yang menjadi jenis isian di dalam widget dari template Blogger tersebut.

Wajah Widget Blogger

Lebih jauh tentang widget kami belum sampai ke sana, ini hanyalah mengenal wajah widget dengan alat-alat yang disertakan untuknya, dan sedikit dari menata isinya. Pergi ke Tata Letak, dari Masuk Blogger. Seperti yang ditunjukkan Gambar 1 di situlah keberadaan widget-widget. Tentu saja keberadaannya tidak mutlak, widget bisa diletakkan di sebelah mana saja sesuka hati di dalam blog, juga setelah menguasai bahasa pemogramannya.
Gambar 1
Bersentuhan dengan widget yang masih kosong seperti Gambar 2.
Gambar 2
Lebih jelas alat-alat di dalam widget Blogger, saat tulisan ini ditulis, baru menyertakan alat-alat penampakan teks saja, seperti Gambar 3. Membuat teks tebal (bold) ikon huruf (b) tebal; membuat teks condong (Italic) ikon huruf (i) condong; menautkan alamat tautan gambar ikon dua mata rantai berkaitan (untuk menyisipkan alamat tautan gambar yang dimasukkan atau disisipkan ke dalam kotak dialog widget, gambar yang disisipkan nanti hanya alamat tautan dari gambarnya saja), membuat teks kutipan (blockquote) ikon tanda kutip (“), dan Rich Text (bila Rich Text ini diklik, berganti menjadi Edit HTML). Di sana belum ada pengunggah gambar, seperti halnya Entri Baru di dalam membuat posting baru.
Gambar 3
Seperti di atas, gambar atau foto yang dimasukkan atau disisipkan ke dalam kotak dialog widget, hanya alamat tautannya saja. Sedangkan gambar atau foto aslinya berada di tempat lain. Alamat keberadaannya sebagaimana yang ditunjukkan oleh browser di dalam field bar-nya, bila sengaja diunduh untuk pembuktian, gambar atau foto yang dipilih atau diklik sesuai dengan yang ditampakkannya, sesuai pula dengan alamat tautan yang ditunjukkan browser di dalam field bar-nya tersebut.

Gambar 4 adalah cara menambahkan widget baru ke dalam blog. Klik Tambahkan Gadget di dalam Tata Letak template-nya, selanjutnya setelah kotak dialognya ditampilkan tinggal memilih widget-widget apa saja yang cocok untuk digunakan di dalam blog-nya. Cara menambahkannya dengan mengklik lambang (+)-nya. Widget kosong seperti Gambar 2 di atas adalah dari cara menambahkan widget HTML/JavaSript.
Gambar 4
"Sebaik-baiknya persiapan dari menulis adalah materinya."
Membuat Halaman Khusus Berisi Gambar-Gambar

Di blog yang dibuat, buatlah halaman baru. Halaman khusus yang berisi gambar-gambar atau foto-foto. Setelah mengklik Laman, klik Laman Baru maksud darinya membuat halaman baru. Memberinya judul, umpamanya dengan KUMPULAN GAMBAR.
Gambar 5
Kursor tampak timbul-tenggelam di awal baris halaman kosongnya. Selanjutnya mengunggah gambar-gambarnya. Pergi ke tombol atau ikon Insert image, ikonnya berbentuk lukisan berbingkai, begitu pointer mouse diletakkan di atasnya, akan timbul tulisan Insert image, letaknya ditunjukkan Gambar 5. Klik ikon atau tombol Insert image.
Gambar 6
Setelahnya, tampak kotak dialognya, Pilih file. Tipe file dari semua gambar atau foto yang akan diunggah sebaiknya seperti yang disarankan di dalam kotak dialognya, JPG, GIF atau PNG. Untuk mengunggah sejumlah gambar yang diperlukan, klik tombol Pilih file, ditunjukkan Gambar 6. Jika gambar atau foto yang diunggah lebih dari satu, akan ditampakkan di halaman kotak dialog tersebut, pilih gambar yang dimaksud dengan mengkliknya. Lalu klik tombol Add selected, kotak biru yang di dalamnya terdapat tulisan putih Add selected, di bawah unggahannya di pojok kiri bawah, lihat Gambar 7.
Gambar 7
Otomatis, begitu tombol Add selected diklik, gambar tampak di halaman kosong tadi yang sedang dibuat. Letak gambar yang disisipkan sesuai dengan letak kursor, atau di mana kursor berkedip-kedip diletakkan di situlah gambar tampak. Juga kotak dialog Pilih file dari Insert image menghilang. Ulangi terus, mengunggah gambar-gambar atau foto-foto tersebut, hingga memenuhi kebutuhan.

Seperti yang terlihat, sebaris dengan isian nama judul Laman (Halaman) yang sedang dibuat, di kanannya ada beberapa tombol, Publikasikan, Simpan, Pratinjau, Tutup. Setelah selesai menyisipkan gambar-gambar atau foto-fotonya, klik tombol Publikasikan. Jika akan memperbarui isi halamannya, klik Edit (letaknya seperti yang akan diterangkan sub judul Menemukan Alamat Tauatan Gambar, di bawah), dan setelah selesai memperbarui isinya klik Perbarui. Ingin terlebih dahulu melihat penampakannya, klik Pratinjau. Otomatis ditampakkan di tab baru browser. Setelah puas, Pratinjau-nya tutup saja. Selesai.

Tidak Menampakkan Untuk Umum

Setelah seperti sebelumnya terjadi. Pergi kembali ke Tata Letak. Klik Tata Letak. Cari bagian darinya atau widget yang berjudul Laman/Pages, klik Edit di pojok kanan bawahnya. Di dalam kotak dialog Laman/Pages, cari nama atau judul halaman KUMPULAN GAMBAR yang telah dibuat tadi. Khusus untuk nama halaman KUMPULAN GAMBAR ini, kotak kecil di belakang namanya jangan diberikan tanda centang, atau kotak kecilnya jangan dicentangi. Maksud dari itu agar nanti nama atau judul halaman KUMPULAN GAMBAR tidak tampak di bar (bilah) menu atau widget halaman blog, sehingga tidak dapat diakses umum. Lihat Gambar 8.
Gambar 8
Untuk mengurutkan halaman yang dicentangi adalah dengan menyeretnya dan meletakkannya persis di atas nama judul halaman yang akan digantikan posisinya, olehnya, setelah cocok posisinya klik-seret mouse lepaskan. Seperti gambar di atas, bila kotak kecilnya tadi tidak diberikan tanda centang, maka nama judul halamannya tidak ditampilkan di dalam urutan di sebelah kanannya (yang bisa dipindah-pindahkan posisinya). Meyakinkan hasil pekerjaan di atas tersebut pergi klik Beranda blog, ternyata sesuai dengan hasil pekerjaan yang sedang dikerjakan ini, lihat Gambar 9, halaman KUMPULAN GAMBAR tidak terdapat di dalam widget Laman. Kembali ke pekerjaan, setelah letaknya cocok klik Simpan/Save.
Gambar 9
“Menyisipkan gambar di Entri Baru atau dari memperbaruinya, secara tidak langsung membuat alamat tautannya.”
Menemukan Alamat Tauatan Gambar

Selanjutnya pergi ke Laman atau Halaman. Klik Laman. Cari nama atau judul halaman KUMPULAN GAMBAR yang dibuat tadi. Baik disengaja atau tidak disengaja meletakkan pointer mouse di atas judul halaman, akan langsung timbul tulisan dialog Edit, Lihat, Berbagi, Hapus di pojok kiri bawahnya sejajar dengan awal nama judulnya, Gambar 10. Untuk menemukan alamat tautan dari gambar yang dimaksudkan, turunkan segera pointer mouse ke Lihat. Klik Lihat. Lihat menampilkan isi halaman jadi, tampil di tab baru browser.
Gambar 10
Selanjutnya cari gambar yang dimaksud, dan klik gambarnya untuk menemukan alamat tautannya. Alamat tautan gambar tunggal sesuai gambar yang diklik tadi, ditampakkan oleh browser di field bar-nya. Itulah alamat tautan gambar yang dimaksud, lihat Gambar 11. Untuk menyalin alamat tautan gambarnya, alamat yang berada di field bar browser tadi diklik kanan, di dalam kotak dialognya klik Salin. Salinkanlah alamat tautan gambarnya ke Notepad atau program tulis-menulis sejenis.
Gambar 11
Cara lain dari menyalin alamat tautan gambar adalah dengan mengklik kanan gambarnya, ketika halaman sedang tampil seperti biasa atau dari klik Lihat tadi. Reaksi dari mengklik kanan gambar akan tampil dialog seperti di atas. Dari dialog klik kanan tadi, klik Salin Lokasi Gambar, bisa dilihat di Gambar 12, salinkan hasil menyalinnya ke Notepad atau program tulis-menulis sejenis, Gambar 13.
Gambar 12
Gambar 13
Memajangkan Gambar dan Teks di Widget

Setelah alamat tautan gambarnya didapatkan di atas Notepad, pergi ke Tata Letak kembali. Klik Edit di pojok kanan bawah dari judul widget yang dimaksud atau membuat widget baru, umpamanya ALIGN GAMBAR TEKS WIDGET BLOGGER, dengan mengklik Tambahkan widget, dengan menambahkan HTML/JavaScript, ditunjukkan Gambar 14. Dan darinya kotak dialog kosong tampak, diperlihatkan seperti Gambar 2 di atas di awal tulisan ini.
Gambar 14
Mengisikan atau merubah nama judulnya atau dibiarkan saja karena hanya memperbarui isinya. Selanjutnya menyisipkan alamat tautan gambar (tulisan salinan tautan gambar yang disimpan di Notepad tadi pilih dengan membloknya, klik kanan tepat di atas blok tadi, klik Salin dari pilihan dialog reaksi mengklik kanannya), membuat tulisannya, yang peletakkannya atau memajangkannya bergantung kepada bahasa .html. Lihat Gambar 15 di bawah.
Gambar 15
Lebih jelas contoh skrip .html dengan alamat tautan gambar dan tulisan yang menjadi isi widget-nya. Skrip seperti di bawah (Bila seutuhnya hasil jadi sebagaimana skrip di bawah, widget menjadi kepanjangan, sehingga gambar susah diambil dijadikan screenshot utuh, kami membuatnya menjadi dua bagian skrip atau dua widget, dengan judul; Tulisan dan Gambar; dan Hanya Tulisan):

Skrip Widget kesatu:

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Tulisan dan Gambar</b>
<p>Gambar ini terletak di sebelah kiri di dalam halaman widget:<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimxEPkMKMRdQcY6qsq_ortK-88G6DRJk4uDKEXViSHuH660TahIdbJ6PzZn4nUoi0qz_GwnmYdY5-xf0hp3E2DsBTA7AYEZ4_hCnRQ7Wm6LWfr2F5QORPdEiOPD3B8C6yMoM0hfzyubbbA/s1600/Sebelah+Kiri.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimxEPkMKMRdQcY6qsq_ortK-88G6DRJk4uDKEXViSHuH660TahIdbJ6PzZn4nUoi0qz_GwnmYdY5-xf0hp3E2DsBTA7AYEZ4_hCnRQ7Wm6LWfr2F5QORPdEiOPD3B8C6yMoM0hfzyubbbA/s1600/Sebelah+Kiri.jpg"/></a>&nbsp;</div>
<div class="separator" style="clear: both; text-align: center;">Gambar ini terletak di tengah-tengah di dalam halaman widget:</div><div class="separator" style="clear: both; text-align: center;">&nbsp;<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnw86RH65dX7tgZb3fKSOgVmvowHBpmHnG8pZENXpahtElT7YnMyWaTF-57wM8yMFXYCI0NlRbCBLUYk7HRCSfC1v3NcdvX6JMUSKFWWsjyEefix0vsiAcNaAaXiB2GRdDZxtoYiwyX71i/s1600/Sebelah+Tengah.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnw86RH65dX7tgZb3fKSOgVmvowHBpmHnG8pZENXpahtElT7YnMyWaTF-57wM8yMFXYCI0NlRbCBLUYk7HRCSfC1v3NcdvX6JMUSKFWWsjyEefix0vsiAcNaAaXiB2GRdDZxtoYiwyX71i/s1600/Sebelah+Tengah.jpg" />&nbsp;</a></div>
<div style="text-align: right;">&nbsp;&nbsp;</div><div style="text-align: right;">Gambar ini terletak di sebelah kanan di dalam halaman widget:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4i3Keoi2RZ3d8zukHzyLA_XIApBQzNt4NpGXbFfdYCJkS1q2x8z7rEaTSAmU3PjhnU_k2Vv9K_L2Go7gImH-cxpimMi91JQFSAtSRqM5o3ct8JSBJ3adyd1P8EkHtHEcQhw7uGRE72YZ8/s1600/Sebelah+Kanan.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4i3Keoi2RZ3d8zukHzyLA_XIApBQzNt4NpGXbFfdYCJkS1q2x8z7rEaTSAmU3PjhnU_k2Vv9K_L2Go7gImH-cxpimMi91JQFSAtSRqM5o3ct8JSBJ3adyd1P8EkHtHEcQhw7uGRE72YZ8/s1600/Sebelah+Kanan.jpg" /></a></div></p></div>

Skrip Widget kedua:

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Hanya Tulisan</b>
<p><i>Tulisan ini rata kiri di dalam halaman widget: “</i><i><i><i>Sebagian Cara-cara Hidup Sehat adalah membiasakan diri setiap malam sebelum tidur menggosok gigi terlebih dahulu!</i></i>”</i></p><p><div style="text-align: center;"><i>Tulisan ini di tengah-tengah di dalam halaman widget: “</i><i><i><i>Sebagian Cara-cara Hidup Sehat adalah membiasakan diri setiap malam sebelum tidur menggosok gigi terlebih dahulu!</i></i>”</i></div></p>
<p><div style="text-align: right;"><i>Tulisan ini rata kanan di dalam halaman widget: “</i><i><i><i>Sebagian Cara-cara Hidup Sehat adalah membiasakan diri setiap malam sebelum tidur menggosok gigi terlebih dahulu!</i></i>”</i></div><div style="text-align: right;"></div></p>
<p><div style="text-align: justify;"><i><i>Tulisan ini rata kiri-kanan di dalam halaman widget: “Sebagian Cara-cara Hidup Sehat adalah membiasakan diri setiap malam sebelum tidur menggosok gigi terlebih dahulu!”</i></i></div></p></div>

Setelah semuanya beres klik Simpan/Save. Selesai.

Dari penampakan skrip-skrip di atas seperti Gambar 16 dan Gambar 17:
Gambar 16
Gambar 17

Contoh nyata, di dalam blog jarangking ini, widget PENULIS.

Tugas selanjutnya melihat Beranda blog-nya. Bila penampakan widget beserta isinya kurang memuaskan, ulangilah pergi ke Tata Letak untuk memperbaruinya. Widget bisa diseret, dipindahkan dan diletakkan sebagaimana keinginan, di samping, di atas, di bawah, dan seterusnya, seperti yang dikerjakan tadi, hingga sempurna peletakkannya. Atau selanjutnya memperbarui isinya, sehingga pantas dibaca, pantas untuk umum.***

Tags:

Bagikan:

0 Komentar