Oke kali ini saya akan membagikan widget kedua yang saya buat, yaitu widget author profile. Widget ini biasanya digunakan agar pengunjung dapat mengetahui siapa penulisnya.
Dan pastinya, widget ini 100% buatan KodeJarwo... Bukan hasil cloningan atau bahkan copas dari widget lainnya. Oleh karenanya, bila anda ingin re-post, jangan lupa sisipkan link ke artikel ini.
Tanpa basa-basi lagi, berikut beberapa kelebihan dari widget ini:
- Responsive
- Support multi author
- Ringan, sangat ringan.
- On-Page SEO Friendly, karena menggunakan tag H4
- Bisa digunakan untuk profil:
- Google+
- Blogger
Bagaimana? Ingin memasangnya di blog anda? Berikut langkah-langkahnya.
1. Pasang CSS
Cari kode </b:skin> atau </style>, lalu pastekan kode dibawah ini tepat diatasnya.
iframe{border:none;overflow:hidden}
.kj-ap{background:#f3f3f3;margin:60px auto 20px;padding:20px;overflow:hidden;border:1px solid #fafafc}
.kj-ap-foto{float:left;margin-right:20px;padding:3px}
.kj-ap-foto-tampil{width:110px;height:110px}
.kj-deskripsi h4{font-family:Open Sans;font-weight:700;font-size:16px;display:block}
.kj-deskripsi p{color:#888;font-size:75%;margin-bottom:8px;font-family:Open Sans}
Catatan: Anda dapat mengganti tulisan yang berwarna merah dengan font lainnya, atau menghapusnya agar fontnya disamakan dengan font default di blog anda.
2. Tambahkan Element
Sebelum menambahkan element, carilah dulu tempat untuk ditempatkannya element nantinya. Saya sarankan di bawah postingan.
Berikut 2 alternatif mencari kode di bawah postingan anda beserta cara pemasangan elementnya.
1. Carilah kode <data:post.body/>. Biasanya kode ini lebih dari 2, saya sarankan pilihlah selain yang pertama dan kode yang paling banyak memiliki isi entah widget lainnya seperti related post di blog anda.
Bila sudah ketemu, tempatkan kode ini dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div class='kj-ap'>
<div class='kj-ap_d-wrap'>
<div class='kj-ap-foto'>
<a expr:href='data:post.authorPhoto.url'>
<img class='kj-ap-foto-tampil' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url'/>
</a>
</div>
<div class='kj-deskripsi'>
<h4>Penulis: <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h4>
<p> <data:post.authorAboutMe/> </p>
</div>
</div>
</div>
</b:if>
Catatan: Anda dapat mengganti tulisan yang berwarna merah dengan kata-kata apapun yang sesuai dengan keinginan hati anda.
2. Bila cara diatas tidak work, lihatlah postingan di dalam blog anda, lalu lihat widget paling terakhir yang ada di postingan anda sebelum komentar.
Klik inspect element, lalu lihat id dari widgetnya, misal idnya related-posts. Setelah itu, carilah di dalam template anda yang mirip seperti ini: <div class='id widget' .
Setelah ketemu, tempatkan kode pada cara pertama tadi diatas kode yang mirip <div class='id widget' tadi.
Q : Mas, saya sudah pasang, tapi kok deskripsinya gak muncul ya?
MJ : Itu berarti anda belum membuat deskripsi profil di Google+ Berikut cara membuatnya
Pertama, buka link ini: https://aboutme.google.com/?referer=gplus
Disana anda akan diperlihatkan profil Google+ anda. Tekan tanda Add Info yang terletak pada kanan bawah, berbentuk seperti bulat merah dengan tanda plus ditengahnya.
Pilih Story, lalu masukkan data anda disana.
Pada kotak Tagline, anda dapat mengisinya dengan nama lengkap anda, kalimat pembuka, atau apapun itu.
Sedangkan pada kotak Introduction, isilah dengan kata-kata yang anda ingin munculkan nanti di widget author profile anda. Sebagai contoh, berikut data yang saya masukkan untuk akun saya.
Klik OK, lalu coba refresh blog anda. Apakah deskripsi sudah muncul di widget anda? Dan, bila widget rusak/tidak work, atau ada yang ingin ditanyakan, silakan berkomentar di bawah ini. Terima kasih.
Oh ya, jangan lupa setelah anda menyimpan deskripsi diatas, tekan simbol gembok disebelah kanan Introduction akun anda, baru pilih public.