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: [email protected]
Facebook: Vũ Tiến Đức
Phone: 0163.2345.034
Group Cover Ảnh Bìa: Cover Ảnh Bìa Đẹp & HOT
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: [email protected]
• Facebook: Fb.com/DucHee.VN
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

Loading...

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