Tạo khung tác giá kèm hiệu ứng tuyệt đẹp cho blogspot.

Bạn là một chủ sở hữu của một trang blog. Nếu bạn muốn đọc giả biết đến mình thì việc tạo một khung giới thiệu về mình là một thứ không thể thiếu. Chính vì thế mà lúc này, code5giay cho ra mắt một sản phẩm mang tên"Khung Tác Giả Tuyệt Đẹp" nói thế thôi, chứ nó cũng khá đơn giản các bạn ạ. Để thực hiện nó cũng khá đơn giản chỉ cần các bạn làm theo những bước phía dưới.

Bước 1: Chèn đoạn css này trên thẻ ]]></b:skin>

CSS

/* Css */

#ignielAuthor {text-align:center;background-color:#eee;color:#000;line-height:20px;padding:15px 10px}

#sidebar-wrapper #ignielAuthor h2, #sidebar-wrapper #ignielAuthor h3 {background:transparent;padding:0 0 10px 0}

#sidebar-wrapper #ignielAuthor h2 {font-size:18px;border-bottom: 2px solid #138be6;}

#sidebar-wrapper #ignielAuthor h2:after {content:'\f058';font-family:Fontawesome;color:rgb(17,143,249);background:transparent;display:inline;position:relative;border:0px;font-size:18px;padding-top:10px;width:10px !important;margin-left:10px}

#sidebar-wrapper #ignielAuthor h3 {font-size:15px;font-weight:normal}

#sidebar-wrapper #ignielAuthor h3:after {display:none}

#ignielAuthor hr {border:none; height:1px; background-color:#bdc3c7; width:80%; margin:10px auto}

#ignielAuthor2 {width:100%;;margin-bottom:5px}

#ignielAuthor2 li {list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block}

#ignielAuthor2 li:hover {background-color:#37b185}

#ignielAuthor2 li:nth-child(2) {margin-left:-3.5px;border-left:3px solid #2f303f;float:right}

#ignielAuthor2 li a {color:#fff;padding:5px 32px;line-height:40px}

.simplifymedsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}

.medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;opacity:.9;}.medsos a i{font-family:Fontawesome;width:35px;height:35px;line-height:35px;display:block}.medsos a:hover{color:#fff;transform:rotate(360deg);}.medsos .facebook{background:#3a579a}.medsos .twitter{background:#00abf0}.medsos .googleplus{background:#df4a32}.medsos .youtube{background:#cc181e}.medsos .instagram{background:#992ebc}.medsos .pinterest{background:#cd1c1f}.medsos .linkedin{background:#2554BF}.medsos .tumblr{background:#314358}.medsos .rssfeed{background:#ee802f}

a.showcase{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}

a.showcase:hover{background:#357ae8;border:1px solid #2f5bb7;}

a.showcase2{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

a.showcase2 svg{width:14px;height:14px;vertical-align:-3px}

a.showcase2 svg path{fill:#fff;}

a.showcase2 {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}

@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}

30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}

40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}

50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}

65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}

75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}

}

@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}

30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}

40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}

50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}

65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}

75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}

}

.hrecipe{display:none;margin:30px 0 30px 0;padding:12px;border:1px solid #e8e8e8;background:#f8f8f8;overflow:hidden;}

#Feed1_feedItemListDisplay a {line-height:20px;}

#Feed1_feedItemListDisplay .item-date, #Feed1_feedItemListDisplay .item-author {font-style:italic;}

Bước 2: Đến bố cục và thêm tiện ích HTML/JAVASCRIPT
Bước 3: Thêm đoạn code dưới vào trong khung

HTML

<div id="ignielAuthor">

<h2>Tác giả: Trần Quang Huy</h2>

<br/>

  <i>Địa chỉ: Định Hòa, Bình Dương</i>

<br/>

  <i>"Hãy là một người tốt, một Blogger tốt"</i>

<hr /><center><a class="showcase2" style="width:80%" href="#" title="Perbaiki Artikel Disini">Liên hệ với tôi<i aria-hidden="true" class="fa fa-paper-plane" style="margin-left:10px;"></i></a></center>

<br/>

<div class="medsos">

<a class="facebook tooltip" data-tooltip="Facebook" href="https://www.facebook.com/#" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>

<a class="twitter tooltip" data-tooltip="Twitter" href="https://twitter.com/#" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a>

<a class="googleplus tooltip" data-tooltip="Google Plus" href="https://plus.google.com/u/0/#" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a>

<a class="instagram tooltip" data-tooltip="Instagram" href="https://codepen.io/#/" rel="nofollow" target="_blank"><i class="fa fa-codepen"></i></a>

<a class="rssfeed tooltip" data-tooltip="RSS Feed" href="https://feeds.feedburner.com/#" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a>

</div>

</div>

<div id="ignielAuthor2">

<li><a href="https://www.blogger.com/follow-blog.g?blogID=4715433630486867004" title="Follow Igniel" target="_blank"><i class='fa fa-user-plus'></i>&nbsp;&nbsp;Follow</a></li>

<li><a href="https://www.facebook.com/#" title="Send Me On Facebook" target="_blank"><i class='fa fa-user-plus'></i>&nbsp;&nbsp;Donate</a></li></div>

Bước 4: Lưu lại và hưởng thụ.
Lưu ý: Nhớ chỉnh lại thông tin cho phù hợp với bạn nha.

--- Chúc Các Bạn Thành Công ---

Baca Juga