Cara Membuat Author Box - Kotak dan Pesan Penulis di Bawah Postingan ~ Top Read

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

Para Blogger yang memiliki Blog pasti ingin dikenal oleh orang-orang yag membaca tulisan di blognya. Namun kada para blogger bingung memasang widget identitas untuk memperkenalkan diri karena kadang widget bawaan blog tersebut tidak sesuai dengan template blog yang sudah disusun.

Kadang para pemilik blog juga ingin memnyampaikan pesan kepada orang-orang yang membaca blognya untuk sekedar berkomentar dan agar tidak kopi-paste tulisan di blog.

untuk itu sekarang saya akan memberikan solusi berupa Author box yang bertempat dibawah postingan dan dapat merangkum pesan. seperti yang ada pada blog saya.

Bila anda tertarik dengan author box ini maka berikut saya akan bagikan bagaimana langkah-langkah membuatnya:

buka blog anda lalu masuk ke template dan edit HTML seperti yang ditujukan pada gambar dibawah.
terkan Ctrl-F lalu didalam box html tersebut akan muncul Search bar / kotak pencari.
selanjutnya masukan kode ]]></b:skin> kedalam kotak pencari tersebut, lalu copy text dibawah ini diatas kode tersebut:.admin-tulisan{ width:auto; background:#f2f2f2; border:2px solid #FFFFFF; margin:30px 0 10px 0; display:block; font-family:"julee"; color:#000; } .admin-tulisan .kontainer{padding:5px;} .admin-tulisan h4{ background:#E11E1E; border:none; border-bottom:1px solid #FFFFFF; color:#fff; font-family:"julee"; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); padding:5px 10px; margin:0 0 0 0; display:block; } .admin-tulisan h4 a{color:#FFFFFF;} .admin-tulisan img{ background:#000000; width:90px; height:100px; border:1px solid #FFFFFF; margin:3px 10px 0 0; float:left; padding:2px; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; }
Untuk tulisan yang dibubuhi lambang # adalah kode warna, Jadi ganti tulisan berkode #FFFFFF, #E11E1E, #000000 diatas, dengan warna yg sesuai dengan blog anda, untuk menentukan warna yang sesuai anda bisa menggunakan Import Colour pada blog saya ini
atau export colour ini. untuk menemukan kode HTML-nya.
Langkah selanjutnya cari kode <div class='post-footer'> di kotak penarian html tadi. biasanya ada 2 kode <div class='post-footer'> tergantung pada template anda harus menemukan kode <div class='post-footer'> yang paling bawah. lalu masukan kode dibawah ini tepat diatas kode tersebut:
 <b:if cond='data:blog.pageType == "item"'> <div class='admin-tulisan'> <h4> AUTHOR : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></h4> <div class='kontainer'> <img height='90' src='Alamat Foto' width='90'/> Terimakasih, saat ini anda sedang membaca artikel yang berjudul <a expr:href='data:post.url'><data:post.title/></a>, Semoga artikel ini dapat bermanfaat dan berguna untuk anda. Jika anda menyukai arkel ini anda bisa mengikutinya melalui google+, Facebook, atau twitter.. Saya menyadari masih memiliki banyak kekurang dalam artikel ini. Silahkan sampaikan kritik dan saran melalui kotak komentar yang disediakan di bawah.. Diperkenankan untuk melakukan sharing dengan mencantumkan sumber, namun Dilarang keras melakukan Penjipkan karena web ini dimonitori oleh DMCA (Digital Milenium Copyright Act) <a href='http://top-read.blogspot.com' target='_blank'>Top-Read</a> <div style='clear:both;'/> </div> </div> </b:if>
ganti tulisan Alamat foto dengan Url foto anda contoh "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaf3daegCx54FlGOdMQ4TSOZAHJkZ1NQ2hJq2yWTgyNkZWSBDhieILZ4F4iIu1guuxfzy4ksnb0ddCauWfir_jflD9ieifsQD1f0fqmF9tgu90euq_rokPiwTu1MtgvCpo0eEdamh5B9ys/s1600/Untitled-1.jpg". Dan tulisan Semoga Artikel ini-DMCA diganti dengan narasi yang anda ingin sampaikan.
Setelah semua langkah diatas selesai simpan dan tampilan dasar sebelum diedit akan mirip dengan tampilan milik saya dibawah ini: