Tạo Widget About Cho Blogspot

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>
<!-- end front panel -->
                    <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> <!-- end back panel -->
                </div> <!-- end card -->
            </div> <!-- end card-container -->
</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&amp;widgetType=HTML&amp;widgetId=HTML6&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML6&quot;));" 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

0 Bình luận

Blog đang trong quá trình sửa đổi.Nếu gặp bất kì lỗi nào hãy báo lại cho Admin Đã hiểu