Cara Membuat Widget Partners Rapi dan Keren

agung wisudhatama February 13, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Cara Membuat Widget Partners atau Pertemanan

Mencari banyak teman menjadi keharusan semua orang termasuk blogger. Karena manusia diciptakan sebagai makhluk sosial karenanya tidak akan bisa hidupp sendiri. Dipastikan akan mencari teman sebanyak-banyaknya.

Blogger juga begitu. Dengan banyak teman kemungkinan besar blognya akan menjadi ramai dan terkenal karena sering wira-wira ke sana kemari. Dari kegiatan itu dapat membuat jalur lalu lintas blog di search engine menjadi bagus, sebab crawl akan sering dilakukan search engine pada blog yang memiliki lalu lintas padat.

Baca Juga : Membuat Scrollbar Mode Persen dengan CSS

Bilamana blogger bertemu dengan partners sesama blogger yang memiliki passion yang sama atau niche yang sama. Maka blog itu akan menjadi semakin bagus karena tema blog yang sama akan mendapatkan perhatian dari search engine. Maybe that is good answer.

Membuat partners di blog juga sudah sering diberikan tutorialnya dari sesama blogger. Dengan berbagai cara dan berbagai trik mereka berusaha memberikan cara membuatnya. Demikian juga dengan kami.

Baca Juga : Cara Membuat Animasi Slideshow Gambar atau Foto dengan CSS dan HTML

Cara yang akan kami berikan dibawah ini adalah membuat widget partners menjadi unik dan menarik. Menjadi sebuah kotak yang berada sejajar dan rapi. Jikalau ingin mempraktekkannya silakan dicoba.

Cara Membuat Widget Partners Rapi dan Keren

Caranya :

Klik Tema
Klik Sesuaikan : Edit HTML
Cari kode ]]></b:skin>
Kemudian tempel kode dibawah diatas kode ]]></b:skin>

/* Partners */
#AlifaPartners { 
  margin:0px;
  padding:0px;
  text-align:center
}
#AlifaPartners img {
  margin:4px 3px;
  text-align:center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 2px 1px #ccc;
  -moz-box-shadow: 1px 2px 1px #ccc;
  box-shadow: 1px 2px 1px #ccc;
}
#AlifaPartners img:hover {
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter:alpha(opacity=70);
}

Untuk menampilkan kode diatas ke dalam sidebar. Maka kita menggunakan cara dibawah :
Masuk ke Tata Letak
Klik Tambah HTML/Javascript
Tempelkan kode dibawah di konten kosong yang tersedia.

<div id="AlifaPartners">
<a href="#"><img height="60" src="https://blogger.googleusercontent.com/img/a/AVvXsEjZfDJh8vybu18yUQdfFz9aw5kb3ZBa4InQqITsbKbSWW3t_SAOu1nrNNxftga5RYDbSq3QfPYR11ui3pLrt64h8H9EYiQJIGnbtMo3rHJHSvRZ-DeYXIBmUk69FUjYLDenU9NbZWX3GI6Rk6w5WHuf_G8JNAQj-08S-w5e3XneTzJb4L5aQGJbjyxX" width="145"/></a>
<a href="#"><img height="60" src="https://blogger.googleusercontent.com/img/a/AVvXsEjZfDJh8vybu18yUQdfFz9aw5kb3ZBa4InQqITsbKbSWW3t_SAOu1nrNNxftga5RYDbSq3QfPYR11ui3pLrt64h8H9EYiQJIGnbtMo3rHJHSvRZ-DeYXIBmUk69FUjYLDenU9NbZWX3GI6Rk6w5WHuf_G8JNAQj-08S-w5e3XneTzJb4L5aQGJbjyxX" width="145"/></a> 
<a href="#"><img height="60" src="https://blogger.googleusercontent.com/img/a/AVvXsEjZfDJh8vybu18yUQdfFz9aw5kb3ZBa4InQqITsbKbSWW3t_SAOu1nrNNxftga5RYDbSq3QfPYR11ui3pLrt64h8H9EYiQJIGnbtMo3rHJHSvRZ-DeYXIBmUk69FUjYLDenU9NbZWX3GI6Rk6w5WHuf_G8JNAQj-08S-w5e3XneTzJb4L5aQGJbjyxX" width="145"/></a>
<a href="#"><img height="60" src="https://blogger.googleusercontent.com/img/a/AVvXsEjZfDJh8vybu18yUQdfFz9aw5kb3ZBa4InQqITsbKbSWW3t_SAOu1nrNNxftga5RYDbSq3QfPYR11ui3pLrt64h8H9EYiQJIGnbtMo3rHJHSvRZ-DeYXIBmUk69FUjYLDenU9NbZWX3GI6Rk6w5WHuf_G8JNAQj-08S-w5e3XneTzJb4L5aQGJbjyxX" width="145"/></a></div>

Nanti jadinya seperti ini :

Atau bisa lihat langsung di Codepen @ Alifa

See the Pen Membuat Widget Partners Keren dengan CSS by Alifacode (@Alifacode) on CodePen.

Result

Catatan :
Untuk tanda # diganti dengan URL blog kamu.
Untuk https://blogger.googleusercontent.com/img/a/AVvXsEjZfDJh8vy dan lainnya diganti dengan banner link teman kamu. Ukurannya kalau bisa kecil saja. Seandainya tidak ada, saya biasa memakai coreldraw untuk membuat banner terus saya export ke png. Dan tempel. Jadi dah.

Sekian artikel Membuat Widget Partners Rapi dan Keren. Semoga ke depannya, blog kamu rame dan banyak teman yang ingin bertukar link. Wassalam.

Bagikan ke teman-teman kamu

Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Widget Partners Rapi dan Keren . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.