Hôm nay TTPC4x Share cho bạn Widget Twitter được TTPC4x Edit lại của Ingrid Rauany
 |
| Tạo Widget Giống Twitter Cho Blog. |
Hướng Dẫn:
Đầu Tiên Các Bạn Thêm CSS Cho Nó Bằng Cách.
Tìm Thẻ b:skin
Sau đó dán đoạn code dưới đây vào dưới thẻ b:skin
.twitter-pc4x {
display: flex;
flex-direction: column;
width: 446px;
background-color: transparent;
box-shadow: 1px 1px 16px rgba(0,0,0,.58);
border-radius: 3px;
overflow: hidden;
}
header {
background: url(http://cameronbaney.com/codepen/twitter-pc4x/bg-header.jpg) no-repeat;
color: #fff;
display: flex;
aling-items: center;
}
header .picture {
padding: 15px;
display: flex;
}
header .picture img {
border: 4px solid #00CD66;
border-radius: 3px;
}
header .profile {
display: flex;
flex-direction: column;
justify-content: center;
}
header .profile .user {
font-size: 22px;
font-weight: 600;
margin: 0px 5px;
}
header .profile .description {
font-size: 13px;
font-weigh: 400;
margin: 5px 8px;
}
section.stats {
display: flex;
background: rgb(243,243,243);
}
section.stats div {
flex: 1;
border-bottom: 1px solid #d4d4d4;
padding: 10px;
}
section.stats div a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #696969;
}
section.stats div a:hover {
color: #9C9C9C;
}
section.stats strong {
font-size: 20px;
}
nav.menu {
display: flex;
background: rgb(243,243,243);
}
nav.menu a {
flex: 1;
color: #696969;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
text-decoration: none;
}
nav.menu a:hover {
color: #9C9C9C;
}
Tiếp theo các bạn cần chèn đoạn code này vào nơi bạn muốn Widget xuất hiện, có thể vào bố cục- thêm tiện ích : HTML/Javascript cũng được.
<div class="twitter-pc4x">
<header>
<div class="picture">
<img src="http://cameronbaney.com/codepen/twitter-pc4x/avatar.jpg" alt="TTPC4x">
</div>
<div class="profile">
<p class="user">4xTeam</p>
<p class="description">Thủ Thuật PC4x
</p>
</div>
</header>
<section class="stats">
<div class="tweets">
<a href="#">
<strong>266</strong>tweets
</a>
</div>
<div class="following">
<a href="#">
<strong>60</strong> following
</a>
</div>
<div class="followers">
<a href="#">
<strong>117</strong> followers
</a>
</div>
</section>
<nav class="menu">
<a href="#"><i class="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i></a>
<a href="http://www.thuthuatpc4x.tk/#HTML6"><i class="fa fa-comment-o fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-cog fa-2x" aria-hidden="true"></i></a>
</nav>
</div>
Cuối cùng là Font, các bạn thêm đoạn này vào trong thẻ <Head>.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Như vậy là xong.
Xem DEMO Live Tại Button Dưới Đây.
Xem Thêm Code Tại Đây.