Tạo Widget About Cho Blogspot

Đăng Ngày: 17:01:00
Chuyên Mục: Blogspot,
Đức Vũ

Chào các bạn hôm nay mình xin share cách TẠO WIDGET ABOUT GIỐNG FACEBOOK CHO BLOGSPOT ....

CÁCH THỰC HIỆN

Các bạn chỉ copy đoạn code này và thêm vào Bố Cục => Thêm Tiện Ích => HTML/JAVASCRIPT là xong.

<div class="widget-content">
<style>
.btn-info,
.btn-info:hover,
.btn-info:focus{
color: #FFF !important;
background-color: #00bbff !important;
border-color: #00bbff !important;
}
.btn-info{
opacity: .8;
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.btn-info:hover,
.btn-info:focus{
opacity: 1;
}
.btn:hover,
.btn:focus,
.btn:active{
outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
.back .btn-simple{
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card h4{
text-align: center;
}
.card-container, .front, .back {
width: 100%;
height: 420px;
border-radius: 4px;
}
.card .cover{
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img{
width: 100%;
}
.card .user{
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img{
background: none repeat scroll 0 0 #FFFFFF;
/*border: 4px solid #FFFFFF;*/
width: 100%;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 0px 20px;
}

.card .back .content .main {
height: 215px;
}
.card .name {
color: #444444;
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5{
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession{
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .footer {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 6px 0 0;
text-align: center;
}
.card .footer .social-links{
font-size: 18px;
line-height: 45px;
}
.card .footer .social-links a{
margin: 0px 7px;
}
.card .footer .btn-simple{
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto{
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container{
width: 100%;
margin-top: 50px;
}
.card .stats{
display: block;
float: left;
width: 32.9%;
text-align: center;
}
.card .stats:first-child{
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child{
border-left: 1px solid #EEEEEE;
}
.card .stats h4{
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.card .stats p{
color: #777777;
}
/* Just for presentation */
.tomit{
color: #506A85;
text-align: center;
font-weight: 300;
font-size: 44px;
margin-bottom: 90px;
line-height: 90%;
}
.tomit small{
font-size: 17px;
color: #999;
text-transform: uppercase;
margin: 0;
}
.space-30{
height: 30px;
display: block;
}
.space-50{
height: 50px;
display: block;
}
.space-200{
height: 200px;
display: block;
}
.white-board{
background-color: #FFFFFF;
min-height: 200px;
padding: 60px 60px 20px;
}
.ct-heart{
color: #F74933;
}
pre.prettyprint{
background-color: #ffffff;
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
text-align: left;
}
.atv, .str{
color: #05AE0E;
}
.tag, .pln, .kwd{
color: #3472F7;
}
.atn{
color: #2C93FF;
}
.pln{
color: #333;
}
.com{
color: #999;
}

.btn-simple{
opacity: .8;
color: #666666;
background-color: transparent;
}

.btn-simple:hover,
.btn-simple:focus{
background-color: transparent;
box-shadow: none;
opacity: 1;
}
.btn-simple i{
font-size: 16px;
}

.navbar-brand-logo{
padding: 0;
}
.navbar-brand-logo .logo{
border: 1px solid #333333;
border-radius: 50%;
float: left;
overflow: hidden;
width: 60px;
}
.navbar .navbar-brand-logo .brand{
color: #FFFFFF;
float: left;
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
margin-top: 10px;
width: 60px;
}
.navbar-default .navbar-brand-logo .brand{
color: #555;
}
/* Fix bug for IE */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.front, .back{
-ms-backface-visibility: visible;
backface-visibility: visible;
}

.back {
visibility: hidden;
-ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
}
.front{
z-index: 4;
}
.card-container:not(.manual-flip):hover .back,
.card-container.manual-flip.hover .back{
z-index: 5;
visibility: visible;
}
}
</style>
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
<img src="https://i.imgur.com/qD3iIrr.jpg" />
</div>
<div class="user">
<img class="img-circle" src="https://i.imgur.com/7NUzjY3.jpg" />
</div>
<div class="content">
<div class="main">
<h3 class="name">Tiến Đức Blog</h3>
<p class="profession">Designer & Developer</p>
<p class="text-center">-
Blog chia sẻ thủ thuật facebook, blogger, website - Ảnh bìa facebook. Các bạn hãy ủng hộ tôi bằng cách click vào Quảng Cáo hiển thị trên trang. <i class="fa fa-smile-o"></i></p>
</div>
<div class="footer">
<i class="fa fa-mail-forward"></i> Hover vào đây
</div>
</div>
</div>

<div class="back">
<div class="header">
<h5 class="motto">"Muốn thành công, chúng ta phải nổ lực không ngừng và tự tin rằng mình sẽ làm được!"</h5>
</div>
<div class="content">
<div class="main">
<h4 class="text-center">Vũ Tiến Đức</h4>
<p class="text-center">-
Tôi rất thích tung một tờ tiền vào giữa hai người và nhìn họ đánh nhau đến chết. <i class="fa fa-smile-o"></i></p>
<div class="stats-container">
<div class="stats">
<h4>154k</h4>
<p>Followers</p>
</div>
<div class="stats">
<h4>15k</h4>
<p>Instagram</p>
</div>
<div class="stats">
<h4>115</h4>
<p>Projects</p>
</div>
</div>
<div class="footer">
<div class="social-links text-center">
<a href="#" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
</div>
</div>
</div> 
</div> 
</div> 
</div></div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=3629392933793026080&widgetType=HTML&widgetId=HTML6&action=editWidget&sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML6"));" target="configHTML6" title="Chỉnh sửa">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>

Các chỉnh sửa sao cho phù hợp với blog!

THÔNG TIN LIÊN HỆ, HỢP TÁC, QUẢNG CÁO

Email: tienducblog.vn@gmail.com
Facebook: Vũ Tiến Đức
Phone: 0163.2345.034

Group Cover Ảnh Bìa: Cover Ảnh Bìa Đẹp & HOT

Tạo Widget About Cho Blogspot

CÁCH THỰC HIỆN

THÔNG TIN LIÊN HỆ, HỢP TÁC, QUẢNG CÁO

Đức Vũ Designer, Developer

Không có nhận xét nào

Tổng số lượt xem trang

Nhận xét gần đây

Đọc nhiều tuần qua

LIÊN KẾT

Đếm ngược ngày đến tết

Nhãn

CÁCH THỰC HIỆN

THÔNG TIN LIÊN HỆ, HỢP TÁC, QUẢNG CÁO

Không có nhận xét nào

Tổng số lượt xem trang

Nhận xét gần đây

Đọc nhiều tuần qua

LIÊN KẾT

Đếm ngược ngày đến tết