Cara membuat Kotak Author dengan Tombol Sosial Media ~ Tutorial Bangsat

Ok sobat TB pada kesempatan ini akan membagikan kepada anda bagaimana cara membuat Author Bos dengan tombol media sosial seperti Google plus, facebook, twitter dkk. Sebenarnya sebeumnya juga sudah pernah dibagikan widget author box seperti ini, cuma kali ini tampilannya yang berbeda karena cocok untuk diletakan dibawah postingan blog.

Kelebihanya juga sudah ada tombol SOSMED nya jadi seandanya di template sobat belum ada tombol share ke sosial media maka dapat mencoba menggunakan widget author ini.

INSTAL AUTHOR BOX!

Cara membuat Kotak Author dengan Tombol Sosial Media

Baca Juga:

Pertama yang harus anda lakukan Masuk ke Dasboard blog dan pilih blog anda. kemudian pergi ke menu template >> edit HTML template Blog dan Cari kode <div class='post-footer-line post-footer-line-1'> Jika anda sudah menemukan kodenya maka anda telah siap untuk menggunakan kode dibawah ini. Dan ingat sesuaikan tulisan berwarnah merah dibawah ini sesuai kebutuhan.

Paste Widget Code

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Author name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Author profile image link here" alt="">
</div>
<div class="author-description">
Author bio goes here.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.seocips.com">blogger widgets</a></p>
</div>

Paste CSS Code

Untuk kode dibawah ini dapat anda letakan diatas kode CSS Blog anda misalnya di atas ]]></b:skin> atau </style>.

.entry-social {
margin-bottom: 20px;
overflow: hidden;
}
.entry-social a {
color: #FFFFFF !important;
display: block;
font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
font-weight: 600;
padding-left: 20px;
}
.entry-social div {
float: left;
margin-right: 10px;
width: 138px;
}
.entry-social .fb a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYAmol73e_lD8qhvS4-EjKq5VUqAWHvP-T51XgwjiVSd1htpVdXhnaMLnlmOrtz60FXuSDebQrG7Ai3GlWca4c2bcirqqBbEVb-OAFlUb_T1rHg2xzq723en9_9d2clfO3QteoUtzds7tY/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYAmol73e_lD8qhvS4-EjKq5VUqAWHvP-T51XgwjiVSd1htpVdXhnaMLnlmOrtz60FXuSDebQrG7Ai3GlWca4c2bcirqqBbEVb-OAFlUb_T1rHg2xzq723en9_9d2clfO3QteoUtzds7tY/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbKEeM9zUWbnFEQ3XEt1JqLxb9Uz-VXJcQVMKvtMmz30vxfH2pnkmb3D6NyjlgCgy56NeBJBG288dTGuuqFjIjngiZT0PLEmc8spsJvuyjdDQR-zq7k8mu1Fvn84XI_Kw0XWo88jResd2/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbKEeM9zUWbnFEQ3XEt1JqLxb9Uz-VXJcQVMKvtMmz30vxfH2pnkmb3D6NyjlgCgy56NeBJBG288dTGuuqFjIjngiZT0PLEmc8spsJvuyjdDQR-zq7k8mu1Fvn84XI_Kw0XWo88jResd2/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-RhVKFoyqLHotw-8Rr3WY_B4eVYmC7MYVFeeuzU64GF-RRNNPdqhSTLwTLiLj30nnSDvX8bMq_JFj2o9PyPoZdKrykktxfAFqldgtYS43UxXfrdKaGMzeJFotaPziRxE4h-zmZphmoHJ/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-RhVKFoyqLHotw-8Rr3WY_B4eVYmC7MYVFeeuzU64GF-RRNNPdqhSTLwTLiLj30nnSDvX8bMq_JFj2o9PyPoZdKrykktxfAFqldgtYS43UxXfrdKaGMzeJFotaPziRxE4h-zmZphmoHJ/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVMMuYn3uR8RTUhjHCF1BtMBQHFohFKere2TQt5cwBK8l3-anjA4djjdWRMZLB02nxh_9plhQGiuQ0Zv0hqEv56zv45Fqa8AvB13etpBo2yf-Yp-f9RrvDrgARPDrxHC6ilyF-FU9RcKU/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVMMuYn3uR8RTUhjHCF1BtMBQHFohFKere2TQt5cwBK8l3-anjA4djjdWRMZLB02nxh_9plhQGiuQ0Zv0hqEv56zv45Fqa8AvB13etpBo2yf-Yp-f9RrvDrgARPDrxHC6ilyF-FU9RcKU/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4jhBXJlEKrii4VkgZlbhRSUj5NMKkp1GRQuuW6AmzmPoLhRzs6OEuCkPGj3XMQLGo16GpTPeYJEcNfK5UU0BYBFNN-hq5N83AB0L9KCZhTYXUIf2JwJq4P8g8iUd8VLF60brODZjUy1Y/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4jhBXJlEKrii4VkgZlbhRSUj5NMKkp1GRQuuW6AmzmPoLhRzs6OEuCkPGj3XMQLGo16GpTPeYJEcNfK5UU0BYBFNN-hq5N83AB0L9KCZhTYXUIf2JwJq4P8g8iUd8VLF60brODZjUy1Y/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_PWD_r-nHJsSflA6sVbYHLbNdwK_rFgQVif6b-K1pdFg_oIaZExoo6acWOQDWRud5ZhrJrFn3jzN7sQGFDdT4ZWtIWOJrWErjFJRQpafcY54Q0zTzJUYukwoFBEzxJ6Y7IP_uAC5Jxro/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_PWD_r-nHJsSflA6sVbYHLbNdwK_rFgQVif6b-K1pdFg_oIaZExoo6acWOQDWRud5ZhrJrFn3jzN7sQGFDdT4ZWtIWOJrWErjFJRQpafcY54Q0zTzJUYukwoFBEzxJ6Y7IP_uAC5Jxro/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
margin-right: 0;
}
.beh-entry-author {
margin-bottom: 20px;
}
.beh-entry-author .author-header {
padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
color: #000000;
}
.beh-entry-author .author-header h4 a {
color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
.beh-entry-author .author-wrap {
border: 1px solid #EEEEEE;
overflow: hidden;
padding: 12px 15px;
}
.beh-entry-author .author-avatar {
float: left;
height: 80px;
margin-right: 30px;
width: 80px;
}
.beh-entry-author .author-link {
margin-top: 5px;
}
.main-color-bg {
background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}
.entry-social a {
color: #3A3A3A;
outline: 0 none;
text-decoration: none;
transition: all 0.2s ease 0s;
}

5. Sekarang simpan template anda dan lihat hasilnya.

Terima Kasih telah membaca artikel tentang Cara membuat Kotak Author dengan Tombol Sosial Media . Silahkan baca artikel lainnya di daftar isi.

Unknown

Judul : Cara membuat Kotak Author dengan Tombol Sosial Media .
Ditulis oleh : Unknown .
Pada hari : Wednesday 30 July 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+