Chuyển đến nội dung chính

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

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.



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!

DEMO CHO MỌI NGƯỜI :







@phucuongblogger
Nguyễn Phú Cường
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ố?!



  • Mê League of Legends



  • Sách về kĩ năng sống, tiểu thuyết



  • Các bài hát hợp tâm trạng



  • Phượt đê



  • Tuổi thơ dữ dội



  • Yêu bố mẹ và em trai nhất

















Nhận xét

Bài đăng phổ biến từ blog này

[Blogger] Gỡ bỏ bản quyền template Blogspot không bị chuyển hướng

Xin chào các blogger, hẳn khi làm blog bạn chẳng còn xa lạ gì những trang cung cấp template nổi tiếng như soratemplates, gooyaabitemplates,... đúng không. Mỗi khi bạn tải template về thường có 2 tùy chọn đó là bản free và bản premium. Sự khác biệt giữa chúng là quá rõ ràng kể đến như support hoặc mã hóa code,...


Dân nghèo như chúng ta thường chỉ chơi bản free thôi, và đương nhiên sẽ có nhiều template dính quả bản quyền thần chưởng, ở đó thì họ thường gắn tên vào cuối footer và khi ta xóa dòng đó đi web site sẽ tự động chuyển hướng tới trang chủ của họ. Nói chung ta không nên xóa bản quyền template đi vì đó thể hiện sự tôn trọng tới người đã tạo ra template cho ta sử dụng.

Còn trong khuôn khổ bài viết này hung1001 sẽ cùng bạn tìm hiểu cách gỡ và thêm bản quyền của bạn vào nếu như bạn thích.


Ở đây tôi làm mẫu với template Treasury của Sora bản free. Đây là dòng tác giả đã chèn bản quyền và có đoạn js điều hướng nếu dòng bị xóa


Nhiệm vụ của bạn đó là đi dò toàn bộ các đoạn mã js đã bị mã hó…

[Blogger] Tạo hiệu ứng tuyết rơi chào đón Noel cho blogspot

Noel sắp đến để tăng thêm hiệu ứng cho blog của bạn hãy thêm vào 1 chút hiệu ứng tuyết rơi để cho không khí thêm sôi động


Cách làm cực kì đơn giản:

Đăng nhập vào blogChọn mẫu và vào phần chỉnh sửa htmlBạn để đoạn code sau vào giữa cặp thẻ <body> ... </body>
<script src='https://cdn.rawgit.com/hung1001/blogspot/master/js/tuyetroi.js'/>

Code nhúng trực tiếp vào web không thông qua host

<script type="text/javascript">
//<![CDATA[
var snowmax=100
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff")
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowletter="*"
var sinkspeed=1
var snowmaxsize=30
var snowminsize=20
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
v…

Share Template Mudah Grid Responsive.

Chào mọi người, dạo gần đây mình thấy có một bản mẫu blogspot đi kèm với một giao diện khá thân thiện nên mình cũng đem về rồi nhờ người anh em thân thiết xóa cái bản quyền template đi rồi share cho anh em dùng.  ƯU ĐIỂMLoad nhanhSEO tốtChuẩn responsiveRecent labelButton ShareFollow by emailBreadcrumbs...NHƯỢC ĐIỂMThì mình chưa tìm ra. Cách nhận template- Comment link share trên mạng xã hội ( tùy tâm ) - Comment mail phía dưới. Lưu ý: Bản này hoàn toàn đã xóa bản quyền rồi nhé.
Xem Demo