Header Ads

Tạo Widget Giống Twitter Cho Blog.



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.

8 comments:

Powered by Blogger.