Lần này mình sẻ chia sẽ thủ thuật tạo Widget Info About Us Với Hiệu Ứng Ẩn Hiện Cho Blogger - Blogspot. Đó là một tiện ích popup khi nhấn vào nút nào đó do bạn đặt. Nó sẽ hiện ra một bảng thông tin cá nhân đầy đủ nhất nếu bạn không làm gọn nó

.Nó khác hẳn với các blog khác. Chắc chắn đây là độc quyền chưa có trên một Template blogger nào. Nào ta sẽ bắt đầu luôn.

Mục lục:

Mở Đầu

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

Mục Đích

Hiệu ứng popup độc đáo thu hút người xem
Hiên thị đầy đủ thông tin của bạn
Tăng trải nghiệm người dùng
Rất đẹp cho blog
Không chiếm nhiều khoảng không rộng cho blogspot

Thực Hiện

1. Đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML, sau đó chép đoạn CSS sau vào trước thẻ đóng ]]></b:skin> hoặc thẻ đóng </style>

CSS.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child{background:#e74c3c}
.circle:nth-child(2){background:#ffff00}
.circle:nth-child(3){background:#12c700}
headers{background:#4FA7DB;height:50px;width:100%;position:inherit}
#textlogo{background:#4399cd;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#left a:hover{color:#fff;}
.label1,.label2,.label3,.label4,.label5,.label6,.label7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.label1:hover{background:#f88c00;color:#fff}.label2:hover{background:#e74c3c;color:#fff}.label3:hover{background:#2980b9;color:#fff}.label4:hover{background:#27C9E9;color:#fff}.label5:hover{background:#3ca9d0;color:#fff}
.label6:hover{background:#1abc9c;color:#fff}.label7:hover{background:#4399cd;color:#fff}
#left .label1:hover a,#left .label2:hover a,#left .label3:hover a,#left .label4:hover a,#left .label5:hover a,#left .label6:hover a,#left .label7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{background:rgba(255, 255, 255, 0.65);display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}
li.infoanhimdsign{border:0;float:right;list-style:none}
li.infoanhimdsign a{background:#4399cd;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s}
i.infoanhimdsign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

2. nhấn Ctrl + F, sau đó tìm thẻ mở <body> hoặc <body rồi chèn cả đoạn html sau nó.

HTML<li class='infoanhimdsign'><a class='popup-link' href='#popup'>Info</a></li>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<headers><span id='textlogo'>Anh Nhím</span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</headers>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Anhnhim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2K3U627DAIo5Ya2Nt3SFjreonoWFst15T3ozUyAwQJIU2Ns8fcY8rk8WKewvAKwAY_jOCT08qQZr_RkmX0J4g7JiJd_tEfv9jxC9hSEx1yC3ZcpH0DIM_fOnXaNDQKduJCqycmeepAPE2/s1600/indzign.jpg' title='Indzign'/><br/>
<div class="totalposts"><span class="totalnumber">236</span><span class="totallabel">Tổng Bài Viết</span></div><br/><br/>
Anh Nhím Blog được thành lập năm 2015.<br/><br/>
Hy vọng rằng trong tương lai Anh Nhím Blog có thể đóng góp các thông tin hữu ích cho tất cả các bạn. Cảm ơn.
</div></div></div>
<div id='left'>
<div class='label1'><a href='http://www.vnitworld.net' rel='nofollow' target='_blank' title='http://www.vnitworld.tk'>http://www.vnitworld.tk</a></div>
<div class='label2'><a href='https://plus.google.com/116700334276378074359' rel='nofollow' target='_blank' title='Follow Us On Google Plus'>Google Plus</a></div>
<div class='label3'><a href='https://www.facebook.com/anh.nhim.50' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='label4'><a href='https://twitter.com/danghau29' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='label6'><a href='http://codepen.io/anhnhim/' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='label7'><a href='http://www.blogger.com/follow-blog.g?blogID=89346568377102353783' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div>
</div></div></div></div></div><br/>

Chú ý: Nhớ Thay đổi các thông tin của bạn trên code html gồm tên, link blog, google +, facebook, twitter, codepen. Còn bạn ko biết thay đổi cái nào thì mình chịu.

Nếu ko muốn nó hiện theo kiều popup mà hiện trên một trang tĩnh thì ngat tại dòng đầu tiên - dòng màu đỏ ấy

là dòng này <li class='infoanhimdsign'><a class='popup-link' href='#popup'>Info</a></li>
Từ dòng trên các bạn bỏ #popup trong href thành link trang tĩnh. rồi đăt CSS và HTML trong trang tĩnh đó trừ dòng đầu tiên. Sau đó các bạn vào Chĩnh Sửa Mẫu -> rồi đặ dòng đầu tiên mà các bạn đã chỉnh sữa trong thẻ <body hoặc thẻ <body>

3. Sau đó chèn đoạn javascript vào trước thẻ đóng </body>

JS<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Tổng Bài Viết</span></div>');}
//]]>
</script>

4. Lưu mẫu lại
5. Thưởng thức.

Demo
click to view

Nâng Cao

Thay đổi màu của cái headers trong bảng(cái thanh có hai màu xanh khác nhau ấy)

Các bạn tìm dòng headers{background:#4FA7DB;height:50px;width:100%;position:inherit} trong đó có mã màu là #4fa7db các bạn thay màu khác nha. Bạn có thể tìm mã màu tại đây, hoặc nếu bạn thích màu metro thì đây.

Cái đó mới là cái bên phải còn bên trái thì

Tìm dòng này #textlogo{background:#4399cd;color:#fff;padding-top:15px;text-align:center; trong đó có mã màu là #4399cd, sau đó thay đổi màu bạn thích

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo Widget Info About Us Với Hiệu Ứng Ẩn Hiện Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.