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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_0Mq9Vun3KJwDThEH5CpFkCKEyNgq-cB7YA1oW2Rp1xrEdyvALfWWVxQqo35ivryd-baDVJ1mXNsQYVnJI7jIT_oWXzMSV6rdCs1Jxuns415p-bQYKLkMnzlKavP89Ka_Uc565MUT5wa/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2kWiIJbzLIwWpXVL3uIpN9px-MOSuPq6Mc2-vS54MWACwyfrcX48n0zx2olR8Bw2AxUgpj2L8N53nxFWeZIgf0B0qRe4wU_Z94RTF7Yi67TAhcEL8njoGUdvzMEvyrsGQ13H4E4H1vHP/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJB_eL6uzaMyECBgKels-1TESVGO6PGfUhxN4WXjg_39iJevSv61ccv4TqBbhA8DhAnAyr_D1aNiDJ4AwWafEKM-NuaxF5tXG5bBSFPjobijBV3l3Ch6URGibl1LneMALJw6ViKp2knmzI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXwp2xAys0nh_jfPTiByfYFdzUyJbyK95MArOd2lNRKTMw1vu27dQJe2OxVsee4xpoFBF9k03OLPmpXBkLJD1Wx2JEV3885QuNN1tG_xKhjQpRkGYRrvdUHfPtu8fYjP7zKZObdTUQgbj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0zG0Mo5JUplIJeZD8oRCYbJdaLLTeEM8-t0byoFsebkYlAgzpXYskTAHe8zxBVe-Y9VWYxcy_vNWx3Lo_2oCzDOPeStGvr10WI1XDML52a6xfJqwuQYrnlgRqgjLAo6wBGzcUbhlUkYG/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYPvxLpscBBb6ZSmpQ_bkFOMM0o3y83Z50IPadtRKRmXFg4-SOGhxQ2bQGqZF-Bz4Ow7Qg55_ulcnWiukmk_xkBfvANWSllbkk4AGeGt7GMZi91Vqsgl0LGeuHp-_nC_6csRSxrfxIP4nG/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthZ-Dss50clfkwmnJ77ODtPP0z5YlqZZ10z_GSf37J-2eih64-0os843GgmZYq1dAeihBHnHNA_w7NXmDGhPq-rlYc2KRDP4Z8hg0Bm_K9IbRaq3XO7o1v4qa4tS4KvTddIM5pdONe199/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
Subscribe Our Newsletter
0 Response to "Thông tin tác giả đẹp cho blogger"
Đăng nhận xét