Thêm Tiện ích theo dõi mạng xã hội cho Blogger - Insurance Finances

Các hộp theo dõi rất hữu ích để có được người theo dõi trên mạng xã hội nhưng khi có một số hồ sơ xã hội như Facebook, twitter, Linkedin, Google+ thì việc hiển thị tất cả các hộp theo dõi  blog là do vấn đề không gian hạn chế. Một vấn đề khác của việc thêm nhiều hộp theo dõi là chúng mất rất nhiều thời gian để tải và làm chậm blog, do đó các blogger sử dụng để thêm các nút theo dõi trong blog vì chúng tải nhanh hơn và không chiếm quá nhiều không gian trên blog.
Nhưng nếu một người muốn thêm tất cả các hộp trên blog của mình mà không mất tốc độ và dung lượng blog, anh ta sẽ cần một tiện ích tất cả trong một hộp có tất cả các hộp theo dõi và mất ít thời gian hơn để tải và cũng có ít không gian hơn. Với cùng một mục đích, tôi đã tạo ra một tiện ích tuyệt vời chứa tất cả các hộp theo dõi (Google+, Facebook, Twitter và Linkedin) và mất ít thời gian nhất để tải. Nó là một thanh trượt hồ sơ xã hội. Nó trượt mỗi hồ sơ xã hội khoảng thời gian bằng nhau và chỉ chiếm không gian của một hộp hồ sơ xã hội, bạn có thể xem hình ảnh hoạt hình ở trên. Bạn có thể điều chỉnh thời gian trượt trong widget này. Tôi chỉ thêm bốn mạng xã hội phổ biến nhất trong đó, vì tôi không sử dụng Linkedin, đó là lý do tôi thêm hồ sơ CEO của nó vào đó.

Hy vọng bạn thích nó. Rất dễ dàng để cài đặt Thêm Tiện ích theo dõi mạng xã hội cho Blogger nhưng chúng tôi phải sử dụng một mẹo để thêm tiện ích này vì nếu chúng tôi cố gắng thêm tiện ích này theo cách thủ công như các tiện ích khác, nó sẽ không hoạt động. Nếu bạn muốn thêm tiện ích này vào blog của mình, hãy làm theo các bước dưới đây :
Bước 1: Chuyển đến bảng điều khiển blogger.
Bước 2: Chọn mẫu trong menu ở phía bên trái của bạn và nhấp vào Chỉnh sửa Html.
Bước 3: Tìm kiếm mã bên dưới trong mã Html bằng cách sử dụng Ctrl + F trên bàn phím của bạn:

<b:section-contents id='sidebar-right-1'> 

Bước 4: Ngay bên dưới nó dán đoạn mã dưới đây:

<b:widget id='HTML20' locked='false' title='Slide follow box' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url != &quot;http://101helper.blogspot.com/&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<script src='https://rawgit.com/101Helper/docs/master/jsinstallizer.js'/>
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;height: 330px; right: 10px;'>
     
<div class='fb-wrap social-widget cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 96; opacity: 0; display: block; visibility: hidden;'>
<div class='fb-page' data-adapt-container-width='true' data-height='330px' data-hide-cover='false' data-href='https://www.facebook.com/101helperblogspot' data-show-facepile='true' data-show-posts='true' data-small-header='false' data-width='240px'><div class='fb-xfbml-parse-ignore'/></div>
    </div>
<div class='twitter-wrap social-widget cycle-slide' data-twttr-id='twttr-sandbox-0' style='position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;'><a class='twitter-timeline' data-widget-id='560163045163282433' height='341' href='https://twitter.com/101Helperblog' width='234'/>
<a class='twitter-timeline' data-dnt='true' data-widget-id='647452823882493952' href='https://twitter.com/101Helperblog'/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
        </div>
  <div class='google-wrap social-widget cycle-slide cycle-slide-active' style='position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;'>
        <div id='___page_0' style='text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 234px; height: 338px; background: transparent;'><!-- Place this tag in your head or just before your close body tag. -->
<script src='https://apis.google.com/js/platform.js'/>
<!-- Place this tag where you want the widget to render. -->
<div class='g-page' data-href='//plus.google.com/u/0/109303537659462705427' data-rel='publisher' data-width='234'/>
</div>
     
    </div><div class='linkedin-wrap cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;'>
     
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-format='inline' data-id='/in/jeffweiner08' data-related='false' type='IN/MemberProfile'/>

    </div>
<a class='auth-101' href='http://101helper.blogspot.com/2015/01/social-follow-box-slider-widget-for-blogger.html' rel='nofollow'>Powered By 101Helper</a>
</div>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
      </b:if>
</b:includable>
  </b:widget>

Bước 5: Bây giờ tìm kiếm]]> </ b: skin> và dán bên dưới mã phía trên nó:

#slides{
    padding: 0 0 0 152px;
    position: relative;
top: 27px;
right: 97px;
    width: 221px;
}
.cycle-slideshow{
position:relative;
top: -3px;
right: 120px;
}
#slides hr{
    border:0 solid #fff;
    border-top:1px dashed #d8d9db;
}
#slides p{
    font-family: HelveticaNeue, Arial, sans-serif;
    height: 109px;
    line-height: 17px;
    width: 221px;
}
.social{
    padding:32px 0 0 145px;
    margin-bottom: 30px;
    position: relative;
top: 27px;
right: 97px;
    overflow: hidden; }
.social li{
    float: left;
    margin-right: 10px;
    position: relative;
}
.social a{
    display: block;
    height: 48px;
    width: 46px;
}
/* active state */
.social-widget {
    border: 5px solid #A5CBE2;
    border-radius: 6px 6px 6px 6px;
position: relative;
top: 27px;
right: 97px;
}
.fb-wrap{
    height: 341px;
    margin-left: 130px;
    width: 234px;
}
.google-wrap {
    height: 338px;
    margin-left: 130px;
    width: 234px;
}
    /* fix flashing widget */
    .google-wrap iframe { visibility: hidden !important; }
    .google-wrap.cycle-slide-active iframe { visibility: visible !important; }
.twitter-wrap {
    height: 341px;
    margin-left: 130px;
    width: 234px;
}
.linkedin-wrap {
    margin-top: -5px;
    margin-left: 80px;
}
.auth-101{
    position: relative;
    left: 180px;
    font-weight: bold;
    font-size: 13px;
}
.IN-widget {
    height: 341px;
    background-color: #fff;
}

Bước 6: Bây giờ tìm kiếm <head> và dán mã bên dưới nó:

<script src='https://rawgit.com/fahimraza/FK/master/boxslider.js' type='text/javascript'/>
<script src='https://rawgit.com/fahimraza/FK/master/boxslider2.js' type='text/javascript'/> 

Bước 7: Nhấp vào lưu mẫu và chuyển sang bước tiếp theo.
Bước 8: Bây giờ hãy đi đến bố cục và chỉnh sửa tiện ích mới được thêm có tiêu đề Slide follow box.
Bước 9: Sao chép mã dưới đây và dán vào mã:

<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;'></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bước 10: Nhấp vào lưu và bạn đã hoàn tất.

Thẻ tìm kiếm: Tiện ích trượt hộp theo dõi xã hội cho blogger, tiện ích trượt hộp theo dõi cho blogger, hộp theo dõi cho blogger với thiết kế thời trang, tất cả trong một hộp theo dõi cho blogger, hộp theo dõi Facebook, hộp theo dõi Twitter, hộp theo dõi Google+ và hộp theo dõi Linkedin cho tiện ích blogger, blogger, tiện ích độc đáo cho blogger, tiện ích blogger.

Related Posts