Nghĩa Rồng Blog | Thủ thuật,Template Blogger

Việc cài đặt hộp tiện ích của tác giả hoặc tiểu sử của tác giả trong thanh bên blog là một điều tốt để làm, nó nhằm mục đích làm cho khách truy cập trang web của bạn biết bạn tốt hơn. 

Có hộp tác giả phụ tùng khác nhau mà bạn có thể tìm thấy trên internet với thiết kế tuyệt vời và khác biệt.

Trước đây tôi cũng tạo ra hộp tác giả widget như google huy hiệu với các biểu tượng của phương tiện truyền thông xã hội và cũng đăng ký nút và blog theo nút.
Nhưng lần này tôi đã tạo một hộp tác giả tiện ích đơn giản chỉ bằng cách sử dụng mã CSS và HTML, vì vậy nó sẽ không làm chậm tải blog của bạn. 

Tiện ích hộp quản trị này hoặc tiểu sử tác giả cũng đi kèm với nút biểu tượng phương tiện truyền thông xã hội bằng cách sử dụng Phông chữ tuyệt vời để nó trông đẹp mắt mặc dù thiết kế của nó vẫn đơn giản. 

Tôi cũng đã thử cài đặt nó trong các loại khác nhau của các mẫu blog tôi có và kết quả là khá tốt.

Mặc dù tìm thấy một số vấn đề như hình ảnh hồ sơ được đóng hoặc cắt ngắn khi tôi cố gắng để cắm vào một blog khác với các mẫu khác nhau, nhưng điều này tôi đã vượt qua. 

Cuối cùng, tôi có thể xuất bản tiện ích này cho tất cả những người đang tìm kiếm một widget tiểu sử tác giả đơn giản hoặc hộp tác giả sử dụng mã css thuần túy. 

Kết nối tiện ích này có chiều rộng 300px nên lời khuyên của tôi để sử dụng trong blog bên, nhưng nếu bạn hiểu mã css, vui lòng sửa đổi lại hộp tác giả theo ý thích của bạn. 

Hãy tiếp tục, nếu bạn quan tâm đến việc tạo một hộp tác giả tiện ích đơn giản trong thanh bên blogger, vui lòng thực hiện theo các bước bên dưới.

Cách cài đặt tiện ích hộp tác giả đơn giản trên Blogger

DEMO

1. Truy cập Blogger.com
2. Nhấp vào Bố cục > Thêm tiện ích > chọn HTML / JavaScript
3. Sau đó, nhập mã sau:

<style type="text/css">
/* author box by caramanual.com */
.cm-author{font-family:'Open Sans',Arial,sans-serif;position:relative;display:inline-block;min-width:230px;max-width:336px;width:100%;text-align:left;font-size:16px;background:#f5f5f5;border-radius:5px;margin-top:15px}
.cm-author *,.cm-author:before,.cm-author:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.cm-author img{max-width:35%;margin-top:-15px;margin-left:60%;margin-bottom:15px;backface-visibility:hidden;vertical-align:top;border-radius:5px}
.myprofile{position:absolute;top:0;right:40%;left:0;bottom:0;padding:15px}
.cm-author h3{margin:0;font-size:1.1em;font-weight:bold}
.cm-author h3 a{color:#656565;text-decoration:none}
.cm-author h3 a:visited{color:#656565;text-decoration:none}
.cm-author .icons{font-size:1.6rem}
.fa-facebook{color:#bababa}
.fa-facebook:hover{color:#3b5998}
.fa-twitter{color:#bababa}
.fa-twitter:hover{color:#55acee}
.fa-instagram{color:#bababa}
.fa-instagram:hover{color:#e95950}
.fa-youtube-play{color:#bababa}
.fa-youtube-play:hover{color:#ff0000}
.mysite{font-size:12px;font-style:italic}
</style>
<div class="cm-author">
<img src="https://lh3.googleusercontent.com/qOaUXrOEROvJVYw9aR52a8lmvzpcyJ_TmrU4PYMo4DHSMc8vMvhFxHqffd9PSroe0JuUxfT0FBVeHg" alt="Ficri Pebriyana" title="Ficri Pebriyana"/>
<div class="myprofile">
  <h3><a href="https://plus.google.com/+FicriPebriyana" title="Ficri Pebriyana">Ficri Pebriyana</a></h3>
  <div class="icons">
    <a href="https://www.facebook.com/caramanual" title="Facebook"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/caramanual" title="Twitter"><i class="fa fa-twitter"></i></a>
    <a href="https://www.instagram.com/caramanual" title="Instagram"><i class="fa fa-instagram"></i></a>
    <a href="https://www.youtube.com/caramanual" title="Youtube"><i class="fa fa-youtube-play"></i></a>
  </div>
  <div class="mysite">www.caramanual.com</div>
</div>

4. Nhấp vào Lưu và xem kết quả 

Lưu ý:
Nhớ thay thế URL truyền thông xã hội và ảnh tiểu sử của bạn. 

Nếu biểu tượng phương tiện truyền thông xã hội không xuất hiện, hãy thêm mã này phía trên mã </body>trong trình chỉnh sửa mẫu blog của bạn.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Đó là một bài viết về cách tạo một hộp tác giả tiện ích đơn giản trong blog bên , chúc may mắn và hy vọng hữu ích. 

Nếu bạn gặp bất kỳ vấn đề nào khi cài đặt tiện ích này, vui lòng liên hệ với chúng tôi qua trang liên hệ, càng nhiều càng tốt, chúng tôi sẽ giúp bạn sử dụng tiện ích con này.
by : caramanual