Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Các thư viện cần có trong Blog:

1. Fonts Awesome: Hiện các Icon

2. Code tạo nút Like, Share của Facebook

1. CODE HTML

<div class='post-meta'>
 <div class='post-info'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<img class='authoravatar' expr:src='data:post.authorPhoto.url' itemprop='image'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
  </a> đã chia sẻ một <a onclick='CopyLink()' style='color: #365899;' title='Copy liên kết này'>liên kết</a>.
</span>
<div class='spinner' style='float: right;     padding: 1px 0px 2px 6px;'>
<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' title='Chia sẻ'><i aria-hidden='true' class='fa fa-ellipsis-h'/></a>
                            <ul class='dropdown-container' style='right:10px!important'>
                              <li>
                               <div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small'/>
                              </li>
                                                     
                            </ul>
                          </div>
    </div>
<b:else/>
<span class='author-info'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</span>
</b:if>
  </b:if><br/>
<span class='adminhp'>Thành viên <b>VIP</b> <i class='fa fa-check-circle'/></span>
<span style='color: #90949c;font-size:90%'><span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <b:if cond='data:post.url'>
            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
            <span class='published'><data:post.dateHeader/></span>
          </b:if>
        </b:if>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'> <span class='post-timestamp'>
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
                   <b:if cond='data:top.showTimestamp'>
                     <b:if cond='data:post.url'>
                       <meta expr:content='data:post.canonicalUrl' itemprop='url mainEntityOfPage'/>
                      lúc <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><span class='updated'><data:post.timestamp/></span></abbr></a>
                     </b:if>
                   </b:if>
</span>
</b:if>
</b:if>

</b:if>  </span> &#183; Thành phố Hồ Chí Minh &#183; <i aria-hidden='true' class='fa fa-globe'/>
 <i aria-hidden='true' class='fa fa-sort-desc'/>
 </span>
</span>
</div>
</div>

2. CODE CSS

.avatar-author{border-radius:50%}
.post-meta{color:#000;display:block;font-size:12px;font-weight:400;margin:10px 0 10px;padding:0}.g-profile{margin-left:0px}
.post-info {
}.post-author{font-size:14px}.post-info img {
    clear: none;
    width: 42px;
    border-radius: 50%;
    float: left;
    margin: 3px 10px 0px 0px;
}.post-info a {
    color: #365899;
    font-weight: 600;
}span.adminhp {
    word-wrap: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #65af35;
    color: #FFF;
    font: 100 13px segoe ui;
    margin: 0;
    padding: 0 5px 1px 5px;
    border-radius: 3px;
}.dropdown-link:active{-webkit-animation-duration:0.3s;animation-duration:0.3s;background:#ddd;border-radius:100%;-webkit-animation:ripple-effect 0.4s linear;animation:ripple-effect 0.4s linear}
.dropdown-container{background:#fff;z-index:999;position:absolute;background:#FFF;box-shadow:0 3px 8px rgba(0,0,0,.3);margin:5px 0 0 17px !important;max-height:400px;width:170px;overflow:auto;padding:10px!important;padding-bottom:10px!important;display:none}
  .dropdown-container li i{border-radius:50%;margin-right:5px}
.dropdown-container li{list-style:none}.dropdown-container li a{font-size:13px;list-style:none;color:#262626;display:block;font-weight:400;padding:6px 5px;text-transform:none}.dropdown-container li a:hover{background-color:#edf4ff}

3. CODE Javascript

<script>
$(document).ready(function(){
  $(&#39;.dropdown&#39;).each(function() {
    var $dropdown = $(this);
    $(&quot;.dropdown-link&quot;, $dropdown).click(function(e) {
      e.preventDefault();
      $div = $(&quot;.dropdown-container&quot;, $dropdown);
      $div.toggle();
      $(&quot;.dropdown-container&quot;).not($div).hide();
      return false;
    });
});
 
  $(&#39;html&#39;).click(function(){
    $(&quot;.dropdown-container&quot;).hide();
  });
   
});
function copyTextToClipboard(text) {
var textArea = document.createElement(&quot;textarea&quot;);
textArea.style.position = &#39;fixed&#39;;
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = &#39;2em&#39;;
textArea.style.height = &#39;2em&#39;;
textArea.style.padding = 0;
textArea.style.border = &#39;none&#39;;
textArea.style.outline = &#39;none&#39;;
textArea.style.boxShadow = &#39;none&#39;;
textArea.style.background = &#39;transparent&#39;;
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
    var successful = document.execCommand(&#39;copy&#39;);
    var msg = alert(&quot;Đã sao chép liên kết, sẳn sàng chia sẻ liên kết này ngay bây giờ!&quot;);
      } catch (err) {
    var msg = alert(&quot;Không thể sao chép liên kết!&quot;);
  }
  document.body.removeChild(textArea);
}
function CopyLink() {
copyTextToClipboard(location.href);
}
</script>

4. Cấu hình định dạng ngày, thời gian

Vào bố cục

Chỉnh sửa tiện ích BLOG như hình dưới