10/19/2017 09:50:00 SA · 0 bình luận · lượt xem

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
Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Thủ thuật tạo thông tin tác giả chia sẻ liên kết và ngày tháng năm giống như trên facebook. Thông tin tương đối gọn gàn và đầy đủ chi tiết để có thể áp dụng được cho Blogspot. Chúng ta có 4 bước để thực hiện.

Điều đầu tiên trước khi thực hiện thủ thuật này là bạn cần xóa bỏ đi code cũ có trong blogspot từ trước để tránh trùng lặp.

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

Bạn có thể chèn trên </body> hoặc </head>. Nếu đã có sẳn thì bạn không cần sử dụng nữa

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


<script async='async' type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
//]]>
</script>


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

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.10&amp;appId=309376869532794&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

1. CODE HTML

Chèn Code HTML và dưới tiêu đều trong bài viết. Bạn cần xác định ID hoặc Class của tiêu đề để chèn cho thích hợp.


Tương ứng với Class trên bạn tìm dòng post-title entry-title và code sau vào bên dưới đoạn code vừa tìm:
<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

Chèn đoạn code sau trên thẻ /b:skin
.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

Code javascript sau bạn có thể chèn trên </body> hoặc trên </head> đều được
<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
LƯU LẠI

Áp dụng điều kiện trong blogspot để hiển thị trên các trang tùy thích của bạn. Áp dụng cả cho HTML hoặc Javascript đều được.


Hy vọng bạn sẽ thích
Chúc bạn thành công!



Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!

Thống Kê: