Stylish JQuery Các bài Widget cho Blog

Hôm nay, chúng ta sẽ tìm hiểu làm thế nào để thêm nó vào Blogpsot Blog. Trước đó, tôi tạo ra Platinum Blogger Template . Từ hầu hết các mẫu người dùng, tôi nhận được các ý kiến rằng Các bài viết widget là không có mặt ở đó. Vì vậy, xem xét này, tôi có văn bản hướng dẫn riêng biệt mà chúng ta sẽ bắt đầu ngay bây giờ!

Trước hết xem Demo tại đây .

Lưu ý: Platinum Blogger Template người dùng không cần phải tuân theo, Bước 1: Bước 2, Bước 3, Bước 4 và bước 5. Vì vậy, bạn có thể trực tiếp chuyển sang Bước 6.

Cập nhật : mã Tất cả đã được cập nhật. Vui lòng thực hiện theo các hướng dẫn những người đã cài đặt widget này.

Bước 1. Như chung, Đăng nhập vào của bạn Blogger tài khoản và đi đến thiết kế > Edit HTML.

Bước 2. Tìm đoạn mã sau vào mẫu của bạn:

]]></ B: skin>

Bước 3. Chỉ cần ở trên ]]></ b: skin> tag, thêm CSS sau mã :

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
   position:absolute;
   top:0; left:336px;
   list-style:none;
   padding:0; margin:0;
   width:250px;
}
#featured ul.ui-tabs-nav li{
   padding:1px 0; padding-left:13px;
   font-size:12px;
   color:#666;
}
#featured ul.ui-tabs-nav li span{
   font-size:11px; font-family:Verdana;
   line-height:18px;
}

#featured .ui-tabs-panel{
   width:336px; height:250px;
   background:#999; position:relative;
   overflow:hidden;
}
#featured .ui-tabs-hide{
   display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
   display:block;
   height:60px;
   color:#333; background:#fff;
   line-height:20px;
   outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
   background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
   background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQC0dwvVDZ26kfCUU3oaurHkisOSDEn8B94sdYKqahh7MFf4CFIafWfwUJ6UCk1jMNiy2MSdZlHHBLMIZkV4GSzGqhlHPDSC3sslnZSp9SkX2GA1uhM4jdCKuSPeYABrQlyT1nggEKA/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
   background:#ccc;
}

#featured ul.ui-tabs-nav li img{
   float:left; margin:2px 5px;
   background:#fff;
   padding:2px;
   border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
   position:absolute;
   top:180px; left:0;
   height:70px; width: 400px;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44qCxgAsBxih08XHB9zCJ5vjbA-o0e8Rl7-Bf5hjo9rNUlcZiLu7W-laCr0q8e-QVDpR3h_tv6CGdzHQtdrnQZUkbQ8pBum0BZwgNYwN6SeGK17BVYHXM9PbUwZ6qNWl8nBYdvoMe5w/s1600/transparent-bg.png');
}
#featured .info h2{
   font-size:18px; font-family:Georgia, serif;
   color:#fff; padding:5px; margin:0;
   overflow:hidden;
}
#featured .info p{
   margin:0 5px;
   font-family:Verdana; font-size:11px;
   line-height:15px; color:#f0f0f0;
}
#featured .info a{
   text-decoration:none;
   color:#fff;
}
#featured .info a:hover{
   text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

Bước 4. Bây giờ, thêm vào sau JavaScript code trên </ head> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
   $(document).ready(function(){
   $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
   });
</script>

Bước 5. Lưu Bản mẫu.

Bước 6. Một lần nữa, đầu ra để thiết kế > Page Element > Add a Gadget > HTML JavaScript . Thêm đoạn mã sau vào hộp:

<div id="featured">

   <ul class="ui-tabs-nav">
   <li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />
<span>15+ Excellent High Speed</span></a></li>

   <li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI
/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />
<span>20 Beautiful Long Exposure</span></a></li>

   <li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" /><span>35 Amazing Logo Designs</span></a></li>

   <li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />
<span>Create a Vintage</span></a></li>
   </ul>

   
   <div id="fragment-1" style="" class="ui-tabs-panel">
   <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

   <div class="info">
   <h2><a href="#fragment-1">15+ Excellent High Speed</a></h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
   </div>
   </div>

   
   <div id="fragment-2" style="" class="ui-tabs-panel">
   <img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/
AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />

   <div class="info">
   <h2><a href="#fragment-2">20 Beautiful Long Exposure</a></h2>
   <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
   </div>
   </div>

   
   <div id="fragment-3" style="" class="ui-tabs-panel">
   <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

   <div class="info">
   <h2><a href="#fragment-3">35 Amazing Logo Designs</a></h2>
   <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
   </div>
   </div>

   
   <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
   <img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />

   <div class="info">
   <h2><a href="#fragment-4">Create a Vintage</a></h2>
   <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
   </div></div></div>

Những mã được chút chút bối rối. Vì vậy, bạn phải chỉnh sửa các mã số cẩn thận. Dưới đây là các tùy chỉnh:

Thay thế đoạn-1, đoạn-2, đoạn-3 và đoạn-4 với địa chỉ đăng bài của bạn. Có hai liên kết trong các mã nhưng bạn phải đặt cùng một URL. Ví dụ: Có hai mảnh-1 . Vì vậy, thay thế hai mảnh-1 với địa chỉ sau cùng.

Red mã màu cho URL hình ảnh. Không giống như bạn đã làm cho các Liên kết trên. Có hai hình ảnh URL. Vì vậy, thay thế hình ảnh URL với của riêng bạn. Ví dụ, thay thế cả URL hình ảnh của Link-1 với chính bạn. Lưu ý: cả URL hình ảnh phải được giống nhau.

Các văn bản với các màu hồng màu sắc là tiêu đề của mỗi bài. Vì vậy, thay thế tất cả các văn bản màu hồng với các tiêu đề của bài viết của bạn.

Các văn bản với xanh màu là tóm tắt các bài đăng. Thay thế các văn bản với bản tóm tắt đó phải phù hợp với các chức danh.

Bước 7. Bây giờ, Lưu widget và cuối cùng bạn đã hoàn tất !

Hãy chắc chắn rằng bạn đã đặt các tính năng tiện ích bài trên đỉnh của " Blog bài viết "như hình dưới đây:

Tôi hy vọng các tùy chỉnh là không quá khó. Nếu có bất kỳ khó hiểu sau đó bạn có quyền đặt câu hỏi qua luận. Ngoài ra, bạn có thể chia sẻ bạn ý kiến và đề xuất

Y Đao Việt Nam

Stylish JQuery Các bài Widget cho Blog

Share your views...

Đăng nhận xét

Blog Archive

Stay Connected

Tags

Resources and Tools

Popular Posts

Categories

Our Partners