Saikot House

Remove Image Background: 100% automatically - in 5 seconds - with a single click - for free.

2020-04-25T19:27:00.000+06:00

Remove Background From A Image OR Photo

For many photographer need to remove background from a photo and they spend many time for it.

But why spend your days clicking pixels when Artificial Intelligence could finish the task for you in just 5 seconds?

Photo Quality

Whether you're editing product photos or portrait shots: remove.bg handles the challenging edges, like hair and other tricky conditions, exceptionally well.

Remove background 1000 Files - A single Click

Drag and drop as many images as you need, then watch how each of them is processed 100% automatically update.

Now grab a coffee, go for a walk, or head to the next photoshoot. You just saved yourself a lot of time!

Add automatic bulk background removal to your desktop

Download For Windows / Mac / Linux

Get a transparent background for any image.

Go to this link

And upload your photo. Then

Click on edit and
Unleash your creativity! Picture yourself on the beach, up Mount Everest

Hollywood actor - all with a few clicks.
Apply effects and share your creation on social media, print it, or create a unique gift for a friend. It's that easy!

Edit the photo, whatever you like
Add wonderful new backgrounds & splendid effects!

That's awesome! Right? Remove background from a photo with one click and 100% Automatically.

Share this posts if you like👍

Bung Frangki Responsive Blogger Template Free

2020-04-24T18:24:00.000+06:00

This blogger template by Namina will share a template viz Bung Frangki Responsive Blogger Template. This blogger template at the request. It is very SEO Friendly Blogger template, also Google Adsense approval Blogger template you can use it for your blog or websites.

The theme that here are certain different parts. Well, without lingering, the following features, demo links and download links.

Bung Frangki Responsive Blogger Template

Features	Availability
Responsive	True Cek
Mobile Friendly	True Cek
Google Testing Tool Validator	True Cek
SEO Friendly	True
Personal Blog	True
2 Column	True
Light Base Color	True
Search Box	True
Grid Style	True
Share Button	True
Related Post	True
Go up and Go down Button	True

Link demo dan download

DEMO
DOWNLOAD

That's all for this post, hope you like this template and hopefully use. Thank you.

Katana Adsense Friendly Responsive Blogger Template Free

2020-04-24T18:10:00.003+06:00

Naminakiky made this template with a simple concept because after yesterday I checked in Mediafire Templates In SEO Spesial Ramadhan Blogger template free Become the number one template on this blog that has the most downloaded number of other templates.

So I began to understand what users needed from the template I made, namely the blogger template with a simple, lightweight display and not too many widgets in it. This time I continued the concept and hopefully it could be used comfortably by blogger friends.

Katana Responsive Blogger Template

For the features in this Katana template you can check the following

Features	Availability
Responsive	True Cek
Mobile Friendly	True Cek
Google PageSpeed Insights	True Cek
Google Testing Tools (Homepage)	True Cek
Google Testing Tools (Postpage)	True Cek
SEO Friendly	True
Personal Blog	True
2 Column	True
Featured Post Widget	True
Breadcrumbs Schema.org	True
Related Posts	True
Responsive Menu Navigation	True
ShareThis Share Button	True
Newsletter Widget	True
Back to top	True
Shortcode	True
Blogger and Disqus Comments	True
Documentation	True

Here is a demo link and the download link.

DEMO
DOWNLOAD

Okay, so for posts Katana Responsive Blogger Template. Good luck.

CSS and SVG Masks

2020-04-24T11:28:00.001+06:00

~~Read more~~ articles

CSS Animation Text 3D

CSS and SVG Masks

CSS clip

Specification

.item {
  position: absolute;
  clip: rect(10px, 190px, 190px, 10px);
  }

CSS clip-path

Specification

.item {
  clip-path: circle(100px, 100px, 100px);
  clip-path: circle(100px at center);
  }

Syntax for circle was chnaged, to radial gradient syntax

SVG clip-path for SVG elements

Specification

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>

.item {
  clip-path: url(#clipping);
  }

SVG clip-path for HTML elements

Specification

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>

.item {
  clip-path: url(#clipping);
  }

SVG clip-path with complex content for HTML elements

Specification

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
  <text x="0" y="3.2em">Text

</clipPath>

.item {
  clip-path: url(#clipping);
  }

CSS mask-image

Specification

.item {
  mask-image: url(YOUR.png), 
                    linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-repeat: space;
  }

Mask image: PNG

SVG mask for SVG elements

Specification

<mask id="masking" maskUnits="objectBoundingBox" 
  maskContentUnits="objectBoundingBox">
  <rect y="0" width="1" height="1" fill="url(#gradient)" />
  <circle cx=".5" cy=".5" r=".4" fill="gray" />
  <circle cx=".5" cy=".5" r=".3" fill="white" />
  ...
</mask>

.item {
  mask: url(#masking);
  }

SVG mask for HTML elements

Specification

<mask id="masking" maskUnits="objectBoundingBox" 
  maskContentUnits="objectBoundingBox">
  <rect y="0" width="1" height="1" fill="url(#gradient)" />
  <circle cx=".5" cy=".5" r=".4" fill="gray" />
  <circle cx=".5" cy=".5" r=".3" fill="white" />
  ...
</mask>

.item {
  mask: url(#masking);
  }

Text

background-clip

Documentation

.item {
  background: url(YOUR IMAGE) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }

SVG fill

Specification

Not real mask, but looks like -webkit-background-clip: text; and has much better support.

<pattern id="pattern" patternUnits="userSpaceOnUse"
             width="200" height="300" viewbox="0 0 200 300">
  <image xlink:href="YOUR IMAGE" width="200" height="300" />
</pattern>

text {
  fill: url(#pattern);
  }

3D Animated Text With CSS

2020-04-23T20:26:00.001+06:00

3D Text (css) - animated

Hello! Everyone, Today i will share a tutorial How to make 3D Text With CSS And Animation, here is the full tutorial How make 3D text with CSS. So Let's get started the tutorial classes.

3D Animated Text With CSS

First you need to add Google Font For styling the text better. Add this following css code OR Go to google font and find you favorite font family.

<link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet">

Add CSS Code

Add this following css code here, you can Edit the css yourself. Copy this and paste it.

<style type="text/css">
.playful span {
  position: relative;
  color: #5362F6;
  text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
  animation: scatter 1.75s infinite;
}
.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: 0.25px 0.25px #F2A063, 0.5px 0.5px #F2A063, 0.75px 0.75px #F2A063, 1px 1px #F2A063, 1.25px 1.25px #F2A063, 1.5px 1.5px #F2A063, 1.75px 1.75px #F2A063, 2px 2px #F2A063, 2.25px 2.25px #F2A063, 2.5px 2.5px #F2A063, 2.75px 2.75px #F2A063, 3px 3px #F2A063, 3.25px 3.25px #F2A063, 3.5px 3.5px #F2A063, 3.75px 3.75px #F2A063, 4px 4px #F2A063, 4.25px 4.25px #F2A063, 4.5px 4.5px #F2A063, 4.75px 4.75px #F2A063, 5px 5px #F2A063, 5.25px 5.25px #F2A063, 5.5px 5.5px #F2A063, 5.75px 5.75px #F2A063, 6px 6px #F2A063;
  animation-delay: 0.3s;
}
.playful span:nth-child(3n) {
  color: #FFD913;
  text-shadow: 0.25px 0.25px #6EC0A9, 0.5px 0.5px #6EC0A9, 0.75px 0.75px #6EC0A9, 1px 1px #6EC0A9, 1.25px 1.25px #6EC0A9, 1.5px 1.5px #6EC0A9, 1.75px 1.75px #6EC0A9, 2px 2px #6EC0A9, 2.25px 2.25px #6EC0A9, 2.5px 2.5px #6EC0A9, 2.75px 2.75px #6EC0A9, 3px 3px #6EC0A9, 3.25px 3.25px #6EC0A9, 3.5px 3.5px #6EC0A9, 3.75px 3.75px #6EC0A9, 4px 4px #6EC0A9, 4.25px 4.25px #6EC0A9, 4.5px 4.5px #6EC0A9, 4.75px 4.75px #6EC0A9, 5px 5px #6EC0A9, 5.25px 5.25px #6EC0A9, 5.5px 5.5px #6EC0A9, 5.75px 5.75px #6EC0A9, 6px 6px #6EC0A9;
  animation-delay: 0.15s;
}
.playful span:nth-child(5n) {
  color: #555BFF;
  text-shadow: 0.25px 0.25px #E485F8, 0.5px 0.5px #E485F8, 0.75px 0.75px #E485F8, 1px 1px #E485F8, 1.25px 1.25px #E485F8, 1.5px 1.5px #E485F8, 1.75px 1.75px #E485F8, 2px 2px #E485F8, 2.25px 2.25px #E485F8, 2.5px 2.5px #E485F8, 2.75px 2.75px #E485F8, 3px 3px #E485F8, 3.25px 3.25px #E485F8, 3.5px 3.5px #E485F8, 3.75px 3.75px #E485F8, 4px 4px #E485F8, 4.25px 4.25px #E485F8, 4.5px 4.5px #E485F8, 4.75px 4.75px #E485F8, 5px 5px #E485F8, 5.25px 5.25px #E485F8, 5.5px 5.5px #E485F8, 5.75px 5.75px #E485F8, 6px 6px #E485F8;
  animation-delay: 0.4s;
}
.playful span:nth-child(7n), .playful span:nth-child(11n) {
  color: #FF9C55;
  text-shadow: 0.25px 0.25px #FF5555, 0.5px 0.5px #FF5555, 0.75px 0.75px #FF5555, 1px 1px #FF5555, 1.25px 1.25px #FF5555, 1.5px 1.5px #FF5555, 1.75px 1.75px #FF5555, 2px 2px #FF5555, 2.25px 2.25px #FF5555, 2.5px 2.5px #FF5555, 2.75px 2.75px #FF5555, 3px 3px #FF5555, 3.25px 3.25px #FF5555, 3.5px 3.5px #FF5555, 3.75px 3.75px #FF5555, 4px 4px #FF5555, 4.25px 4.25px #FF5555, 4.5px 4.5px #FF5555, 4.75px 4.75px #FF5555, 5px 5px #FF5555, 5.25px 5.25px #FF5555, 5.5px 5.5px #FF5555, 5.75px 5.75px #FF5555, 6px 6px #FF5555;
  animation-delay: 0.25s;
}
@keyframes scatter {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  100% {
    top: 0;
  }
}
body {
  background-color: #E4FFF7;
}
h1 {
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  width: 666px;
  max-width: 80vw;
  min-height: 90px;
  height: auto;
  text-align: center;
  margin: 10rem auto;
  margin: calc(50vh - 5rem) auto;
}
</style>

Add html Code

Add this following html code here, You can change the text. Here

<h1 class="playful" aria-label="Wash your hands">
  <span aria-hidden="true">W</span><span aria-hidden="true">a</span><span aria-hidden="true">s</span><span aria-hidden="true">h</span><span aria-hidden="true"> </span><span aria-hidden="true">y</span><span aria-hidden="true">o</span><span aria-hidden="true">u</span><span aria-hidden="true">r</span><span aria-hidden="true"> </span><span aria-hidden="true">h</span><span aria-hidden="true">a</span><span aria-hidden="true">n</span><span aria-hidden="true">d</span><span aria-hidden="true">s</span><span aria-hidden="true">!</span>
</h1>

Demo

Now see the demo of the 3D Animated Text with CSS, click on the link here for see demo on codepen. Click here

Live demo codepen

See the live demo

That's all for today. Thank you for visiting us.

Best Wordpress Custom Login Page Customizer Plugins Free

2020-04-23T19:13:00.001+06:00

Here is some best custom login page plugin for wordpress, that you can use for your blog or wp websites.

Custom Login Page is without doubt one of the easiest to use WordPress plugins that allows the customization of the login page and login form. It was designed and developed to be powerful and user friendly so it can be enjoyed by both beginner and advanced developers. With Custom Login Page Customizer you can build a custom login page and custom login form in a matter of seconds, unlike some other login customizer plugins. Custom Login Page Customizer marks the end of a boring and bland login page and login form as you will be able to fine tune every aspect of the form to match your style and view and create a unique and custom login page.

List of the wp custom login page plugin here

1. Custom Login Page Customizer by Colorlib

Custom Login Page Customizer by Colorlib detailed features:

Custom login page templates
Hide/show login logo from login page
Show/hide the logo text from login page
Custom logo on login page
Change logo width on login page
Change logo height on login page
Change number of columns on your login page
Customize width of the columns on your login page
Change login form column alignment
Customize login form vertical alignment
Customize login form horizontal alignment
Customize background color on the login page
Add a custom background image on login page
Customize login form column background color
Add a custom background image for login form column
Customize login form width
Customize login form width
Add custom background image for login form
Customize the background color for login form
Customize login form border radius
Customize login form fields’ width
Customize login form fields’ margin
Customize login form fields’ border
Customize login form fields’ border radius
Customize login form fields’ background color
Customize login form fields’ text color
Customize login form fields’ label color
Customize login form username label
Customize login form password label
Show/hide the links on login page under the login form
Customize login form button background color
Customize login form button hover background color
Customize login form button border color
Customize login form button border color on hover
Customize login form button shadow
Customize login form button text shadow
Customize login form links color
Customize login form links color on hover
Hide/Show ‘Remember me?’ option on login form
Custom CSS option to customize further the login form and login page

Build and personalize your WordPress login form from start to finish. Colorlib Login Customizer has the following features:

Logo options: you can add a custom logo and set up its height and weight.
Background options: from here you can upload a background image or change the background’s color.
Form options: you can change the form’s width and height, add a background image, change the background color, add padding and borders, and change the form’s field background color, width, and margin.
Miscellaneous: in here you will find the options to change the button’s background, color, hover state, border, shadow, and the link’s color and hover color.

2. Custom Login Page Customizer | LoginPress

LoginPress Features in Detail:

Customize login error messages. You can change every error message whether it is on login form, forgot password form, register form or reset password form.
Customize login logo image.
Customize login logo image width.
Customize login logo image height.
Customize login logo image hover title.
Customize login logo image hover link.
Customize login logo padding bottom.
Customize login page background image.
Customize login page background color.
Background Gallery with a selected set of HD Backgrounds for Login Screen.
Customize login page background image size.
Customize login page without background image. You can keep it simple with different login form style.
Customize login form width.
Customize login form height.
Customize login form border style.
Customize login form input styling.
Customize login form label styling.
Customize login form field text color.
Customize login form background color.
Customize login page “lost your password?” text.
Customize login forgot password form background color and image.
Customize login form button styling.
Customize login form notice messages.
Add copyright notice message at the bottom of login page.
Customize “Back to” text at login page. You can hide or show or change the color or even the text size as well.
Customize login page footer. We call login page footer area under the login form fields.
LoginPress has a Custom CSS area which can Customize login page in more advanced way. Recommended for advanced users.
Customize your login page in more advanced way using our Custom JS area. Add your JS there and make your login page more advanced.
Customize login page with unlimited features available in LoginPress.

After going through this extensive list of features you can imagine Why LoginPress is the best login page customizer in the WordPress market.

Beautify and Innovate your WordPress login page without any coding knowledge!

3. Theme My Login

Features

Have you users log in from the frontend of your site.
Have your users register from the frontend of your site.
Have your users recover their password from the frontend of your site.
Customize the slugs used for login, registration, password recovery and other pages.
Allow your users to register with only their email.
Allow your users to set their own passwords upon registration.
Allow your users to log in using either their email and password, username and password or a combination of the two.
Allow your users to be logged in automatically after registration with auto-login.

4. Custom Login Page Customizer

Custom Login Page Customizer plugin allows you to easily customize your login page straight from your WordPress Customizer! You can preview your custom login changes before you save them! Awesome, right?

In your WordPress Dashboard, navigate to Appearance > Custom Login Page Customizer to get started.
You can customize almost anything and make it look the way you want.

5. WP User Frontend – Membership, Profile, Registration & Post Submission Plugin for WordPress

FREE FEATURES
#1 Frontend Post Submission, Membership, Profile Builder & WordPress Editor Plugin
Unlimited post type form creation. The forms give users the ability to create new posts, edit their profile all from the site frontend, so that the user does not need to enter the backend admin panel to do action.
Update Profile from the Frontend
This WordPress Profile Plugin allows registered users to edit their profile using default fields from frontend without having backend access. Unlimited fields can be added using PRO.
Flexibility for admins
Admins can manage users from frontend as well as configure from backend those who can access the dashboard.
Files & attachments
Users can upload attachments from the frontend. Users can also upload post featured image. Image upload on post content area
Drag-n-drop form builder
Easily fill your form with fields using drag-n-drops and real-time preview that updates as you make changes. You can see how your form will look like eventually from the dashboard!
Publish your WPUF forms using Gutenberg
Easily add your published forms in Gutenberg editor with the WPUF block. When users want to publish forms on a page, they can simply select it from the drop-down included in the dedicated WPUF block for Gutenberg. The entire form automatically renders within the editor as well as on page. It’s much easier than manually copying and pasting shortcodes! Saves you a ton of time and clicks. But you can also do it the old style using the shortcodes block.
Use anywhere easily with shortcodes
All of the forms get an unique shortcode which you can paste on any page and the form will generate without breaking the style of your theme.
WordPress Guest Post Submission
Enable guests to post from your site frontend without registering with WP User Frontend, the WordPress User Registration Plugin. Choose to require name and email address to automatically register and allow them to comment on their posts. Allow email verification for guests.
Role Base Support
Enable certain user roles to make posts, create unauthorized message you want to show.
Submit and update anything from Frontend
Users can upload files, fill out forms, even entry data with multiple choice menus. Allow users to update their posts from the frontend.
Build customized forms with custom post types
Taking the advantage of custom post types will allow you to work on any platform. WP User Frontend is WooCommerce supported, so you can also create products using our forms.
Set post status, post message, update post button text
Assign separate default status for a new and edit post, the message you want to show to users after form submission, and change the text of submit buttons as you like.
Custom Redirection after login and submission
Redirect users to another page after logging in, form submission or edit form submission.
Earn with subscription based posting
Create subscription packs to take “Pay Per Post” payments. Submissions posted via these subscriptions have duration and posting limits.
Schedule forms & restrict entries
Choose to keep your form active for certain dates. Set a message when form expires. And limit entries to as many as required. The PRO version also allows setting up post expiration.
Get reminded with emails
Trigger emails on multiple events like new form submission, guest posts, publish notification and new subscriptions. With PRO, more email notifications can be set up.
Integrate with Advanced Custom Fields (ACF)
Connect form fields with ACF fields to view user submissions in ACF format from dashboard. Allow users to edit fields from frontend.
Create subscription packs, pay-per-posts & receive payments from users
Create and subscribe users to membership packs, allow pay per post, force subscription package purchase, and set fallback pay per post charges with this WordPress Membership Plugin.
Manage Transactions
Approve or make pending membership requests. View all details from a single screen.
Manage or Import/Export forms
Install required WPUF pages in a click, delete post forms, registration forms or subscriptions in one go. Import forms from other places and export forms as JSON.
Custom Login/Registration Form
This WordPress Registration Form Plugin also allows to build registration form using default forms. With PRO, more fields can be added.

6. Erident Custom Login and Dashboard

Login Screen Settings (These settings will be reflected on the “wp-login.php” page. ) Login Screen Background Color/Image Login Screen Background Repeat Login Screen Background Position Login Screen Background Size Logo Url Logo width Logo height Powered by Text Login form width Login Form Border Style/Radius/Color/Thickness Login Form Background Color/Image Background Opacity Login Form Background Repeat Login Form Background Position Login Form Label/input Text Color Login Form Label/input Text Size Enable Link Shadow Login Form Link Shadow Color Enable form Shadow Login Form Shadow Color Change Login button Color Hide Register | Lost your password link Hide Back to your website link

7. Custom Login Page Customizer – Login Designer

You shouldn’t have to hire a developer to customize your website’s login page. That’s why I built Login Designer, the best login customizer plugin for WordPress.
While Login Designer is not the first WordPress plugin designed for styling custom login pages, it offers an unrivaled live-editing experience unlike any other.

That's all for today.

10 Best URL Shortener Services - Best Link Shorteners That Aren’t the Google URL Shortener

2020-04-22T22:55:00.000+06:00

Here is some of the best URLs Shortener that you can use for your blog, website, Mobile app and any kind of platform. Here is the list of 10 Best Link Shortener full list.

The 10 best URL shortener services 2020

What makes a great URL shortener?

URL shorteners make sharing long links more manageable. Say you want to provide a link on a business card, in an advertisement ect or in another situation where hyperlinking isn't ideal. A shortened URL takes up less space, is more memorable and keeps your text tidy.

Another use case for shortened URLs is to create variations of a single link so you can easily track source traffic. For example, you might create one short URL to use on Twitter, a different one for Facebook, and a third to be used in an email newsletter.

Many URL shortening services offer comprehensive tracking tools that allow you to see who is clicking your link, where in the world they are located, and what language they speak. You can use this information to discern click-through rates, which browser your audience prefers, and what devices your content is accessed from. Some services even allow you to bring your own custom domain name for creating your own branded service.

There are many free URL shorteners. And most URL shorteners have a free tier of service, but you often have to pay for added features, such as metrics and customization. The URL shortening services that made the cut for this list are reliable and easy to use, and each one stands out as the “best” for a special reason.

1. Ow.ly hootsuite

Owly is Hootsuite’s own URL shortener, and it’s included in every Hootsuite plan type, including our free version.
The link shortener leverages the power of the world’s most popular social media platform manager in order to track your metrics for success.

Hootsuite’s built-in analytics tools will also give you everything you need to know about your link’s performance.

Hootsuite’s paid plans start at $29 per month but they of course also include all the social media management tools that the platform is known for.

2. T.co

Did you know that Twitter already comes with its own built-in URL shortener?. Any link you include in Twitter will automatically shorten to 23 characters regardless of its actual length. So even if the URL is shorter than 23 characters it will still count as 23.
If you have a long URL, though, this will save precious character space for that extra hashtag or words in your tweet.
This link shortening service is known as t.co and any user sharing a link will share it with t.co. That’s right.

You can’t opt out of it so Twitter can record metrics regarding the links while also protecting users from potentially dangerous ones.

3. Bitly

Bitly allows you to track your link’s performance on their robust dashboard that’ll show you metrics like clicks, geographic and demographic data, as well as top referring channels.

Currently, if you create a free account with Bitly, you can create up to 500 branded short URLs and 10,000 unbranded URLs. A premium subscription starts at $29 per month and includes even more branded links—and the potential to add more users on your account.

4. Rebrandly

Rebrandly is a fantastic URL shortener for creating branded links with a custom domain you can purchase directly on the link shortening platform. Not only that, but you can also track vital metrics such as click-throughs, frequent clicking times, as well as demographic data—all from one handy dashboard.

Premium subscriptions for Rebrandly start at $29 per month and include 25,000 clicks tracked per month, 5,000 branded links, and 5 custom domains.

5. Smallseotools url shortener

SmallSEOTools offers a spartan URL shortener that compresses your link into a short unbranded URL. Like TinyURL, it’s completely free and anonymous. However, there’s no additional features like metric or demographic tracking.

It’s great for when you need to generate a simple, short URL in a pinch.

6. Bl.ink

Bl.ink is a Zapier-supported URL shortener tool with plenty of tools to track vital metrics such as referring pages, click-through-rates, devices, and demographic data.

Premium subscriptions start at $12 per month and that comes with 10,000 links, 7,500 clicks-per-link, unlimited custom domains, as well as three users to an account.

7. Snip.ly

Sniply is a very unique addition to this list. Not only does the service shorten links, but every link will also include a call-to-action on it (see below).
Caption: A call-to-action button is included in the bottom left side with each Sniply link.

That’s right. If you share a link to a third-party website, you can still include a call-to-action on it that redirects to anything you want— a landing page, sales page, or back to the original article from which you linked it.

A great feature for boosting conversion rates.
Prices start at $29 per month and includes 5,000 clicks a month and two brand profiles on the account.

8. Tinyurl

Created in 2002, TinyURL is an incredibly popular URL shortener with more than a billion redirects each month. The service is completely free and anonymous to use. However, it does come at a cost: There’s no analytics data attached to the links.
So if you want to take a look at vital performance metrics, you’re going to want to make sure you have a UTM tracking code on the link you’re shortening and that you’re tracking it with a platform like Google Analytics.

9. ShortUrl

10. Clkim

That's all for today. Thank you for visiting us.

In SEO Pro Safelink Generator Blogger Template Free

2020-04-21T18:37:00.001+06:00

Download In SEO Pro Safelink Blogger Template

In seo pro safelink blogger template is a blogger template that will help you to make Safelink Blogger Website without any codding and that is free from our website Saikot House. You can download The blogger template free from our website saikothouse.

In SEO Safelink Pro Responsive Blogger Template free download

Click on the showing link for view demo of the template Click Here for demo.

Download Template

Click on the link blew for download In SEO Safelink Generator Blogger template Free, Download link here.

Download

Download More blogger template from our website, subscribe to our newest and get notified every post on our website.

Thank you.

30+ Best Contact Form Template Html And CSS3 Free

2020-04-01T11:43:00.002+06:00

Best Contact form Templates Free

Here is some of the best contact form templates thst are made with html and css3, customize the forms and add this to your website and blog.

Here is some best designed html and ccs3 contact form themes that you can use it for your site, design it your own and see the demo on codepen and you can download the code and use it.

1. Multi Step Form with Progress Bar using jQuery and CSS3

11. Responsive Contact Form by Lisa Wagner

See the Pen Responsive Contact Form by Lisa Wagner (@wgnr) on CodePen.

12. Contact Form by Stefan Rusu

See the Pen Contact Form by Stefan Rusu (@stephanrusu) on CodePen.

13. Contact Form Bootstrap 3 by Shuvo

See the Pen Contact Form Bootstrap 3 by Shuvo (@ShuvoHabib) on CodePen.

14. Responsive Popup Contact Form by Danny Holmes

See the Pen Responsive Popup Contact Form by Danny Holmes (@dsholmes) on CodePen.

15. Flat Responsive Contact Form

See the Pen Flat Responsive Contact Form by Rex Kirby (@rexkirby) on CodePen.

16. Bootstrap contact form with validation and AJAX submit

See the Pen Bootstrap contact form with validation and AJAX submit by Ondrej (@ondrejsvestka) on CodePen.

17. Quick Minimal Contact Form by Erlen

See the Pen Quick Minimal Contact Form by Erlen (@erlenmasson) on CodePen.

18. Form Feedback by CrocoDillon

See the Pen Form Feedback by CrocoDillon (@CrocoDillon) on CodePen.

19. Vintage Inspired Contact Form by David Fitas

See the Pen Vintage Inspired Contact Form by David Fitas (@dfitzy) on CodePen.

20. Contact Form by Aina Requena

See the Pen Contact Form by Aina Requena (@ainarela) on CodePen.

21. Material Design Contact Form by Shehab Eltawel

See the Pen Material Design Contact Form by Shehab Eltawel (@shehab-eltawel) on CodePen.

22. Form with Animation That Assists in UX

See the Pen Form with Animation That Assists in UX by Sarah Drasner (@sdras) on CodePen.

23. Forms with Jquery Validate + Jquery StepsSteps

See the Pen Forms with Jquery Validate + Jquery Steps by DGRFDSGN (@DGRFDSGN) on CodePen.

24. JS Form Validation by Chyno Deluxe

See the Pen JS Form Validation by Chyno Deluxe (@ChynoDeluxe) on CodePen.

25. Google Material Design Input Boxes

See the Pen Google Material Design Input Boxes by Chris on Code (@chrisoncode) on CodePen.

Here is some of the best contact form templates with demo, html, css, and javascript. You can copy them and you can also download them from codepen. Hope you like this.
Thank you.

SVG Loading Animation Icons For Website

2020-03-31T18:04:00.000+06:00

How do you make a svg loading animation for a website?

Today i will share tips about svg loading animation for website and demo. Copy the the svg loading animations and make it your Own. If you Don't know how to make perloader for website with javascript and svg click on the link for get tips.

So Let's get started here is some svg loading animation icons. Hope you can use.

Loader 1

<svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="5s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </circle>
  <circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="5s" 
         from="0 50 50"
         to="-360 50 50" 
         repeatCount="indefinite" />
  </circle>
  <g fill="#fff">
  <rect x="30" y="35" width="5" height="30">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.1"/>
  </rect>
  <rect x="40" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.2"/>
  </rect>
  <rect x="50" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.3"/>
  </rect>
  <rect x="60" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5"  
       repeatCount="indefinite" 
       begin="0.4"/>
  </rect>
  <rect x="70" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.5"/>
  </rect>
  </g>
</svg>

Loader 2

<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
  <animateTransform 
       attributeName="transform" 
       dur="2s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
  <animateTransform 
       attributeName="transform" 
       dur="15s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
</svg>

Loader 3

<svg version="1.1" id="L3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;"/>
  <circle fill="#fff" stroke="#e74c3c" stroke-width="3" cx="8" cy="54" r="6" >
    <animateTransform
      attributeName="transform"
      dur="2s"
      type="rotate"
      from="0 50 48"
      to="360 50 52"
      repeatCount="indefinite" />
    
  </circle>
</svg>

Loader 4

<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
  <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite"
      begin="0.1"/>    
  </circle>
  <circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite" 
      begin="0.2"/>       
  </circle>
  <circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite" 
      begin="0.3"/>     
  </circle>
</svg>

Loader 5

<svg version="1.1" id="L5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
  <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 15 ; 0 -15; 0 15" 
       repeatCount="indefinite" 
       begin="0.1"/>
  </circle>
  <circle fill="#fff" stroke="none" cx="30" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 10 ; 0 -10; 0 10" 
       repeatCount="indefinite" 
       begin="0.2"/>
  </circle>
  <circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.3"/>
  </circle>
</svg>

Loader 6

<svg version="1.1" id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
   <rect fill="none" stroke="#fff" stroke-width="4" x="25" y="25" width="50" height="50">
  <animateTransform
     attributeName="transform"
     dur="0.5s"
     from="0 50 50"
     to="180 50 50"
     type="rotate"
     id="strokeBox"
     attributeType="XML"
     begin="rectBox.end"/>
  </rect>
   <rect x="27" y="27" fill="#fff" width="46" height="50">
  <animate
     attributeName="height"
     dur="1.3s"
     attributeType="XML"
     from="50" 
     to="0"
     id="rectBox" 
     fill="freeze"
     begin="0s;strokeBox.end"/>
  </rect>
</svg>

Loader 7

<svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="1s" 
         from="0 50 50"
         to="-360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
</svg>

Loader 8

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"/>
</rect>
<rect x="17" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 20 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.1s"/>
</rect>
<rect x="40" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 40 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.3s"/>
</rect>
<rect x="60" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 58 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.5s"/>
</rect>
<rect x="80" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 76 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.1s"/>
</rect>
</svg>

Loader 9

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
    <rect x="20" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="30" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="40" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
</svg>

Loader 10

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
    <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="1s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
</svg>

Demo and download code

See the demo and download the full code on codepen.

Demo

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Thank you for visit us

Free Customizable Weather Widget For Website

2020-03-30T11:20:00.003+06:00

In this following tutorial i will show you how to make beautiful weather widget for your website, And here is the demo and full tutorial for get free premium feature of creating Weather Widget App. So Let's get started tutorial How To Make A Weather Reporting System Widget Full tutorial and Complete Guide.

Today, we'll build a demo of a simple widget that we can place on our websites and your blog. This widget detects the users location and gives accurate weather and data.

Building a Location Aware Weather Reporting Widget sample widget that we can place on our websites. by @Saikot91 #Weather_Widget #WebDesign #Nodejs #Saikothouse #Tutorial

We'll be building our demo with Node.js, but know that you can use any programming language of your choice as we won't be doing anything that can't be done in with programming languages.

Before we get started, Visit Ipstack and WeatherStack and sign up to get their API keys. WeatherStack, previously known as Apixu will help us collect meteorological data that we can use to get useful information on a particular location.

Getting Started

First, we want to create a project on our machine readable To do that, ensure you have Node.js installed, then navigate to your project folder and run this:

npx express-generator weather --ejs

This command creates a barebones exprerss application that we can modify and use. Next, we install the dependencies using npm or yarn. As I prefer yarn, I'll be using it to install and run scripts for the remainder of this article:

yarn install

Then, we can add our remaining dependencies:

yarn add dotenv node-fetch

Next, we want to add a script that runs our server, so in package.json add:

"scripts": {
  "start": "nodemon ./bin/www"
},

Then install nodemon as a devDependency.

yarn add --dev nodemon

Now that we have our project setup, we can start building our app.

The User Interface

The first thing we want to do is quickly setup a view to properly display the information. So, in views/index.ejs add this piece of code.

<!DOCTYPE html>
<html>
  <head>
    <title><%= weather.request.query %> — <%= title %></title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-gray-300 flex items-center content-center h-screen">
    <div class="max-w-lg mx-auto p-4 bg-white shadow-xl rounded-lg text-center">
      <div class="bg-blue-100 shadow rounded-lg p-10">
        <h1 class="text-xl font-bold pt-4">
          <%= weather.location.name %>
        </h1>
        <span><%= weather.location.country %></span>
        <h2 class="text-6xl py-8">
          <%= weather.current.temperature %>&deg;C
        </h2>
        <span><%= weather.current.weather_descriptions[0] %></span>
      </div>
    </div>
  </body>
</html>

From the code above, you can see that we are using Tailwind CSS, so, our app is already styled by default.
The next thing to do is create a .env file. This is an enviroment file that we can load custom variables from without committing them to code. To get Node.js to respect this file, at the top of app.js add this line:

// register environment variables
require("dotenv").config();

Now, on process.env we have access to variables we define in our .env file. So, remember those API keys you got from Ipstack and WeatherStack? You can now place them in the .env file like this:

WEATHER_KEY=5cd59800593b16d557089d0a17cc75bc
LOCATION_KEY=08c58c184ea64dd85605324883d888f2

Make sure to replace the API keys with the proper API keys. Then, in app.js, let's replace the default router with a route to the domain root, like this:

app.get("/", async (req, res, next) => {
  // ...
});

Then, in the router above, we get the users IP address which we'll then feed to the Ipstack API using node-fetch, that way, we can know our users current location.

app.get("/", async (req, res, next) => {
  const locKey = process.env.LOCATION_KEY;
  const locResponse = await fetch(
    `http://api.ipstack.com/${req.ip}?access_key=${locKey}`
  );
  const location = await locResponse.json();
});

With the response from Ipstack, we pass the users city to Weatherstack, which will then return a weather report for the current city.

app.get("/", async (req, res, next) => {
  // ...

  // weather request
  const weatherKey = process.env.WEATHER_KEY;
  const response = await fetch(
    `http://api.weatherstack.com/current?access_key=${weatherKey}&query=${location.city}`
  );
  const weather = await response.json();
});

We now have the weather report for the current user location, we can then feed this data to our views/index.ejs file by doing:

app.get("/", async (req, res, next) => {
  // ....
  res.render("index", { title: "Weather app", weather });
});

If you now run yarn start or npm start and headover to localhost:3000, you should see something like this.

Quick Gotcha

If you plan on deploying this app, make sure to let express know to allow proxy IP, that way if you're using a web server like Nginx, you get the users actual IP address instead of 127.0.0.1. To do that, just add this line after your express declaration:

app.set("trust proxy", true);

Thank you for visiting us, Share with your friends Have a great day.

How To Installing WordPress on DigitalOcean

2020-03-28T17:07:00.002+06:00

In this following tutorial i will show you How install Wordpress On DigitalOcean With One Click, Wordpress power 36% of the web and has been a staple in the blogging and website industry for a while now.

Wordpress is a fantastic tool that has come a long way. You can use it to:

Power your website
Use as a Headless CMS via REST API

We'll talk more on the uses of WordPress in other articles. For this article, we'll focus on installing WordPress on DigitalOcean.

Installing WordPress on DigitalOcean

DigitalOcean has a Marketplace where there are applications that we can deploy with 1-click.

There are popular tools we can install quickly like WordPress, Ghost CMS, Strapi, Node, and more.

Using the WordPress DigitalOcean 1-Click

We can find the WordPress 1-click installation on the DigitalOcean Marketplace: marketplace.digitalocean.com/apps/wordpress
The installation instructions on this page are good to read through. We'll be following along with this and also bringing in our own screenshots for our walkthrough.

Create WordPress Droplet button a click. We are taken to our DigitalOcean dashboard where we can configure and create a new droplet.

Let's keep the standard setup with the $40 droplet. You can change this based on your site traffic and needs. You could use a smaller droplet while getting your project off the ground and then resize it later.

Be sure to pick the location closest to your customers.

Another important part of the setup to focus on is the SSH keys. This is how you will login to your newly created droplet.

You'll be taken back to your dashboard where you can see your new droplet being created!

Notice that I have a few domains sitting in my DigitalOcean account. A domain is required to setup the WordPress install.

What comes with this 1-Click DigitalOcean WordPress install?

This install does a few things out of the box for us. It's convenient since we won't have to install a lot of this ourselves:

Enables the UFW firewall to allow only SSH (port 22, rate limited), HTTP (port 80), and HTTPS (port 443) access.
Sets the MySQL root password, runs mysql_secure_installation, and creates a wordpress user with the necessary permissions. Note, the Droplet root user will not be prompted for the MySQL password.
Sets up the debian-sys-maint user in MySQL so the system’s init scripts for MySQL will work without requiring the MySQL root user password.
Creates the initial WordPress configuration file to set up salt keys and allow the WordPress instance to connect to the database.
Disables XML-RPC to help prevent DDoS and other brute force attacks.
Modifies some of PHP’s settings to increase the maximum filesize and execution time.
Enables the Apache rewrite module so the WordPress permalink feature will work.
Configures Apache with UseCanonicalName On to mitigate CVE-2017-8295.You need a fully qualified domain name (FQDN) to use this One-Click, which you can purchase from any domain registrar. You do not have to manage your domain with DigitalOcean DNS.

Setting Up WordPress

Now that our droplet is setup, we need to SSH into it so that we can finish our WordPress installation. Let's SSH into our droplet:

ssh root@use_your_droplet_ip

Once we SSH into the droplet, we can start the setup:

A domain is the first thing required by our new WordPress setup. We can add a domain and then we will make sure that domain is pointed towards our new droplet. I've added one of my old domains here: angularmachine.com. We've also set up our:

email
username
password
blog title

Make sure to run the following after all this is done so that the new setup will be loaded.

systemctl reload apache2

LetsEncrypt and Making WordPress HTTPS

Next up, we will be prompted to install LetsEncrypt and HTTPS for this domain.

The first thing we need to do is make sure that our domain is pointed at this new droplet. We'll go back into our dashboard, under networking and create the following A records.

@    use_your_droplet_ip
www  use_your_droplet_ip

Go back to your installation and let's start the LetsEncrypt setup. Note that it may take a couple minutes for the DNS changes to take place. Go through the setup and tell LetsEncrypt that it will need to work for both the main domain and the www domain.

We can make all site traffic be HTTPS:

Now your site is live!

You can login to your admin dashboard at https://your-site.com/wp-admin.

Conclusion

We have a WordPress install up and running quickly with DigitalOcean's 1-click apps. You can now use this WordPress site as your main site or use it as a Headless CMS and pair it with a frontend tool like Gatsby.
No matter what you do with your site, you will always have control of the content and database since it is hosted on your own droplet.

Thank you for visiting us.!

How to build a working Bootstrap contact form

2020-03-28T13:46:00.000+06:00

In this tutorial i will show you how to make beautiful bootsrap contact form with php and with validation from, here is the demo and the tutorial for createing a working contact from with bootsrap and php ajax background validation to make your from more attractive.

So Let's get started tutorial how to build a php ajax contact from with validation and with here is the demo, you can see the demo by the clicking on the showing links blow given, click on the demo link.

Demo

Download

Note: I updated this tutorial to Bootstrap 4 already but no worries if you are still using Bootstrap 3 in your project. Bootstrap 3 version is also part of the download.

HTML template

Let's start with the main HTML layout of our contact form page.
There should not be anything tricky for you, so just a few words about it:

In the head, we include the Bootstrap stylesheet, Lato from Google fonts, and a local custom.css stylesheet.
before the <body> closing tag we include jQuery, Bootstrap scripts, Bootstrap validator and local contact.js file which will handle AJAX sending of the form
for Bootstrap, jQuery and a Font I used their CDN versions. If you test the scripts without an internet connection, don't forget to include their local versions.

<html>
    <head>
        <title>Contact Form Tutorial by Saikothouse</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
        <link href='custom.css' rel='stylesheet' type='text/css'>
    </head>
    <body>

        <div class="container">

            <div class="row">

                <div class="col-xl-8 offset-xl-2 py-5">

                    <h1>Contact form Tutorial from <a href="http://saikothouse.blogspot.com">Saikothouse</a></h1>

                    <p class="lead">This is a demo for our tutorial dedicated to crafting working Bootstrap contact form with PHP and AJAX background.</p>
                    <p class="lead">This file uses PHPMailer to send the emails.</p>


                    <form id="contact-form" method="post" action="contact-2.php" role="form">

                        <div class="messages"></div>

                        <div class="controls">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="form_name">Firstname *</label>
                                        <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="form_lastname">Lastname *</label>
                                        <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="form_email">Email *</label>
                                        <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="form_phone">Phone</label>
                                        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="form_message">Message *</label>
                                        <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <input type="submit" class="btn btn-success btn-send" value="Send message">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <p class="text-muted"><strong>*</strong> These fields are required. Contact form template by <a href="https://saikothouse.blogspot.com/2020/03/free-bootstrap-contact-form-with-php.html" target="_blank">Saikothouse</a>.</p>
                                </div>
                            </div>
                        </div>

                    </form>

                </div><!-- /.8 -->

            </div> <!-- /.row-->

        </div> <!-- /.container-->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
        <script src="contact-2.js"></script>

    </body>
</html>

HTML code of the Contact form

As we have the main layout ready, we can replace the <form></form> in our HTML code with our fancy Bootstrap Contact form itself.
At the end form should look like this:

<form id="contact-form" method="post" action="contact.php" role="form">

    <div class="messages"></div>

    <div class="controls">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_name">Firstname *</label>
                    <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_lastname">Lastname *</label>
                    <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_email">Email *</label>
                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_need">Please specify your need *</label>
                    <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
                        <option value=""></option>
                        <option value="Request quotation">Request quotation</option>
                        <option value="Request order status">Request order status</option>
                        <option value="Request copy of an invoice">Request copy of an invoice</option>
                        <option value="Other">Other</option>
                    </select>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="form_message">Message *</label>
                    <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Send message">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted">
                    <strong>*</strong> These fields are required. Contact form template by
                    <a href="https://saikothouse.blogspot.com" target="_blank">Saikothouse</a>.</p>
            </div>
        </div>
    </div>

</form>

Well, this looks a bit more interesting already, so let's have a look at all the pieces of the puzzle now:

We will send the contact form values via POST to the PHP script called contact.php. As there could be more forms on the page (search etc.), we mark our form with #contact-form id to address it correctly in JavaScript later on. There is also empty div .messages that will serve us to display the success or error message after sending the form via AJAX.
Standard Bootstrap forms markup is used - rows, columns, form groups. Form groups are Bootstrap helpers that take care of the appropriate vertical spacing in the form.
Do not forget to properly assign labels for the fields using their for attribute. This should contain the id of the form element it refers to.
For the validation of the fields, we will be using the great Bootsrap Validation Validation rules are specified on form inputs via the standard HTML5 attributes, in our case these are required and type="email".
We will be using custom error messages for each field, passed to the script in the data-error attribute.
To display the possible errors, there is a <div class="help-block with-errors"></div> block added to each form-group
Also, note type="email" and type="tel" inputs that will enhance the user experience, especially for users using a mobile device.

This should basically do for the HTML part of the form and we can move on to the PHP script.

Do not forget to download and include the Bootstrap validator JavaScript files if you are writing the code yourself and not using the CDN version Bootstrap validator Download them from here.

PHP script

The PHP script that will handle the email sending is located in the contact.php file.
In the first part of the script, we configure basic variables we will need. These are:

$from - the email address that will be in the From field of the email. Important: To avoid being marked as spam or even to be able to send it from your web host, use an existing email on your domain. If you will be using the form on mygreatsite.com, use 'info@mygreatsite.com' in this variable.
$sendTo - the email address that will receive the email with the output of the form. Can be your personal address or can be same as the address as in $from variable. Make sure this email exists.
$subject - the subject of the email
$fields - an array of form control names and their English counterparts. If we have input called name <input name="name">, we can call it in our email e.g. Customer Name like this: 'name' => 'Customer Name'
$okMessage - the message text displayed on the web page when the message is successfully sent
$errorMessage - the text of the message displayed in case of an error

We will wrap the whole code block in the try/catch block which will catch all the possible errors.
The code that prepares and sends the email based on the form values works as follows:

if the POST array where the form values are stored is not empty, continue. Otherwise, if (count($_POST) == 0), throw an error message
Then, we start building the email message content in $emailText variable.
We iterate through the $_POST ( the array containing all the values sent through the POST request).
If we find out that the key of the item from $_POST array also exists in our $fields array, we include it to the text of the message in $emailText.
We send the email via PHP internal mail() function. We add some important headers to the email using the $headers array (encoding, from header, reply to, etc.)
We create $responseArray variable to be sent as a JSON response back to our index.html. The $responseArray will be handled by our JavaScript function and displayed as a Bootstrap alert box.
If the request came via AJAX (you check this in PHP using the condition if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')) , we send the JSON response. If not, we simply display the message (this should be a rare case - e.g. for users with disabled JavaSript)

<?php
/*
 *  CONFIGURE EVERYTHING HERE
 */

// an email address that will be in the From field of the email.
$from = 'Demo contact form <demo@domain.com>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <demo@domain.com>';

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); 

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

/*
 *  LET'S DO THE SENDING
 */

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try
{

    if(count($_POST) == 0) throw new \Exception('Form is empty');
            
    $emailText = "You have a new message from your contact form\n=============================\n";

    foreach ($_POST as $key => $value) {
        // If the field exists in the $fields array, include it in the email 
        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

    // All the neccessary headers for the email.
    $headers = array('Content-Type: text/plain; charset="UTF-8";',
        'From: ' . $from,
        'Reply-To: ' . $from,
        'Return-Path: ' . $from,
    );
    
    // Send email
    mail($sendTo, $subject, $emailText, implode("\n", $headers));

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}


// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
}
// else just display the message
else {
    echo $responseArray['message'];
}

Technical requirements for the PHP are:

PHP >= 5.3
email server setup

Local testing and usage: If you are testing the contact form on your computer, the PHP script and whole process should work but you will not receive the email to your inbox. To be able to receive the emails, you will need to upload the script to your webhost.

A little bit of JavaScript

The JavaScript part of this tutorial will handle the validation of the form and its sending via AJAX. We will save it to contact.js.
First, we will run the validator script on our contact form.
Then, we will add some JavaScript that will help us with the submitting of the form via AJAX request.

It works like this:

When the form with the #contact-form id is submitted, we make the POST request to the contact.php script.
On request's success, we work with the JSON object that is returned by the PHP script. The object has only two properties - type and message
We use type and message to construct the message visible for the user - in case of error we display alert-danger, in case of success we display alert-success
We display the message, reset form inputs and return false; to prevent the usual form submitting

$(function () {

    // init the validator
    // validator files are included in the download package
    // otherwise download from http://1000hz.github.io/bootstrap-validator

    $('#contact-form').validator();


    // when the form is submitted
    $('#contact-form').on('submit', function (e) {

        // if the validator does not prevent form submit
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            // POST values in the background the the script URL
            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    // data = JSON object that contact.php returns

                    // we recieve the type of the message: success x danger and apply it to the 
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    // let's compose Bootstrap alert box HTML
                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    
                    // If we have messageAlert and messageText
                    if (messageAlert && messageText) {
                        // inject the alert to .messages div in our form
                        $('#contact-form').find('.messages').html(alertBox);
                        // empty the form
                        $('#contact-form')[0].reset();
                    }
                }
            });
            return false;
        }
    })
});

Wrapping Up

So, that's all for today. You should have a great contact form working and ready to be implemented on your website.

Update 5/5/2017: Further modifications of our Bootstrap contact form

This article is one of the most read articles on Bootstrapious and has helped, based on your feedback, a lot of people so far.
I usually update my articles with small fixes only but I decided to give this one a bit of a special care. Today, I would like to show you some more modifications that can take the functionalities of the form a bit further. Many of them are based on your comments or questions. I hope you will find it useful.

PHPMailer

In the following upgrades (#1 and #2), we will replace the standard and basic PHP mail() function by a complex email-sending library PHPMailer
There is a PHPMailer package included in the download but I suggest that you download the actual release from its PHPMailer. (This article uses PHPMailer 5, if you would be using the latest PHPMailer 6, some code changes might be necessary).
Apart from including PHPMailer autoload file, we will need to make few changes to our configuration part of the PHP script.

<?php
/*
THIS FILE USES PHPMAILER INSTEAD OF THE PHP MAIL() FUNCTION
*/

require 'PHPMailer-master/PHPMailerAutoload.php';

/*
*  CONFIGURE EVERYTHING HERE
*/

// an email address that will be in the From field of the email.
$fromEmail = 'demo@domain.com';
$fromName = 'Demo contact form';

// an email address that will receive the email with the output of the form
$sendToEmail = 'demo@domain.com';
$sendToName = 'Demo contact form';

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

You can notice that we had to replace $from and $sendTo variables by a pair of values $fromName and $fromEmail. The reason is that we will have to pass name and email separately to the PHPMailer.
Now, we have everything ready for a first tweak of our form.

Tweak #1 Sending HTML emails

You can send HTML emails with the mail() function too but it is not ideal solution as you cannot easily create a plain-text part of the message. We are going to use the PHPMailer instead.
First, we will compose the HTML email body.
Basically, it is done the same way as in the plain-text version. We only add few more tags like a heading, paragraph with a signature and we will output the form variables into a <table> element.

$emailTextHtml = "<h1>You have a new message from your contact form</h1><hr>";
$emailTextHtml .= "<table>";

foreach ($_POST as $key => $value) {
    // If the field exists in the $fields array, include it in the email
    if (isset($fields[$key])) {
        $emailTextHtml .= "<tr><th>$fields[$key]</th><td>$value</td></tr>";
    }
}
$emailTextHtml .= "</table><hr>";
$emailTextHtml .= "<p>Have a nice day,<br>Best,<br>Ondrej</p>";

Then, we will create an instance of the PHPMailer class in a $mail variable.
We will set the from address for the email $mail->setFrom() and a recepient of the email by $mail->addAddress() too.
Both functions accept two parameters. First one is an email address (obligatory parameter) and the second one is a name of the sender/recepient (optional).

$mail = new PHPMailer;

$mail->setFrom($fromEmail, $fromName);
$mail->addAddress($sendToEmail, $sendToName); // you can add more addresses by simply adding another line with $mail->addAddress();
$mail->addReplyTo($from);

Then, we simply tell PHPMailer that we will be sending an HTML email by $mail->isHTML(true);. After that, we just need to pass the $emailText we have pregenerated to a $mail->msgHTML() function. This function will automatically create a plain-text version of the email too. Perfect, right?

$mail->isHTML(true);

$mail->Subject = $subject;
$mail->msgHTML($emailTextHtml); // this will also create a plain-text version of the HTML email, very handy

Last step we need to do, is to simply call $mail->send(). We also monitor its output and when it returns FALSE (!$mail->send()), we throw an exception.

if(!$mail->send()) {
    throw new \Exception('I could not send the email.' . $mail->ErrorInfo);
}

This tweak is also included in the download package as contact-2.php.

Tweak #2 Sending emails via SMTP

I usually send emails from the same server but there can be situations when you would prefer the email to be sent from a different email server (your own email account, your another domain or your gmail). In this part, I will show you how to send it easily.
We will be using PHPMailer again.
First, we will add a new section to the configuration part of contact.php. There will be 3 new variables:

$smtpHost (usually something line smtp.yourdomain.com; for gmail it is smtp.gmail.com)
$smtpUsername (usually your email)
$smtpPassword (usually your email password).

// smtp credentials and server

$smtpHost = 'smtp.domain.com';
$smtpUsername = 'hello@domain.com';
$smtpPassword = 'PASSWORD';

Then, we just need to initialize SMTP sending by this code snippet. Usually, this works nicely with a majority of web hosting providers.

$mail = new PHPMailer;

... - set from, recipient, message...

$mail->isSMTP();

//Enable SMTP debugging
// 0 = off (for production use)
// 1 = client messages
// 2 = client and server messages
$mail->SMTPDebug = 0;
$mail->Debugoutput = 'html';

//Set the hostname of the mail server
// use
// $mail->Host = gethostbyname('smtp.gmail.com');
// if your network does not support SMTP over IPv6
$mail->Host = gethostbyname($smtpHost);

//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
$mail->Port = 587;

//Set the encryption system to use - ssl (deprecated) or tls
$mail->SMTPSecure = 'tls';

//Whether to use SMTP authentication
$mail->SMTPAuth = true;

//Username to use for SMTP authentication - use full email address for gmail
//We have configured this variable in the config section
$mail->Username = $smtpHost;

//Password to use for SMTP authentication
//We have configured this variable in the config section
$mail->Password = $smtpPassword;


if(!$mail->send()) {
    throw new \Exception('I could not send the email.' . $mail->ErrorInfo);
}

Things can get a bit problematic with Gmail and its high-security measures. The script should work fine with PHP 5.5+, with lower version you might not get it working at all.

If you are having troubles with getting Gmail to work with PHPMailer, have a look at PHPMailer's troubleshooting guide or have a look at a complete example of their Gmail implementation.
This tweak is also included in the download package as contact-3.php.

Tweak #3 A bunch of smaller tweaks, actually

3.1. Adding more recepients

If you are using mail() PHP function: Just duplicate the row with mail() function and add a new email address.

mail($sendTo, $subject, $emailText, implode("\n", $headers));
mail('new@emailaddress.com', $subject, $emailText, implode("\n", $headers));

If you are using PHPMailer: Call $mail->addToAdress() more times:

$mail->addAddress($sendToEmail, $sendToName);
$mail->addAddress('newemail@domain.com', 'Johnny');

3.2. Composing your own email message

I am using the iteration through $_POST to compose the email message to simplify things a bit. But it is not a problem to compose your own message easily.
Plain Text message

Replace this code snippet

$emailText = "You have a new message from your contact form\n=============================\n";

foreach ($_POST as $key => $value) {
    // If the field exists in the $fields array, include it in the email 
    if (isset($fields[$key])) {
        $emailText .= "$fields[$key]: $value\n";
    }
}

By something similar to this:

$emailText = "You have a new message from your contact form\n
=============================\n
Some more text\n
Name: $_POST[name]\n
Message: $_POST[message]\n
Add more form fields or custom text....";

Note, that we are accessing the values directly in the $_POST array and also that you need to use \n for new lines.
HTML Message
If you are using the HTML message with the PHPMailer, the solution would be replacing this:

$emailTextHtml = "<h1>You have a new message from your contact form</h1><hr>";
$emailTextHtml .= "<table>";

foreach ($_POST as $key => $value) {
    // If the field exists in the $fields array, include it in the email
    if (isset($fields[$key])) {
        $emailTextHtml .= "<tr><th>$fields[$key]</th><td>$value</td></tr>";
    }
}
$emailTextHtml .= "</table><hr>";
$emailTextHtml .= "<p>Have a nice day,<br>Best,<br>Ondrej</p>";

by something similar to this:

$emailTextHtml = "<style type='text/css'>body {font-family: Roboto, sans-serif; font-size: 13px; }</style>"
$emailTextHtml .= "<body>";
$emailTextHtml .= "<h1>You have a new message from your contact form</h1><hr>";
$emailTextHtml .= "<table>";
$emailTextHtml .= "<tr><th>Some custom message</th><td>$_POST[name]</td>";
$emailTextHtml .= "<tr><th>Some custom stuff</th><td>$_POST[surname]</td>";
$emailTextHtml .= "<tr><th>...</th><td>....</td>";
$emailTextHtml .= "</table>";
$emailTextHtml .= "<p>Have a nice day,<br>Best,<br>Ondrej</p>";
$emailTextHtml .= "</body>";

As you can see, I also added some basic styling to the <style> element. I will not go to the details too much though, as styling emails is a whole new chapter.

3.3 Redirect user to a different page, do not use AJAX

Maybe you will not need the AJAX form submit in the background but you would welcome a possibility to redirect the user to a different page. This is a often forgotten best practise, to redirect after the form is submitted.
We all know annoying browser questions that you are about to send a form data again, etc., that happen if you do not redirect the user after submitting a form.
Also like this, you eliminate the possibility to receive the form more than once.
The solution to this would be following:
1. Remove following snippet from contact.js.

// when the form is submitted
// delete ALL OF THESE
$('#contact-form').on('submit', function (e) {
     ....
})

2. Then, at the end of your contact.php, replace following snippet

// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
   ...
}
// else just display the message
else {
   ...
}

by something similar to:

if ($responseArray['type'] == 'success') {
    // success redirect

    header('Location: http://www.example.com/success.html');
}
else {
    //error redirect
    header('Location: http://www.example.com/error.html');
}

Wrapping Up #2

This is really it. I hope you have learned something new today and this tutorial has helped you on your web design journey.
Thanks for reading.

Free Bootstrap Contact Form With PHP

2020-03-28T12:26:00.000+06:00

PHP Bootsrap Contact Form With Validation Free

Hay guys, today i will share a tips How make a beautiful contact form with bootsrap and php. Here is the best tips about bootsrap php contact form with php validation from, you can download the from form our site and use it for your blog or websites contact from page.

Download this php contact form With bootsrap and php

Download

Usage:

Press the download button above. The zip file contains all the code you need for the form.
Unzip the file contact-form-bootstrap-php
Open the file named "handler.php"
Look for sendEmailTo add the email addresses to receive the form submissions.
Upload the whole folder to your website
Open the formpage.html in your browser and test

The HTML Code


<div class="row">
    <div class="col-md-6 col-md-offset-3" id="form_container">
        <h2>Contact Us</h2>
        <p>
           Please send your message below. We will get back to you at the earliest!
        </p>
        <form role="form" method="post" id="reused_form">
            
            <div class="row">
                <div class="col-sm-12 form-group">
                    <label for="message">
                        Message:</label>
                    <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 form-group">
                    <label for="name">
                        Your Name:</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="col-sm-6 form-group">
                    <label for="email">
                        Email:</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
            </div>
            
                        
            <div class="row">
                <div class="col-sm-12 form-group">
                    <button type="submit" class="btn btn-lg btn-default pull-right" >Send →</button>
                </div>
            </div>

        </form>
        <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Posted your message successfully!</h3>
        </div>
        <div id="error_message" 
                style="width:100%; height:100%; display:none; ">
                    <h3>Error</h3>
                    Sorry there was an error sending your form.

        </div>          
    </div>
</div>

CSS Styling

The following extra CSS styling is used to make the form look better


<link rel="stylesheet" href="form.css" >

jQuery Form submission handling


<script>
$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' ); 
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
            
        }//else
    }

 $('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.prop('orig_label',$btn.text());
            $btn.text('Sending ...');
        });
        

                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 
            });        
        
      }); 
});
</script>

Form Validations

HTML5 validations are used. For example, the Name and Email fields have 'required' validation and the email field is of input type 'email'.


  <input type="email" class="form-control" id="email" name="email" required>

Similarly, the message field (textarea) allows a max length of 6000 characters


<textarea  name="Message"  maxlength="6000" required></textarea>

using the built-in HTML5 validations has the advantage that the browser itself shows the error message.
You can customize those validations to fit your needs

Server Side Handling

Every form requires a server side script to collect the form data and do the processing like send emails, save to database etc. This form comes with a PHP script to handle the form submissions. PHP is widely supported server side scripting platform.
When the form is submitted, the javascript form submission event handler above collects the form data and sends it to the server side script.
The serverside script entry point is handler.php (see in your downloaded zip file). The script uses a library called FormHandler, which inturn, uses other libraries.
Here is the code of the handler.php


<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )

 */
require_once './vendor/autoload.php';

use FormGuide\Handlx\FormHandler;


$pp = new FormHandler(); 

$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);




$pp->sendEmailTo('someone@gmail.com'); // ← Your email here

echo $pp->process($_POST);

You have to edit the handler.php and change "someone@gmail.com" to your email address. If you want to add a second or third email address, you can do so like this:


 $fh->sendEmailTo(['someone@gmail.com', 'someone.else@gmail.com']);

Server Side Form Validations

Server side form validations are essential for any form. You can't trust data sent to a form processing script.
For this form, the server side form validations are done using this PHPFormValidation library. See the documentation to add or update the validations.

Customizations

Edit the handler.php and change abc@cdef to your email address. Remove the second email address, if not required.

Best Blogger Template For Adsense Approval 2020 • Top Best • SEO Friendly

2020-03-28T01:34:00.001+06:00

Download Best Blogger Template For Adsense Approval Free

Hey guys, Todya i will share some of the best blogger template that actually made clear and clean design and best SEO Friendly. And you can get them for free licence use.

There are some of the best blogger template that you can grab them FREE. Best SEO boost, Best adsense ready blogger template free download.

Business adsense ready blogger templates. adsense optimized blogger blogspot template. best adsense friendly blogger templates for free.

So if you are a blogger and you are getting a good amount of traffic on your website then check out our huge collection of best quality Ads Ready Blogger Templates, developed by some of the best and talented blogger template designers on the internet. Here at GooyaabiTemplates, We have templates from SoraTemplates, TemplatesYard, Way2Themes, ThemeXpose and many more, where SoraTemplates has best among others, You can choose options between, color, topic, niche, layout, columns, sidebar, etc. So go ahead and check out some of the best and outstanding collection of Ads Ready Blogger Themes.

Maxseo

Professionally designed super SEO friendly and optimized blogger theme. With its specially coded structure, it helps you to reach higher search engine ranking positions in no time and with no efforts. This amazing theme is equipped with great features and functionality. Made with perfection and up to the mark quality, this beautiful looking theme will help you to make any kind of blog. It can be used to create a blog for tech, news, authority, movie, reviews, food, recipe, video sharing site, DIY, HowTo and many more. This is a fully responsive and very fast loading theme, especially focused on the mobile-based audiences so that you can capture most out it. This theme has some special features and SEO functionality built-in, to provide you better user experience, it is made according to google latest schema update and has future proof codes. Seo Ready, Ads Ready, Magazine, Responsive, Fast Loading, Browser Compatibility, Drop Down Menu, Adapted From WordPress, News, Technology, 3 Columns Footer, 1 Right Sidebar, Social Bookmark Ready, Multi Colors, Post Thumbnails, Breadcrumb Navigation Ready, Elegant, 2 Columns, Red, White, Black, Blue, Page Navigation Menu, AMP, Google.

Live Demo | Download

SuperFast

Amazingly designed and well-optimized blogging blogger theme, with responsive design and highly SEO optimized coding structure, it is one of the fastest loading Blogspot template in our directory. Being a responsive theme it fits any screen size or device type of the user with ease. This template is ideal for business, corporate, blog, personal website or any other type of site with it. Best suitable for blogs like niche, food, review, howTo, movie, critics, DIY, tutorial blogs, institutions, exams, banking, etc. Built with lightweight codes and based on the CSS platform with less amount of jquery, it becomes an ideal choice for blogs that are focused on smartphones and feature phones. Being a fast loading Blogspot theme, it doesn’t compromise with anything and comes with almost every necessary feature. This theme supports blogger template customizer and most of the colors can be adjustable through settings, so no need to edit codes. Seo Ready, Browser Compatibility, Responsive, Adapted From WordPress, Social Bookmark Ready, Post Thumbnails, Ads Ready, Drop Down Menu, White, Black, Blue, Fashion, Elegant, Simple, 2 Columns, WhatsApp Sharing, Magazine, News, Breadcrumb Navigation Ready, Business, Blogger Layout Version 3.0, 1 Right Sidebar, Right Sidebar, 2 Columns, 3 Columns Footer, AMP, Google, Fast Loading.

Download | Live Demo

Enfold

Professionally designed fast loading magazine blogger theme, with built-in useful widgets and quality features. This free Blogspot template is beautifully designed and has many features such as fully responsive, SEO optimized fast loading, various featured post layout, etc. Being a responsive theme it can adjust its width according to user’s screen size, whether your blog’s visitor is using desktop, laptop, tablet or smartphone, this Blogspot theme will look beautiful on every aspect ratio. Best Suitable for blog magazine and news this blogger template can also be used on a niche like a tech, travel, food, newspaper, viral blogs, authority blogging, review, movie, howTo, sports, niche, authority, schools, institutions, etc.

Live Demo | Download

Schema

Very simple micro-blogging blogger theme which is very targetted for a niche website. It is very unique elegant and easy to customize blogger theme, suitable for targetted blogs. This Blogspot template is very fully responsive as well as super-fast loading and one of the best SEO optimized Blogspot theme which is available on our website. It is easy and simple to customize and has a professional layout, which looks outstanding in every browser. You can use this template for any microblogging niche like tech, Blogging, Events, Authority, Blogging Resources, News, Latest Trends, etc. This Responsive Blogger Templates has been optimized with the latest google trends and technologies and supports blogger’s new generation commenting system. It has been optimized according to google latest search engine algorithms so that it will perform outstandingly in search result ranking and will boost your blog’s overall traffic count. This theme is fully loaded with a stylish and sleek color combination of white and black and blue, all of these colors are customizable through the blogger’s template customizer from the layout section. Seo Ready, Browser Compatibility, Responsive, Adapted From WordPress, Social Bookmark Ready, Post Thumbnails, Ads Ready, Drop Down Menu, White, Black, Blue, Fashion, Elegant, Simple, 2 Columns, WhatsApp Sharing, Magazine, News, Breadcrumb Navigation Ready, Business, Blogger Layout Version 3.0, 1 Right Sidebar, Right Sidebar, 2 Columns, 3 Columns Footer, AMP, Google.

Live Demo | Download

SMag

Latest blogger template developed by SoraTemplates for users of Blogspot Community who are looking for a unique and stylish template to use on their magazine-style blog. It is by far the most stylish, responsive, and, elegant theme that you can use to redesign your blog in 2020. This template is perfect for all users who have blogs in the niche including tech, news, photography, digital magazine and more. Don’t miss to try this one out on your blog and give your visitors an excellent feeling of using your website on a completely new design along with setting your blog apart from your competitors to gain more traffic. Simple, Fast Loading, Responsive, Seo Ready, Adapted From WordPress, Ads Ready, Retina Ready, Drop Down Menu, Social Bookmark Ready, Page Navigation Menu, Post Thumbnails, Clean, Browser Compatibility, Red, Black, Yellow, 2 Columns, Elegant, White, Stylish, WhatsApp Sharing, Free Premium, 1 Right Sidebar, Magazine, News, Technology, Blogger, Fashion, AMP, Google, Minimalist, Slideshow.

Live Demo | Download

Malina

This theme has a slight magazine feel in it. With an outstanding responsive layout, this theme fits any screen size of various devices. Whether it’s being displayed on desktop, laptop, tablet, and mobile, it will look beautiful on any aspect ratio. This is an amazing theme that is crafted with perfection and a minimalistic approach that helps you to create your dream designs and style your blog. Mostly suitable for fashion magazine blogs, it also can be used for photography, food, reviews, movies, recipe, sports, makeup, travel OOTD, personal, etc.

Live Demo | Download

Holiday

Loaded with various options and widgets this is fully functional and ready to use the theme. This is a fully responsive theme that looks beautiful on any screen size whether your visitor is using desktop,iMac, laptop, MacBook, tablet, iPad, smartphone, or iPhone, it will suit any aspect ratio. Ideal to create blogs for travel blogs, it is a perfect choice for those bloggers who likes to roam around the world and visit new places. Best suitable for blogs like travel, adventure, OOTD, Fashion, Lifestyle, Personal blog, Diary Entry kind of blogs.

Live Demo | Download

That's all for today, hope you like thous templates. Use this templates for your blogspot blog OR website.

Thank you for visiting us.

How to get Google AdSense Approval for your Blog or Website

2020-03-27T18:45:00.001+06:00

Each and every people in the world wants to monetize their precious time with the help of various resources either offline or online. If we talk about making money online then not a single person deny the fact that Google AdSense program is one of the best resource for earning handsome money from your Blogs, Websites, Mobile sites, Games, YouTube Videos and site search results etc.

Did you know? It was June 18, 2003 when Google launched advertising monetization program named Google AdSense which has now grown to include over 2 million publishers (including Me who earn more then $7 billion US Dollars.

Will now get their AdSense earnings directly into their bank account through EFT payment system which has newly available to them with effect from March, 2014.ll now get their AdSense earnings directly into their bank account through EFT payment system which has newly available to them with effect from March, 2014.

Now, come to the point that how to get Google AdSense Approval for your Blog or websites
Well! This is one of the frequently asked questions by our readers that why their application get rejected for Google AdSense.

Here is the extract of Email received from adsense-noreply@google.com by applicant for the subject – “Your AdSense application status”:-

“Thank you for your interest in Google AdSense. Unfortunately, after reviewing your application, we’re unable to accept you into AdSense at this time.”

“Thank you for your interest in expanding your Google AdSense account to implement ad code on your own website. Unfortunately, after reviewing your application, we’re unable to approve this application for the time being. Your existing AdSense account that allows you to show ads on partner sites is not affected by this disapproval.”

Most of the common reasons/issues for disapproval are:

Site does not comply with Google policies
Site does not comply with the Google AdSense program policies
Insufficient content (as explained in later para)
Site does not adhere to the Webmaster Quality guidelines

If you are one of those applicants whose AdSense application has been rejected again and again then please ask from yourself only one question:-

Why Should Someone visit your Site First?

I am sure you will get your answer and you will get your approved AdSense account thereafter. The good news is that now you will be able to immediate access to your AdSense account once you sign up. That means your website should provide a significant value to the users and it must give them a reason to find it first when searching for topics covered by your website.

How to participate in Google AdSense Program

Actually, there are some basic requirement for eligibility to participate in AdSense online program which has been briefly discussed hereunder:

A) Google Account:

I know that most of you have already Gmail account and if you haven’t then please create a Google account needed to sign in to AdSense. All information regarding acceptance, rejection, payments etc. in relation to AdSense will be mailed to your Gmail account by Google AdSense Team.
You should always be careful while providing your personal details at the time of creating a new Google Account. This is because if you will provide wrong information like Full Name, Age and Address etc. then your application might be rejected by AdSense team.

B) Age Requirement:

In according the AdSense Terms and Conditions applicants must be at least 18 years of age. Thus, if you are not 18 years old then you will not be able to participate in Google AdSense irrespective of satisfying all other conditions.

In that case there is a simple trick that you may provide your parents or guardian name instead of yours at the time of making application (see the procedure below) while signing up for AdSense Program.

C) Blog or Website:

Yes! If you are running your own website then it is OK otherwise you should have to monetize the contents on your Blogger Blogs or Websites. However, if you have more than one blog/site then please provide the address of your best site which comply all conditions mentioned as under.

Website/Blog Ownership:

It is compulsory to have your own site or blog so that you can access the HTML source code to place the AdSense Ad Units code which displays Ads on your site. Otherwise your AdSense account shall not be approved on final review made by AdSense team.
It is not mandatory that you must have a custom domain for your blogger blog but I strongly recommend you to purchase a domain preferably top level domain like aubsp.com, and example.net etc. for your BlogSpot.com blogs.

Websites/Your blog Content

Think as an advertiser’s point of view that why you will go for a site which has not quality contents. Remind one thing that AdSense works by crawling the contents of each and every single webpages on your blog/site.

i) Post Quality: I mean every webpage contain enough textual contents to complete the whole story and topic you are willing to s pread online. This will make happy to your blog readers because they gets complete information and answer for which they have visited your site.

Note that you may not fix the length of any post which results quality contents for Google AdSense. However, I personally opines that an article written within 500-800 words is more than enough instead of writing too short post with just 100-150 words.

ii) Post Quantity: If you want to get one short approval for AdSense program then please make sure you post at least 3-5 posts on weekly basis unless and until your blog/site get approved by AdSense Team.

Google has not specified any magic number of posts to be required for AdSense approval. But, in my opinion if your blog have more than 25 good quality articles then your blog is ready for applying for AdSense.

It is the quality and not the quantity of your blog posts which AdSense team consider at the time of reviewing your blog/site for AdSense approval.

iii) Insufficient content: Your webpages should have sufficient text, I mean to say maximum text with complete sentences and paragraphs, not only headlines. This is because if your site contain mostly images and videos then your application will not be approved.

iii) Original Contents: Your site contents must be original and not a copy paste from other website/blog or anywhere else. Therefore, you should not use copyrighted material in any manner on your site. If you are using any copyrighted textual contents, images, videos etc. then it violate AdSense content policy

iv) Regularly Updated Contents: Suppose someone has posted 50 posts in a single day or week to get approved for AdSense and thereafter not posted a single post within week or even a month.

Thus, please keep updating/posting on your blog on regular basis so that your approved AdSense Account will not disapprove or disable within a short span of time.

3) Website/Blog Age:

To ensure the quality contents and keeping in mind the interest of Google Advertisers, Google AdSense has specified that the Indian and Chinese AdSense Publishers required to have owned their sites for at least 6 months. Accordingly, except India and China, there is no any minimum age obligation for either blogger blog or website to participate in Google AdSense Program.

However, you have to ensure that your website is live and not in a beta mode or under construction phase before you apply for AdSense Program. Thus, placing ad code on a website which is not fully launched or only consist a website template will not get final approval.

BlogSpot.com blog in so many languages. However, AdSense Program is not available for all languages including Adsense Supported Languages
~~HINDI~~(supports w.e.f. Dec 2014), Bengali, Gujarati, Panjabi, Telugu, Afrikaans, Irish, Latin etc. and therefore the primary language of your site must be in the

5) Traffic sources:

Your blog/site traffics must come from the genuine sources. In other words, if you got the visitors through Search Engines, Social media and feed subscribers then it is good for the AdSense approval.
But, if you send bulk SMS, Email with your site links or asked your friends/relatives/students at large to daily visit your blog without any interest then it will impact badly on your site. Further, if your blog is not receiving at least 25-30 unique visitors per day then please wait for some time to get more organic traffics on your site and then apply.

I highly recommended to using Google Analytics and Google Webmaster Tools which help you to understand your blog/site contents, live visitors, unique page views, and traffic sources in dynamic ways.

D) Non-Google ads:

You are free to use any third party advertisements on the same blog or webpage for which you are going to apply AdSense Program. In other words, there is no restriction to display Google Ads on your blog having Ads from Infolinks, BuySellAds, Clicksor, Chitika, Amazon Associates, Media.net etc.
However, you should make sure that your site does not contain many third party advertisements. This is because your site will looks like advertisement based rather contents based and that type of website does not qualify for AdSense.

E) Apply for AdSense Program:

Now, you are ready to Sign up for AdSense Program. There are two-step application approval process under AdSense program.

Sign-up and Place ad units:

Google has now made signing process more faster and easier with effect from Adsense Blog October 8 2015.
So you may Sign-up google adsense account if you want to.

Note that this will not display any Ads on your live webpage rather it shows only blank ad units until your will get fully approved AdSense account. Earlier, you would have to wait for some days or weeks for the preliminary checks to verify the information provided at the time of submitting your AdSense application. And after verification of your information (Your Name, Address and Blog/site URL etc.) , you were able to create your first AdSense Ad Unit.
2) Final Approval: Now, you will get response within 24 hours from specialists of Google AdSense Team regarding the final status of your application after you add the code to your site.
However, this process may takes 1-2 days. Did you know? Previously, the same process was completed after 5-7 days. Finally, you will receive an email letting you know that your AdSense account has been approved. Otherwise, you’ll receive an email on your registered Email ID explaining the disapproval reason and the possible next steps that you can take to get approved account.
Once you got fully activated AdSense account, the Google Ads will appears on your approved website/blog and the red bar across the top of AdSense Account will disappear.
This month (May 2016) one of our client got an approved AdSense account for his 8 months blog. Please let me know, if you have got an approved AdSense account recently. Share your own experiences regarding AdSense account approval.
Please, feel free to ask any questions regarding Google AdSense Program through comments or you may directly Google Adsense Contact Sales of google adsense support team.

That's all for today, hopefully use.

Add JavaScript codes correctly into Blogger blog Template

2020-03-27T15:17:00.001+06:00

Inserting any JavaScript codes into HTML editor of your blog is very tricky. To insert JavaScript codes into blogger template, follow these steps:

Step-1: Login to blogger.com and visit the dashboard of your blog.
Step-2: Now, click on template menu from the left sidebar.
Step-3: From template window, click on Edit HTML.
Step-4: Finally, you have to decide where the JavaScript codes should be inserted. In maximum cases JavaScript codes works fine by adding it within tag.

But, I personally advise you that paste your codes where it will be required and not anywhere as said by any third party. I mean some codes are only useful for a particular static page and therefore it should not be place in the blogger template. To get fast speed of your blog and to prevent rendering unnecessary blocking script resources, you should paste the code in HTML editor of that particular static page itself.
Similarly, if any JavaScript code is necessary for article/post pages then you may insert the script codes within conditional tag as shown below and paste the whole codes just above/before closing

tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Paste Your JavaScript Here for post page
</b:if>

The above conditional tag will help to load the script for your blog posts pages only and therefore the other page like home page, label/index page and static page etc. will be fast. Accordingly, you may apply these conditional tags for rendering your JavaScript codes as per requirements.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- Paste Your JavaScript Here for Static Page -->
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Paste Your JavaScript Here for Homepage -->
</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!-- Paste Your JavaScript Here for 404 Error Page -->
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchLabel'>
<!-- Paste Your JavaScript Here for Label Page -->
</b:if>
</b:if>

Most of queries generally I got for placing AdSense Unit codes into blogger template. So, if you are getting error while inserting AdSense codes then please read separate tutorial specifically deals with creating and adding AdSense Ad code to blog.
There are another error messages you may see while saving your blogger template:
Error parsing XML, line 646, column 15: Attribute name “async” associated with an element type “script” must be followed by the ‘ = ‘ character.

Error parsing XML, line 2119, column 3: The element type “script” must be terminated by the matching end-tag “”
I would strongly refer my free online tool for Encoding and Decoding codes that may solve most of your codes related errors. But if you are facing again problem then please try these guidelines:

If you are using third party JavaScript codes then make sure you have copied entire codes properly. Most of cases I found that they miss either the opening

<script type='text/javascript'> tag or the closing </script>

end-tag or both. As a result of which your all codes will appear on live webpage and shall not work properly.

JavaScript Codes Errors

Sometimes in scripts we use ampersands (&), less-than (<) or greater-than (>) sign, single quote (‘) and double quotes (“) and that results errors like –

Error parsing XML, line 1681, column 18: The content of elements must consist of well-formed character data or markup.

See the following bunch of dummy JavaScript codes for example:

<script type="text/javascript">
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
</script>

In the above codes you may notice the last line that contain (“<“) which results error message. Now, simply we place CDATA markers with comments in this JavaScript codes and it will work fine for blogger HTML documents.

<script type="text/javascript">
//<![CDATA[
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
//]]>
</script>

Thus, we have added

//<![CDATA[ after <script type="text/javascript"> and //]]> just before/above closing </script> tag.

Therefore, you should use any third party (all websites or blogs except blogger) JavaScript codes within this standard frame.

<script type='text/javascript'>
//<![CDATA[

Place your JavaScript codes here

//]]>
</script>

If you have external JavaScript file then find tag in HTML editor of your blogger blog template and paste that file just above tag using the following standard format:

<script src='Your-External-JavaScript-File.js' type='text/javascript'/>

2) Add JavaScript codes within widget of blogger blog

Yes, this is very easy and risk free trick because you may add or remove JavaScript codes into your blog without touching blogger template. Follow these simple process to add JavaScript codes or files within a gadget provided by blogger itself.

Step-1: Go to layout of your blogger blog.
Step-2: Click on Add a Gadget text link where you want to appear the result of that JavaScript codes.
Step-3: Now, scroll down and select HTML/JavaScript (Add third-party functionality or other code to your blog).
Step-4: Finally, insert your JavaScript codes into the content field and save it. If you are facing another problem then please fill free to ask me through making a comment below.

How To Make A Recent Post Widget For Blogger With Thumbnails

2020-03-25T13:21:00.003+06:00

How To Make Recent Post Widget On Blogger Website

Hello, everyone! Today i will share an article about how to create recent post update articles on blogger. In this tutorial we try to make a beautiful recent post widget.
Read also How to make beautiful table on blogger
Blogger have some widget their own, like popular posts, author profile, contact form, blog status, translator and more. But blogger don't have a recent post widget their own, and today we will make it by this tutorial on blogger.

How to make a beautiful recent post widget on blogger

First go to your blogger dashboard, Then go to layout, Then go to sidebar area, Click on add new gadget.

Copy all of the showing codes and pest on blogger template

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0 auto 20px auto;padding:0;transition:all .3s linear}ul.recent_posts_arlina li:last-child{margin:0 auto 10px auto}.recent_posts_arlina .wrapinfo{background:#f5f5f5;display:inline-block;margin:auto;overflow:hidden;z-index:2;position:relative;float:left}ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}.recent_posts_arlina{position:relative;float:left;width:100%;margin:10px 10px 5px 0;padding:0;font-size:.9rem}ul.recent_posts_arlina li a{line-height:normal;position:absolute;color:#fff;font-size:18px!important;left:15px;bottom:15px;right:15px;top:30%;text-align:center;z-index:12}ul.recent_posts_arlina li a:hover{color:#fff;text-decoration:underline}.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}.recent_posts_arlina .wrapinfo:before{content:'';background:rgba(40,40,40,.7);color:#fff;position:absolute;left:0;bottom:0;right:0;top:0;z-index:11;padding:10px;transition:all .3s}.recent_posts_arlina .wrapinfo:hover:before,.recent_posts_arlina:hover .wrapinfo:before{background:rgba(40,40,40,.9)}
ul.recent_posts_arlina li a.url{bottom:0;left:0;right:0;top:initial;font-size:12px!important;padding:5px;background:#f39c12}
@media screen and (max-width:768px){
#HTML50{display:none;margin:0}}
</style>

Add javascript

<script style='text/javascript'>
var numposts=1,showpostthumbnails=!0,displaymore=!0,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

Add this

<script style='text/javascript' src='https://cdn.jsdelivr.net/gh/Indzign/theme@master/recentpostsidebar.js'></script>

And done your widget complete how to make a beautiful recent post widget on blogger website.
Thank you for visiting us.

JavaScript JSON Date Parsing and real Dates

2020-03-22T22:15:00.000+06:00

JSON has become a rather prevalent serialization format in recent years. For Web based applications one could say it’s become the serialization format. It’s used for transport serialization for almost anything REST related nowadays, for configuration management, for storage and data representation in many database formats (NoSql). But yet there’s a minimum of one very annoying problem with JSON: It doesn’t serialize dates. Or more precisely – it serializes dates just fine, it just doesn’t deserialize them.

I’ve talked about this subject some times within the past, but i assumed I’d revisit because it’s one that comes up quite frequently, and since within the interceding years I’ve started employing a more flexible solution than what I previously discussed. during this post I’ll discuss the matter and some workarounds further as small JSON extension library that you just can use to globally parse JSON with proper date conversion with minimal fuss.
The code and tiny support library discussed during this post is abreast of GitHub in my json.date-extensions library, so you'll download and mess around with this yourself. I find this functionality indispensable and use as a part of my very own libraries in barely about every client-side application that uses AJAX.
JSON Dates don't seem to be dates – they're Strings The problem with dates in JSON – and really JavaScript generally – is that JavaScript doesn’t have a date literal. you'll represent strings, numbers, Booleans and even objects, arrays and RegEx expressions with language specific literals, but there’s no equivalent literal representation for dates. Which looks like a rather major omission as long as dates are pretty important in computing and business environments.

So so as to represent dates in JavaScript, JSON uses a selected string format – ISO 8601 – to encode dates as string. There’s no ‘official’ standard for what the date format should seem like, although it’s been more or less set that the JSON Date encoding format should be ISO 8601 as that’s what all the foremost browser native JSON parsers use. Dates are encoded as ISO 8601 strings so treated a bit like an everyday string when the JSON is serialized and deserialized.
You can serialize to the current format, but there’s no direct deserialization back to a initiate it.
A JSON encoded date sounds like this: "2014-01-01T23:28:56.782Z"
The date is represented during a standard and sortable format that represents a UTC time (indicated by the Z). ISO 8601 also supports time zones by replacing the Z with + or – value for the timezone offset: "2014-02-01T09:28:56.321-10:00"
There are other variations of the timezone encoding within the ISO 8601 spec, but the –10:00 format is that the only TZ format that current JSON parsers support. generally it’s best to use the UTC based format (Z) unless you have got a selected need for deciding the zone during which the date was produced (possible only in server side generation).
There are other date formats within the past – namely Microsoft’s MS AJAX style date (/Date(454123112)/) which Microsoft utilized in their original AJAX and REST products (Microsoft AJAX and WCF REST specifically), but which thankfully have disappeared in new frameworks (ASP.NET Web API, Nancy, ServiceStack etc.) in favor of ISO style dates that are now ubiquitous.

How Date Parsing Works with JSON Serializers

To encode a date with JSON you'll just use the quality JSON serializer’s stringify() method:

var date = new Date();
console.log(date); // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time) 
        
var json = JSON.stringify(date);
console.log(json);  // "2014-01-01T23:28:56.782Z"

This produces a JSON encoded string value:
"2014-01-01T23:28:56.782Z"
If you now want to deserialize that JSON date back into a date you’ll find that JSON.parse() doesn’t do the job. If you try:

// JSON encoded date
var json = "\"2014-01-01T23:28:56.782Z\"";

var dateStr = JSON.parse(json);  
console.log(dateStr); // 2014-01-01T23:28:56.782Z

You’ll find that you get back… drum roll… a string in dateStr:
2014-01-01T23:28:56.782Z
No quotes this time – it’s no longer a JSON string, but a string nevertheless. This is because the JSON created is in fact a string and JSON.parse() doesn’t know anything other than that the encoded date value is a string, so that’s what you get back. Fun, ain’t it?

Decoding the Date

The good news – and maybe not very widely known news at that – is that ISO dates can be easily converted into JavaScript dates by use of the flexible JavaScript Date constructor. The date constructor accepts a wide variety of inputs to construct a date, ISO 8601 amongst them.
The following turns the ISO date back into a ‘real’ date:

// JSON encoded date
var json = "\"2014-01-01T23:28:56.782Z\"";

var dateStr = JSON.parse(json);  
console.log(dateStr); // 2014-01-01T23:28:56.782Z
        
var date = new Date(dateStr);
console.log(date);  // Wed Jan 01 2014 13:28:56 GMT-1000 (Hawaiian Standard Time)

Note that the string that is passed to new Date() has to be a plain string, not a JSON string so make sure if there are quote wrappers around a JSON string to remove the quotes.
This works nicely for single dates, but unfortunately it’s a bit of a pain if you get back complex objects that contain dates: An object with a few date fields or an array containing objects with date fields requires that you to fix up each of the values at the point of use. In an application means you’d have to manually replace dates every time you use them or do any sort of date math.
It works, but you have to be careful in your usage of these pseudo date strings, always remembering that they have to be converted manually when you use them.

JSON Parser Extensions

One way around this date problem is to extend the JSON parser to automatically convert the ISO string dates into real JavaScript dates.
The JSON.parse() method supports an optional filter function parameter that can be passed to transform values as they are parsed. We can check each of the key value pairs for each property as its parsed and look for strings that look like dates and automatically transform them into dates.
It’s only a short bit of code:

if (window.JSON && !window.JSON.dateParser) {
    var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
    var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
   
    JSON.dateParser = function (key, value) {
        if (typeof value === 'string') {
            var a = reISO.exec(value);
            if (a)
                return new Date(value);
            a = reMsAjax.exec(value);
            if (a) {
                var b = a[1].split(/[-+,.]/);
                return new Date(b[0] ? +b[0] : 0 - +b[1]);
            }
        }
        return value;
    };

}

This parser also handles MS AJAX dates. If you don’t care about that you can remove that bit of code making the date parser a bit faster.
Using this date parser you can now add that to the call to JSON.parse():

var date = JSON.parse(json,JSON.dateParser);  
console.log(date);

which produces a JavaScript date.
This also works on complex objects so if you have and object like this:

{   
    "id": "312saAs1",    
    "name": "Jimmy Roe",
    "entered": "2014-01-01T23:28:56.782Z",
    "updated": "2014-01-01T23:28:56.782Z"
}

both the entered and updated properties will be parsed to dates. If you have an array of these objects – all the dates are still converted. This much better but still limited in that you have to manually call JSON.parse() in order to apply the filter function.

Taking over JSON.parse()

This works fine if you manually parse the JSON yourself, but it’s unlikely that you do your own JSON parsing in your applications. Most likely JSON is parsed for you by a library of some sort like jQuery, or AngularJs or any other framework. In that case you have no control over the JSON parsing because the parsing happens deeply buried inside of a framework. jQuery and other libraries allow overriding their processing as well, but you don’t really want to do this for every application/page and each framework you use.
The common denominator here is the JSON parser itself. What if we can just take over the parser? What if we could – at the beginning of the page perhaps – override the JSON parser to actually use our behavior instead of the stock behavior?
To do this we can create a few additional functions and provide for a way to switch the parser:

if (this.JSON && !this.JSON.dateParser) {
    var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
    var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;

    /// <summary>
    /// set this if you want MS Ajax Dates parsed
    /// before calling any of the other functions
    /// </summary>
    JSON.parseMsAjaxDate = false;

    JSON.useDateParser = function(reset) {
        /// <summary>
        /// Globally enables JSON date parsing for JSON.parse().
        /// replaces the default JSON parser with parse plus dateParser extension 
        /// </summary>    
        /// <param name="reset" type="bool">when set restores the original JSON.parse() function</param>

        // if any parameter is passed reset
        if (typeof reset != "undefined") {
            if (JSON._parseSaved) {
                JSON.parse = JSON._parseSaved;
                JSON._parseSaved = null;
            }
        } else {
            if (!JSON.parseSaved) {
                JSON._parseSaved = JSON.parse;
                JSON.parse = JSON.parseWithDate;
            }
        }
    };

    JSON.dateParser = function(key, value) {
        /// <summary>
        /// Globally enables JSON date parsing for JSON.parse().
        /// Replaces the default JSON.parse() method and adds
        /// the datePaser() extension to the processing chain.
        /// </summary>    
        /// <param name="key" type="string">property name that is parsed</param>
        /// <param name="value" type="any">property value</param>
        /// <returns type="date">returns date or the original value if not a date string</returns>
        if (typeof value === 'string') {
            var a = reISO.exec(value);
            if (a)
                return new Date(value);

            if (!JSON.parseMsAjaxDate)
                return value;

            a = reMsAjax.exec(value);
            if (a) {
                var b = a[1].split(/[-+,.]/);
                return new Date(b[0] ? +b[0] : 0 - +b[1]);
            }
        }
        return value;
    };

    JSON.parseWithDate = function(json) {
        /// <summary>
        /// Wrapper around the JSON.parse() function that adds a date
        /// filtering extension. Returns all dates as real JavaScript dates.
        /// </summary>    
        /// <param name="json" type="string">JSON to be parsed</param>
        /// <returns type="any">parsed value or object</returns>
        var parse = JSON._parseSaved ? JSON._parseSaved : JSON.parse;
        try {
            var res = parse(json, JSON.dateParser);
            return res;
        } catch (e) {
            // orignal error thrown has no error message so rethrow with message
            throw new Error("JSON content could not be parsed");
        }
    };

    JSON.dateStringToDate = function(dtString, nullDateVal) {
        /// <summary>
        /// Converts a JSON ISO or MSAJAX date or real date a date value.
        /// Supports both JSON encoded dates or plain date formatted strings
        /// (without the JSON string quotes).
        /// If you pass a date the date is returned as is. If you pass null
        /// null or the nullDateVal is returned.
        /// </summary>    
        /// <param name="dtString" type="var">Date String in ISO or MSAJAX format</param>
        /// <param name="nullDateVal" type="var">value to return if date can't be parsed</param>
        /// <returns type="date">date or the nullDateVal (null by default)</returns> 
        if (!nullDateVal)
            nullDateVal = null;
            
        if (!dtString)
            return nullDateVal; // empty

        if (dtString.getTime)
            return dtString; // already a date
            
        if (dtString[0] === '"' || dtString[0] === "'")
            // strip off JSON quotes
            dtString = dtString.substr(1, dtString.length - 2);

        var a = reISO.exec(dtString);
        if (a)
            return new Date(dtString);

        if (!JSON.parseMsAjaxDate)
            return nullDateVal;

        a = reMsAjax.exec(dtString);
        if (a) {
            var b = a[1].split(/[-,.]/);
            return new Date(+b[0]);
        }
        return nullDateVal;
    };
}

You can find the current source on GitHub.
First there’s a specific function added to the JSON object called .parseWithDate() which can be called internally or explicitly instead of .parse(). .parseWithDate() is just a wrapper around .parse() with the dateParser applied so dates are automatically converted.
We can then create a .useDateParser() function which can swap the parser by replacing the stock parser with JSON.parseWithDate(). By replacing the JSON.parse() method with .parseWithDate() the date parsing behavior is basically made global and is applied to all JSON.parse() operations. .useDateParser() is meant to be called at the beginning of the page before any JSON requests are made, and affects any JSON parsing requests made after it. There’s also support for restoring the original parser by passing any parameter.
To use this you would call JSON.useDateParser() somewhere at the top of your script hierarchy:

<script src="jquery.min.js"></script>
<script src="JsonDateExtensions.js"></script>
<script>
    // use date parser for all JSON.parse() requests
    // make sure to call before any JSON conversions
    JSON.useDateParser();
</script>
<script>
    // other libs
    // page script code etc.
</script>

Let’s look at an example. Assume we have a JSON object we’re requesting from the server that has a couple of date properties – update and entered.

{   
    "id": "312saAs1",    
    "name": "Jimmy Roe",
    "entered": "2014-01-01T13:13:34.441Z",
    "updated": "2014-01-03T23:28:56.782Z"
}

Now we want to access this JSON data with jQuery’s $.getJSON() like this:

$.getJSON("JsonWithDate.json")
    .done(function (data) {
        console.log("result.entered: " + data.entered +
                    "  result.updated: " + data.updated);
    });

If you do nothing, you get the default JSON parsing in jQuery which doesn’t convert dates and leaves the ISO strings:
result.entered: 2014-01-01T23:28:56.782Z
result.Updated: 2014-01-01T23:28:56.782Z
But, if you now add the generic function code shown above followed by a call to JSON.useDateParser() near the top of the script hierarchy of the page:
JSON.useDateParser()
and then re-run that same jQuery AJAX call you now get:
result. Entered: Wed Jan 01 2014 13:34:56 GMT-1000 (Hawaiian Standard Time)
result.Updated: Wed Jan 03 2014 23:28:56 GMT-1000 (Hawaiian Standard Time)
The latter creates real dates. As will any other framework that uses the native JSON parsers in JavaScript. This means that by replacing the JSON.parse() method we have effectively overriden the JSON parser so that all JSON.parse() calls now do the date parsing including the external jQuery.getJSON() call or any other framework code that I don’t control. In effect, the date parsing support is now global.
Because the setting is page or scope global, you can also reset the original parser by using:
JSON.useDateParser(false)
This restores the default JSON parser and restores the original ISO date string behavior.

Caveats of overriding JSON Parsing

There are a couple of caveats to doing a wholesale behavior change like this to the JSON parser. First you are in fact changing behavior when you apply this parser and if there is existing code that relies on the existing date ISO format of dates, that will of course cause problems. I’ve been using automatic date conversions for quite a while though with a variety of frameworks, and I haven’t run into any problem yet, so this is probably not a big issue, but still be aware of it.
The other caveat of a JSON parse filter is that it is a filter and it slows down JSON parsing. Because parse filters are fired for every key of a JSON document and the code then checks each string value for two RegEx expressions, there’s definitely some overhead. Not a huge amount (about 3-5% in my informal tests of a 10k JSON blocks) but there is definitely some overhead… Probably not enough to worry about, but make sure you test your specific scenarios especially if you have large JSON data sets you’re pushing around in your app.

Do you really need Dates?

A discussion of dates in serialization wouldn’t be complete without mentioning that the best way to handle dates in UI applications is to not use dates. Ha! No I’m not trying to be snarky, but the best date format is one that you don’t have to format – on the client.
If you’re pushing data from the server to display on the client, consider formatting the date on the server. Native JavaScript date formatting sucks unless you add yet another library (moment.js is a good one) to your page, and you have all the tools necessary to format dates easily on your server. Rather than pushing down date values to the client consider pushing preformatted date strings in your ViewModels. This alone will reduce date usage significantly on the client.
Also when you’re doing date input from the user, it’s often much easier to just accept string values and push those to the server. The JSON.NET parser understands a lot of different date formats including human readable ones and can parse that out of JSON when you push your dates back up to the server using ASP.NET Web API or ASP.NET MVC.
With the advent of purely client side SPA style applications this is getting more common now, but often this still can be addressed via server side formatting.
If you can avoid parsing dates on the client, avoid it and format on the server.

Sometimes Dates are necessary

That leaves real date requirements on the client where the client has to actively work and manipulate dates and for those cases real JSON date parsing is highly useful.
It seems silly to actually having this discussion. A serializer without date formatting support just seems… silly, if you really think about it. But then this is JavaScript and there are lots of things that are just plain silly.
If you do need to get dates into the client and if you actually send dates from the server, then a global way of date deserialization certainly makes life a lot easier than having to manually translate dates at every usage point in your front end code. And for that these routines I described here have been very useful to me. I hope some of you get some utility out of them as well.

Resources

Sahabat AMP Responsive Blogger Template Free

2020-03-21T20:33:00.000+06:00

On this occasion Saikothouse will share the first AMP template that I made very simply and lightly.

(Accelerated Mobile Pages) now, there are many hopes for a news content and information can be accessed very quickly. But in fact many web pages needed by consumers open in a few seconds when consumers or readers access them through Google search. So basically Accelerated Mobile Pages are web pages specifically designed to be loaded on mobile devices in a very fast time.

The features in the template that I shared this time are intentionally made a little so that later blogs can be loaded very quickly.

Please see the AMP Friends template features, demo, and download link below

Features	Availability
Responsive	True Cek
Mobile Friendly	True Cek
Google PageSpeed Insights	True Cek
Google Testing Tools (Homepage)	True Cek
Google Testing Tools (Postpage)	True Cek
SEO Friendly	True
Breadcrumbs Schema.org	True
High CTR	True
Personal Blog	True
1 Column	True
Light Base Theme Color	True
Carousel Popular Post Widget	True
Newsletter	True
Menu Navigation	True
Search Box	True
Social Share Button	True

DEMO DOWNLOAD

For template settings there isn't even much so you can easily arrange or edit templates. I need enough for the post Sahabat AMP Blogger Template this and thank you.

How To View Saved WiFi Password On Android Without Root

2020-03-21T20:08:00.002+06:00

How To View Saved WiFi Password On Android Without Root

In this article, you will study a way to discover wifi password on android Your cellphone, as soon as you’ve were given related to any wifi community, it's going to get saved in your telephone. Now, every time you try to connect to the identical network again, it will connect automatically. Also, you could show wifi password android at any time.

Go to link then comply with the rules and check:

Recovery opportunity Check hyperlink below:Show WIFI Password
Check from Above link
All Done
As these wifi passwords may be stored in a gadgetDocument, which can not be considered or seen till you have were given root get proper of access to to your cellphone. In case your device is rooted then there are various procedures to view the stored password.
Click right here to recognize how you may see stored wifi password in rooted android tool. In case, if you don’t recognise the password of wifi then still you may connect with locked wifi without a password. This manner you may study how to check wifi password on android.

How to Find Wifi Password on Android Without Root

So, permit’s take a look at out how are we able to see saved wifi password in our non-rooted android tool. Yes, this will be accomplished with a simple trick. This manner you may Find Wifi Password on Android Without Root.
Disclaimer& strict warning: this text is simplest for academic purpose. Don’t use the records given in this text to do something find wifi password on android. if you ruin or violate any regulation, our internet site and the writer will not be responsible for any moves taken in opposition to you.

display wifi password

A manner to see saved wifi password in android tool [Without Root] To your tool isn’t constantly rooted, then moreover we will understand the password of wifi network to which our android device isLinked. Yes, your tool ought to be connected to that wifi community which password you want to understand. Just have a look at the smooth & sincere steps as given below.
How to See Wifi Password on AndroidBe aware: this trick is for instructional motive best. Don’t use this trick for any illegal interest.
Step 1: for your android device go to settings –> wifi settings –> tap on the associated wifi community. In
Step 2: in pop-up window, you could get, you could get “net web page cope with”Of router of wifi community like “192.168.0.1” on this case, refer underneath gif image. honestly tap on router ip cope with, it’ll get opened for your browser.
Step three: to your tool browser, the house page of the router could be opened. right here you have to enter person id & password. For each router by-default, userid & password are given like: “admin, admin”, “root, password”, “admin, password” or a good deal greater for find wifi password on android.

In case if the proprietor of the wifi community has now not changed the via default consumer-id & password then surely tryThose default values. if you have physical got right of entry to to the router, then you may also take a look at admin password info at the lowest element of the is the router.

See saved wifi password in android device non-rooted

Step 4: now, you may manipulate the router easily from right here. In a left pan, go to wireless –> wi-fi safety. right here to procure the password of your wifi network. Www!!!

That is the manner to get the password of connected wifi network by manner of truly performing some easy step. If you like this article & want to share your valuable opinion & tips, then please depart internal the show wifi password android segment underneath. you'll also need to recognize any other extraordinarily good & beneficial trick for display wifi password android.

How To Make A Nice Looking Table In Html

2020-03-18T15:22:00.001+06:00

How to make beautiful table on blogger

Here is a tutorial I share some tricks about how to make a beautiful table on your blogger website. Make a beautiful table content with CSS.
FIXED TABLE HEADER make it beautiful table on blogger template. so Let's get started tutorial How to make a fixed table header, make it in three staples, html, css, and javascript.

Add Html

Frist you need to add following the showing html code on you template, copy the showing html code script blow given and pest it.

<div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>Code</th>
          <th>Company</th>
          <th>Price</th>
          <th>Change</th>
          <th>Change %</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
        <tr>
          <td>AAC</td>
          <td>AUSTRALIAN COMPANY </td>
          <td>$1.38</td>
          <td>+2.01</td>
          <td>-0.36%</td>
        </tr>
        <tr>
          <td>AAD</td>
          <td>AUSENCO</td>
          <td>$2.38</td>
          <td>-0.01</td>
          <td>-1.36%</td>
        </tr>
        <tr>
          <td>AAX</td>
          <td>ADELAIDE</td>
          <td>$3.22</td>
          <td>+0.01</td>
          <td>+1.36%</td>
        </tr>
        <tr>
          <td>XXD</td>
          <td>ADITYA BIRLA</td>
          <td>$1.02</td>
          <td>-1.01</td>
          <td>+2.36%</td>
        </tr>
      </tbody>
    </table>
  </div>

Add CSS

Add following the css code script on the blow given, edit your template and add following code.

<style type='text/css'>
table{width:100%;table-layout:fixed}.tbl-header{background-color:rgba(255,255,255,.3)}.tbl-content{height:300px;overflow-x:auto;margin-top:0;border:1px solid rgba(255,255,255,.3)}th{padding:20px 15px;text-align:left;font-weight:500;font-size:12px;color:#fff;text-transform:uppercase}td{padding:15px;text-align:left;vertical-align:middle;font-weight:300;font-size:12px;color:#fff;border-bottom:solid 1px rgba(255,255,255,.1)}
</style>

Add Javascript '.tbl-content' consumed little space for vertical scrollbar, scrollbar width depend on browser/os/platfrom. Here calculate the scollbar width.

<script style='text/javascript'>
 //<![CDATA[
$(window).on("load resize ", function() {
  var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
  $('.tbl-header').css({'padding-right':scrollWidth});
}).resize();
 //]]>
</script>

And Done, Your fixed table header is complete. Click on the showing links blow given for see Demo.

DEMO

That's all for How to make a fixed table header on blogger. If you like this article! Share with your friends on social media.
Thank you.

Latest Blogger SEO Optimization - SEO Optimization Tips 2020

2020-03-17T21:30:00.001+06:00

Search engine optimization 2020 remains one of the best ways for businesses to bring highly targeted visitors to a website. SEO does need a lot of work.

Not only is there an upfront investment that needs to be made to lay the foundation for SEO success, but the always-on nature of search engine optimization always means that ongoing work is a must.
If you want to increase the number of visitors coming to your site from Google, here are four ways to optimize SEO for websites and blogs to reach their targets in 2020.

1. Speed up Your Site

The amount of emphasis Google has made on page speed has continued to increase over the past few years. It's very difficult for websites or blogs that are slow to get good rankings on Google. If you are worried that the amount of time needed to load your site harms your ranking on Google, you can reduce the burden on the size of your website or blog from reducing the size of the image and eliminating some script code that doesn't help.

2. Create the Right Link Type

Google has explained that link quality is far more important than quantity. Although services that promise hundreds of links may sound interesting at first, they are far more likely to keep your ranking away from Google.

3. Optimize for Cellular

Like page speed, Google has made cellular one of the most important elements in their ranking algorithm. With many sites receiving more than half of all their traffic from mobile devices, using techniques such as responsive template design to create responsive pageviews on mobile.

4. Update Old Content

Do you have a blog that is updated regularly over the last few years? If so, your site has a lot of valuable content. While some of these posts might bring in a significant number of visitors, others might not perform as well as they should.

By viewing statistics from blog analytics, you will be able to identify which posts are likely to be updated. Take the time to do tasks such as keyword optimization and add additional information to the post, maybe this can help move your post to the top of Google.

Mini Site Responsive Blogger Template

2020-03-17T19:04:00.001+06:00

Mini Site Responsive Blogger Template Free

This already supports Responsive Design Anf SEO Friendly which means it can adjust to the screen size and loading is quite light. Mini Site Templates are created in a single column style that looks the same as a template Sahabat AMP only this template does not yet support AMP. For color reference I took it from https://saikothouse.blogspot.com/p/color-picker.html. Okay for those who are curious.

Please see the features, demos, and download links of the Mini Responsive Blogger Template template below

Features	Availability
Responsive	True Cek
Mobile Friendly	True Cek
PageSpeed Insights	True Cek
Google Testing Tools (Homepage)	True Cek
Google Testing Tools (Postpage)	True Cek
SEO Friendly	True
Dynamic Heading	True
High CTR	True
Personal Blog	True
1 Column	True
Light Base Theme Color	True
Breadcrumbs Schema.org	True
Related Posts	True
Search Box	True
ShareThis Share Button	True
Responsive Menu	True
Back to Top	True
Custom Popular Posts	True

Maybe that's all I can share, if there are less and more can be added in the comments column. Thank you and hope it is useful.

Saikot House

Remove Image Background: 100% automatically - in 5 seconds - with a single click - for free.

Remove Background From A Image OR Photo

Photo Quality

Remove background 1000 Files - A single Click

Add automatic bulk background removal to your desktop

Get a transparent background for any image.

Bung Frangki Responsive Blogger Template Free

Bung Frangki Responsive Blogger Template

Katana Adsense Friendly Responsive Blogger Template Free

Katana Responsive Blogger Template

CSS and SVG Masks

CSS and SVG Masks

CSS clip

CSS clip-path

SVG clip-path for SVG elements

SVG clip-path for HTML elements

SVG clip-path with complex content for HTML elements

CSS mask-image

SVG mask for SVG elements

SVG mask for HTML elements

background-clip

SVG fill

Links

3D Animated Text With CSS

3D Text (css) - animated

Table Of Contents

3D Animated Text With CSS

Add CSS Code

Add html Code

Demo

Live demo codepen

Best Wordpress Custom Login Page Customizer Plugins Free

List of the wp custom login page plugin here

1. Custom Login Page Customizer by Colorlib

2. Custom Login Page Customizer | LoginPress

3. Theme My Login

Features

4. Custom Login Page Customizer

5. WP User Frontend – Membership, Profile, Registration & Post Submission Plugin for WordPress

6. Erident Custom Login and Dashboard

7. Custom Login Page Customizer – Login Designer

10 Best URL Shortener Services - Best Link Shorteners That Aren’t the Google URL Shortener

The 10 best URL shortener services 2020

What makes a great URL shortener?

1. Ow.ly hootsuite

2. T.co

3. Bitly

4. Rebrandly

5. Smallseotools url shortener

6. Bl.ink

7. Snip.ly

8. Tinyurl

9. ShortUrl

10. Clkim

In SEO Pro Safelink Generator Blogger Template Free

Download In SEO Pro Safelink Blogger Template

In SEO Safelink Pro Responsive Blogger Template free download

Download Template

30+ Best Contact Form Template Html And CSS3 Free

Best Contact form Templates Free

1. Multi Step Form with Progress Bar using jQuery and CSS3

2. Google Material Design Input Boxes

3. Simple HTML/CSS Contact Form

4. Responsive Contact Form with Map

5. Elegant Contact Form

6. Clean Contact Form

7. RESPONSIVE MATERIAL DESIGN CONTACT FORM

8. Responsive contact form using Bootstrap 3 and Google Maps API

9. Transparent Contact Form

10. Elegant Contact Form by Grandvincent Marion

11. Responsive Contact Form by Lisa Wagner

12. Contact Form by Stefan Rusu

13. Contact Form Bootstrap 3 by Shuvo

14. Responsive Popup Contact Form by Danny Holmes

15. Flat Responsive Contact Form

16. Bootstrap contact form with validation and AJAX submit

17. Quick Minimal Contact Form by Erlen

18. Form Feedback by CrocoDillon

19. Vintage Inspired Contact Form by David Fitas