Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, December 6, 2013

Widget author box blogspot

Widget author box untuk blog, atau yang saya sebut dengan widget author box blogspot ini memiliki tampilan menarik, widget author box blogspot ini dilengkapi perma link yang dapat digunakan para bloger mania yang ingin memposting kembali di halaman blognya dengan memasang link sumber dari postingan blog asalnya. Pada dasarnya widget author box blogspot memiliki tampilan yang rada rada mirip satu dengan yang lain, tapi tampilan widget author box blogspot yang satu ini memiliki tampilan yang berbeda dengan biasanya, nah untuk melihat tampilan widget author box blogspot ini secara nyata, silahkan klik demo dibawah dan jika anda tertarik silahkan simak tutorial tentang widget author box blogspot pada postingan blog saya yang sederhana ini, langsung saja menuju TKP.

Demo


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS widget author box blogspot dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSS widget author box blogspot tepat diatas </style> template anda.

/*****************************************
Name : widget author box blogspot
By : Rivai Silaban | Blog Design
Update :Minggu, 17 Nopember 2013
******************************************/
#rivai-silaban-author {
width: 90%; //LEBAR WIDGET
margin:5px auto;
}
#rivai-silaban-author .boxx{
padding: 20px;
border-radius: 5px;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.3);
background-color: #FFFFFF;
}
#rivai-silaban-author .boxx:after,
#rivai-silaban-author .boxx:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#rivai-silaban-author .boxx:after {
border-top-color: #fff;
border-width: 20px;
left: 65%;
margin-left: -10px;
}
#rivai-silaban-author .boxx:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
#rivai-silaban-author .boxx {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
line-height: 20px;
position: relative;
}
#rivai-silaban-author .owner {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
margin:5px 20px 0 0;
}
#rivai-silaban-author .owner-image-profil {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url('LINK GAMBAR ANDA') no-repeat center center;
position: absolute;
right: 10px;
bottom:0;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
#rivai-silaban-author .owner-blog-name{
font-family: Georgia;
font-weight: bold;
font-size: 24px;
color: #FF0000;
text-shadow: 2px 1px 1px rgb(153, 153, 153);
font-style: italic;
margin:0;
}
#rivai-silaban-author .name{
font-family: Verdana;
color: #0000FF;
font-size: 12px;
text-decoration: none;
}
#rivai-silaban-author .name:hover{
color: #4F0000;
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
text-decoration:underline;
}
#rivai-silaban-author .BDRS-textarea {
background-color:#ECFDF9;
border:dashed #666 1px;
width: 100%;
margin:5px auto;
}
#rivai-silaban-author .BDRS-text {
font-family: Verdana;
font-size: 12px;
color: #000000;
line-height: normal;
text-align: center;
margin-bottom:10px;
}/* widget author box blogspot css end */

Install Program Tag HTML


  • Setelah anda sudah memasang CSS widget author box blogspot ini, saatnya anda memasang kode htmlnya.
  • Cari code
    <div class='post-footer-line post-footer-line-2'/>
    atau Kode
    <div class='post-footer-line post-footer-line-3'/>

  • Copy kode dibawah ini pastekan tepat dibawah code diatas.
    Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
  • Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
  • Copy Code HTML dibawah ini, paste di bawah code
    <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
  • Edit kode html widget author box blogspot ini dan save template anda kemudian lihat hasilnya, selamat berkarya.

<!-- Rivai Silaban | BLOG DESIGN CODE widget author box blogspot start -->
<div id="rivai-silaban-author"><div class="boxx">
<div class='BDRS-text'>Anda sedang membaca artikel tentang,<br/> <b><a expr:href='data:post.url'><data:post.title/></a></b> <br/> Jika anda tertarik dengan artikel ini, silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, <B>INGAT..!</B> jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div>
<span style='font:italic 10px Arial, Sans-Serif;'><textarea class='BDRS-textarea' name='BDRS' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea></span></div>
<div class="owner">
<p class="owner-blog-name">Blog Design</p><a href="LINK PROFIL ANDA " target="_blank" rel="nofollow" title="Rivai Silaban" class="name">+Rivai Silaban</a><div class="owner-image-profil"></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE widget author box blogspot End -->


Keterangan Gambar
  • Silahkan anda edit pada tulisan berwarna Code CSS dan HTMLnya sesuai yang tertulis pada tutorial.
  • Silahkan anda edit kode widget author box blogspot ini sesuai dengan thems template blog anda.

Widget author box blogspot pada postingan kali ini memiliki tampilan yang begitu elegan dan lebih menarik dibaning biasanya, pemasangan link source pada widget ini menjadikan widget author box blogspot ini semakin disukai para blogger mania.

Bila anda mengalami kesulitan pada pemasangan tutorial pada postingan widget author box blogspot ini atau menemukan kode yang error, silahkan hubungi saya atau share dengan saya melalui form komentar dibawah. Pergunakan semua fasilitas di blog ini untuk mempermudah anda.

Widget author box blogspot
Minggu, 17 November 2013

Blog Design

+Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 1:20 PM

10 comments :

  1. Hi.. thanks tutornya yah...

    Aq punya satu blog yg pake blogspot yang ga keurus coz keterbatasan pengetahuan tentang blogspot. Tutor yang ini mau aq coba pasangin di blog, mudah2an lancar. :)

    ReplyDelete
    Replies
    1. sama sama..
      silahkan..
      semoga lancar dan blogbya makin maju..

      Delete
  2. templatenya keren gan, ajarin ane ya

    berkunjung balik ke blog Bayu Setiawan ya, thx :)

    ReplyDelete
    Replies
    1. template yang mana gan..
      saya juga masih belajar gan, tapi silahkan saja sama sama belajar kitanye..

      Delete
  3. manteb mas tutornya... keren. tq yah... bisa buat referensi nih.

    ReplyDelete
    Replies
    1. sama sama gan... thx juga atas kunjungannya..

      Delete
  4. Selamat siang Bang Rivai lama saya gak mampir di Blog Abang ini
    Apa kabarnya semoga baik-baik saja yah Bang. ijin simak artikel Author Boknya keren elegan dan menarik ijin bookmark Bang terima kasih :))

    ReplyDelete
  5. Maaf Bang Rivai mau tanya tapi oot dan bukan tidak memakai
    Pasilitas blog ini. jika saya mau ganti threaded comments saya
    Dari template blog saya yang dari Bang Rivai. code threaded comments
    dari Bang Rivai ada di bagian apa naruhnya? soalnya saya mau ganti
    Dengan Threaded comment Hack 3. mohon pencerahanya Bang makasih

    ReplyDelete
    Replies
    1. soal Threaded comment Hack 3 mau di pasang itu tergantung paa codenya bang, dia make code yang mana, menurut saya banyak juga jenis pembuatan kodenya bang..

      tapi untuk saran pemakaian Threaded comment Hack 3 itu masih blon stabil bang, lagian masih berat loadingnya, untuk responsive masih belum akurat, untuk kommentnya masih terbatas mungkin , masih batas 200 comment saya rasa maximal kommentnya...

      tapi untuk itu akan saya cek dulu bang...

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog