TUTORIAL GALERI GAMBAR BLOGGER

Pin

Bagikan

Menciak

Bagikan

Baru-baru ini saya telah membuat beberapa perubahan kecil pada blog saya untuk membuatnya lebih mudah digunakan. Blogger bisa sedikit rumit, tetapi jika Anda tahu beberapa html dasar (dan kadang-kadang tidak begitu mendasar), Anda dapat membuat beberapa hal luar biasa!

Jika Anda mengklik tautan halaman di bagian atas blog ini yang berjudul 'Kerajinan',  Anda akan membuka galeri gambar semua proyek kerajinan saya sebelumnya. ( Perbarui: Ini sekarang berada di bawah halaman ' tutorial ').  Halaman ini membuatnya sangat mudah untuk menemukan apa pun yang mungkin Anda lihat di blog saya karena setiap gambar terhubung ke posting asli. 

Apakah Anda ingin membuat galeri gambar Anda sendiri? Anda beruntung karena hari ini saya akan menunjukkan kepada Anda tutorial tentang cara melakukan ini sendiri. (Harap dicatat saya menggunakan antarmuka blogger yang lebih baru. Anda dapat melakukan langkah-langkah yang hampir sama pada antarmuka lama, itu hanya akan terlihat sedikit berbeda.)

Pertama, buka akun Blogger.com Anda . Kemudian, klik di blog Anda untuk membawa Anda ke halaman 'Gambaran Umum'.

Klik tautan 'Halaman'.

Dari sini Anda akan mengklik tautan halaman yang telah Anda buat atau sekarang Anda dapat membuat halaman baru. Jika Anda menambahkan galeri gambar ke halaman yang sudah Anda buat, klik tombol Edit di bawah kategori yang ingin Anda edit. (Dalam contoh saya, saya mengedit halaman 'Kerajinan'.)

Dari sini Anda akan mengklik tab di bagian atas yang bertuliskan 'HTML'. Anda akan menambahkan kode html ke halaman ini. (Jangan khawatir. Aku janji tidak terlalu menyeramkan!)

Anda akan memasukkan kode berikut, mengubah bagian berwarna dengan informasi dari blog Anda yang ingin Anda tambahkan ke galeri gambar khusus Anda.

Bagi Anda yang memiliki masalah dengan kode ini, sekarang harus diperbaiki. Ketika saya beralih dari Blogger ke WordPress itu tidak mentransfer kode di bawah ini dengan benar. Maaf soal itu!

<table cellpadding = "3"> 
<tbody> 
<tr> 
<td align = "center" width = "25%"> <a href= "https://yourprojectposturl.com"  target="_blank"> <img src = " https: //yourimageurl.jpg" ;  /> <br> Nama yang ingin Anda tampilkan di bawah gambar Anda </a> </td> <td align = "center" width = "25%"> <a href = " https: //yourprojectposturl.com" ;  target = "_ blank"> <img src = " https: //yourimageurl.jpg" ;  /> <br>



https: //projectposturl.com" ;  target = "_ blank"> <img
src = " https: //yourimageurl.jpg" ;  /> <br> Nama yang ingin Anda tampilkan di bawah gambar Anda </a> </td>
<td align =" center "width = "25%"> <a href = " https: // yourprojectposturl.com" ;  target = "_ blank"> <img
src = " https: //yourimageurl.jpg" ;  /> <br> Nama yang ingin Anda tampilkan di bawah gambar Anda </a> </td>
</tr>
</table>

Tautan pertama yang akan Anda ubah adalah alamat web dari pos yang ingin Anda tautkan.

Tautan kedua adalah url gambar yang ingin Anda tampilkan.

Area ketiga yang akan diubah adalah kata-kata yang ingin Anda tampilkan di bawah gambar.

Jika Anda menyalin contoh di atas dengan tepat, itu akan memberi Anda satu baris dengan empat gambar. Untuk menambahkan lebih banyak baris, Anda ingin menyalin seluruh bagian dari <tr> ke </tr> untuk menambahkan lebih banyak tautan dan gambar. Anda akan menambahkan ini setelah </tr> dan sebelum </table>.

Beberapa tips bermanfaat :

• Anda membuat tabel. Segala sesuatu di dalam tag <table> dan </table> akan ditampilkan di tabel itu. Tag <tr> adalah untuk baris dan <td> untuk setiap sel dalam tabel.
  • Di semua html Anda akan memiliki tag awal (atau pembukaan) dan tag akhir (atau penutup). Misalnya, untuk membuat tabel Anda harus memiliki tag <table> di awal dan </table> di akhir. Jika Anda menerima pesan kesalahan, biasanya itu karena Anda melewatkan /, <, atau>. Anda harus memeriksa ini dengan cermat atau kode Anda tidak akan berfungsi!
• Karena saya memilih untuk melakukan empat gambar, saya membuat lebar sel menjadi 25%. Saya tidak menentukan sebelumnya lebar ke nomor tertentu sehingga akan selalu hanya mengambil 1/4 dari lebar baris, terlepas dari berapa banyak gambar yang ada dan seberapa besar jendela browser. Dengan cara ini, ketika saya tidak memiliki semua sel yang terisi, masih hanya membutuhkan ruang yang sama. Anda dapat melihat ini di gambar pertama di pos ini. Saya hanya memiliki tiga gambar di baris pertama.
  • Jika Anda melakukan tiga gambar, Anda akan membuat lebar 33% sebagai gantinya.
  • Demikian juga, jika Anda memilih untuk melakukan lima gambar, Anda akan menetapkan lebar pada 20%.
• Blogger secara otomatis menggunakan Album Web Picasa untuk menyimpan foto Anda. Jika Anda membuka Album Web Picasa dan masuk dengan login yang sama dengan yang Anda gunakan untuk blogger, Anda akan melihat akun blogger Anda dengan semua gambar Anda. Saya menemukan halaman utama yang terbuka ketika Anda mengklik akun blogger Anda memiliki thumbnail ukuran sempurna untuk digunakan untuk galeri gambar ini.( Perbarui: Blogger sekarang menggunakan Google+ untuk menyimpan gambar Anda.)
  • Untuk mendapatkan url gambar, cari gambar yang Anda inginkan, klik kanan pada gambar dan pilih 'salin url gambar'. Ini akan menjadi apa yang Anda rekatkan ke area tautan hijau pada contoh di atas. Anda tidak perlu mengubah ukuran gambar atau melakukan apa pun lebih jauh untuk membuatnya berfungsi!
• Jika Anda masih buntu, saya menemukan w3schools.com sangat membantu untuk belajar kode hmtl. Mereka memiliki bagian tentang membuat tabel yang dapat membantu Anda jika Anda buntu.
• Pengguna Flickr.com:  Karena saya memiliki banyak pertanyaan mengenai bagaimana membuat galeri gambar menggunakan gambar Flickr, saya membuat tutorial tentang cara menemukan URL gambar Anda di Flickr.com . Ini harus menjawab setiap pertanyaan yang Anda miliki.

Tolong beri tahu saya jika Anda mencoba ini dan cara kerjanya untuk Anda. Ini memakan waktu, terutama jika Anda memiliki blog yang memiliki banyak proyek yang sudah diposting. Tapi begitu Anda memasukkan semuanya, sebenarnya tidak terlalu buruk untuk mempertahankannya. Saya hanya menambahkan tautan baru setiap kali saya memposting ke blog saya jika itu adalah proyek kerajinan. Dengan begitu selalu up to date.

Jika Anda mengalami masalah, kirim email kepada saya dan saya akan mencoba memandu Anda melewatinya dan melihat di mana Anda mengalami masalah.

** Perbarui **

Saya menggunakan Google Chrome sebagai browser web saya. Ketika saya membuka halaman 'Kerajinan' saya di Internet Explorer, meja membentang ke sidebar saya. Saya akhirnya menemukan perbaikan untuk menjaga tabel dengan ukuran yang sama di setiap web broswer! Atur lebar meja Anda menjadi sekitar 50 - 100 piksel kurang dari lebar kolom utama blog Anda.

Misalnya, bagian utama blog saya (tempat konten posting saya muncul) adalah 800 piksel. Jadi saya mengatur lebar meja saya menjadi 700 piksel.

Untuk melakukan ini, dalam kode di atas Anda akan menambahkan width = ”700 ″ ke dalam pengaturan tabel Anda. Ini akan terlihat seperti apa:

<table cellpadding = ”3 ″ width =” 700 ″ >

Saya harap itu membantu beberapa dari Anda di luar sana yang mungkin mengalami kesulitan seperti saya. Juga, pastikan untuk memeriksa blog Anda di beberapa browser web - Anda mungkin terkejut betapa berbedanya tampilannya!

Tertaut di sini:  Tatertots dan Jello: Weekend Wrap Up Party