Blogger [ Cách tạo button Download, Demo cho Blogger ]

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.

                                                   

                                                                 ( Demo của Button )
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).

/* Css Footer Section */
.footer-ad h2.title{display:none}.footer-ad{text-align:center;margin:8px 0}#footer-wrapper{color:#666;border-bottom:1px solid #111;font-size:13px;margin:0;padding:0 0 0;font-weight:400;background:#222;overflow:hidden}.footer-column .widget-title{border-bottom:1px solid #444;text-transform:uppercase;font-size:16px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cHHGdYQAmiHqgPgZZY15MEhQwekyyHvUv3A4tMIjg-WQtYK1QLHU0NFya57PRFB6A_QTxwDM8wanLjuzHZWNiS9ca-t7deor7VtZaqd7FsD7V3Szwk5dJe_C3vsVFepF6zIfQJ-qwAvP/s1600/dots_pat.png) repeat-x center;line-height:30px;margin-bottom:5px}.footer-column h2{display:inline-block;font-weight:700;font-size:13px;color:#DDDFE2;text-transform:uppercase;background-color:#222}.footer-column h2:hover{color:#1092da}#footer-wrapper .footer-column{color:#666;width:23.75%;margin:0;padding:0;display:block}.bottom-nav{text-align:center;padding:5px 0 5px;margin-bottom:1px;overflow:hidden;border-bottom:2px solid #1092da}.menu-bottom li{display:inline;padding:0}.menu-bottom li a{color:#D1D1D1;text-transform:uppercase;font-size:11px;margin:0;display:block;padding:0 10px;line-height:30px;height:30px;background-color:#272727;border:1px solid #444}.menu-bottom li a:hover{background:#1092da;color:#fff}.footer-column .PopularPosts .widget-content ul li{border-bottom:1px solid #444}.footer-column .item-title a{color:#DDD}.contact-button{line-height:30px;height:30px}.contact-button a{padding:0 5px;background:#1092da;color:#FFF;display:block;font-size:12px}.contact-button a:hover{background:#333333;transition:all .1s ease-in-out}.contact-sec{position:fixed;top:50%;margin-top:-190px;left:50%;max-width:300px;width:90%;margin-left:-150px;background-color:#FFF;height:380px;z-index:99999;display:none;-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0);transition:all .5s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease}.contact-close{position:absolute;top:-12px;background-color:#303030;color:#FFF;height:25px;width:25px;text-align:center;border-radius:5px;line-height:25px;font-size:10px}.contact-sec .widget{padding:20px}.contact-sec .contact-form-cross{display:none}.contact-sec.contact-show{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}#outer-wrapper.pop_contact{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}#outer-wrapper.pop_contact:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.69);z-index:999;transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}a.upbt{background:#222;border-radius:100%;text-align:center;vertical-align:middle;height:48px;padding:10px;width:48px;position:absolute;top:-26px;color:#fff;font-size:24px;left:50%;margin-left:-24px}a.upbt:hover{background:#1092da}#copyrights{background-color:#111;text-align:center;height:45px;padding:8.5px 0;border-top:1px solid #333;position:relative;box-shadow:inset 0 5px 15px #111;border-bottom:3px solid #1092da}#copyrights a{color:#ccc}#copyrights a:hover{color:#1092da}.error_page #sidebar-wrapper,.error_page #sidebar-160,.error_page #main-wrapper{display:none}.error_page #error-page{margin:100px auto 50px;text-align:center;padding:0;line-height:4em}a.homepage{padding:10px 20px;background:#eee;border-radius:2px;color:#aaa}a.homepage:hover{background:#1092da;color:#fff}.error_page .error{font-size:20px;text-align:center}.error_page .errornum{font-size:150px;text-align:center;color:#1092da}.error_page span.fa.fa-frown-o{font-size:115px;color:#444}.error_page .fa-frown-o:before{content:"\f119"}.error_page .fa-hand-o-down:before{content:"\f0a7";font-size:18px}.firstcharacter{float:left;color:#1092da;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}.button.small{font-size:12px}.button.medium{font-size:16px}.button.large{font-size:19px}.button{padding:8px 8px 8px 8px;margin:2px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:2px;display:block;text-decoration:none;font-weight:400;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.15);box-shadow:inset 0 -2px rgba(0,0,0,0.15);color:#fff}.button.small:hover{-webkit-box-shadow:inset 0 -34px rgba(0,0,0,0.15);box-shadow:inset 0 -34px rgba(0,0,0,0.15);color:#fff}.button.medium:hover{-webkit-box-shadow:inset 0 -44px rgba(0,0,0,0.15);box-shadow:inset 0 -44px rgba(0,0,0,0.15);color:#fff}.button.large:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}.red{background:#e74c3c}.orange{background:#e8930c}.green{background:#2ecc71}.blue{background:#3498db}.purple{background:#9b59b6}.yellow{background:#FFD600}.pink{background:#F889EB}.grey{background:#bdc3c7}.turquoise{background:#1abc9c}.midnight{background:#2c3e50}.asbestos{background:#6d7b7c}.dark{background:#454545}.small-button{width:100%;overflow:hidden;clear:both}.medium-button{width:100%;overflow:hidden;clear:both}.large-button{width:100%;overflow:hidden;clear:both}.widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}.widget .post-body li{margin:5px 0;padding:0;line-height:1.5}.post-body ul li:before{content:"\f105";margin-right:5px;font-family:fontawesome}pre{background-color:#f5f5f5;color:#222;position:relative;padding:0 7px;margin:15px 0 10px;overflow:hidden;word-wrap:normal;white-space:pre;position:relative}pre[data-codetype]{padding:37px 1em 5px}pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:-5px;right:0;left:0;background-color:#95a5a6;padding:7px;color:#555}pre[data-codetype="HTML"]{color:#474747}pre[data-codetype="CSS"]{color:#222}pre[data-codetype="JavaScript"]{color:#EDD091}pre[data-codetype="JQuery"]{color:#889CAF}pre[data-codetype="HTML"]:before{background-color:#F7F7F7}pre[data-codetype="CSS"]:before{background-color:#f5f5f5}pre[data-codetype="JavaScript"]:before{background-color:#F7F7F7}pre[data-codetype="JQuery"]:before{background-color:#F7F7F7}pre code,pre .line-number{display:block;color:#069}pre .line-number{color:#ecf0f1;min-width:2.5em}pre .line-number span{display:block}pre .line-number span:nth-child(even){background-color:#999}pre .cl{display:block;clear:both}#contact{background-color:#fff;margin:30px 0!important}#contact .contact-form-widget{max-width:100%!important}#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#FFF;border:1px solid #eee;border-radius:3px;padding:10px;margin-bottom:10px!important;max-width:100%!important}#contact .contact-form-name{width:47.7%;height:50px}#contact .contact-form-email{width:49.7%;height:50px}#contact .contact-form-email-message{height:150px}#contact .contact-form-button-submit{max-width:100%;width:100%;z-index:0;margin:4px 0 0;padding:15px 20px!important;text-align:center;cursor:pointer;background:#19b5fe;border:0;height:auto;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;text-transform:uppercase;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out;color:#FFF}#contact .contact-form-button-submit:hover{background:#444}#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{box-shadow:none!important}.two-column{overflow:hidden}.two-column .column{width:50%;padding:0 15px}.alert-message{position:relative;display:block;background-color:#FAFAFA;padding:0;margin-bottom:0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#2f3239}.alert-message span{font-size:14px!important}.alert-message i{font-size:16px;line-height:20px}.alert-message.success{background-color: #f5f5f5;border-color: #1092da;color: #1092DA;border-bottom: 3px solid #1092dA;WIDTH: 99%;}.alert-message.success a,.alert-message.success span{color:#1092da}.alert-message.alert{background-color:#DAEFFF;border-color:#8ED2FF;color:#378FFF}.alert-message.alert a,.alert-message.alert span{color:#378FFF}.alert-message.warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b}.alert-message.warning a,.alert-message.warning span{color:#8a6d3b}.alert-message.error{background-color:#FFD7D2;border-color:#FF9494;color:#F55D5D}.alert-message.error a,.alert-message.error span{color:#F55D5D}.fa-check-circle:before{content:"\f058"}.fa-info-circle:before{content:"\f05a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-exclamation-circle:before{content:"\f06a"}.simpleTab .tab-wrapper li{display:inline-block;margin:0;padding:0}.simpleTab .tab-wrapper li a{background-color:#333;color:#FFF;padding:6px 6px;display:block;margin-top:7px}.simpleTab .tab-wrapper li:before{content:'';display:none}.simpleTab{margin:10px 0}.simpleTab .tab-content{padding:15px;background-color:#f2f2f2}.simpleTab .tab-wrapper li a.activeTab{background-color:#FFC000;color:#fff}.simpleTab *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}.simpleTab.side .tab-wrapper{float:left;width:30%;margin:0!important;padding:0!important}.simpleTab .tab-wrapper{padding:0!important;margin:0!important}.simpleTab.side .tab-content{float:left;width:70%}.simpleTab.side .tab-wrapper li{width:100%;display:block;text-align:center}.simpleTab.side .tab-wrapper li a{padding:15px 0}.simpleTab.side{overflow:hidden}.ad-inside{display:none}.post-body .ad-inside{display:inline-block;line-height:0}.ad-inside-to{margin:auto;line-height:0}.maplabel{margin-bottom:10px;background-color:#F8F8F8}.maplabel.active .mapp{display:block}.maplabel .mapp{display:none}.maplabel h2{background-color:#ECECEC;color:#444;font-size:15px;padding:10px 20px;border-radius:2px;margin-bottom:0;cursor:pointer}.maplabel h2 .butoo{font-size:18px}.mpost{overflow:hidden;margin-bottom:20px;height:70px;background-color:#FFF}.mapp{padding:40px}.map-date{text-align:center;background-color:#F0F0F0;padding:10px}.map-date .day{font-size:25px;display:block;text-align:center;font-weight:800;color:#444}.map-date span{font-size:13px;color:#999}.mpost .rcp-title{line-height:70px;margin-bottom:0;font-size:16px}.mpost .rcp-title a{color:#111}.mpost .rcp-title a:hover{text-decoration:underline}

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 dir="ltr" style="text-align: left;" trbidi="on"><a class="button small blue" href="https://www.facebook.com/MyName.TuDZ">Facebook</a>&nbsp;<a class="button small red" href="https://www.thanhtuit.tk/">Doawload</a></div>

Bài viết trong WWW.THANHTUIT.TK được viết bởi Admin Trần Thanh Tú. Khi sao chép bài viết xin ghi nguồn là: WWW.THANHTUIT.TK và link dẫn về bài viết gốc của blog. Nếu không ghi nguồn sẽ bị xử phạt sẽ coi là bất hợp pháp.