TẠO WIDGET GIỚI THIỆU THÔNG TIN ẨN ĐẸP


 Lần này tôi sẽ chia sẻ một widget Info About Us hoặc một hộp hiển thị hình ảnh của các chủ blog, số lượng bài báo, blog / blog và Social Media đơn giản ở bên phải.

Widget hiển thị Giới thiệu về blog rất quan trọng vì khách truy cập có thể dễ dàng tìm ra nội dung và chủ đề của blog. Và menu ở bên phải / Phương tiện xã hội cũng có thể được sử dụng để khách truy cập đến gần hơn và giao tiếp với chủ sở hữu blog.

Đối với những người bạn muốn cài đặt tiện ích thú vị này, vui lòng thực hiện theo hướng dẫn bên dưới:

1. Mở Blogger.com> Mẫu> Chỉnh sửa HTML> Sau đó, đặt CSS bên dưới ngay bên trên]]> </ b:skin> hoặc </style>

/* CSS Widget Info About Us */
.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,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;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;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7: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{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.infoindzign{border:0;float:right;list-style:none}
li.infoindzign a{background:#f39c12;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.infoindzign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
2. Đặt mã HTML bên dưới bên dưới mã <body> hoặc <body. (không có dấu chấm) Nhấp Ctrl + F trên bàn phím để tìm kiếm dễ dàng hơn.
<li class='infoindzign'><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'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' src='//3.bp.blogspot.com/-jrxkYbBQAYs/VidR2h2eDeI/AAAAAAAALJ8/Vg7CzLW0oYo/s1600/indzign.jpg' expr:title='data:blog.title'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'></script><br/><br/>
Phúc Siêu Phàm Blog
</div></div></div>
<div id='left'>
<div class='taber1'><a href='/' rel='nofollow' target='_blank' expr:title='data:blog.title'><data:blog.title/></a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div>
</div></div></div></div></div>
Lưu ý: Nếu bạn muốn di chuyển nút để hiển thị tiện ích, bạn chỉ phải thêm #popup vào href. Ví dụ: href = '# popup' nếu bạn có và không muốn hiển thị nút gốc, bạn bè, chỉ cần xóa đoạn mã sau: <li class = 'infoindzign'> <a class='popup-link' href='#popup'> Thông tin </a> </li>

3. Đặt Script dưới đây ngay trên mã </head> hoặc </body>
<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">Artikel yang di Publish</span></div>');}
//]]>
</script>
4. Lưu lại và xem thành quả :v
8 nhận xét