Đôi Chút Về Tác Giả

NGUYỄN ĐỨC HUY

Không phải ai cũng là tương lai của bạn. Một vài người chỉ lướt qua cuộc đời bạn để mang lại cho bạn một số bài học của cuộc sống.

Thích Bình Luận Chia Sẻ

BLOG CHUYÊN CHIA SẺ THỦ THUẬT & ẢNH BÌA FACEBOOK

Tạo Khung Thông Tin Tác Giả Đẹp Cho Blogspot

Tạo Khung Thông Tin Tác Giả Đẹp Cho Blogspot

Hình minh hoạ CÁCH THỰC HIỆN: Bước 1: Vào quản trị blog -> Bố cục -> HTML/Javascript Bước 2: Coppy đoạn này code này dán vào:...
Bình Luận 21:49
Hình minh hoạ
CÁCH THỰC HIỆN:
Bước 1: Vào quản trị blog -> Bố cục -> HTML/Javascript
Bước 2: Coppy đoạn này code này dán vào: 
<style> /*------- CSS Tooltip -------*/ .pc-tooltip { position: relative; display: inline-block } .pc-tooltip:before, .pc-tooltip:after { position: absolute; opacity: 0; z-index: 1000; pointer-events: none } .pc-tooltip:hover:before, .pc-tooltip:hover:after { opacity: 1 } .pc-tooltip:before { content: ''; position: absolute; background: transparent; border: 4px solid transparent; position: absolute } .pc-tooltip:after { content: attr(data-pc-tooltip) !important; background: #2a2a2a; color: #fff; padding: 6px 8px; font-size: 14px !important;white-space: nowrap; border-radius: 2px; -webkit-backface-visibility: hidden; margin-left: initial } .pc-tooltip-top:before { bottom: 140%; left: 10%; margin: 0 0 -9px 0; border-top-color: #494158 } .pc-tooltip-top:after { bottom: 125%; left: 10%; margin: 0 0 3px -10px !important } .flaticon-posts:before,.flaticon-comments:before,.flaticon-heart:before,.flaticon-authors:before,.flaticon-location:before,.flaticon-email:before,.flaticon-link:before{font-family:FontAwesome;font-style:normal;font-size:1.5em} .flaticon-posts:before{content:'\f044';color:brown} .flaticon-comments:before{content:'\f0e6';color:green} .flaticon-heart:before{content:'\f004';color:red} .flaticon-authors:before{content:'\f234';color:blue} .flaticon-location:before{content:'\f041'} .flaticon-email:before{content:'\f0e0'} .flaticon-link:before{content:'\f015'} .user-card{width:100%;display:block;position:relative;background-color:#fff;border-radius:4px;text-align:center;margin-bottom:2em;font-size:16px;padding-top:1px}.user-card:last-child{margin-right:0}.user-card .profile-picture .avatar{display:block;width:120px;height:120px;box-shadow:0 0 12px #b3b3b3;background-color:#fff;border-radius:100%;overflow:hidden;background-size:100%;border:6px solid #fff;position:relative;margin:1em auto}.user-card .profile-picture .avatar img{max-width:100%;max-height:100%;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);border-radius:100%}.user-card .profile-picture .avatar label{opacity:0;width:50%;height:50%;color:#333;cursor:pointer;background:white;display:block;border-radius:0 3em 0 1em;z-index:1;position:absolute;top: -1px;right: -1px;display:block;-webkit-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-moz-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-o-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-ms-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22)}.user-card .profile-picture .avatar label:before{font-size:1.4em;margin-top:15px;margin-right:5px;display:inline-block}@media screen and (max-width: 880px){.user-card .profile-picture .avatar label{opacity:1}}.user-card .profile-picture .avatar:hover label{opacity:1}.user-card .profile-picture .username{color:#7577a9;display:block;padding:0 1em;word-wrap:break-word}.user-card .profile-picture .real-name{color:#333;display:block;font-size: .9em;padding:0 1em;word-wrap:break-word}.user-card .profile-picture .about{color:#333;word-wrap:break-word;padding:0 1em;margin-top: .5em;font-size:0.9em}.user-card .ranking{border-radius:20px;color:#fff;padding: .1em .5em;font-weight:bold;background-color:#f05f5c;position:absolute;margin-top: -3em;font-size:1em;margin-left:2em;cursor:default}.user-card .ranking:hover{background-color:#f05f5c}.user-card .stats{border-top:1px solid #f5f8f9}.user-card .stats::after{clear:both;content:"";display:table}.user-card .stats a, .user-card .stats div{color:#333;float:left;width:25%;display:block;padding: .5em;margin:0;text-decoration:none;border-right:1px solid #f5f8f9;font-size:0.9em}.user-card .stats a b, .user-card .stats div b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.user-card .stats a i, .user-card .stats div i{font-size:1em;display:block}.user-card .stats a i:before, .user-card .stats div i:before{font-size:1em;line-height:1.5em;margin:0}.user-card .stats a:last-child{border:none}.user-card .stats a:hover span{color:#333}.user-card .stats a span, .user-card .stats div span{color:#a6a9ac;display:block}.user-card .links{padding:0.5em;text-align:left;border-top:1px solid #f5f8f9}.user-card .links a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;display:block;color:dimgray;font-size: .9em;line-height:2em}.user-card .links a:before{margin:0;margin-right: .8em;display:inline-block;width:22px;text-align:center;font-size:1.4em;vertical-align:middle}.user-card .links a:hover{color:#333} .user-card .user-social{margin:0;padding:0.5em;border-top:1px solid #f5f8f9}.user-card .user-social ul{margin:0;padding:0}.user-card .user-social ul li{display:inline-block}.user-card .user-social ul li a{display:block;top:0;position:relative;-webkit-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)}.user-card .user-social ul li a:hover{top: -3px;text-decoration:none}.user-card .user-social ul li a:before{font-size:1.4em;margin:0}@media screen and (max-width: 880px){.user-card .user-social ul li a:before{font-size:2.3em}}.user-card .badges{padding:0.5em;border-top:1px solid #f5f8f9}.user-card .badges ul{padding:0;margin:0}.user-card .badges ul li{display:inline-block;margin:0 2px}.user-card .badges ul li img{max-width:30px;max-height:30px}.user-card .btn-holder{padding-top:25px;border-top:1px solid #f5f8f9}.user-card .btn-holder .btn{width:100%}.btn-follow{background-color:#286ebb;padding:1em;color:#fff !important;text-align:center;cursor:pointer;font-size:1em;border-radius:4px}.btn-follow:hover{background-color:#3476d9;text-decoration:none}.user-card .more-info{border:none;background:none;outline:none;cursor:pointer;display:block;width:100%;text-align:center;border-top:1px solid #f5f8f9;padding:5px;color:#333}.user-card .more-info:hover{color:#a6a9ac}.user-card .more-info span:nth-child(2){display:none}.user-card .card-hidden{overflow:hidden;padding:0 0.5em;height:0;border:none;-webkit-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.user-card.expanded .card-hidden{overflow:visible;padding:0.5em;height:auto;border-top:1px solid #f5f8f9}.user-card.expanded .more-info span:nth-child(1){display:none}.user-card.expanded .more-info span:nth-child(2){display:block} .fa-google-plus-square:before{color:red} .fa-facebook-square:before{color:blue} .fa-twitter-square:before{color:darkturquoise} .fa-instagram:before{color:brown} </style> <section class="user-card"> <div class="boxProfile-fields profile-picture"> <div id="avatarImage" class="designerPic avatar"> <a href='/'><img class="gr_avatar_img" src="//1.bp.blogspot.com/-8g5jcAjbBKo/We4LckKeQiI/AAAAAAAAAls/5AaYEXZ3l5oH2VHK1IrCE5NgCKr3kGNFwCLcBGAs/s1600/71560.jpg" /></a> </div> <a href="https://www.blogger.com/profile/14744889684461911717" class='username'>@phucuongblogger</a> <span class="real-name">Nguyễn Phú Cường</span> <p class="about">Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!</p> </div> <div class="badges"> <ul> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Thích chơi game"> <a href='#'> <img src="//4.bp.blogspot.com/-ektB4STwTbg/We4J4XuuPhI/AAAAAAAAAlQ/7cf_pchh7REtULeq8iQXsOCCTTAJnx1OACLcBGAs/s1600/gamepad.png" alt="Mê League of Legends" title="Mê League of Legends" /> </a> </li> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Mới có sở thích đọc sách"> <a href="#"> <img src="//1.bp.blogspot.com/-S1FttUVJbjQ/We4KOXiUZuI/AAAAAAAAAlU/wT39ZDWp2x0x0jNVt9F3yVzqBdnaB3YMgCLcBGAs/s1600/open-book.png" alt="Sách về kĩ năng sống, tiểu thuyết" title="Sách về kĩ năng sống, tiểu thuyết" /> </a> </li> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Nghe nhạc mọi lúc, mọi nơi"> <a href="#"> <img src="//3.bp.blogspot.com/-xv3Ps6q0uhs/We4KcXEKbUI/AAAAAAAAAlY/1A2mV-IZB4gtK421XB2iMQuZOHmY-warwCLcBGAs/s1600/music-player.png" alt="Các bài hát hợp tâm trạng" title="Các bài hát hợp tâm trạng" /> </a> </li> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Thích đi phượt với lũ bạn"> <a href="#"> <img src="//1.bp.blogspot.com/-tEZ9qEYw018/We4KrxqSsRI/AAAAAAAAAlc/VA2AeuuNOjwRNqhvJZ8DBb2Ha9GsE7HOQCLcBGAs/s1600/kite.png" alt="Phượt đê" title="Phượt xa đê" /> </a> </li> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Muốn vé quay lại tuổi thơ"> <a href="#"> <img src="//3.bp.blogspot.com/-6XINIwhbs48/We4K-a56qHI/AAAAAAAAAlk/7-8dROf5Qiw5aoJHwVsCuV7pu6aZdsA9QCLcBGAs/s1600/cycle.png" alt="Tuổi thơ dữ dội" title="Tuổi thơ dữ dội" /> </a> </li> <li class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Gia đình là số 1"> <a href="#"> <img src="//4.bp.blogspot.com/-1rKRX-qn1Hw/We4LRwYzxuI/AAAAAAAAAlo/urucMYtBdXQc5O7WZDsV84O_Qoxv71IPACLcBGAs/s1600/family.png" alt="Yêu bố mẹ và em trai nhất" title="Yêu bố mẹ và em trai nhất" /> </a> </li> </ul> </div> <div class="stats"><a href='/'> <span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng bài viết"> <span id='Stats1_totalPosts1' style='color:#333;font-weight:bold'></span> <i class="flaticon-posts"></i> </span> </a> <a href='/binhluan'><span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng bình luận"><span id='Stats1_totalComments1' style='color:#333;font-weight:bold'></span> <i class="flaticon-comments"></i> </span></a> <a href='/tamsu'> <span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Những tâm sự của tác giả"><span id='Stats1_totalTS' style='color:#333;font-weight:bold'></span> <i class="flaticon-heart"></i> </span> </a> <a href='#'> <span class="pc-tooltip pc-tooltip-top" data-pc-tooltip="Tổng tác giả"><b style='color:#333'>01</b> <i class="flaticon-authors"></i> </span></a> </div> <div class="links card-hidden"> <a href="http://maps.google.com/maps?q=Hanoi" class="flaticon-location" target="_blank">Hà Nội</a> <a href="mailto:phucuongblog@gmail.com" class="user-url flaticon-email">phucuongblog@gmail.com</a> <a href="/" class="user-website flaticon-link">https://phucuongblogger.blogspot.com/</a> </div> <div class="user-social card-hidden"> <ul> <li><a href="https://plus.google.com/u/0/102228994561470878414" class="fa fa-google-plus-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://fb.com/tsmkevin815" class="fa fa-facebook-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://twitter.com/tsmkevin815" class="fa fa-twitter-square" target="_blank" rel="nofollow"></a></li> <li><a href="http://instagram.com/cuong815" class="fa fa-instagram" target="_blank" rel="nofollow"></a></li> </ul> </div> <button class="more-info"> <span>+ Thêm thông tin</span> <span>- Thu gọn</span> </button> <script type="text/javascript">$('.more-info').on('click', function () { $('section.user-card').toggleClass('expanded'); });</script> <div class="btn-holder" id="gr_following_23"> <a href="https://www.blogger.com/follow.g?blogID=3891271056391904491" data-id="23" data-type="10" class="btn btn-follow gr-follow-23 gr_following" target='_blank'>Đăng kí thành viên</a> </div> </section> <style type="text/css"> form#_bcd_141013_search_form{text-align:center;position:relative;display:block;clear:both;float:none;border:1px dashed #dcdcdc;padding:3px;font-size:13px;background-color:#fff;width:90%;margin:auto} input#_bcd_141013_search_text{text-align:center!important;width:90%;border:none;margin:0;padding:0;line-height:2em;height:2em;outline:none;background:transparent;color:#000;} button#_bcd_141013_search_submit:hover{color:#000} button#_bcd_141013_search_submit{width:auto;padding:0 3px;margin:0;position:absolute;right:3px;top:3px;line-height:2em;height:2em;text-align:center;cursor:pointer;border:none;color:#666;background:#fff;box-shadow:none} html[dir="rtl"] button#_bcd_141013_search_submit{right:auto;left:3px} </style> <form action='/search' id='_bcd_141013_search_form' method='get'> <input id='_bcd_141013_search_text' name='q' placeholder="Nhập từ khóa cần tìm kiếm..." type='text'/> <input type="hidden" name="max-results" value="6"/> <button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button> </form> <script type="text/javascript">function trk_uc(event) { ga('send', 'event', 'user-card', 'phucuongblogger', event); }</script> <script type='text/javascript'> //<![CDATA[ function totalPosts1(json){document.getElementById('Stats1_totalPosts1').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments1(json){document.getElementById('Stats1_totalComments1').innerHTML=json.feed.openSearch$totalResults.$t};function totalTS(json){document.getElementById('Stats1_totalTS').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts1\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments1\"><\/script><script type=\"text/javascript\" src=\"/feeds/posts/default/-/Tâm%20sự?alt=json-in-script&max-results=0&callback=totalTS\"><\/script>'); //]]> </script>

Bước 3: Chỉnh sửa lại cho phù hợp -> Lưu lại và hưởng thụ nào!!! :v
Nguồn: Phú Cường Blogger
Tạo Khung Thông Tin Tác Giả Đẹp Cho Blogspot Tạo Khung Thông Tin Tác Giả Đẹp Cho BlogspotĐức Huy Blog8.8stars based on9reviews Hình minh hoạ CÁCH THỰC HIỆN: Bước 1: Vào quản trị blog -> Bố cục -> HTML/Javascript Bước 2: Coppy đoạn này code này dán vào:...

Nhận Xét

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

Đăng nhận xét

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.