Share123.vn thông báo: Kể từ ngày 01/03/2019 chúng tôi sẽ chuyển hệ thống sang Webseo.com.vn, quý khách mua Template blogspot đẹp có thể truy cập vào hệ thống mới tại đây
Đăng bởi Huy Tập lúc 18/03/2018 0
Công nghệ Bootstrap hiện nay đã quá phổ biến, không chỉ các lập trình viên thiết kế website, thiết kế wordpress sử dụng nhiều mà thiết kế blogspot cũng thường xuyên dùng bootstrap để thiết kế.

Ở đây Share123.vn hướng dẫn cách tạo slider hình ảnh blogspot (blogger) sử dụng kết hợp với Bootrap, nhằm giúp người dùng có thể dễ dàng quản trị, thay vì phải vào thay link ảnh trong code, rất mất thời gian và khó khăn cho những bạn không có kiến thức về lập trình.

Hướng dẫn tạo slider ảnh blogspot kết hợp Bootstrap
Demo slider ảnh blogspot kết hợp Bootstrap

Cách làm:

Với Bootstrap bạn cần gọi ra 2 link thư viện của nó gồm CSS và file java, vì vậy nếu trong template blogspot của bạn chưa có thì bạn cần gọi 2 link sau ra: <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<!-- Latest compiled and minified JavaScript -->
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script crossorigin='anonymous' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
Tất cả các vấn đề code đã được Share123.vn làm, giờ chỉ áp dụng luôn, Đối với Blogspot bạn vào Chủ đềChỉnh sử HTML ➜ Dán đoạn code sau vào nơi bạn muốn hiển thị Slider ảnh kết hợp Bootstrap  trong thẻ <body> <div id='slider-wrapper'>
 <div class='carousel slide' data-ride='carousel' id='carousel-example-generic'>
  <!-- Indicators -->
  <!-- Wrapper for slides -->
  <div class='carousel-inner' role='listbox'>
<b:section class='slider-share123vn item active' id='Slider Images-1' maxwidgets='1' preferred='yes' showaddelement='no'>
  <b:widget id='Image18' locked='true' title='' type='Image' >
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>http://3.bp.blogspot.com/-IZunvnTiVzE/Wq5AynS8KMI/AAAAAAAACMk/_Eo09S8Zkvotlx4qJQhuaANbafUvjjo-wCK4BGAYYCw/s1600/slider1.jpg</b:widget-setting>
      <b:widget-setting name='displayHeight'>654</b:widget-setting>
      <b:widget-setting name='sectionWidth'>760</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='displayWidth'>1600</b:widget-setting>
      <b:widget-setting name='link'/>
      <b:widget-setting name='caption'/>
    </b:widget-settings>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:tag cond='data:link' expr:href='data:link' name='a'>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:tag>
      <br/>
      <b:if cond='data:caption'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>
</b:section>
<b:section class='slider-share123vn item' id='Slider Images-2' maxwidgets='1' preferred='yes' showaddelement='no'>
  <b:widget id='Image19' locked='true' title='' type='Image'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>http://4.bp.blogspot.com/-zrnrqqwzW4k/Wq5A4Rbic5I/AAAAAAAACMs/RiXbWcMH_UM5eN9d_1Q2E6xLzUctcIViACK4BGAYYCw/s1600/slider2.jpg</b:widget-setting>
      <b:widget-setting name='displayHeight'>654</b:widget-setting>
      <b:widget-setting name='sectionWidth'>760</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='displayWidth'>1600</b:widget-setting>
      <b:widget-setting name='link'/>
      <b:widget-setting name='caption'/>
    </b:widget-settings>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:tag cond='data:link' expr:href='data:link' name='a'>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:tag>
      <br/>
      <b:if cond='data:caption'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>
</b:section>
<b:section class='slider-share123vn item' id='Slider Images-3' maxwidgets='1' preferred='yes' showaddelement='no'>
  <b:widget id='Image20' locked='true' title='' type='Image'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>http://3.bp.blogspot.com/-uXRTK0RZcvw/Wq5A9uzk93I/AAAAAAAACM0/KJboYyaK-MItNcohCsuahZ_4OrzHVgM_wCK4BGAYYCw/s1600/slider3.jpg</b:widget-setting>
      <b:widget-setting name='displayHeight'>654</b:widget-setting>
      <b:widget-setting name='sectionWidth'>760</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='displayWidth'>1600</b:widget-setting>
      <b:widget-setting name='link'/>
      <b:widget-setting name='caption'/>
    </b:widget-settings>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:tag cond='data:link' expr:href='data:link' name='a'>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:tag>
      <br/>
      <b:if cond='data:caption'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>
</b:section>
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#carousel-example-generic' role='button'>
  <i aria-hidden='true' class='fa fa-chevron-circle-left'/>
</a>
<a class='right carousel-control' data-slide='next' href='#carousel-example-generic' role='button'>
  <i aria-hidden='true' class='fa fa-chevron-circle-right'/>
</a>
</div>
Để chuyên nghiệp và dễ hình dung hơn, bạn có thể dán 1 đoạn CSS (áp dụng với template version='3') như sau ở dưới thẻ code: ]]></b:skin> <b:template-skin>
      <![CDATA[
body#layout .editlink{bottom:0;color:#fff !important;cursor:pointer;background:#f67a52;margin:0;padding:0 10px;border-radius:8px 0 0 0;position:absolute;right:0;text-decoration:underline}
body#layout div.section{overflow:hidden;height:auto}
#layout #slider-wrapper {background: #ff6000;}
#layout #slider-wrapper .section {background: #ff6000 !important;border: none !important;color: #fff;float: left;width: 28%;}
#layout #slider-wrapper .widget a#delete-button {display: none!important;}
      ]]>
    </b:template-skin>
<style>
/* ============
CSS SHARE123.VN FIX SLIDER BOOTSTRAP
============== */
#slider-wrapper{clear:both;overflow:hidden;position:relative}
#slider-wrapper .carousel-control.left,#slider-wrapper .carousel-control.right{background:transparent!important}
#slider-wrapper .item img {width: 100%;}
#slider-wrapper .carousel-control i {position: absolute; top: 45%;font-size: 40px;}
</style>
Như vậy là bạn đã cài đặt được 1 slider ảnh blogspot kết hợp Bootstrap, để chỉnh sửa hay thay đổi ảnh khác bạn chỉ việc vào Bố cục và click vào Chỉnh sửa trong từng Widget Slider Image:
Hướng dẫn tạo slider ảnh blogspot kết hợp Bootstrap
Click vào Chỉnh sửa để thay thế ảnh slider

Hướng dẫn tạo slider ảnh blogspot kết hợp Bootstrap
Thay đổi hình ảnh và thuộc tính ảnh slider
Hi vọng với thủ thuật nhỏ giúp các bạn tạo ra được những slider ảnh blogspot kết hợp Bootstrap đẹp và chuyên nghiệp.
Share123.vn

Các tìm kiếm liên quan đến slide ảnh blogspot

  • slideshow chạy ảnh đẹp cho blogger, blogspot
  • code slide ảnh cho blogspot
  • code tạo slide ảnh cho blogspot
  • chỉnh sửa slide trong blogspot
  • code slide ảnh chạy ngang cho blogspot
  • slider blogspot
  • slideshow code for blogger
  • tạo slide cho blogspot
Tags:

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

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn

0988227905