Membuat Author Box Dengan Tombol Langganan Dan Social Media

Membuat Author Box Dengan Tombol Langganan Dan Social Media

Bola Hero Gawai

Membuat Author Box Dengan Tombol Langganan Dan Social Media

Membuat Author Box
Sebenarnya saya sudah pernah memposting cara membuat author box dengan permalink, bisa Anda baca DI SINI. Nah sekarang saya akan mencoba sharing cara membuat author box dengan tombol langganan dan social media juga permalink.

Seharian ini saya kutak-katik kode dan mengambil referensi dari beberapa blog untuk membuat sebuah widget author box agar penampilannya cukup pantas dipajang di blog heheheh... Jadi jika ada pertanyaan dari Anda yang belum terjawab seharian ini saya mohon maaf ya... Tapi enggak tahu juga ya apa pantas untuk orang lain? hehehe... Terserah Anda lah mau pakai atau tidaknya hehehehe....

Maklum selera orang pastinya berbeda-beda, jadi saya tidak memaksakan untuk mencoba menggunakan widget ini. Widget author box ini dilengkapi photo author, link author, tombol langganan, tombol social media sharing, dan permalink di atasnya. Dan untuk image social medianya sudah menggunakan css sprite jadi hanya terdapat satu gambar untuk membentuk 4 buah tombol social media sharing. Untuk DEMO-nya silahkan lihat pada bagian bawah postingan ini. Jika ada yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy kode CSS di bawah ini.

.kompiauthorbox{background:#e1e1e1;position:relative;border:1px solid #bbb;height:165px;width:98%;transition:all .3s ease-in;margin-bottom:10px;padding:5px}
.kompiauthoravatar{background:#fff;border:1px solid #ccc9bd;float:left;height:110px;position:relative;border-radius:4px;box-shadow:0 0 4px 0 #d9d9d9;width:110px;padding:2px;margin-left:3px}
.kompiauthoravatar img{height:110px;width:110px;border:0;border-radius:2px}
.kompiauthoravatar img:hover{transition:all .2s ease-in-out;opacity:.7}
.kompiauthorlabel{background:#b0130d;display:block;line-height:20px;height:20px;margin-left:-44px;position:absolute;bottom:-10px;left:50%;text-align:center;width:86px;border:1px solid #E02424;border-radius:3px}
.kompiauthorlabel:hover{background:#E02424;border:1px solid #b0130d;transition:all .2s ease-in-out}
.kompiauthorlabel a{font:bold 11px sans-serif;color:#fff}
.kompiauthorcontent{margin-left:125px}
.kompiauthorhead{background:#ccc;border-bottom:1px solid #bbb;margin-bottom:5px;position:relative;padding:5px}
.kompiauthorbox h3{font:12px Tahoma;font-weight:400;color:#302E29;line-height:1.8em;border:none;text-transform:uppercase;text-decoration:none;transition:all .2s ease-in-out;margin:0}
.kompiauthorbox p.bio{font:12px sans-serif;line-height:18px;text-align:justify;margin:0}
ul.kompisocial{list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin:0 7px;padding:0!important}
.kompisocial li a{display:block;width:30px;height:30px;background:url(http://4.bp.blogspot.com/-KiI4jYMZRr0/UZ9cBDbJJEI/AAAAAAAAYp4/nEsq4M5HraQ/s320/social4.png) no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.rssicon a{background-position:0 0}
.kompisocial li.twicon a{background-position:-37px 0}
.kompisocial li.fbicon a{background-position:-74px 0}
.kompisocial li.bicon a{background-position:-112px 0;}
.kompisocial li.rssicon a:hover{background-position:0 -37px}
.kompisocial li.twicon a:hover{background-position:-37px -37px}
.kompisocial li.fbicon a:hover{background-position:-74px -37px}
.kompisocial li.bicon a:hover{background-position:-112px -37px;}
.kompiemailform {float:left;margin-top:-40px;margin-left:125px;padding:0}
#botsub {width:180px}

Perhatikan untuk kode yang berwarna merah, itu kode yang bisa Anda modifikasi agar sesuai dengan tampilan blog Anda.

2. Silahkan copy kode pemanggilnya (kode HTML) di bawah ini dan simpan di daerah footer postingan, bisa disimpan di atas atau di bawah tombol sharing social media.

<div class='kompiauthorbox'>
<div class='kompiauthorhead'>
<h3>
Judul Artikel: <a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></h3>
</div>
<div class='kompiauthoravatar'>
<img alt='About Author' src='URL PHOTO ANDA DI SINI' title='About Me'/>
<div class='kompiauthorlabel'><a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='author profile'><data:post.author/></a></div>
</div>
<div class='kompiauthorcontent'>
<p class='bio'>
Saya hanya blogger biasa yang senang belajar dan berbagi pengetahuan dan pengalaman dengan yang lain. Semoga yang saya sharing di sini bisa bermanfaat. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari Kompi Ajaib.</p>
<ul class='kompisocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/KompiAjaib' target='_blank' title='Rss'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/kompiajaib' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='Facebook'>FaceBook</a>
</li><li class='bicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2583045784323695327' target='_blank' title='Follow This Blog'>Follow This Blog</a>
</li>
</ul></div>
<div class='kompiemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small></form>
</div>
</div>

Untuk kode yang berwarna biru adalah url photo author, silahkan ganti dengan url photo Anda dengan ukuran photo 110px x 110px. Untuk yang berwarna merah silahkan ganti dengan kata-kata Anda sendiri. Dan untuk kode yang berwarna hijau silahkan sesuaikan dengan akun feedburner, twitter, url page facebook, dan ID blog Anda.

3. Selesai, tinggal save template Anda.

Saya kira sudah cukup penjelasannya untuk membuat author box dengan tombol langganan dan social media juga permalink ini. Selamat berkreasi...

Sumber referensi:
1. http://www.lost-sector.net/
2. http://www.makingdifferent.com/

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

53 Comments Add Comment

Mantap Om, ijin pake.... :)

Balas

Silahkan mas Ardi semoga bisa dimengerti hehehe....

Balas

Bagus om... :) ... Om bantu saya ya di komentar Postingan yang mepet mepet.. :(

Balas

imagenya gede bgt om jd keliatan guantengnya... :))

Balas

heheehe...emang guanteng mas... :D

Balas

Maaf oot
saya mau tanya pengganti cara memperbaiki histats bagaimana? (maksudnya, di dashboard blog page viewnya 700, tapi di histats cuma 10) , kalau ngak pengganti histats ada ngak ?

Balas

hadeuh pakek Copy Text Click Here sekarang mah ;)) xixixixi

Balas

heheheehe...biar gampang aja :D

Balas

Histats menghitung visitor dari mulai widgetnya/pelacaknya disimpan di blog, jadi jumlah terdahulunya tidak terhitung, bisa dicantumkan jumlah pageview sebelumnya ketika kita pertama membuat akun histats untuk blog, untuk jumlah pertama yang tampil tinggal kita ganti dengan jumlah page view yang ada, namun kadang2 para advertiser menganggapnya sebagai manipulasi jumlah pengunjung sehingga menjadi kurang kepercayaan terhadap blog kita.

Balas

kereen mas... mas mau nanya kalo mau merubah warna isi postingan gmn y??kodenya itu..

Balas

Untuk background postingan, tambahkan atau rubah kode warna pada kode css .post

Balas

ok d coba dulu,mas share donk hompage kayak yang mas punya and pkek ini,pgn d ubah tampilaan hompageny template saya..

Balas

mas bikin border di sedebar kaya punya-nya mas di template kompiana gimana ya

Balas

beberapa hari jelajah kesana kemari (mirip lagunya ayu ting2) gak dapat2, namun setelah singgah dikompi ajaib nemuin juga yang pas. makasih mas

Balas

Silahkan digunakan mas semoga bermanfaat :D
Saya lihat kotak berlangganannya nabrak social buttonnya, coba atur lebarnya pada kode css #botsub {width:180px} atau dihapus aja kode tersebut.

Balas

kang kalo mau ngecilin judul seperti ini: JUDUL ARTIKEL: MEMBUAT AUTHOR BOX DENGAN TOMBOL LANGGANAN DAN SOCIAL MEDIA yang di atur dimananya kang ?? saya burem kalo masalah coding :D
di tempat saya gede banget judul artikelnya, mohon pencerahannya kang :)

Balas

Sepertinya itu bentrok dengan pengaturan h3 pada blognya mas Jajang.

Sebenarnya yang mengatur itu adalah kode ini

.kompiauthorbox h3{font:12px Tahoma;font-weight:400;color:#302E29;line-height:1.8em;border:none;text-transform:uppercase;text-decoration:none;transition:all .2s ease-in-out;margin:0}

Agar tidak bentrok begini aja:
1. rubah kode css .kompiauthorbox h3 menjadi .kompiauthorbox p.head
2. rubah <h3>......</h3> pada kode pemanggilanya menjadi <p class='head'>.....</p>

Balas

udah saya coba mas di bengkalis-pos.blogspot.com, kok tidak muncul ya mas? apakah ada bentrok dgn komentar facebook?? pusing juga dicoba terus heheheh... bantuin ya mas, terima ksh

Balas

Coba kode pemangilnya simpan persis di atas kode <div id='related-posts'>

Balas

terima kasih mas, sudah bisa... terima kasih mas.

Balas

Gan,,kalo ingin merubah ukuran huruf pada tulisan "JUDUL ARTIKEL" gmna??

Balas

Sepertinya ini masalahnya sama dengan Mas Jajang Jaelani mas, coba simak komentar dari mas Jajajng Jaelani di atas.

Balas

ok gan,,bisa :D
kalo ingin buat efek float pada social widgetnya??
seperti yang di kompi ajaib

Balas

wah mas manjur banget, thanks mas pencerahannya :)

Balas

Maksudnya efek hover transisi pada ikon social bookmark?

ganti kode ini
.kompisocial li.rssicon a{background-position:0 0}
.kompisocial li.twicon a{background-position:-37px 0}
.kompisocial li.fbicon a{background-position:-74px 0}
.kompisocial li.bicon a{background-position:-112px 0;}


Dengan kode ini
.kompisocial li.rssicon a{background-position:0 0;transition:all 400ms ease-in-out}
.kompisocial li.twicon a{background-position:-37px 0;transition:all 400ms ease-in-out}
.kompisocial li.fbicon a{background-position:-74px 0;transition:all 400ms ease-in-out}
.kompisocial li.bicon a{background-position:-112px 0;transition:all 400ms ease-in-out}

Balas

Mas kompi, saya ada mengedit sebuah gambar untuk social tombol, mana tau kalau ada sahabat yang menyukai gambar ini (http://4.bp.blogspot.com/-nhokgRNb2sM/UaYAlxK6etI/AAAAAAAAFRs/P6UXjvU3lZc/s1600/logo.png).. semoga mas kompi juga menyukai gambar ini heheheheheh....

Balas

dan ini masih ada satu lagi gambarnya (http://4.bp.blogspot.com/-90wD4SLQtaM/UaYvMs5oMwI/AAAAAAAAFSs/82GHbTAElF0/s1600/logo3.png) semoga bermanfaat mas

Balas

Sip...bagus itu bisa jadi alternatif lain bagi pengguna lainnya...
Makasih sharingnya :)

Balas

Gan kok gak jelas ya tutorialnya ://

yang disuruh cuman copy ..

Balas

Tidak cuman copy tapi rubah yang di kasih tanda tulisan berwarna untuk menyesuaikan dengan blognya mas hehehe... :D

Balas

bang punyaku kok tombol social dan kotak email tindihan

Balas

Atur lebar kotak emailnya pada kode ini
#botsub {width:180px}

Balas

Silahkan mas Alfi semoga bermanfaat...

Balas

Wah mantab nih kompi ajaib, keren euy...

Balas

sayangnya gak responsif ya mas...ane pake template responsif tp di resolusi kecil jd berantakan deh... :`(

Balas

Iya mas yang ini blm responsive

Balas

sayangnya gak ada google+ nya mas,, cara nambahinya gimana yah? please help me....
http://adjieumbara.blogspot.com

Balas

Jika blognya telah dihubungkan dengan Google+, maka untuk nama authornya (di bawah Photo) akan otomatis menjadi link G+ authornya mas...

Balas

setelah saya menerapkan, namun gambar admin tidak bisa center, setelah saya cari-cari, ternyata pada kesalahan disini.

.post img{padding:5px}
.post img{transition:all 400ms ease-in-out}
.post img:hover{opacity:.7;}
.post-header{

letaknya pada padding:5px, setelah saya padding:5px ini saya ubah angka menjadi padding:0px, gambar adminnya jadi center, jadi kalau ada sahabat yang mengalami hal sama seperti saya, berarti blog sahabat pasti mengunakan padding, padding biasanya adalah samping gambar dengan jarak, hehehe, terima kasih mas kompi atas tutorialnya, berkat ilmunya blog saya jadi jreeng

Balas

Ya seperti itu...pada setiap template kadang mempunyai struktur berbeda-beda, jadi jika ada perbedaan mesti disesuaikan pada kode CSS-nya, seperti yang sobat Leony lakukan...

Balas

om saya sudah coba diterapin ke blog. kok tampilannya error ya, untuk kode kedua sebaiknya disimpan dimana. blog saya (home-edukasi.blogspot).terima kasih

Balas

Effect hovernya kok bisa bikin Foto author ngilang

Balas

Main pagenya Johny See book kekecilan, jadinya Botsubnya Sempit.

Balas

Kang minta bantuanya dong
Template saya terlalu besar kaya yg ke zoom
coba lihat : Http://upimod.blogpspot ( Maap naruh link )
Mohon bantuanya kaka

Balas

tinggal atur kode CSS-nya khusunya untuk title sepertinya itu agak kebesaran sama . lebarnya pasti ngikutin lebar area postingan kotak sabmit emailnya geser lagi kesebelah kiri (kurangi margin kirinya)

Balas

berhasil Kang :) thanks buat tipsnya !!

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×