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

[ Goghepthanh.com : Quý khách...Cần Mua Thớt Gỗ, Ván Ghép Giá Tốt, Cần Tìm Xưởng Xẻ Sấy, Bán Nguyên Liệu Gỗ Tràm... Uy Tín, Chất Lượng... Gọi Ngay : 0968 970 650
Mời Quý Khách Ghé Thăm Công Ty - Rất Hân Hạnh Được Phục Vụ.
]

🔥 Hot Topics :

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ả :

<!--Hi!-->
<!--Thong tin tac gia-->
<!--*width:100%;*/height:auto;-->  

<style>
    /* Author */
    #author-blog2{width:auto;height:209px;background:#2a2b67;padding:0px 10px 10px 10px}
    .author-box2{background:#3d2974;box-shadow:0 2px 3px 0 rgba(0,0,0,0.1);/*width:100%;*/height:80%;/*border:1px solid #eee;*/;border-radius:17px;margin:10px 0 0px;padding:20px;position:relative;float:left;font-family:&#39;Quicksand&#39;,sans-serif;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;
    user-select:none}
    .author2 img{padding:0;height:130px;width:130px;float:left;margin:0;border-radius:100%;border:14px solid #2e2869;margin-left:10px}
    .name-author2{font-size:18px;color:#fff}
    .author-info2{float:left;padding-left:3%;width:72%}
    .author-info2 a{color:#fff}
    .author-info2 span{font-size:14px;font-weight:500;color:#c0bfcc;font-family:&#39;Quicksand&#39;,sans-serif}
    p.author-about2{margin:0;padding:10px 0 10px;color:#fff!important;font-size:15px;font-weight:normal}
    li.list-tom{list-style:none}
    li.list-tom a{color:#dddae6;margin-right:20px}
    li.list-tom i{color:#dddae6;margin-right:3px}
    </style>
  

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 &amp; Developer'>Author : DigitalNomad.Vn</tooltip>

    </div>

    <span class=''>Blogspot Designer  &amp; 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ế  &amp; 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 &amp; 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>
      
 

 
<!--Css JavaScript ẩn hiện nội dung #myDIV-->  
<!--<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>
-->
<!--End Css JavaScript ẩn hiện nội dung-->  
   
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 : 
     
<!--Ẩn hiện với : Bootstrap Collapse và Accordion-->
<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'>
<!--  Nội dung cần ẩn hiện trong Collapse và Accordion -->
<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'>
&#10070; Học tập &amp; chia sẻ kinh nghiệm
<ul>
<li>&#9758; Học cách viết blog bằng tiếng Anh</li>
<li>&#9758; Học cách thiết kế banner Ads cho Blogspot</li>
<li>&#9758; Học cách tạo video up lên Youtuber</li>
</ul>
&#10070; Cộng tác với blogger :<br/>
<ul>
<li>&#9758; Ẩm thực</li>
<li>&#9758; Dịch thuật tiếng Anh, tiếng Trung, tiếng Nhật, tiếng Hàn</li>
</ul>  
&#10070; Hợp tác marketing với các đối tác là công ty sản xuất, Thương mại &amp; cung cấp dịch vụ :<br/>
<ul>
<li>&#9758; Kế toán &amp; thành lập doanh nghiệp</li>
<li>&#9758; Xưởng may rèm cửa</li>
<li>&#9758; Công ty sản xuất đồ dùng nhà bếp</li>
<li>&#9758; Công ty sản xuất đồ gỗ gia dụng </li>
<li>&#9758; Công ty cung cấp vật tư ngành gỗ</li>
</ul>  
&#10004; Hợp tác những gì ?<br/>
&#9758; Viết quảng cáo seo content đưa từ khoá lên top 10 google.<br/>
&#9758; Viết quảng cáo google ads <br/>
&#9758; Viết quảng cáo slogan top of mind<br/>
&#10004; 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 &amp; tiêu thụ sản phẩm, nâng cao vị thế cạnh tranh.<br/>
&#10070; Mở gian hàng kinh doanh online các dòng sản phẩm :<br/>
&#9758; 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/>
&#9758; Bàn ghế cafe<br/>
&#9758; Bàn ghế học sinh<br/>
&#9758; Rèm vải may sẵn<br/>
&#9758; ,..<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>      
<!--  End Nội dung cần ẩn hiện trong Collapse và Accordion -->
        </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>
<!--End Ẩn hiện với : Bootstrap Collapse và Accordion-->

<!--View-->
<!--     
    <li class='list-tom'>

    <a title='Lượt xem'>

      <span class='viewers' expr:id='data:post.id'><i class='fa fa-eye'/> <span class='loading' style='color:#dddae6'/></span></a>


    <a title='Lượt yêu thích'>

    <i aria-hidden='true' class='fa fa-heart' style='color:#ed1b73'/> <script type='text/javascript'>document.write(Math.floor((Math.random()*500)+(Math.random()*500)+100));</script>

    </a>


    <a title='Lượt bình luận'>

    <i aria-hidden='true' class='fa fa-comment'/> <script style='text/javascript'>

                function numberOfComments(json) {

                    document.write(json.feed.openSearch$totalResults.$t);

                }

            </script>

            &lt;script src=&quot;/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments&quot;&gt;&lt;/script&gt;</a>  

    </li>
-->

</div>
</div>  
<div style='clear: both;'/>  
<!--End thong tin tac gia-->  

<!--Duoi thong bao nhan xet tren trang bai viet-->           
</b:if>   
</div>