CARA MEMBUAT WIDGET MULTI-CONSTRIBUTORS BLOGGER

Prinsipnya membuat widget itu mudah, kali ini kami ingin berbagi sebuah trik blogger membuat image profile untuk blogger dengan multi-constributors (penulisnya lebih dari satu orang seperti editblogtema). Pokoknya semua rahasia pembuatan template kami akan kami bongkar habis sampai ke akar akarnya kalau bisa sih he he he..

proses pembuatan widget konstributor pada blog
proses pembuatan widget konstributor pada blog
RINGAN

Pembuatan widget ini tidak terlalu mengorbankan kecepatan blog, selain hanya link link penghubung gambar profile seputaran internal blogger saja, perhatikan saja Pen admin berikut: 

See the Pen zYYpPKB by sufyan (@sufyan33) on CodePen.

Perhatikan, kodenya hanya HTML dan CSS saja. CSS untuk membuat style seperti ukuran image, border-radius yang membuat bingkai menjadi bulat. Sedangkan HTML untuk menghubungkan dan membentuk image atau gambar profile menjadi tampil sebagai sebuah widget berujud "constributor".

Kalian bisa menerapkannya dengan cara:
  1. Masuk ke pengaturan blogger
  2. Pilih Layout / tataletak
  3. Pilih tambahkan widget atau (Add a gadget)
  4. Pilih Add HTML/JavaScript.
Lalu ketika muncul kotak kosong blanko HTML/JavaScript masukan kode dibawah ini kedalamnya:

<style>
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h4><center>constributors:</center></h4>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6UagFesXmULIIx58ho-wtexC_WTSfU7wXJaOzudE82cfMEOn0tDFKsFuaZGcPNZ0QobRQw5F4QsHpZxjLsvERJEjtJrOkVz2Yv3s1hz-UDW44ZMaxenZ26dA2NglpydJGTXQ3UXambuH/s113/Adobe_20190929_133449.png" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/00896429756820287073'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="blue" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivkwesNMcTj6OorGinZFKkhjy8uHI5L34w2CM6uwBs5VbT6MSoS1PAylGZpSfYn6a5WjGR8X0HQFhDl4MnVf0MfTZtNmbHnuGwLrs4pLoghmoX56YYbUUBwSo2nr2p4BsIyKqs2KUJK3o/s85/Adobe_20190929_141236.png" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/01675010269156057449'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="indigo" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNAAEoZbaPEEN6Qw5LR0-fQdKXOFh55ldlvmQprmTg80vvfWYANMvE4TjOXreKoiGJsV1YkIhrr8ShYdsajR7MjJh9kAtYzJ8YZgpetJvF7pH2SpFDNhehlDs6FtLjGqz6gFd-6UzPh8/s113/20191019_184934.jpg" alt="Avatar" class="avatar"><a href='https://www.blogger.com/profile/10292570377955611030'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="pink" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg></a> 

Perhatikan baik baik setiap link yang kami sorot dengan warna kuning dan merah muda, itu karena kami menggunakan tiga gambar profile berikut link  avatar.

  1. Warna kuning link image (img) yang akan menampilkan gambar profile blogger kalian.
  2. Warna merah muda adalah link profile yang berisi data profile kalian.
Kalian harus merubahnya dengan link avatar dan profile kalian sendiri! Bagaimana cara mengambilnya?
  • Klik profile masing masing profile blogger yang akan dijadikan konstributor blog. Kalian dapat mengambil dan memilihnya dari kotak komentar salah satu artikel dimana blogger menampilkan komentar pada saat blogwalking. Atau dimana biasanya sang pemilik profile sering memberikan komentar.
  • Klik gambar profile/avatarnya maka akan muncul gambar seperti contoh berikut:
informasi profile blogger
informasi profile blogger
  • Ganti link yang kami sorot kuning dengan URL yang kami lingkari merah pada gambar.
  • Lalu klik View Full Size, kalian akan di bawa ke URL profile avatar, seperti terlihat pada gambar berikut di bawah:

URL image avatar
URL image avatar
  • Nah untuk menggantikan link warna kuning kalian harus mengkopi URL profile gambar kalian sendiri yang kami lingkari merah.
Sampai sekian pembuatan widget constributor telah selesai. Save widget.


www.editblogtema.com

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak