Thứ Sáu, 1 tháng 11, 2019

Tạo hộp đăng ký nổi trên Blogger

Đối với các mẹo của Blogger lần này, Arlina Design sẽ chia sẻ Cách cài đặt Hộp đăng ký nổi trên Blogger . Như chúng ta biết hộp đăng ký hoặc đăng ký tiện ích qua email là một phần quan trọng trong blog, bởi vì nó sẽ tăng số lượng khách truy cập khác từ phía bên kia, khách hàng đăng bài sẽ biết trước các cập nhật nhận được qua email.


Trước đây tôi cũng đã chia sẻ các mẹo về Cách tạo thông báo đẩy trên Blog bằng OneSignal có ít nhiều chức năng và lợi ích tương tự. Được rồi, đây là các bước.

Cách cài đặt các hộp đăng ký nổi trên Blogger
Trước tiên hãy mở trang Blogger > Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Thêm mã này trước mã </body>

<div class='subscribebar'>
   <div class='container text-center'>
      Get the latest article updates from this site via email for free!
      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=bomkhungblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
         <div class='arlina-form-fields'>
            <p>
               <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address...&quot;;}' onfocus='if (this.value == &quot;Email address...&quot;) {this.value = &quot;&quot;;}' placeholder='Email address...' required='' type='email'/>
            </p>
            <p><input type='submit' value='Submit'/></p>
            <input name='uri' type='hidden' value='bomkhungblogger'/>
            <input name='loc' type='hidden' value='en_US'/>
         </div>
      </form>
   </div>
 <button class='closeme' title='Close this message'>&#10005;</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>

Chỉnh sửa các phần được đánh dấu và điều chỉnh nó vào blog của bạn

Sau đó chọn một trong các mã CSS bên dưới nếu cần và thêm mã trước mã </head>

1. Hộp đăng ký hiệu ứng Light
<style type='text/css'>
/* Floating Subscribe Box Light */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(0,0,0,0.01);color:#333}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:#aaa}
@media (max-width:767px){
.closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}
.subscribebar .closeme:hover{background:#2c3e50;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

DEMO

1. Hộp hiểu ứng Đêm đăng ký
<style type='text/css'>
/* Floating Subscribe Box Night */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

DEMO

1.Hộp hiểu ứng Gradient hộp đăng ký
<style type='text/css'>
/* Floating Subscribe Box Gradient */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type=&quot;email&quot;]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type=&quot;email&quot;]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type=&quot;submit&quot;]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type=&quot;submit&quot;]:hover,.subscribebar input[type=&quot;submit&quot;]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type=&quot;email&quot;]::placeholder{color:#fff;opacity:1}
.subscribebar input[type=&quot;email&quot;]:-ms-input-placeholder{color:#fff}
.subscribebar input[type=&quot;email&quot;]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

DEMO

Nếu vậy, nhấp vào nút Lưu chủ đề và xem kết quả trên blog của bạn.
Chúc các bạn thành công với thủ thuật đơn giản này :D
Nguồn : Arlinadzgn

ĐỌC THÊM

Thứ Năm, 31 tháng 10, 2019

Cách tạo chế độ ban đêm trên Blogger bằng cookie

Chế độ ban đêm là một tính năng nhằm làm cho màn hình tối. Tính năng này thường được tìm thấy trên các thiết bị di động có chức năng Chế độ ban đêm hoặc Chế độ tối có lợi ích tiết kiệm pin sử dụng.


Tại đây Hùng Coder sẽ chia sẻ các mẹo về Cách tạo chế độ ban đêm trên Blogger bằng Cookies . Ở đây tôi thêm tính năng Cookie để khi chúng tôi làm mới một trang đã được kích hoạt với Chế độ ban đêm, nó sẽ không trở về chế độ ban đầu mặc dù bạn đã thay đổi trang. Thật thú vị phải không? Đối với những người quan tâm đến việc cài đặt tính năng Chế độ ban đêm, vui lòng làm theo các bước dưới đây.

Cách tạo chế độ ban đêm trên Blogger bằng cookie
Trước tiên hãy mở trang Blogger > Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Thêm mã này trước mã </body>
<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

Sau đó thêm mã CSS này trước mã </head>
<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Hãy chú ý đến mã được đánh dấu, mã là một mã ví dụ mà bạn có thể chỉnh sửa bằng cách thay thế .class-baru bằng một lớp hoặc ID trong một phần cụ thể của mẫu. Vui lòng thêm .nightmode trước lớp hoặc ID của phần mẫu mà bạn muốn thay đổi khi Chế độ ban đêm được kích hoạt. Ví dụ như thế này:
.nightmode .header{background:#222}
.nightmode .title{color:#fff}

Đồng thời chỉnh sửa mã CSS này để xác định vị trí của nút Chế độ ban đêm
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Khi bạn chỉnh sửa xong mọi thứ bạn cần, hãy nhấp vào nút Lưu chủ đề và xem kết quả trên blog của bạn.
Nhấp vào nút bên dưới để xem ví dụ về cách triển khai tính năng Chế độ ban đêm trên Blogger. Nhấp vào nút Chế độ ban đêm có vị trí ở góc trên bên phải.
DEMO

Chúc các bạn thành công với tiện ích này :)
Nguồn : Arlinadzgn
ĐỌC THÊM

Thứ Tư, 30 tháng 10, 2019

Revoltify Blogger Blogger Responsive

Revoltify Blogger Blogger Responsive là một mẫu có chế độ xem danh sách mà tôi sẽ chia sẻ với 2 phiên bản, phiên bản miễn phí và trả phí.


Các tính năng sau của mẫu Revoltify

Features Availability
Responsive True Cek
SEO True Cek
Custom Mobile Version True Cek
Custom Threaded Comment True
2 Column True
Light Base Theme Color True
Simple Flat Design True
Auto Read More with Thumbnail True
Responsive Ad Slot True
Breadcrumbs True
Related Posts with Subscribe Box True
Overlay Search Box True
Social Share Button True
Sidebar Tab Widget True
Recent Post Widget True
Recent Comment Widget True
Custom 404 Page True
Smooth Scroll back To Top True
Better Print Page Layout True
Custom Subscribe Box Widget True
Sitemap Widget True
Well Documentation True

DEMO DOWNLOAD

Chúc các bạn có một giao diện tốt để phát triển blog :D
ĐỌC THÊM

Thứ Bảy, 26 tháng 10, 2019

Live Traffic - 2Pink

Live Traffic là ứng dụng cung cấp giải pháp tăng traffic miễn phí cho website hàng đầu tại Việt Nam.

Từ những ngày đầu Live Traffic được phát triển từ nhu cầu thực tế của cá nhân và mong muốn hỗ trợ cộng đồng đạt được lượng truy cập cần thiết cho website mà không cần phải đầu tư vào những chiến dịch quảng cáo tốn kém.


Trải qua nhiều phiên bản được đông đảo người dùng ủng hộ, hiện tại phiên bản Live Traffic 3.1 là phiên bản hoàn thiện và ổn định nhất.

Live Traffic vẫn còn tiếp tục được nghiên cứu, phát triển những tính năng tốt nhất dựa trên những yêu cầu thực tế từ phía người sử dụng.

Đăng ký tài khoản miễn phí
Đăng ký một tài khoản miễn phí để bắt đầu. Thật nhanh chóng và dễ dàng. Bạn chỉ cần nhập vào tên đăng nhập, mật khẩu và địa chỉ e-mail hợp lệ. Khi đăng ký hoàn tất bạn có thể truy cập vào trang Live Traffic, nơi bạn có thể khám phá các tính năng tuyệt vời của Live Traffic!

Thêm Url mới
Truy cập vào trang Live Traffic để thêm những Url đầu tiên của bạn, số lượng Url là không giới hạn bạn nhé!. Với Live Traffic bạn có thể thêm Text Link là những liên kết bạn mong muốn được click vào về trang mục tiêu của bạn. Bạn cũng có thể cấu hình thời gian view cho Url ấy, số lượt xem tối đa trong vòng 1 giờ hoặc giới hạn tổng lượt xem



Chạy tool để kiếm điểm
Tải về tool Live Traffic tại trang Kiếm điểm, bạn chỉ cần chạy tool rồi click thu nhỏ nó xuống, vậy là bạn vẫn dễ dàng kiếm được điểm từ người khác mà không ảnh hưởng đến công việc khác của bạn. Bạn cũng có thể chạy tool trên nhiều máy (Khác địa chỉ IP) với cùng 1 tài khoản của bạn, lúc ấy số điểm nhận được sẽ rất nhanh và nhiều. Nếu không muốn chạy tool bạn có thể mua điểm tại tab Mua điểm. Giá mua điềm cũng không quá cao so với 1 số site lớn :D

Với 1 số Youtuber hay cái site có treo quảng cáo Google Adsense thì số tiền này không là gì khi kiếm chút traffic gọi là :D

Nhận traffic từ người khác khác
Khi tài khoản của bạn đã có điểm từ việc chạy tool hoặc mua điểm, người khác sẽ bắt đầu tìm đến những Url của bạn đã thêm trước đó để truy cập vào. Nếu cần thay đổi cấu hình của Url bạn có thể vào trang Live Traffic để chỉnh sửa.

Giới thiệu người dùng mới để nhận hoa hồng
Nếu bạn muốn có nguồn điểm thường xuyên hãy giới thiệu Live Traffic tới nhiều người hơn qua đường link giới thiệu của bạn tại trang Mời dùng. Mỗi khi họ nhận được điểm bạn sẽ nhận được 10% điểm từ hệ thống. Khi mạng lưới giới thiệu của bạn càng lớn thì nguồn điểm của bạn sẽ rất khủng!

Live Traffic - Tăng traffic website miễn phí

2Pink.Org DOWNLOAD

Chúc các bạn thành công với tiện ích này :)
ĐỌC THÊM

Thứ Tư, 16 tháng 10, 2019

Alder Clean/Simple Blogger Template

Alder Clean là một mẫu đáp ứng, hiện đại, đơn giản và dễ sử dụng của Blog. blogger. Mẫu Alder Blogger là một lựa chọn hoàn hảo cho các blogger lối sống, khách du lịch, đầu bếp, nhà văn, nhiếp ảnh gia và những người muốn tạo ra một blog đẹp và sạch sẽ.


Nó có một bố cục tối giản tập trung vào sự đơn giản và dễ đọc. Được chế tạo trên nền tảng của mã hóa vững chắc và được củng cố với màu sắc phong phú, nền tảng và tùy chọn tùy chỉnh blogger nói chung. Nó đi kèm với kiểu chữ đẹp theo mặc định và bạn cũng có thể sử dụng kiểu chữ tùy chỉnh trong mẫu này. Rất thích hợp cho các nhà văn và tất cả những người thích viết hoặc viết blog. Alder được hỗ trợ bởi Trình tùy chỉnh mẫu Blogger, bạn có thể nhanh chóng và dễ dàng thay đổi sự kết hợp màu sắc của blog của mình. Alder đi kèm với một số tính năng tốt nhất như Băng chuyền bài nổi bật sành điệu, Bài đăng phổ biến tối thiểu, Menu Menu thả xuống đa cấp, Đăng ký email, tiện ích instagram và nhiều hơn nữa. Kiểm tra một số tính năng tuyệt vời hơn của Mẫu Blogger Alder

Features Availability
Responsive True
Google Testing Tool Validator True
SEO Friendly True
Mobile Friendly True
404 page True
Loading Speed True
Featured Carousel True
Clean & Minimalist design True
Advance Admin Panel True
Unlimited Colors(Customizable) True
Ads Ready True
Two types of menu True
Multi Dropdown Menu True
Featured Instagram Widget True
Social Widgets True
Auto Read More with Thumbnail True
Related Posts with Thumbnail True
Social Share Button True
Email Newsletter Widget True
Stylish Comments Widgets True
Built in Search Widget True
Detailed Documentation True Check
Widget Codes (Premium) True

DEMO DOWNLOAD FREE BUY NOW PREMIUM VERSION (10$)

Chúc các bạn thành công với mẫu giao diện tuyệt với này :D
Nguồn : Templatesyard
ĐỌC THÊM

April Grid Blogger Template

April Grid Blogger Template là một mẫu blogger lưới 3 cột. Nó là một mẫu blogger Blog thời trang, Phong cách sống và Cá nhân cao cấp, phù hợp với nhu cầu của bạn và theo mong đợi của khách hàng.


Chủ đề này cung cấp nhiều khả năng khác nhau sẽ giúp bạn dễ dàng tạo ra một trang web đẹp, tuyệt đẹp và độc đáo. Chủ đề trông tuyệt vời trên máy tính bảng và thiết bị di động do thiết kế đáp ứng và đồ họa võng mạc. Nó được tải với nhiều loại trang khác nhau, bố cục rộng và đóng hộp, bao gồm bảng màu không giới hạn, số lượng lớn phông chữ, biểu tượng và nhiều hơn nữa. Nếu bạn đang tìm kiếm mẫu blogger Minimalist thì đây là lựa chọn tốt nhất cho bạn. Kiểm tra các tính năng tuyệt vời hơn của Mẫu Blogger Tháng Tư

Features Availability
Responsive True Check
Google Testing Tool Validator True Check
SEO Friendly True Check
Mobile Friendly True Check
404 page True Check
Loading Speed True Check
Auto Read More With Thumbnail True
Ads Ready True
Multi Dropdown Menu True
Search Widget True
Tabbed Sidebar True
Colourful Social Widgets True
Related Posts with Thumbnail True
Social Share Button True
Email Newsletter Widget True
3 column grid True
Detailed Documentation True Check
Widget Codes (Premium) True

DEMO DOWNLOAD FREE BUY NOW PREMIUM VERSION(10$)

Chúc các bạn thành công với mẫu giao diện này.
Nguồn : Templatesyard
ĐỌC THÊM