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>

  <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.