Share code khung thông tin tác giả đẹp thích hợp cài trên template Blogspot SimpleOn

Hôm nay Dumuckythuatso.blogspot.com xin chia sẻ thủ thuật tạo khung tác giả đẹp thích hợp với các bạn sử dụng template Blogspot SimpleOn :

Phần CSS tạo khung thông tin tác giả :

Phần Html tạo khung thông tin tác giả :

<div class='author-box2'>
    <div class='author2 img'>
    <a><img alt='Blog Content Marketing' draggable='false' oncontextmenu='return false' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-mFzQO45MvTs_ExwqpDxJQhGRgZpGrTYi8xvb_0v6GyJ0wIPnbdlV2aIWIIg3PIaxrUir7bMRGB7oQJQBSrKy1zQkFgCu6rvNO4Ilatg-f2Dj5zizo5zy5Qrpzv-ujjO_KysV6wl8W4/s300/RandomPost-blog-content-marketingZ4r1z1.png' title='Admin'/></a>
    </div>

    <div class='author-info2'>

    <div class='name-author2'>

    <tooltip flow='up' tooltip='Designer & Developer'>Author : DigitalNomad.Vn</tooltip>

    </div>

    <span class=''>Blogspot Designer & Blogger </span>

    <p class='author-about2' style='text-align: justify;padding:10px;'>
Chào các bạn.<br/>
Để thỏa mãn sở thích viết lách, niềm đam mê với nghề code web, lập trình ứng dụng văn phòng bằng VBA Excel, mình lập nên blog này nhằm chia sẻ kiến thức liên quan đến việc thiết kế & viết blog content marketing - kiếm tiền từ nội dung website từ việc chia sẻ kinh nghiệm cá nhân. <br/>
Về viết lách : thích viết content marketing theo 2 dạng Brand Content & UnBrand Content sử dụng cấu trúc yêu thích là kim tự tháp ngược, Aida, 5w - 1H,Bla bla... đối với bài viết dạng Content UnMarketing tớ chọn phong cách viết tự do bỏ qua và bất tuân mọi quy tắc - freeStyle.<br/>
      </p>



<!--<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
margin-top: 20px;
}
</style>
<button onclick="myFunction()">Xem tiếp ?</button>

<div id="myDIV">
Nội dung cần ẩn hiện trong #myDIV

</div>

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}
</script>
-->


Kết hợp thủ thuật Ẩn hiện với : Bootstrap Collapse và Accordion tạo khung thông tin tác giả - trường hợp các bạn cần bổ sung thông tin :


<b:if cond='data:blog.searchLabel'>

      <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css' rel='stylesheet'/>
      <div class='container mt-3'>

         <a class='btn btn-link' data-target='#target1' data-toggle='collapse' href='#'>
             Xem tiếp...?
         </a>
         <div class='collapse' id='target1'>

<center>   <font color='white' size='4'>Kế hoạch cho năm 2021 </font> </center>
<p class='author-about2' style='text-align: justify;padding:0px;'>
<font color='white' size='2'>
❖ Học tập & chia sẻ kinh nghiệm
<ul>
<li>☞ Học cách viết blog bằng tiếng Anh</li>
<li>☞ Học cách thiết kế banner Ads cho Blogspot</li>
<li>☞ Học cách tạo video up lên Youtuber</li>
</ul>
❖ Cộng tác với blogger :<br/>
<ul>
<li>☞ Ẩm thực</li>
<li>☞ Dịch thuật tiếng Anh, tiếng Trung, tiếng Nhật, tiếng Hàn</li>
</ul>
❖ Hợp tác marketing với các đối tác là công ty sản xuất, Thương mại & cung cấp dịch vụ :<br/>
<ul>
<li>☞ Kế toán & thành lập doanh nghiệp</li>
<li>☞ Xưởng may rèm cửa</li>
<li>☞ Công ty sản xuất đồ dùng nhà bếp</li>
<li>☞ Công ty sản xuất đồ gỗ gia dụng </li>
<li>☞ Công ty cung cấp vật tư ngành gỗ</li>
</ul>
✔ Hợp tác những gì ?<br/>
☞ Viết quảng cáo seo content đưa từ khoá lên top 10 google.<br/>
☞ Viết quảng cáo google ads <br/>
☞ Viết quảng cáo slogan top of mind<br/>
✔ Mục tiêu : Sử dụng Công Nghệ, Marketing Online trên môi trường Internet giúp doanh nghiệp mở rộng kênh phân phối & tiêu thụ sản phẩm, nâng cao vị thế cạnh tranh.<br/>
❖ Mở gian hàng kinh doanh online các dòng sản phẩm :<br/>
☞ Dụng cụ nhà bếp bằng gỗ bao gồm : thớt gỗ / khay gỗ / đũa gỗ / muỗng gỗ / tô - bát gỗ.<br/>
☞ Bàn ghế cafe<br/>
☞ Bàn ghế học sinh<br/>
☞ Rèm vải may sẵn<br/>
☞ ,..<br/>

Label nổi bật : Inverted Pyramid Composition | Aida | Brand Content | UnBrand Content | Content | Marketing | UnMarketing |
Blogging in English | Học Viết Blog bằng tiếng Anh | Luyện Dịch Tiếng Anh | Design Banner Ads for Blogspot | Học thiết kế Banner Ads cho Blogspot
</font>
</p>

        </div>
      </div>
      <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'/>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'/>
      <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'/>
</b:if>

</div>
</div>
<div style='clear: both;'/>

</b:if>
</div>