• About
  • Policy
  • Contact

Phan Anh Buổi Sáng

  • Home
  • Kiến thức IT
    • PSD
    • Blogger
  • Translate
Google
Custom Search
Trang chủ » Blogger Tips » HTML - CSS » Lập Trình HTML CSS » Thủ Thuật Blog » Tạo nút Demo và Download cho Blogger - Zoy Thủ Thuật #Zoy

Tạo nút Demo và Download cho Blogger - Zoy Thủ Thuật #Zoy

Unknown Labels: Blogger Tips, HTML - CSS, Lập Trình HTML CSS, Thủ Thuật Blog Leave A Comment 04:47
Tạo nút Demo và Download cho bài viết blog bằng slider cực kỳ đẹp và hấp dẫn, nút download và demo cho bài viết blogspot, khi bạn click vào nút download thì sẽ hiển thị silder cực kỳ hấp dẫn Button download và demo cho bài viết, chia sẻ cho mọi người cách tạo nút DEMO và DOWLOAD trong bài viết blog với hiệu ứng slider.

Cách tạo button Download, Demo cho blogger.

Đầu tiên các bạn mở Blogger lên --> html edit --> tìm thẻ </style> hoặc ]]></b:skin>
Và dán mã dưới đây vào trước hai thẻ trên và bấm Save (lưu lại).



#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;

}

Cách tạo button Demo và Download trong bài đăng

Sau khi đã làm các bước trên , mỗi khi đăng bài và các bạn sử dụng hai button Demo và Dowload, hoặc tùy ý các bạn chỉnh sửa thì các bạn sẽ đăng bài như bên dưới.

Mở bài đăng mới lên -> soạn thảo chế độ html và dán mã sau vào.

<div id="wrap">
<a class="btn-slide" href="
http://www.tricksio.tk/" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="btn-slide2" href="
http://www.tricksio.tk/" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Lưu ý : Thay link màu đỏ thành link của bạn nhé.!
Chúc Bạn Thành Công.!
loading...

Bài viết liên quan

← Bài đăng mới hơn Bài đăng cũ hơn → Trang chủ
Powered by Blogger.

Các Bình Luận Gần Đây

Bài đăng phổ biến

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • DOWNLOAD PHOTOSHOP
    PHOTOSHOP CS3: DOWLOAD PHOTOSHOP CS5: DOWNLOAD PHOTOSHOP CS6: - DOWNLOAD(32BIT) - DOWNLOAD(64BIT)
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • PhpFox 3.0.1 Cross Site Scripting
    Google Dork: Intext:"Powered By phpFox Version 3.0.1" Vendor Home : http://www.phpfox.com/  There are lots of parametrs Vulnerab...
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • [PSD] File Tâm Trạng - Star Dũ
  • [PSD] SHARE PSD CMND NỮ - Lê Quang Thái
  • Tạo trang Giáng Sinh Noel đẹp cho Blogger
    Tạo trang Giáng Sinh Noel đẹp cho Blogger  tùy chỉnh theo phong cách riêng của bạn, nguồn từ  AshNolan  mình đã edit lại chi phù hợp với Blo...

Pageviews from the past week

Chuyên mục

Bài đăng phổ biến

  • [PHP] Get list username - vBulletin
    <?php // GET user function duyk_get_all_usr($link, $total_usr) { $max_page = $total_usr/100; $ma...
  • Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Ảnh bìa chế Phía sau một cô gái - Soobin Hoàng Sơn - Zoy Thủ Thuật #Zoy
    Đôi lúc em tránh ánh mắt của anh. vì dường như lúc nào em cũng hiểu thấu lòng anh Demo Cover Download PSD loading...
  • Share CMND Nữ Cho Anh Em Để Unlock & Report
    Share CMND Nữ Cho Anh Em Để Unlock & Report
    COPYRIGHT : MINH HAKU IT                                               
  • DOWNLOAD PHOTOSHOP
    DOWNLOAD PHOTOSHOP
    PHOTOSHOP CS3: DOWLOAD PHOTOSHOP CS5: DOWNLOAD PHOTOSHOP CS6: - DOWNLOAD(32BIT) - DOWNLOAD(64BIT)
  • [PSD] Hacker - Đặng Khắc ĐứcPSD
    [PSD] Hacker - Đặng Khắc ĐứcPSD
    Demo Click here Download Click here
  • PhpFox 3.0.1 Cross Site Scripting
    PhpFox 3.0.1 Cross Site Scripting
    Google Dork: Intext:"Powered By phpFox Version 3.0.1" Vendor Home : http://www.phpfox.com/  There are lots of parametrs Vulnerab...
  • [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    [PSD] Share Ảnh Bìa Facebok Cho Con Gái - Zoy Thủ Thuật #Zoy
    Demo Click here Download Click here loading...
  • [PSD] File Tâm Trạng - Star Dũ
    [PSD] File Tâm Trạng - Star Dũ
  • [PSD] SHARE PSD CMND NỮ - Lê Quang Thái
    [PSD] SHARE PSD CMND NỮ - Lê Quang Thái
  • Tạo trang Giáng Sinh Noel đẹp cho Blogger
    Tạo trang Giáng Sinh Noel đẹp cho Blogger
    Tạo trang Giáng Sinh Noel đẹp cho Blogger  tùy chỉnh theo phong cách riêng của bạn, nguồn từ  AshNolan  mình đã edit lại chi phù hợp với Blo...
Google
Custom Search
Support: Facebook | Twitter | Google+ | Giới thiệu
Copyright © 2015 • Phan Anh Buổi Sáng • All Right Reserved. Template by Template Việt