Bài đăng

Hiển thị các bài đăng có nhãn Css

Code tạo ghi chú (note) đẹp cho blogger/blogspot

Hình ảnh
Để thêm phần nổi bật cho đoạn văn nào đó hay một chú ý thì bạn cần thêm vào đoạn văn bản được làm nổi bật lên để mọi người chú ý đến nó hơn. Code info hay note cho blogger 1. Vào bảng điều khiển Blogger 2. Đến "Mẫu" >> "Chỉnh Sửa HTML" 3. Tìm đến đoạn  ]]></b:skin>  và thêm đoạn code dưới vào trên thẻ vừa tìm được .info {     background: #F8E38D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghawEACzLHpJLIXGjFzNEYr0tmXjf4DcFl7bEJXXzaG17IFBnoCl_EwBmgdJw27roiNMrNEsRDc_TdHugF-8KILi9MJ4R3gU1Nor7zczs7Ghaxkc-eEF9NQAHlYzyP-0-Qym-oV6drRy0/s1600/info.png) no-repeat 12px 8px;     color: #222;     line-height: 22px;     min-height: 38px;     padding: 10px 12px 12px 68px;     margin: 5px 0; } Khi sử dụng trong bài viết bạn sử dụng đoạn code sau: <div class="info">Đoạn văn muốn nổi bật</div> Demo: Chào mừng các bạn đến với Niemstyle.com | Niemstyle.com là blog chuyên viết về các thủ thuật internet, facebok, blogger, softwar

Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

Hình ảnh
Material Design là một ngôn ngữ lập trình trực quan được tạo ra bởi Google . Nó là lập trình ngôn ngữ sử dụng hiển thị trực quan một cách thú vị nhưng vô cùng đơn giản. Hôm nay Niemstyle.com chia sẻ đến các bạn một mẫu Menu Material Design Responsive đơn giản chỉ với HTML và CSS cực nhẹ. Một vài hình ảnh Demo Create Responsive Navigation Nenu Đây là HTML <div id='main'>   <div class='container'>     <div  style='margin-top:150px;margin-bottom:30px;text-align:center;'>       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiral7STgHRJOd8IdZu1KW8mvsD6bdf3FZ83-G_C5w9Tle2MffQI7PsH9JYbWx6ror7vIZguJXTc_Lxn-BzDcFbPzEFYgnwH2LDLzJtVNesrhAgTNf3g8Ot42bs7oC2wTKIC81in774p-RC/s320/logo.png' style='width: 100px;margin-bottom:15px'>       <h1>Material Design Responsive Menu</h1>     </div>     <nav>       <div class='nav-fostrap'>         <ul>           <li><a href

Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng css

Hình ảnh
Chào các bạn, hôm nay mình sẻ đến các bạn code của nút call và phone number cực đỉnh hoàn toàn bằng css , rất thích hợp để sử dụng ở các blog, trang web bán hàng hoặc làm dịch vụ... Chia sẻ thật với các bạn là code này mình lấy bên blog của anh Huỳnh Phụng (toilaquantri.com) nhưng không thấy anh ấy sử dụng nữa nên mình đem share cho các bạn. Xem Demo Ngay Các bạn sử dụng như sau: Coppy toàn bộ code phía dưới và dán lên trên thẻ đóng /body Sau đó sửa thông tin số điện thoại của mình lại là được rồi. <div class='hotline'> <div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'> <div class='phonering-alo-ph-circle'/> <div class='phonering-alo-ph-circle-fill'/> <div class='phonering-alo-ph-img-circle'> <a class='pps-btn-img ' href='tel:0984.541.045' title='Liên hệ'> <img alt='Liên hệ' class='img-responsive' src='htt

Button CSS xu hướng thiết kế web đơn giản trong năm 2019

Hình ảnh
Thiết kế web đang ngày càng được phát triển rất nhanh và một trong những xu hướng thiết kế web hiện nay đó là thiết kế đơn giản hay còn gọi là tối giản nhất có thể. Thiết kế web tối giản bao gồm bố cục, nút, thanh điều hướng, thanh bên, màu sắc, kiểu chữ và nhiều thứ khác nữa... Nhiều người sẽ cảm thấy thoải mái khi thiết kế một website đơn giản nhưng đôi khi có người lại cảm thấy nó khó nhìn vì quá đơn giản và không mấy đặc sắc. Thiết kế web tối giản thường được gọi là phong cách thiết kế phẳng hay thiết kế nguyên vật liệu . Và hôm nay mình sẽ hướng dẫn các bạn làm một Button hoàn toàn bằng CSS & HTML cực kỳ đơn giản mà không kém phần đặc sắc. Button CSS xu hướng thiết kế đơn giản trong năm 2019 Button sẽ có dạng như sau: HTML <a href="#" class="action-button shadow animate blue ">Click xem thử</a> CSS .animate {  transition: all 0.1s;  -webkit-transition: all 0.1s; } .action-button {  position: relative;  padding: 10px 40px;         margin: 0px

Code trang trí background ngày tết đơn giản cho blogspot

Hình ảnh
Ngày tết đã đến gần! Lượn một vòng thì thấy các anh em blogger đã và đang rục rịch trang trí blog cho ngày Tết cổ truyền. Với mục đích chia sẻ và lưu trữ lại các thủ thuật hay, Niệm Style Blogger xin chia sẻ lại cách trang trí background tết blogger, blogspot cho ngày tết rất đẹp này, hi vọng anh em sẽ thích và áp dụng cho blog của mình. Background tết này rất đơn giản, mình lấy bên blog của dan47.info Thật sự là làm rất là dễ nhưng mình chỉ muốn viết bài xàm xàm cho vui thôi :D Mời các bạn xem demo (Lưu ý: Demo có thể bị mất khi hết tết) Live Preview Thực hiện : các bạn coppy đoạn css sau dán trên thẻ ]]></b:skin> lưu lại là xong body {background:url(https://i.imgur.com/NZh5sJb.png) no-repeat center fixed;background-size:cover;background-color: #3333330f;} Một lần nữa chúc các bạn một năm mới thật nhiều niềm vui, thành công và may mắn trong mọi việc nhé! Xem thêm: Hiệu ứng hoa mai rơi cho blogspot nhân dịp tết đến xuân về Tổng hợp một số code trang trí tết cho blogspot của

Tạo hiệu ứng button chuyên nghiệp hoàn toàn bằng css cho blogspot

Hình ảnh
Chào mọi người! cũng đã lâu rồi cũng chưa có bài gì mới cho mọi người. Hôm nay lại hăng máu đam mê lên nên kiếm cái hiệu ứng button đẹp này chia sẽ cho mọi người. Hiệu ứng button này có gì đặt biệt: Đơn giản, dễ nhìn, thích mắt. Hoàn toàn làm bằng CSS, ko có Js nên sẽ không ảnh hưởng đến tốc độ blog. Giúp chúng ta thể hiện được cá tính của mình trên từng bài viết: tinh tế :v Hướng dẫn cách làm button Bước 1 : Các bạn chèn CSS sau trên thẻ ]]></b:skin> #personal {   color:white;   text-decoration:none;   position:absolute;   bottom:15px;   right:2%; } .spot {   position: absolute;   width: 100%;   height: 100%;   top: 0;   left: 0; } .svg-wrapper {   margin-top: 0;   position: relative;   width: 150px;   height: 40px;   display: inline-block;   border-radius: 3px;   margin-left: 5px;   margin-right: 5px } #shape {   stroke-width: 6px;   fill: transparent;   stroke: #009FFD;   stroke-dasharray: 85 400;   stroke-dashoffset: -220;   transition: 1s all ease; } #text {   margin-to