Khung thông tin cá nhân 3 trong 1 cho blogspot

Share:
Hầy, hiện tại là 1h33p sáng rồi và giờ mình còn chưa ngủ :( Sở dĩ chưa ngủ được là vì thứ 4 mình phải thuyết trình môn Thông Tin Quang lấy điểm quá trình nhưng nản quá không làm thôi. Thay vào đó mình ngồi nghịch cái template đấy =,=

Mới hôm nay, PC Blogger đã cán mốc 10k views rồi. Vì vậy, mình hào hứng ngồi trang trí lại blog kiểu thay áo mới cho tuổi mới. Và cái tốn công tốn sức nhất là cái khung My Profile kia kìa.

Tuy mới làm xong nhưng mình share luôn vậy. Đáng lẽ post bài bên StarCuongIT nhưng admin ngủ rồi, không duyệt bài luôn được :)) Cái này 3 trong 1, sở dĩ mình nói thế là vì vừa tích hợp thông tin tác giả, thống kê blog cũng như khung tìm kiếm.

Đm, nói lan man vãi. Dưới là demo nha:


Cách thực hiện: B1. Vào quản trị blog - Bố cục - Thêm tiện ích - HTML/Javascript.
B2. Dán toàn bộ code sau khung nội dung:
<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> - Sửa lại toàn bộ thông tin, thông số phù hợp với blog bạn nhé.
B3. Lưu tiện ích lại. Kết luận: Đáng lí ra mình sẽ giải thích code của nó nhưng vì muộn rồi nên mình không có thời gian, 2h sáng rồi :( Vậy nên, nếu bạn gặp khó khăn phần nào thì cứ bình luận phía dưới, mình sẽ trả lời sớm nhất có thể nhé.
Chúc một ngày tốt lành!

57 nhận xét:

  1. blog hơi lag thì phải, đáng suy ngẫm :clap:beer

    Trả lờiXóa
    Trả lời
    1. T cũng k rõ nữa. Chắc do chỉnh CSS ở trang chủ và trang bài viết khác nhau, với cả chỗ nào cũng có toàn hình ảnh nên lag đó. T sẽ cố gắng tối ưu đi sau.

      Xóa
  2. Ko có đếm lượt truy cập trang hả Cường?

    Trả lờiXóa
    Trả lời
    1. Hôm qua định làm cạnh mục số lượng tác giả là thời gian load trang đấy nhưng tự nhiên quên mất đoạn Javascript đếm time loading r :(

      Xóa
    2. kiếm đoạn code đếm thống kê blog riêng biệt căng gê, đến h vẫn chưa tìm ra.

      Xóa
    3. Cái đó k có đâu. Toàn phải thêm widget thống kê rồi mới có code sẵn ở đó :3

      Xóa
  3. Trả lời
    1. Thanks bác nha. Mà lần đầu thấy bác thì phải :))

      Xóa
    2. Ọc :)) A cứ tưởng bạn nào mới.

      Xóa
  4. Trả lời
    1. Thanks e :)) Mới đổi tên à? Có thêm chữ blog sau tên thật.

      Xóa
    2. ừ đúng r a. mà nhìn temp của anh ngày càng truất'ss

      Xóa
    3. Trước khi a chưa sửa thì câu này ok, giờ a mới sửa lại rồi, a thấy hết chất rồi e ạ :D lag quá nên a bỏ hết hình ảnh cả footer đi rồi.

      Xóa
    4. ý e là cái menu widget bên trái. khác với nhiều blog bây giờ toàn bên phải ^^

      Xóa
    5. với cả e thấy đâu có lag chắc do mạng thôi

      Xóa
    6. 2 phần tử trong mục main họ sẽ set thuộc tính float cho nó, e chỉ cần thay đổi độ rộng width và chuyển float giữa left và right là nó hoán vị trí đó. Còn lag a thấy load chậm hơn 2s so vs trước, ông bạn bên trên cũng bảo nên a sửa lại :3

      Xóa
  5. Temp mới trông đc đấy. Nhưng mà css trên mobile chưa chuẩn :D

    Trả lờiXóa
    Trả lời
    1. Ok bac. De ve e chinh lai sau a. Dao nay k ranh lam :(

      Xóa
  6. chất =( cảm ơn bác đã chia sẽ nhé :-d

    Trả lờiXóa
  7. Cường rãnh thiết kế cái widget Thống kê lạ lạ đẹp đẹp cho ae nào :v

    Trả lờiXóa
    Trả lời
    1. Dạo này chưa rảnh mấy ông ạ :( Mới đi phượt hnay về nhưng mai còn phải đi lên trường nữa. Sau đợt này t nghiên cứu sau :3

      Xóa
  8. Cái ĐĂNG KÝ NHẬN BÀI VIẾT MỚI trên mobile dùng không đc kìa anh

    Trả lờiXóa
    Trả lời
    1. Thật hả e? Ok. Để a xem lại, k thì a dùng cái mới cho đỡ nặng nữa.

      Xóa
  9. a cường vào sửa giúp e cái footer 1 chút đc k a :v

    Trả lờiXóa
  10. bài viết hay thank bác đã chia sẽ =(

    Trả lờiXóa
  11. Blog sắp thành facebook rồi :v nghe nói 6/2018 facebook và google sẽ không còn được dùng ở việt nam nữa :(

    Trả lờiXóa
    Trả lời
    1. Chắc Việt Nam sẽ làm cách nào đó thôi chứ giờ FB cả GG rất nhiều công ty, doanh nghiệp VN dùng, bỏ cái thì xác định kinh tế đất nước đi xuống ngay.

      Xóa
    2. Nhiều người nói Việt Nam nhân tài rất ít mà :v nhưng mà Nhà nước có bỏ tiền ra để kiếm một nhân tài đâu ....

      Xóa
    3. Tình hình hiện tại GG rất có lợi cho mn, còn FB quảng bá sản phẩm hay tuyên truyền rất tốt. A nghĩ mấy ông trong bộ máy nhà nước k dễ dàng để thế. Còn FB thì các ông mới sống ảo đc :D

      Xóa
    4. mấy ổng cấm cho fb GG hoạt động ở VN thì cả bộ máy nhà nước công ty cũng không còn hoạt động =))) công cụ tìm kiếm google là nhất rồi mà cấm thì xong

      Xóa
    5. Ừ chuẩn rồi e. Nên a nghĩ sẽ có biện pháp xin lỗi hay gì đó thôi. Để thế thì cả nước quay về thời nguyên thủy. À k :)) Giống Triều Tiên bh thì có.

      Xóa
  12. Bác đổi liên kết giúp em thành https://huyrocket.blogspot.com/ ( tên hiển thị : Huyrocket) giúp em nhé

    Trả lờiXóa
    Trả lời
    1. Ok bác. Cập nhật thêm logo nhá.

      Xóa
    2. E cập nhật lại rồi nhé. Thanks bác. Rảnh bác qa blog em góp ý blog e tí nha

      Xóa
    3. Cập nhật cả logo nữa bác :3 Chắc bác lại chưa đọc bài viết rồi.

      Xóa
  13. Em mến nhất các vườn âm nhạc của bác. Không biết bác có share không nhỉ

    Trả lờiXóa
    Trả lời
    1. Cái đó chỉ là thêm mã nhạc trên Soundcloud vào mục đó rồi dùng lệnh ẩn frame nghe nhạc của nó đi thôi bác. Ngoài ra có thêm hiệu ứng lá rơi thôi.
      Bác để lại mail e gửi cho cũng đc rồi tự mò nha.

      Xóa
    2. mail: huyplayslot@gmail.com anh gửi giúp em nhé.

      Xóa
    3. Ok a gửi rồi đó. E chỉnh lại thông tin phù hợp blog nhé.
      Trong đó link nhạc chính là link lấy trên Soundcloud nhé.
      <iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/339416501&amp;color=%23ff5500&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>

      Xóa

Bình luận