Kode Html Postingan Produk Di Blogspot

Kode Html Postingan Produk Di Blogspot – Membuat template blog dan membuat blog adalah 2 cara yang sangat berbeda untuk melakukannya. Jika Anda sedang membuat template blog, yang perlu Anda kuasai hanyalah coding, seperti kode CSS, HTML, jQuery dan Php. Dan untuk membuat blog, Anda hanya perlu belajar membaca, memahami, dan menerapkannya tanpa harus menguasai bahasa pemrograman atau coding

Membuat template blog dan membuat blog adalah 2 cara yang sangat berbeda untuk melakukannya. Jika Anda sedang membuat template blog, yang perlu Anda kuasai hanyalah coding, seperti kode CSS, HTML, jQuery dan Php. Dan untuk membuat blog, Anda hanya perlu belajar membaca, memahami, dan menerapkannya tanpa harus menguasai bahasa pemrograman atau coding.

Kode Html Postingan Produk Di Blogspot

Jika Anda ingin membuat blog, maka Anda hanya perlu menggunakan layanan penyedia blog seperti Blogspot (Blogger), WordPress, Tumblr atau yang lainnya. Misalkan Anda ingin membuat blog menggunakan Blogspot, buka saja https://blogger.com, maka akan muncul menu Buat Blog di halaman depan, klik tombol Buat Blog, lalu Anda akan login menggunakan akun Gmail Anda, setelah berhasil login di, Anda akan diarahkan ke tampilan detail blog yang akan dibuat, seperti nama blog, url blog dan tema yang akan digunakan, jika detail blog dibuat maka akan menjadi blog yang Anda sukai.

Bagaimana cara membuat template blog? Membuat template blog tidak seperti membuat blog, rumit dan tidak mudah. Dan disini kami tidak mengajarkannya, karena pada artikel ini kami hanya memberikan tutorial cara edit tampilan template blog yang digunakan untuk blog yang sudah dibuat. Dan tampilan edit ini khusus untuk blog yang digunakan untuk menjual produk affiliasi.

Pada contoh blog demo, template yang digunakan adalah template bawaan Blogger atau template yang disediakan oleh Blogger, bukan template eksternal. Dan nama template yang digunakan adalah Emporio

Pertama, untuk membuat blog blog yang menjual produk affiliasi, buatlah blog terlebih dahulu. Untuk panduannya, baca Cara Membuat Blog. Setelah selesai membuat blog, ikuti beberapa langkah sederhana ini:

Panduan dasar ini bisa diterapkan dengan menggunakan template lain, karena tujuan dari panduan ini adalah untuk menampilkan website atau blog orang lain di blog kita sendiri dengan menggunakan iframe.

Bagaimana cara memuat? Loading blognya sendiri sebenarnya sangat cepat, karena ada tambahan iframe untuk loading jaringan orang lain di blog kita, jadi hasil loading tergantung web server dan script iframe yang terpasang. Semoga bermanfaat. Di beberapa template Anda mungkin pernah melihat blog seperti yang saya maksud. Atau dari wordpress menurut saya lebih mudah. Karena di WordPress sendiri kita bisa menggunakan opsi featured image. Jadi, jika tema yang digunakan mendukung, maka gambar tersebut bisa muncul sebagai cover di setiap halaman postingan blog.

Membuat Gambar Sampul Blogspot Sebelum saya ingin menjelaskan sedikit, fitur gambar sampul yang saya maksud disini adalah gambar yang bisa muncul di luar elemen konten artikel dan biasanya berukuran full width.

Misalnya pada akun media sosial, gambar covernya statis atau tidak berubah, kecuali kita sendiri yang mengubahnya. Pada halaman postingan blogspot kita bisa membuat gambar cover yang bervariasi sesuai dengan gambar postingan artikel blog kita.

Cara kerjanya sangat sederhana. Kita tinggal memindahkan gambar yang ada di dalam bagian konten artikel agar bisa muncul di luar. Jadi seperti inilah nantinya setiap gambar yang kita posting dari blogspot akan muncul di elemen data:post.body.

Jadi, untuk membuat gambar sampul ini, kita hanya perlu menghapus satu gambar dari elemen data:post.body. Bagaimana cara melakukannya? 😀

Agar tetap sederhana, ikuti tiga langkah mudah di bawah ini. Oh iya sebelumnya seperti biasa sobat harus login terlebih dahulu ke halaman Dashboard Blogger. Lalu buka tab Template – Edit HTML.

Pertama, Anda perlu menentukan di mana Anda ingin lokasi gambar sampul ini muncul. Mungkin template kita bisa memiliki struktur HTML yang berbeda. Jadi ya, Anda harus menyesuaikannya sendiri, agar lebih sesuai dengan selera Anda.

Anda dapat menempatkan kode CSS ini di atas tag

. Atau cukup sertakan saja di lembar gaya CSS template Anda. 🙂

Tutorial Sharethis Cara Pasang Emoji Reaksi Pengunjung Pada Postingan Di Blog

Kode HTML yang kita pasang pada langkah 1 di atas hanya dimaksudkan untuk merender gambar pertama elemen data:post.body agar dapat muncul di lokasi lain yang kita inginkan. Sementara itu, gambar asli pertama sebenarnya akan tetap muncul di elemen data:post.body.

Jadi pada langkah ini kita akan menghapus gambar asli sehingga hanya gambar sampul yang kita inginkan yang akan muncul.

Terakhir, simpan perubahan dan coba lihat apa yang terjadi pada template Anda. Sukses atau tidak? 😀 Hehehe (kalau template kamu corrupt, jangan salahkan saya!)

Ketiga langkah di atas adalah cara yang saya gunakan untuk blog saya (sekarang). Sebenarnya ada cara lain yang bisa digunakan. Perbedaannya hanya pada langkah pertama. Jika pada metode sebelumnya kita menampilkan gambar judul menggunakan fungsi expr:src=’data:post.firstImageUrl’, pada metode ini kita langsung menggunakan fungsi JQuery Append.

Selanjutnya, kode CSS masih sama. Sedangkan untuk kode Script seperti pada langkah ketiga sudah tidak perlu anda gunakan lagi. Karena pada kode di atas, kami menginstal fungsi hapus JQuery secara bersamaan.

Terakhir, simpan template Anda. Hasil? Semoga sama dengan cara pertama sebelumnya. Itu tergantung selera Anda masing-masing ingin menggunakan yang mana. 😀

Ok sekarang saya asumsikan anda sudah berhasil memasang fitur cover image seperti yang saya jelaskan di atas. Walaupun saya yakin mungkin ada beberapa teman yang masih bingung. Tapi tidak masalah, nanti kalian bisa langsung tanya-tanya lewat kolom komentar. Insya Allah jika ada waktu luang akan saya bantu sampai berhasil. 😀

Mengapa harus begitu? Sebenarnya, Anda tidak seharusnya. Satu kelemahan dari teknik ini adalah saya belum melakukan penyesuaian apa pun sehingga gambar sampul selalu dalam ukuran yang tepat. Pengaturan CSS yang saya gunakan di atas hanya untuk mengisi lebar. Untuk ukuran tinggi ya bisa bebas.

Sebenarnya kita bisa mengatur ukuran tinggi maksimal, namun hasilnya gambar akan menjadi tidak proporsional dengan ukuran aslinya. Ini seperti dipukul dengan efek garukan yang buruk. Jadi saya biarkan saja.

Ok, saya rasa cukup sekian tutorial sederhana hari ini. Semoga bermanfaat bagi sobat yang ingin merawat tampilan template. Jika ada pertanyaan, jangan sungkan untuk bertanya melalui kolom komentar.