Techno-Ahmad

Sylva Blogger Template Seo ready responsive | free download

2020-09-15T02:16:00.003+05:00

The Sylva Blogger Template is a multi-functional blog template that can be used for any topic that is popular in today's internet world.

An advanced search engine that can highlight a wide audience. Designed with very simple and clean code, it is a fast download theme that can be downloaded quickly on slow networks.

Live preview from Gooyaabitemplate

Basic setup instruction:

How to Install a Blogger Template?

Blogger Template Name: Sylva
Platform: Blogger

Template Author: Way2Themes

Sylva Blogger Template

Can be used to write a blog. Based on the updated framework of the new generation of bloggers, this theme supports the latest generation of bloggers and blogger editors.

Meanwhile, this theme supports the personalization of the blogger template, which makes it easy to customize the theme.

1: Sylva Blogger Template use for

This Blogspot theme is use for

photo blogging,
food blogging,
travel blogging and more.

2: Features of Sylva Blogger Template

Simple,
Quick Download,
Sensitive,
SEO Ready,
WordPress Custom,
Advertising Ready,
Retina Ready,
Navigation Ready Gestures,
Fashion,
Drop-down List,
Social Bookmark Ready,
List Page View,
Sketches,
Cleaning,
Browser Compatibility,
Two Columns,
Stylish,
White,
Simple
Stylish
Free
WhatsApp Share
Premium Right Edge 1
Right Edge Girly
Home Pages
Google AMP Slide.

How to create simple | stylish drop down navigation menu in blogger widget WITH ( HTML/CSS)

2020-09-04T01:37:00.002+05:00

Following an email request, I will explain how to create a drop-down menu with the Labels gadget . The Blogger labels gadget is presented as a vertical list of links or as a cloud.

Turn the Labels Gadget into a drop-down menu on Blogger

To see an example of the wording gadget transformed into a drop-down menu click HERE

Here's how to turn the Labels Gadget into a drop-down menu on Blogger :

Go to your Blogger dashboard.
Go to Template and click on " Edit HTML code "
Replace the code below (Ctrl + F and type Label1 to help you or the name given to the labels gadget ):

<b: widget id = 'Label1' locked = 'false' title = 'Label' type = 'Label'>

Up to

</ b: widget>

4. Replace the previous line with the following code:

<b: widget id = 'Label99' locked = 'false' title = 'Labels' type = 'Label'>
<b: includable id = 'main'>
<b: if cond = 'data: title'>
<h2> <data:title/> </h2>
</ b: if>
<div class = 'widget-content'>
<br/> <select onchange = 'location = this.options [this.selectedIndex] .value;' style = 'width: 200px'> <option> Labels </option> <b: loop values = 'data: labels' var = 'label'> <option expr: value = 'data: label.url'> <data: label.name/> </option> </ b: loop> </select> <b: include name = 'quickedit' />

- Note : The text in Blue is the text that will be displayed on the drop-down list. You can modify it with Labels, Categories, etc ...

And save your model.

Create a drop-down menu with grouping items on Blogger

According to your possibilities you can create real MENU on Blogger more or less sophisticated.

Create a drop-down menu with grouping items on Blogger

Reminder, via links and labels you can show your keywords, this may be sufficient for some blogs.

The basics for beginners : Notion of link

When editing an article or a page, it is easy to make a link using the "Associate" menu

Link in an article on Blogger

This link points to an article or page for which you have memorized the URL.

In HTML mode , here is the HTML code:

Single link:

<a href="link address"> link title </a>

To obtain : click HERE

you need this code: click <a href="https://techno-ahmad.blogspot.com"> here </a>

Link opening in a new window

<a href="link address" target="blank"> link title </a>

To obtain : click there and a new window opens,

you need this code: click <a href="https://techno-ahmad.blogspot.com" target="_blank"> there </a>

and a new window s' open

1- Design a simple "classic" Menu

You must have the necessary skills for this realization which requires adapting the code or, at least, respecting the instructions.

PRINCIPLE :

Go to " Page Layout " and, below the header of your blog, click on " Add A Gadget ".

Choose the " HTML / JavaScript " gadget , paste the code from the menu in the window that opens and click "Save".

Here is an example of a relatively simple Drop-down List Menu with Item Grouping:

See example Drop-down menu with Item Grouping on Blogger :

Create a drop-down menu with grouping items on Blogger

Code to copy / paste :

-------------------------------------------------- -----------------------------------------

<script language = "JavaScript">
function ChangeUrl (form)
   {
   if ( form.ListUrl.selectedIndex ! = 0)
      {
     var url;
     url = form.ListUrl.options [form.ListUrl.selectedIndex] .value;
     window.open (url, '_ blank');
       }
   }
</script>
<FORM>
<SELECT NAME = "ListUrl" SIZE = 1 onChange = "ChangeUrl (this.form)">
<OPTION SELECTED VALUE = ""> -Links drop-down menu - </option>
<optgroup label = " Group 1 ">
  <option value = " Link 1 "> Title1 </option>
  <option value = " Link 2 "> Title 2 </option>
</optgroup>
<optgroup label = " Group 2 ">
  <option value = " Link 3 "> Title 3 </option>
  <option value = " Link 4 "> Title 4 </option>
<option value = " Link 5 "> Title 5 </option>
</optgroup>
<optgroup label = " Group 3 ">
<option value = " Link 6 "> Title 6 </option>
  <option value = " Link 7 "> Title 7 </option>
</optgroup>
</SELECT>
</FORM>

-------------------------------------------------- -------------------------------------------------- ---

Configuration :

This HTML code above is to be copied as is : it will only be necessary to change what is in color:

The title of the menu : Drop-down menu of links

Groups : Group 1

The links : link 1

The title of the link : Title 1

Drop Down From Links : This is the title to display on the lite, you can modify it with a title of your choice. - Link 1, Link2, Link 3 and Link 4 are the addresses (URLs) of the pages to which the entries Title1, Title 2, Title 3 and Title 4 will point

➯You must make the necessary changes.

How to add this Dropdown Menu in Blogger

Copy the HTML code from the drop-down list of your choice (without or with grouping of elements)

And go to: " Page Layout "> " Add Gadget "> " HTML / JavaScript "

Paste the code in the small window that opens, modify it

And finally click on "Save".

If this article like you so please comment !

10 Most Popular cute & attractive wordpress | blogger widgets 2020 free ( HTML/ Css )

2020-09-02T02:35:00.004+05:00

be unique and eye-catching and that they will stand out from the many other pages on the Internet . You will also have to grab the attention of your market , encourage them to browse through your blog and become your loyal readers.

Fortunately,there are many ways to customize your blog Blogger ,an done and one of itis to personalize your gadget" Posts Popular ". What have not yet installed? Don't worry, you can install it easily.

Read also: Popular Posts widget Blogger

Just click on your blog title , access the Layout menu , click “ Add Gadget ” and choose “ Popular Posts .”

A window will appear asking you to configure the widget by choosing the posts you want displayed ( by example, those that were most viewed in the last 7 days or 30 days or from the start of your blog ) .

You will also be prompted to choose how many messages you want displayed in your section Posts Popular and select if you want to display the title of the article only, or with the picture and / or the

extract .

( Remember that each style of widget has different requirements , so follow the instructions carefully as to whether you will need the snippet and thumbnail image or not ) .

Add the Popular Posts gadget to Blogger

Once you've followed these instructions, you 'll have a chance to see the base version of the Popular Posts Gadget for Blogger in your blog -

Popular Messages Style 1 - box in a box

This is an interesting gadget style because it uses your snippet and thumbnail image in a unique way .

Your snippet is written in opaque text and placed in a small transparent box . This, in turn , is placed in a larger rectangular box , in which your thumbnail image is used as a background .

Choosing this style Popular Posts Widget for Blogger can be a good option if you want to liven up your blog and grab the attention of readers with your colorful photos .

<b: widget id = 'PopularPosts1' locked = 'false' title = 'Popular Posts' type = 'PopularPosts'>
<b: includable id = 'main'>
<b: if cond = 'data: title'> <h2 > <data: title /> </h2> </ b: if>
<div class = 'widget-content popular-posts'>
<ul>
<b: loop values = 'data: posts' var = 'post'>
<li>
<b: if cond = 'data: showThumbnails == "false"'>
<b: if cond = 'data: showSnippets == "false"'>
<! - (1) No snippet / thumbnail - >
<a expr:href='data:post.href'> <data: post.title /> </a>
<b: else />
<! - (2) Show only snippets ->
<div class = 'item-title'> <a expr:href='data:post.href'> <data: post.title /> </a> </div>
<div class = 'item-snippet'> <data:post.snippet/> </div>
</ b: if>
<b: else />
<b: if cond = 'data: showSnippets == "false"'>
<! - (3) Show only thumbnails ->
<div class = 'item-thumbnail-only'>
<div class = 'item-thumbnail '>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b: if cond =' data: post.thumbnail '>
<img alt =' 'border =' 0 'expr: height =' data: thumbnailSize 'expr: src =' data: post.thumbnail 'expr: width =' data: thumbnailSize '/>
<b: else />
<img alt =' 'border =' 0 ' expr: height = 'data: thumbnailSize' src = 'http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5YusuptefxzZ1R8Q8Uakyt6ATJoui_uTklz3pgt9fEnI4FkyRRyWe92mHUwLx0451DqA6znRDMJXwc_jES7MdWncuwKB_1AUGFCApf1mZf2zeBqsdN-p1vCo3uNy6WSNnRvdGZnDvfk/s72-c/default.png' expr: width = 'data: thumbnailSize' />
</ b:if>
</a>
</div>
</div>
<b: else />
<! - (4) Show snippets and thumbnails ->
<div class = 'item-content'>
<b: if cond = 'data: post.thumbnail'>
<div class = 'item-thumbnail'>
<a expr: href = 'data: post.href' target = ' _blank '>
<img alt =' 'border =' 0 'expr: height =' data: thumbnailSize 'expr: src =' data: post.thumbnail 'expr: width =' data: thumbnailSize '/>
</a>
< / div>
</ b: if>
<div class = 'item-title'> <a expr:href='data:post.href'> <data: post.title /> </a> </div>
< div class = 'item-snippet'> <data: post.snippet /> </div>
</div>
<div style = 'clear: both;' />
</ b: if>
</ b: if>
</li>
</ b: loop>
</ul>
<b: include name = 'quickedit' />
</div>
</ b: includable>
</ b: widget>

5. Save your template

6. Now go to Template Designer> Advanced> Add CSS and paste the following CSS code there, and apply to your Blog

.popular-posts .item-thumbnail {float: left;}
.popular-posts ul {padding-left: 0px;}
.popular-posts ul li {list-style-image: none; list-style-type: none; display: inline;}

The present image url in the widget code is the default thumbnail that will be displayed if the article does not have an image associated with it.

You can change it to get a custom thumbnail by default.

Going Back To Old

If you are not happy with the way it looks, then go back.

Here are the steps:

Just remove the Popular Posts Widget from the Page Layout.If you need the original version then add it again

Remove the CSS which you added at Designer Template> Advanced> Add CSS

C 'is all.

Horizontal Popular Message Gadget Widget

The popular Message gadget is the best Blogger Widget (in my opinion) and allows you to view the articles you read from your Blogger blog but we can go further with this new Blogger tips or rather a new Blogger Widget design :

Some explanations for post it on your blog in horizontal version.

The popular Message gadget is Blogger's best (in my opinion). Some explanations for posting it on your blog in horizontal version.

This script very easy to install, just put the script for the new HTML gadget

Click " Add Gadget " and choose " Popular Posts " ( If you already have this gadget skip this step)

After you have Popular Message Gadget " Add a gadget " and select " HTML / Javascript "

The popular Message gadget is Blogger's best (in my opinion). Some explanations for posting it on your blog in horizontal version.

copy the script below into the new " HTML / Javascript Gadget " gadget

If you already have jQuery in your template please delete the script

Make your popular post now with animation

<style>

#slider ol, # slider ul, # slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

.popular-posts img {
margin: 0! important;
padding: 0! important;
width: 150px;
height: 120px;
}

ol, ul {
list-style: none;
}

.wrapper {
width: 720px;
margin: 0 auto;
position: relative;
}

.clear {
clear: both;
}

.display-none {
display: none;
}

#slider {
position: relative;
top: -2px;
z-index: 1;
}

#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 150px;
left: -51px;
}

#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 150px;
right: -51px;
}

#slider # slider-wrapper {
width: 720px;
height: 300px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}

#slider # slider-inner {
width: 9780px;
height: 300px;
position: absolute;
}

#slider .article {
width: 150px;
height: 300px;
float: left;
margin-right: 30px;
}

#slider .article img {
margin-bottom: 25px;
box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
}

#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}

#slider .article h2 a {
font-size: 18px;
color: # 404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}

#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}

#slider .article .item-snippet {
margin-left: 15px;
}

#slider .widget-item-control {display: none}

</style>
<script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/ jquery.min.js "> </script>
<script type =" text / javascript "src =" http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js "> </script>

Show Popular Posts Widget for Blogger with 3D Cube Animation

Popular Posts Gadget / Widget for Blogger with 3D Cube Animation : New way to present your Most Viewed Posts with 3D Cube animation .

Popular Posts Gadget / Widget for Blogger with 3D Cube Animation: New way to present your Most Viewed Posts with 3D Cube animation.

3D Cube Animation

Now you can view your Popular Posts for Blogger with 3D Cube Animation .

This widget displays the images of posts on Blogger as a cube.

You can see the result like the picture above, Watch HERE

The script is very easy to install, just put the script in a new HTML gadget :

Log in to Blogger and navigate to Overview - Page Elements
Click “ Add Gadget ” and choose “Most Posts viewed "( If you already have this gadget skip this step )
After having Gadget Posts Most viewed " Add the gadget "and select" HTML / Javascript "
Copy the script to the gadget just below.

The Script to copy CSS :
<style type = "text / css">
.cube {width: 200px; height: 200px;}
a img {border: none; }
#linksCube img {width: 100%; height: 100%; }
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type = "text / javascript"> </script>
<script type = "text / javascript" src = "http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"> </script>
<script type = "text / javascript" charset = "utf -8 ">
$ (function () {
$ ('. Popular-posts ul'). Abupopularcube ();
});

</script>
<script type = "text / javascript" src = "http: //accordion-for-blogger.googlecode.

WordPress Popular Posts: display popular blog posts

Showcase your successful articles!

Today, I am offering you a tutorial on how to easily display popular articles on your blog , thanks to the WordPress Popular Posts plugin.

Why post popular articles on my blog?

This is one way among many to "capture" the passing visitor , who comes to your blog for the first time. This Internet user is going to read the article that attracted him to you ... but after? Will he leave immediately or decide to continue his visit and subscribe to your newsletter?

Your goal is to retain them and the best way to do this is to offer them links to other relevant content on your site : either in the articles themselves; either by offering similar articles ... or a list of the most popular articles.

Popular articles play on the principle of social proof in psychology: "If everyone does something, it must be good / useful / true".

This principle is widely used in marketing: for example, if several bloggers present a product as the "must-have", it is very likely that people will buy it. If there is a line to see a movie, it must be good. If there are more people in restaurant A than in restaurant B, it is because the food must be better ...

And, in the case of your blog, "if everyone is reading these posts, they must be exciting." This is what posting popular articles is for!

Showcase your successful articles!

The WordPress Popular Posts plugin

Install this plugin by going to the menu Extensions> Add WordPress, do not forget to activate it then.

Install WordPress Popular Posts

The plugin creates a new sub-menu in Settings> WordPress Popular Posts where you have many setting options ... but to start, let's go to the Appearance> Widgets section to define how to display popular posts.

Display popular articles in a sidebar widget

Start by adding the WordPress Popular Posts widget to the location of your choice.

Show popular articles in the sidebar

WordPress Popular Posts determines which posts are the most popular from the moment it is installed .

It identifies the number of views and comments for each post and, based on that data, establishes a ranking.

Start by defining the title of your widget and the number of popular articles to display. Then, choose the ranking mode : it corresponds to your definition of the popularity of an article because you can establish the ranking according to the total number of views ("Sort posts by total views"), the number of comments ("Sort posts by comments ”) or the average number of views per day (“ Sort posts by avg. daily views ”).

Popular WordPress Articles Widget

Decorative line

A little further down, the widget offers other options:

Posts settings - You can check different boxes if you want to shorten the post title if it is too long (Shorten title), display an excerpt in addition to the title (Display post excerpt) and display the thumbnail associated with the article (Display post thumbnail).

Stats Tag settings - You can choose which statistics and information to display: number of comments, views, author name, date, related taxonomy.

HTML Markup settings - This option allows you to choose the type of HTML markup applied to your list of popular articles.

If you are a beginner, you probably won't touch it, but more experienced users can for example choose between an ordered list, a simple list or even a div.

For my part, I advise you not to overload your widget too much because if it loses in readability, there is a chance that it will also reduce the click-through rate on the articles.

Choose the posting period

In addition to this widget, WordPress Popular Posts offers other options in the Settings> WordPress Popular Posts menu. I'll tell you two words about it!

The "Stats" part

This part allows you to consult your statistics in a very visual presentation, by acting on certain parameters common with the widget. This is a useful section if you want to get an overview of the ranking of popular articles before uploading your widget.

WordPress Popular Posts Stats Tab

The "Tools" part

If you go to the "Tools" section via the menu at the top of the page, you can first choose the display settings for the image that accompanies each article (if you display a thumbnail of course!):

Set a default image.

Choose the source of this thumbnail - By default, the plugin retrieves the image from the front page of your articles but you can also choose to display the first image that appears in the post, an image appearing in a custom field, etc.

If you make any changes, you can click on the "Empty image cache" button to "reset the display" taking into account the new options chosen.

Show thumbnails of popular articles

You then have advanced options which concern in particular the management of the data stored by the plugin.

Which views are recorded (Log views from) - By default, the plugin establishes its ranking by taking into account all visitors ("Everyone") but it can also be limited to unregistered visitors ... or to visitors who have created an account on your blog.

The storage limit (Log limit) - By default, the plugin records the actions of visitors in an unlimited way. Here you can limit this recording in time.

Add Ajax to Your Widget - This computer language offers aesthetic visual effects but it will prevent popular posts from being cached if you are using a cache plugin.

Activate or not the plugin cache . Enabling it can be useful on a high traffic site to limit the risk of slowing down page loading.

Enable or not sample sampling - By default, the plugin ranks popular posts by taking into account ALL the visits you receive. On a site with very high traffic, this can pose a problem because the mass of stored data quickly becomes enormous. By activating sampling, WordPress Popular Posts will then rely only on a portion of the traffic representative of the whole.

Finally, you have two additional options:

How links open - You can either open them in the same window (“Current window”), which is the plugin's default behavior… or open them in a new tab (“New tab”).

The stylesheet - The plugin provides default formatting. If you don't want to use it and write your own CSS code to customize the display instead, you can turn off the default stylesheet here.

The "Parameters" part

For those who know how to develop, this tab summarizes all the parameters and codes that you can use to integrate WordPress Popular Posts according to your own requirements.

Keep in mind that the plugin does not take effect until it is installed, regardless of your blog's entire history. So it will take a little time for it to provide really reliable data!

Hope this tutorial gives you some ideas to keep visitors on your blog. Highlighting popular articles is a great way to give instant insight into the topics that rock your community !

For my part, I stopped using the plugin because my sidebar is already loaded ... which does not prevent me from finding it very interesting !

Conclusion

That's all! The five messages gadget styles popular for Blogger presented popular on your blog .

They all have an appearance different to determine what makes a message gadget popular, but the end result is the same: The visitors are always a click away from your best content . Try out some of these styles , find your favorite , and see how it affects the performance of your blog.

2020-08-22T01:40:00.000+05:00

Awesome Input Animation using HTML & CSS | Floating Label Animation

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Input Animation | techno-ahmad</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="input-data">
        <input type="text" required>
        <div class="underline">
</div>
<label>Name</label>
      </div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper{
  width: 450px;
  background: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{
  height: 40px;
  width: 100%;
  position: relative;
}
.wrapper .input-data input{
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label{
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}
.wrapper .input-data label{
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-data .underline{
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #4158d0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before{
  transform: scaleX(1);
}

Popup Login Form Design in HTML & CSS

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Popup Login Form Design | techno-ahmad</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="center">
      <input type="checkbox" id="show">
      <label for="show" class="show-btn">View Form</label>
      <div class="container">
        <label for="show" class="close-btn fas fa-times" title="close"></label>
        <div class="text">
Login Form</div>
<form action="#">
          <div class="data">
            <label>Email or Phone</label>
            <input type="text" required>
          </div>
<div class="data">
            <label>Password</label>
            <input type="password" required>
          </div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a></div>
<div class="btn">
            <div class="inner">
</div>
<button type="submit">login</button>
          </div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}

Multi Step Form with Step Progress Bar in HTML CSS & JavaScript

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: url("bg.png"), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
}
::selection{
  color: #fff;
  background: #d43f8d;
}
.container{
  width: 330px;
  background: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 50px 35px 10px 35px;
}
.container header{
  font-size: 35px;
  font-weight: 600;
  margin: 0 0 30px 0;
}
.container .form-outer{
  width: 100%;
  overflow: hidden;
}
.container .form-outer form{
  display: flex;
  width: 400%;
}
.form-outer form .page{
  width: 25%;
  transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title{
  text-align: left;
  font-size: 25px;
  font-weight: 500;
}
.form-outer form .page .field{
  width: 330px;
  height: 45px;
  margin: 45px 0;
  display: flex;
  position: relative;
}
form .page .field .label{
  position: absolute;
  top: -30px;
  font-weight: 500;
}
form .page .field input{
  height: 100%;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 18px;
}
form .page .field select{
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
}
form .page .field button{
  width: 100%;
  height: calc(100% + 5px);
  border: none;
  background: #d33f8d;
  margin-top: -20px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s ease;
}
form .page .field button:hover{
  background: #000;
}
form .page .btns button{
  margin-top: -20px!important;
}
form .page .btns button.prev{
  margin-right: 3px;
  font-size: 17px;
}
form .page .btns button.next{
  margin-left: 3px;
}
.container .progress-bar{
  display: flex;
  margin: 40px 0;
  user-select: none;
}
.container .progress-bar .step{
  text-align: center;
  width: 100%;
  position: relative;
}
.container .progress-bar .step p{
  font-weight: 500;
  font-size: 18px;
  color: #000;
  margin-bottom: 8px;
}
.progress-bar .step .bullet{
  height: 25px;
  width: 25px;
  border: 2px solid #000;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  transition: 0.2s;
  font-weight: 500;
  font-size: 17px;
  line-height: 25px;
}
.progress-bar .step .bullet.active{
  border-color: #d43f8d;
  background: #d43f8d;
}
.progress-bar .step .bullet span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.progress-bar .step .bullet.active span{
  display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after{
  position: absolute;
  content: '';
  bottom: 11px;
  right: -51px;
  height: 3px;
  width: 44px;
  background: #262626;
}
.progress-bar .step .bullet.active:after{
  background: #d43f8d;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 0.3s linear forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after{
  display: none;
}
.progress-bar .step p.active{
  color: #d43f8d;
  transition: 0.2s linear;
}
.progress-bar .step .check{
  position: absolute;
  left: 50%;
  top: 70%;
  font-size: 15px;
  transform: translate(-50%, -50%);
  display: none;
}
.progress-bar .step .check.active{
  display: block;
  color: #fff;
}

CSS

const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = [...document.querySelectorAll(".step p")];
const progressCheck = [...document.querySelectorAll(".step .check")];
const bullet = [...document.querySelectorAll(".step .bullet")];
let max = 4;
let current = 1;

nextBtnFirst.addEventListener("click", function(){
  slidePage.style.marginLeft = "-25%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnSec.addEventListener("click", function(){
  slidePage.style.marginLeft = "-50%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnThird.addEventListener("click", function(){
  slidePage.style.marginLeft = "-75%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
submitBtn.addEventListener("click", function(){
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
  setTimeout(function(){
    alert("Your Form Successfully Signed up");
    location.reload();
  },800);
});

prevBtnSec.addEventListener("click", function(){
  slidePage.style.marginLeft = "0%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnThird.addEventListener("click", function(){
  slidePage.style.marginLeft = "-25%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnFourth.addEventListener("click", function(){
  slidePage.style.marginLeft = "-50%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});

Cool Login Form in HTML CSS & JavaScript

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
<div class="center">
<div class="header">
Login Form</div>
<form>
  <input type="text" placeholder="Email or Username">
  <i class="far fa-envelope"></i>
  <input id="pswrd" type="password" placeholder="Password">
  <i class="fas fa-lock" onclick="show()"></i>
  <input type="submit" value="Sign in">
  <a href="#">Forgot Password?</a>
</form>
</div>
<script>
  function show(){
   var pswrd = document.getElementById('pswrd');
   var icon = document.querySelector('.fas');
   if (pswrd.type === "password") {
    pswrd.type = "text";
    pswrd.style.marginTop = "20px";
    icon.style.color = "#7f2092";
   }else{
    pswrd.type = "password";
    icon.style.color = "grey";
   }
  }
</script>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
margin: 0;
padding: 0;
background: radial-gradient(#a429bc,#9225a7,#7f2092);
height: 100vh;
overflow: hidden;
font-family: 'Noto Sans TC', sans-serif;
}
.center{
width: 430px;
margin: 130px auto;
position: relative;
}
.center .header{
font-size: 28px;
font-weight: bold;
color: white;
padding: 25px 0 30px 25px;
background: #5c1769;
border-bottom: 1px solid #370e3f;
border-radius: 5px 5px 0 0;
}
.center form{
position: absolute;
background: white;
width: 100%;
padding: 50px 10px 0 30px;
box-sizing: border-box;
border: 1px solid #6d1c7d;
border-radius: 0 0 5px 5px;
}
form input{
height: 50px;
width: 90%;
padding: 0 10px;
border-radius: 3px;
border: 1px solid silver;
font-size: 18px;
outline: none;
}
form input[type="password"]{
margin-top: 20px;
}
form i{
position: absolute;
font-size: 25px;
color: grey;
margin: 15px 0 0 -45px;
}
i.fa-lock{
margin-top: 35px;
}
form input[type="submit"]{
margin-top: 40px;
margin-bottom: 40px;
width: 130px;
height: 45px;
color: white;
cursor: pointer;
line-height: 45px;
border-radius: 45px;
border-radius: 5px;
background: #5c1769;
}
form input[type="submit"]:hover{
background: #491254;
transition: .5s;
}
form a{
text-decoration: none;
font-size: 18px;
color: #7f2092;
padding: 0 0 0 20px;
}

Animated Login Form using HTML CSS & JavaScript

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Login Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <header>Login Form</header>
      <form>
        <div class="input-field">
          <input type="text" required>
          <label>Email or Username</label>
        </div>
<div class="input-field">
          <input class="pswrd" type="password" required>
          <span class="show">SHOW</span>
          <label>Password</label>
        </div>
<div class="button">
          <div class="inner">
</div>
<button>LOGIN</button>
        </div>
</form>
<div class="auth">
Or login with</div>
<div class="links">
        <div class="facebook">
          <i class="fab fa-facebook-square"><span>Facebook</span></i>
        </div>
<div class="google">
          <i class="fab fa-google-plus-square"><span>Google</span></i>
        </div>
</div>
<div class="signup">
        Not a member? <a href="#">Signup now</a>
      </div>
</div>
<script>
      var input = document.querySelector('.pswrd');
      var show = document.querySelector('.show');
      show.addEventListener('click', active);
      function active(){
        if(input.type === "password"){
          input.type = "text";
          show.style.color = "#1DA1F2";
          show.textContent = "HIDE";
        }else{
          input.type = "password";
          show.textContent = "SHOW";
          show.style.color = "#111";
        }
      }
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  border-radius: 5px;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
  justify-content: center;
  background: url(bg.jpg);
  background-size: cover;
  background-position: center;
}
.container{
  position: relative;
  width: 400px;
  background: white;
  padding: 60px 40px;
}
header{
  font-size: 40px;
  margin-bottom: 60px;
  font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
  margin: 25px 0;
  position: relative;
  height: 50px;
  width: 100%;
}
.input-field input{
  height: 100%;
  width: 100%;
  border: 1px solid silver;
  padding-left: 15px;
  outline: none;
  font-size: 19px;
  transition: .4s;
}
input:focus{
  border: 1px solid #1DA1F2;
}
.input-field label, span.show{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-field label{
  left: 15px;
  pointer-events: none;
  color: grey;
  font-size: 18px;
  transition: .4s;
}
span.show{
  right: 20px;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
}
input:valid ~ span.show{
  visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
  transform: translateY(-33px);
  background: white;
  font-size: 16px;
  color: #1DA1F2;
}
form .button{
  margin-top: 30px;
  overflow: hidden;
  z-index: 111;
}
.button .inner{
  position: absolute;
  height: 100%;
  width: 300%;
  left: -100%;
  z-index: -1;
  transition: all .4s;
  background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);
}
.button:hover .inner{
  left: 0;
}
.button button{
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.container .auth{
  margin: 35px 0 20px 0;
  font-size: 19px;
  color: grey;
}
.links{
  display: flex;
  cursor: pointer;
}
.facebook, .google{
  height: 40px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 3px;
  margin: 0 10px;
  transition: .4s;
}
.facebook:hover{
  border: 1px solid #4267B2;
}
.google:hover{
  border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
  color: #4267B2;
}
.google i, .google span{
  color: #dd4b39;
}
.links i{
  font-size: 23px;
  line-height: 40px;
  margin-left: -90px;
}
.links span{
  position: absolute;
  font-size: 17px;
  font-weight: bold;
  padding-left: 8px;
  font-family: 'Open Sans', sans-serif;
}
.signup{
  margin-top: 50px;
  font-family: 'Noto Sans', sans-serif;
}
.signup a{

color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

Neumorphism Login Form UI Design using HTML & CSS

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Neumorphism Login Form UI | techno-ahmad</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="content">
      <div class="text">
Login Form</div>
<form action="#">
        <div class="field">
          <input type="text" required>
          <span class="fas fa-user"></span>
          <label>Email or Phone</label>
        </div>
<div class="field">
          <input type="password" required>
          <span class="fas fa-lock"></span>
          <label>Password</label>
        </div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a></div>

<button>Sign in</button>
        <div class="sign-up">
Not a member?
          <a href="#">signup now</a>
        </div>
</form>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  /* user-select: none; */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.content{
  width: 330px;
  padding: 40px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}
.field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}
.field:nth-child(2){
  margin-top: 20px;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}
.field input:focus{
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}
.field span{
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}
.field label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}
.field input:valid ~ label{
  opacity: 0;
}
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}
.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}
.forgot-pass:hover a{
  text-decoration: underline;
}
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}
button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.sign-up{
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}
.sign-up a{
  color: #3498db;
  text-decoration: none;
}
.sign-up a:hover{
  text-decoration: underline;
}

Animated Glowing Inputs Login Form in HTML & CSS

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Inputs Login Form UI</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="login-form">
      <div class="text">
LOGIN</div>
<form>
        <div class="field">
          <div class="fas fa-envelope">
</div>
<input type="text" placeholder="Email or Phone">
        </div>
<div class="field">
          <div class="fas fa-lock">
</div>
<input type="password" placeholder="Password">
        </div>
<button>LOGIN</button>

        <div class="link">
          Not a member?
          <a href="#">Signup now</a>
        </div>
</form>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins',sans-serif;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #151515;
}
.login-form{
  position: relative;
  width: 370px;
  height: auto;
  background: #1b1b1b;
  padding: 40px 35px 60px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}
.text{
  font-size: 30px;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
}
form{
  margin-top: 40px;
}
form .field{
  margin-top: 20px;
  display: flex;
}
.field .fas{
  height: 50px;
  width: 60px;
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #444;
  border-right: none;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(#333,#222);
}
.field input,form button{
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 19px;
  color: #868686;
  padding: 0 15px;
  border-radius: 0 5px 5px 0;
  border: 1px solid #444;
  caret-color: #339933;
  background: linear-gradient(#333,#222);
}
input:focus{
  color: #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.2),
              inset 0 0 5px rgba(0,255,0,.1);
  background: linear-gradient(#333933,#222922);
  animation: glow .8s ease-out infinite alternate;
}
@keyframes glow {
   0%{
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0,255,0,.2),
                inset 0 0 5px rgba(0,0,0,.1);
  }
   100%{
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0,255,0,.6),
                inset 0 0 10px rgba(0,255,0,.4);
  }
}
button{
  margin-top: 30px;
  border-radius: 5px!important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover{
  color: #339933;
  border: 1px solid #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.3),
              0 0 10px rgba(0,255,0,.2),
              0 0 15px rgba(0,255,0,.1),
              0 2px 0 black;
}
.link{
  margin-top: 25px;
  color: #868686;
}
.link a{
  color: #339933;
  text-decoration: none;
}
.link a:hover{
  text-decoration: underline;
}

Amazing Transparent Login Form using HTML CSS & Javascript

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Transparent Login Form UI</title>
    <link rel="stylesheet" href="style.css">
   <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="bg-img">
      <div class="content">
        <header>Login Form</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
<div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>
<div class="pass">
            <a href="#">Forgot Password?</a>
          </div>
<div class="field">
            <input type="submit" value="LOGIN">
          </div>
</form>
<div class="login">
Or login with</div>
<div class="links">
          <div class="facebook">
            <i class="fab fa-facebook-f"><span>Facebook</span></i>
          </div>
<div class="instagram">
            <i class="fab fa-instagram"><span>Instagram</span></i>
          </div>
</div>
<div class="signup">
Don't have account?
          <a href="#">Signup Now</a>
        </div>
</div>
</div>
<script>
      const pass_field = document.querySelector('.pass-key');
      const showBtn = document.querySelector('.show');
      showBtn.addEventListener('click', function(){
       if(pass_field.type === "password"){
         pass_field.type = "text";
         showBtn.textContent = "HIDE";
         showBtn.style.color = "#3498db";
       }else{
         pass_field.type = "password";
         showBtn.textContent = "SHOW";
         showBtn.style.color = "#222";
       }
      });
    </script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
.bg-img{
  background: url('bg.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.7);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.04);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
.links{
  display: flex;
  cursor: pointer;
  color: white;
  margin: 0 0 20px 0;
}
.facebook,.instagram{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: 10px;
}
.facebook{
  margin-left: 0;
  background: #4267B2;
  border: 1px solid #3e61a8;
}
.instagram{
  background: #E1306C;
  border: 1px solid #df2060;
}
.facebook:hover{
  background: #3e61a8;
}
.instagram:hover{
  background: #df2060;
}
.links i{
  font-size: 17px;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

Add Responsive & stylish contact us widgets for blogger | techno-ahmad

2020-08-21T01:18:00.092+05:00

Now you will learn how to save the contact us widget on my blog . we are use contact us page for blogger or other plateform please html code or css script and past do you want.

This html code lile shown that below which write Responsive contact us form

1: Checkout our product

Online word counter seo tool

Step 1:

We have to play around/menu with the models section/function here. Click Templates in the left menu.

2nd step:

Then click on Edit HTML and you will receive your entire blog code in a large field.

Step 3:

search for]]> </ b: skin> and place the following code just before it.

Step 4:. Past it below to press the enter and

Save this html code of contact us form.

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Responsive Contact us Form | techno-ahmad</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="container">
      <div class="text">
Responsive Contact us Form</div>
<form action="#">
        <div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">First Name</label>
          </div>
<div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Last Name</label>
          </div>
</div>
<div class="form-row">
          <div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Email Address</label>
          </div>
<div class="input-data">
            <input type="text" required>
            <div class="underline">
</div>
<label for="">Website Name</label>
          </div>
</div>
<div class="form-row">
          <div class="input-data textarea">

            <changeit rows="8" cols="80" required></changeit>
            <br />
<div class="underline">
</div>
<label for="">Write your message</label>


        <br />
<div class="form-row submit-btn">
          <div class="input-data">
            <div class="inner"></div>
            <input type="submit" value="submit">
          </div>
        </div>
      </form>
    </div>

  </body>
</html>

CSS Contact us Form for blogger widgets

Now you will learn how to save the contact us widget on my blog .

Step 1:

We have to play around/menu with the models section/function here. Click pages in the left menu.

2nd step:

Then click on create a new page open it.

Step 3:

You can select the upper left side click here .

YOU CAN SEE two options <>HTML view and compose view. Select HTML VIEW

Step 4:. Past it below to press the enter and

Save this html code of contact us form.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.container{
  max-width: 800px;
  background: #fff;
  width: 800px;
  padding: 25px 40px 10px 40px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container form{
  padding: 30px 0 0 0;
}
.container form .form-row{
  display: flex;
  margin: 32px 0;
}
form .form-row .input-data{
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}
form .form-row .textarea{
  height: 70px;
}
.input-data input,
.textarea textarea{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid rgba(0,0,0, 0.12);
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
  transform: translateY(-20px);
  font-size: 14px;
  color: #3498db;
}
.textarea textarea{
  resize: none;
  padding-top: 10px;
}
.input-data label{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
}
.textarea label{
  width: 100%;
  bottom: 40px;
  background: #fff;
}
.input-data .underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background: #3498db;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before{
  transform: scale(1);
}
.submit-btn .input-data{
  overflow: hidden;
  height: 45px!important;
  width: 25%!important;
}
.submit-btn .input-data .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
.submit-btn .input-data:hover .inner{
  left: 0;
}
.submit-btn .input-data input{
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) {
  .container .text{
    font-size: 30px;
  }
  .container form{
    padding: 10px 0 0 0;
  }
  .container form .form-row{
    display: block;
  }
  form .form-row .input-data{
    margin: 35px 0!important;
  }
  .submit-btn .input-data{
    width: 40%!important;
  }
}

How do I add a contact form (contact us) to Blogger?

Adding a contact form in Blogger is a tedious task as it does not support plugins like WordPress.

What most Blogspot bloggers do is seek help from third party sites (contacformgenerator, jotform, 123contactform, etc.).

But today you are going to learn how to add official contacts page in Blogger.

Part 1: Adding the Contact Gadget:

Follow the steps below to add a gadget to contact us on your blog.

Step 1:

Visit blogger.com and sign in to your account. If you are using multiple blogs, you must choose the desired blog from the list.

2nd step:

Click on Layout from the left sidebar to get an option to add gadgets.

Step 3:

You can see an Add a gadget link on the main panel on the right side. Clicking on it takes you to a list of gadgets.

Step 4:

Then choose More Gadgets on the left side. Now you will see the contact form. Just add the same.

Part 2: Hide the gadget:

Now you will learn how to hide the contact gadget.

Step 1:

We have to play around with the models section here. Click Templates in the left menu.

2nd step:

Then click on Edit HTML and you will receive your entire blog code in a large field.

Step 3:

search for]]> </ b: skin> and place the following code just before it.

/ * CUSTOM CONTACT FORM BY
Name your Blogspot.com * /
.contact-form-widget {
margin-left: auto;
margin-right: auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: # 000;
}
.fm_name, .fm_email {
float: left;
padding: 5px;
width: 48%
}
.fm_message {
padding: 5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height: 40px;
padding: 10px;
font-size: 16px;
}
.contact-form-email-message {
width: 100%;
max-width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
}
.contact-form-button-submit {
border-color: # C1C1C1;
background: # E3E3E3;
color: # 585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height: 30px;
font-size: 16px;
}
.contact-form-button-submit: hover {
background: #ffffff;
color: # 000000;
border: 1px solid #FAFAFA;}

Then click Save to keep the changes.

After the third step, you won't see the Contact widget on your blog.

Part - 3: Adding a contact form to a page

You will get the personalized personalized blogger contact code here to be added to be displayed on a separate page.

Step 1:

Go to Pages and click on New Page.

2nd step:

Paste the following code into the HTML post editor after removing everything in it.

Save the template then go to Pages to create a new contact page if you don't have one yet. In the page editor, switch to HTML view and paste the following:

<div class = "ContactForm widget" id = "ContactForm1">
<div class = "contact-form-widget">
<div class = "form">
<form name = "contact-form">
<div class = "fm_name">
Your Name:
<input class = "contact-form-name" id = "ContactForm1_contact-form-name" name = "name" size = "30" type = "text" value = "" /> </div>
<div class = "fm_email">
E-mail Address *:
<input class = "contact-form-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "" /> </div>
<div style = "clear: both">
</div>
<div class = "fm_message">
Message *:
<textarea class = "contact-form-email-message" cols = "25" id = "ContactForm1_contact-form-email-message" name = "email-message" rows = "5"> </textarea>
<input class = "contact-form-button contact-form-button-submit" id = "ContactForm1_contact-form-submit" type = "button" value = "Submit" />
<div class = "contact-form-error-message" id = "ContactForm1_contact-form-error-message">
</div>
<div class = "contact-form-success-message" id = "ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>

Step 3: Add a title (like Contact Us) and then change the settings given below.

Step 4:

Finally, click on the Publish button. That's all Messages sent from this contact form will be forwarded to the administrator email. If the blog has more than one admin, all will get them.

How to add a contact form on a subpage

We know the contact form very well. One of those gadgets that is very useful because you can write a message to the author without leaving the blog. Personally, I prefer to use the contact form than copy the e-mail address, open the e-mail and then write a message. In today's tutorial, I will show you how to put the contact form on the subpage, as it is in the contact tab , so that it does not get in the way on the sidebar and does not loom somewhere in the footer of the blog.

1. Enter the layout and select add gadget . When a new window opens, click "add more gadgets" and look for a contact form. When we find our form, click on the plus and then save .

Currently, our contact form is in the sidebar and let it stay there, or we can move it to the bottom of our column, in any case the form must be placed on the blog.

2. Go to the page where our contact form is to appear - in my case it is the test page, and then go to the HTML editor.

Paste the code:

<form name = 'contact-form'>
<div> Your name: </div>
<input class = 'contact-form-name' id = 'ContactForm1_contact-form-name' name = 'name' size = '30' type = 'text' value = '' />
<div> Your email address: <em>(required)</em> </div>
<input class = 'contact-form-email' id = 'ContactForm1_contact-form-email' name = 'email' size = '30 'type =' text 'value =' '/>
<div> Message: <em>(required)</em> </div>
<textarea class = 'contact-form-email-message' id = 'ContactForm1_contact-form-email-message' name = 'email-message' rows = '5'> </textarea>
<p> </ p>
<input class = 'contact-form-button contact-form-button-submit' id = 'ContactForm1_contact-form-submit' type = 'button' value = 'Send' />
<div style = 'text-align: center; max-width: 450px; width: 100% '>
<p class =' contact-form-error-message 'id =' ContactForm1_contact-form-error-message '> </p>
<p class =' contact-form-success-message 'id = 'ContactForm1_contact-form-success-message'> </p>
</div>
</form>C

1: publish or update, it depends on whether your page is just created or you are editing an existing page.

3 . Go to template - edit the HTML code, then expand the "Go to widget" list and select ContactForm1.

Once we are in the right place, expand our widget by clicking on the dots, which are marked in the frame below.

We repeat this action this time with <b: includable id = 'main'> ... </b: includable>

When everything develops, we remove the part of the code marked below . This will make the contact form disappear from the side column of the blog, but it will not disappear from our subpage to which we added it.

Warning! it is not possible to remove the contact form from the side column, this gadget must remain!

Conclusion

Silmply i had explain Add Responsive & stylish contact us widgets page | form for blogger. If this article like you please shate the official website .

How to generate new traffic, leads and conversions Summary

2020-08-02T01:57:00.004+05:00

Why reuse old content?

Increase reach
Win time
SEO added value
"10x content": a solid basis for reuse

7 ways to reuse your content

1. Write smaller articles using information from your 10x content

2. Convert your existing content into infographic

3. Write a guest contribution

4. Share your content on other platforms

5. Create a presentation

6. Share your content on your social media channels

7. Talk about the topic in a video or podcast

conclusion

In this article, you will receive an effective strategy for maximizing the potential of your content: the effective reuse of content.

Struggling to increase your reach and attract new visitors to your website? There you are not alone. In fact, generating traffic and leads is the biggest challenge for professional marketers.

1 generate old reused content

Figure 1: Biggest challenges for marketers (source)

Content marketing takes time. It's rare that you create an article that generates thousands of social shares overnight. It may take years for SEO business to finally reap its benefits.

We're always looking for ways to save time and increase our marketing ROI, right? This is where content reuse can help. Rather than creating a single post from scratch, you can reuse rich content for a variety of formats. In this article, I'll show you the benefits of reusing old content and give you seven practical tips.

Why reuse old content?

Content reuse is a phenomenon that will permanently change the way content is distributed. Almost 60% of marketers now use their content two to five times.

But what does reuse really bring and what success can you expect from it?

Increase reach

Let's think about your business goals first. Are you serious about increasing your sales or improving your website's conversion rate? Whatever goal you're working for, you need to increase your reach first.

While the users in your target group have a lot in common, they probably don't have the same learning style - more than half of people are visual learners. Reposted content can help you perfectly reach the remaining 30% of auditory learners.

Additionally, you can share your content with people you might never have met before, even if they are in your community. It's unlikely that an article you created in 2015 will reach the same Facebook audience if it's reposted today, is it?

Ben von Goins Writer generated 20,000 new subscribers by reusing content from his blog on the Medium platform. Since mid-size users haven't been in contact with the original content yet, they've been able to generate new traffic.

Win time

Did you know that 22% of bloggers and marketers can't find the time to regularly create new content?

2 generate old content to reuse

Figure 2: CoSchedule also gathered the challenges of marketers (source)

Another benefit of reusing old content is that it saves you time, for example by investing in creating new, unique assets. Of course, in the rapidly changing world of marketing, this precious time can be used for other areas of business development.

SEO added value

Pages that rank well with Google can simultaneously gain high engagement on social media. Conversely, sharing an old article on your social networks can also help you improve your article's ranking in Google search results. But not just actions and interaction rates promote your SEO goals.

Reusing content also increases the visibility of your texts. For example, people are looking for interesting images and content that they can call source on their own website. This gives you the opportunity to generate backlinks for your website. And we all know how important backlinks are to SEO.

"10x content": a solid basis for reuse

The concept of "10x content" is simple: your original article should be 10 times better than your competition. You can find it by searching for the long tail keyword that you want to rank for. The pages that rank on the first page are the ones you need to skip.

You create 10x content by adding the following aspects to the original article:

Infographics, images and videos
Studies, surveys and statistics
More details in each section
Your own (unique) opinion

To be successful and drive the conversions you work so hard on, your original content needs to be far more comprehensive than the competition. Thus, it constitutes a perfect basis for the new publication of the content.

7 ways to reuse your content

Once you've created a solid article in 10x content format, the content repost can begin and you can generate new leads, conversions, and website traffic along the way.

1. Write smaller articles using information from your 10x content

If you've created the ultimate guide on one topic, why not reuse each section and create a smaller post on each topic? Similar to a hub-and-spoke framework, you can improve the structure of your internal links and direct the resulting traffic to the original article.

For example, articles and how-to lists are very popular no matter what industry you write in.

example :

With these 7 tips for the perfect content

The 8 best content plugins for WordPress

Check how well your 10x content fits your own how-to guide with a lot more information and convert those parts into new, shorter articles - so you'll get a lot more content and reach even more users.

2. Convert your existing content into infographic

Infographics are very popular and are shared 3 times more than any other type of content. Why don't you take the facts, data, and information you used in your previous articles and combine them into a new, comprehensive and informative chart?

Animal Friends, a pet insurance company from England, has gathered information on the most popular animal names in the UK. But instead of using this data in an article, it was incorporated into a great infographic:

Dogs reuse old content

Figure 3: Animal-friendly infographic

Hint : To save on the cost of a professional graphic designer, you can use the Canva web app instead, select an infographic template, add your brand, and use the collected data to create a quality infographic.

3. Write a guest contribution

Guest articles are a fantastic way to increase traffic to your website and increase your own reach. Bamidele Onibalusi, for example, used guest blogging to increase organic traffic to her website by 342% in one year.

Instead of spending hours creating an article from scratch, you go back to your 10x content and think about how to convert it to a guest post.

For example, you could:

Follow tip # 1 and create a smaller post based on your 10x content information
To rewrite the article with the same structure but less detail
Convert your 10x content to infographic, add a short 250 word description and use it as a guest post

Whichever option you choose, remember: users reading your guest post likely won't know you yet. For this reason, you should give them lots of tips and really go to the trouble of creating the guest post.

4. Share your content on other platforms

Posting content on other platforms is similar to posting guest posts, but without the need to rewrite or edit the original content.

Sites such as Medium, LinkedIn Publisher, and Business2Community allow content content syndication. Such large platforms can help make your content accessible to a larger group of people.

However, reposting content on other platforms should be done with caution - duplicate content can easily appear if the same text is accessed through different URLs. Indexing web pages with duplicate content can negatively impact SERP rankings as search engine bots have to determine which of the duplicate pages is most relevant to a search query.

Before you decide to distribute your content on these websites, first check if they contain a rel = canonical tag. This small day tells Google where to find the original article.

5. Create a presentation

Another great way to repurpose old content is to turn it into a presentation. Sites like SlideShare and Slideboom allow you to upload a presentation where you can present information from your 10x content.

Similar to the other tips, this strategy saves time and can be implemented in just a few steps:

Turn 10x content into a Microsoft PowerPoint presentation using a new slide for each subsection.
Upload your finished presentation to SlideShare or a similar platform.
You can also go further by adding an audio track in addition to the presentation and turning your 10x content into video.

Eugene Cheng, for example, generated over 2 million views and 400 new email subscribers in a single month with his SlideShare presentation.

6. Share your content on your social media channels

Subscribers to your social networks monitor your activity closely. However, you can provide them with new, informative content in just a few steps by posting excerpts from the original article on social media.

You can for example:

Tweet quotes from your article
Post a section of your 10x content on your LinkedIn page
Discuss a specific topic in a Facebook live video
Share an infographic on Pinterest and Instagram, with the article's introduction as a caption

7. Talk about the topic in a video or podcast

In point 1, we mentioned earlier that people have different learning styles. A good way to address visual (or auditory) learners is to turn your articles into a video or podcast.

Just use the 10x content (or part of it) as a video script and upload it to YouTube. Once you have optimized the video for YouTube SEO, you can also try placing it in another search engine, also as a video.

78% of marketers say video contributes to a good ROI. According to a recent statistic, a person watches over 1.5 hours of video content online every day. The effort of converting your article to video is well worth it!

As podcasts become more popular, reusing your content as an audio track is also a good idea to reuse old content. For example, the most popular podcast portals include iTunes, SoundCloud, and Overcast, but you can also host the audio on your own website to generate additional traffic.

the podcast will reuse the old content

Figure 4: The popularity of podcasts is increasing. (Source)

conclusion

Reusing existing content will allow you to increase traffic to your original product and avoid waste. These 7 tips not only help you grow your audience, but also increase your users' interaction rate permanently.

11 steps to the perfect architectural site concept

2020-07-31T02:30:00.004+05:00

One concept, several solutions

If you are considering launching a new website, you need to ask yourself some important questions ahead of time. These concern technical aspects, but at the same time cover the field of marketing.

With the answers to these questions, you can right from the start chart the course for a successful website by avoiding common "rookie mistakes". We show you in this article how to design your new website perfectly.

1. Define the objective: What do I want to achieve with my website?

Every website has at least one goal. For example, an online store wants to sell primarily products, a blog, for example, wants to educate customers, while a landing page is often used for lead generation.

Before planning any further, think about what the goal of your website should be. Then you can finally line up the next steps. In addition, the purpose of the website is also important for your marketing planning.

→ Write down the objectives of your site.

2. Definition of target group: Who do I want to reach with my website?

You have now found a destination. Now it's time to identify your target audience. In this way, you will get the basics of aligning content, wording and other areas of your website. The result of a target group definition can be called "personas". These are fictitious profiles which, together with the medium of real personal data, exemplify a typical user of your website.

Common criteria for defining your target audience are:

age

sex

social status

literacy

3. Analyze the competition: Who are my competitors in the net?

It is always important to know your competitor. This applies to entering the brand with a new product as well as for a website. And this is even more true if you want to make money with your website, because you want to start an online store, for example.

A first step in analyzing the competition leads you to Google Search. If you have a core product or a core service that makes up your business, you can search for that term or combination of terms on Web. The search results pages then tell you which competitors exist and which competitors are well placed.

You can of course search for more than one product group, segment or industry to define other core terms.

Now you should be looking at the top ranked websites from the competition. Just consider only the first page search results. The following aspects will help you:

Content: Are top-ranked sites using a lot of content? Is there a blog or magazine? What is the tone of the site? Is the quality of the content high? Is there attractive visual material or is it used as a unit / image? Are there different language versions?

Page Speed: Does the website load quickly?

Architecture: What are the menus? What categories does the site use?

style: How was the web design implemented? How does the website look mobile?

Your competition analysis should not aim to copy other websites exactly. However, there are projects competing for you to define your own strengths and know which direction you want to take with your website.

→ Note the aspects you want to implement with your website.

4. Lateral architecture: What categories should there be?

Categories in online stores usually result from top product groups. It gets a little more difficult with a blog. Here you can orient yourself in the top level topic categories, into which your articles can be classified later.

The category name may still be tentative at this point. But it is advisable to define the names at the latest when creating the site in a CMS. Because according to the categories, the names are naturally also the directories, which creates the system and therefore also the URLs.

5. Create a visual concept: what should the menus and navigation look like?

Menus and navigation trees are crucial elements that affect the usability of your website. It is all the more important to think about how the navigation menus should be organized and what type of menu to use.

Scrolling menu This menu is often used for websites with many categories and subcategories. It works after clicking or hovering the mouse.

Static menu The static menu is always to the left or right of the site content. With one click, users enter the desired category. Smaller websites can benefit from this.

Header navigation This allows horizontal navigation. Menu items are arranged from left to right above the content.

Hamburger menu This menu is structured like a hamburger with its three layers of "buns". By clicking on the three bars one above the other, the menu will open and you can click on the individual categories.

At this point it is not possible to give a specific recommendation for a particular menu. Each has its advantages and disadvantages.

Depending on the menu choice, you can also select your content management system. For some CMS such as WordPress, the menu can be predefined by selecting a specific template.

In online store systems, there are usually different choices for creating a menu.

Basic considerations when planning the navigation menu:

A user should get the best three clicks possible for each page on your website.

The faster your users find what they are looking for, the better their experience and the higher the chances of conversion, long retention time, and high bounce rate.

Internal content links should also be set via anchor links in the menu to ensure page "blood flow" with Linkjuice.

Always use the same keyword in anchor text for a landing page. Do not use the keywords in the menu twice.

6. Webdesign: What requirements apply to the design?

Web design is both a matter of taste and a matter of user-friendliness. If your business already has a visual identity, this should be reflected on your website. It starts with colors, goes beyond backgrounds, shadows, and alignments, and ends with the font used.

What you should consider in web design:

Your target audience

First mobile

Great ease of use on all devices with which the page is called

Your graphic charter

Of course, your web design also affects your conversions if you want to design an online store. What are the 7 basics that you can observe, we wrote in this magazine article.

Another tip: Never decide solely on web design. You can assume that your website is used by many different people, who have different preferences and tastes. Show your designs to your team, if you have employees, show them to friends or acquaintances. Get as much feedback as possible.

7. Create content I

Which texts are inserted where?

(Keyword research, WDF * IDF, Title / Descriptions)

Keywords: In order for your content to be liked not only by users, but also by Google, keyword research is an essential prerequisite for creating texts, for example for individual categories or even products.

That finding meaningful keywords isn't that hard, we've already shown you in this article.

Content relevance: Once you have identified the key keywords for your web pages, you move on to content creation. To find not only the core keywords, but also the related and relevant terms that best cover your topic, you then need to perform a WDF * IDF analysis with the created texts.

If you use SEO Expertise, you will find the WDF * IDF analysis in the Content Success module.

Title and Descriptions: Finally, you can boost keyword targeting by using the core search terms of your URLs in Title and Description. How to optimally create this you can find here. Tips: How to further improve your CTR in SERPs with the page title and description, we have put together here for you.

wdfidf-analyze-4 Website concept, creative content design

Figure 1: WDF * IDF analysis with SEO Expertise Content Success

8. Create content II

What graphics are needed?

It is important that web design is concerned with the use of graphics. Where to place the images? What graphics are needed? If you do not create the illustration yourself or already have models, it is advisable to entrust this work to professionals.

9. Tests: How do users manage my page?

If you order a car, you will receive a finished product, which usually will not be changed later. The position of the doors is fixed, as is the space for the engine. It's different for a website. This is a flexible entity that you have to modify over and over again to meet the needs of your users. You can first have different versions of your website tested by real users. Based on the analysis, the website can then be perfected.

10. Create a content concept: how and according to what specifications is content created?

It makes sense to write a guide to creating content on your new website that determines what content is created. At this point, it is not a fixed timeline, but rules for the production of text and images. It may seem very bureaucratic at first, but then makes it easier for everyone involved. This is especially true when different employees or different teams are involved in the production of the content. As soon as the exact specifications are available, everyone can orient themselves. You will find that the production of content is much more efficient. At the same time, a guideline ensures that your content production delivers a cohesive overall picture.

The guide does not need to be set in stone, but should be adapted regularly to new requirements or new challenges.

Some examples of content guide criteria:

Text Length: How long should product descriptions be? How long should a blog post be?

wording: What tone should the lyrics have? Are there certain preferred terms or spellings? Are users buzzed or geduzt?

Text structure: How many captions should product, category or blog texts have? How should they be formatted?

Images and graphics: Where to place images in text? What size should they be?

11. OnPage Optimization: What are the most important factors?

Once your website is ready and live, you need to lay the foundation for good ranking. The basics of the overall website concept therefore include these important factors on the page, which certainly need to be optimized:

One concept, several solutions

As with a marketing concept, there is no one comprehensive website concept that works for all homepages. While the 11 steps presented here are all fundamentally relevant, the first step will be to differentiate the goals from one site to another. Now, if you are starting with your concept, you should give yourself plenty of time until each step is satisfactorily completed. We wish you lots of planning fun!

Smag Blogger Template Seo ready and responsive theme

2020-04-19T17:41:00.003+05:00

Smag Blogger Template is free of cost tamplate for blogger blogging. It is New version of tamplate. Smag Blogger Template is Seo ready and responsive theme. So you download smag blogger template and set your blog. And comment me how is it.

Smag Blogger Template

The Smag Blogger model is the latest blogger template created by SoraTemplates for Blogspot Community users who are looking for a unique and stylish model to use on their magazine style blog. This is by far the most elegant, responsible and elegant theme you can use to rethink your blog in 2020. This template is ideal for all users who have blogs at their joints, including technology, news, photography, digital magazine and more. Try it on your blog and give your visitors a great sense of using your site in a whole new design as you differentiate your blog from your competitors to get more traffic.

Smag Blogger Template Seo ready and responsive theme features:

Simple, fast, responsive download, ready-made SEO, ready-made WordPress, Ready-made announcement, ready-made retina, drop down menu, Social bookmarking ready, Sheet navigation menu, Viewing small figures, Clear, Compatibility browser , red, black, yellow, 2 columns, elegant, white, elegant, Split on WhatsApp, free premium, 1 right barbarian, Magazine, News, Technology, Blogger, Fashion, AMP, Google, Minimalist, Slideshow.

Blog in use

barbarian, Magazine, News, Technology, Blogger, Fashion,Slideshow,

Foodup blogger template Seo ready and responsive theme

2020-04-19T17:34:00.001+05:00

Foodup Blogger Template is free of cost tamplate for blogger blogging. It is New version of tamplate. Foodup Blogger Template is Seo ready and responsive theme. So you download Foodup blogger template and set on your blog to see the on every youtube channel And comment me how is it. It is new publish theme. You can use it easily and set it on your blog or website.

Again I said PLEASE comment on this page how is it.

Foodup Blogger Template

The FoodUp Blogger Template is an amazing design and a beautifully designed recipe blogger and recipe blogger theme. This theme is an elegant and sleek design with a super simple element. This means that it doesn't matter what blog blocks your device uses; You can only hear audience targets using this theme on your blog. This free Blogspot theme supports Google by submitting the new schema update and there are no bugs in your sister web tool that will help you get the best possible users it offers. It is loaded with various options and feature-rich widgets, which allow you to create the blog.

Foodup blogger template Seo ready and responsive theme:

Built with a simple look, this great theme is a blog idea about food, cooking, recipes and ingredients. It's also ten fun features and easy to customize theme, so if you're a beginner to beginner, you don't have to be, you want a few seconds to change this theme and change the colors.

Foodup blogger template features

Seo-ready,
ready-ready,
responsive,
personalized from WordPress,
fast loading,
browser compatibility,
white,
black,
1 right sidebar,
social bookmarking tools,
slideshow,
3 columns,
drop-down menu,
post-thumbnails,
menu page navigation,
custom pages, magazine,
Breadcrumb Navigation Ready,
Elegant,
Clean,
Food and Drinks,
Slideshow,
Google,
AMP.

Blog in use

Food and Drinks, Slideshow, image,recipes,and all others that website

Conclusion

This latest blogging theme for blogs is based on the new generational structure of Blogger, which loads it quickly, provides a complete response and optimizes SEO.

OmMag Blogger Template Seo ready and responsive

2020-04-19T17:26:00.001+05:00

OmMag Blogger Template is free tamplate. OmMag Blogger Template is Seo ready and responsive blogger tamplate. OmMag blogger template is highly responsive. OmMag blogger template is New tamplate for blogging. This is feature , Download link, and Live provide on Down. OmMag blogger template Download it and set on your blog.

OmMag Blogger Template

The OmMag Blogger template is an elegant and stylish semi-magazine theme with a great look and design. This theme has ten features that are easy to configure with clean and minimal typography. It's a 100% responsive Blogspot template, a high-structure, high-load design of choice for SEO.

OmMag Blogger Template Seo ready and responsive:

This theme is ideal for creating an elegant blog that will help you achieve the blogger technology you want, HowTo, DIY, News, authority, fashion, beauty, etc. To create. This theme is easy to install and configure. With a blank canvas, it helps personalize your creativity in several ways.

OmMag Blogger Template features

Presentation,
Red,
White,
Orange,
Green,
Gallery,
3 column footer,
Ad ready,
1 Sidebar,
1 Right sidebar,
Clean,
Minimalist,
SEO ready,
Magazine,
Free premium,
Right sidebar,
Display Thumbnails,
Answers,
Social Ready Brand,
Menu,
2 columns,
fast download,
browser compatibility,
WhatsApp sharing,
elegant,
Google,
AMP,
Blogger Layout 3.0,
Mega Menu.

Blog in use

Yoga poses ,yoga exercise, image website, recipes, and all these like website for used

PLEASE comment this page might be new tamplate like OmMag blogger template.

Conclusion

This cutting-edge theme is the first perfectly balanced element and contains the most commonly used widgets, such as email subscription, new mail slide, etc. It also includes a dark background for the head that best matches the logo.

Kelly Blogger Template Seo ready and responsive theme

2020-04-19T17:16:00.003+05:00

Kelly Blogger Template Simple and fast loading blogger template. It's Seo ready and responsive theme. Kelly blogger template provide you personalized from WordPress. You can use your own website and then set.

Kelly Blogger Template

Kelly Blogger Template is an elegant blogger theme with a minimalist and sleek design. This incredible blogger model has an enchanting movement and a patterned background, giving it an attractive appeal and a great attraction from users.

Kelly Blogger Template Seo ready and responsive theme :

This beautiful blogger theme is perfectly designed to be perfect for creating blogs for niches such as personal blogs, beauty, makeup, fashion, DIY, Instagram influencer, travel, social influences, etc. striking appearance. It's ready to use with various customization options, it allows you to create your desired blog quickly and without any specific coding knowledge.

Kelly Blogger Template features

Simple and fast loading,
responsive,
ready for SEO,
personalized from WordPress,
ready for advertising,
ready for retina,
ready for braai on mode,
mode,
drop-down menu,
ready for social bookmarking,
page navigation menu,
post thumbnails,
clean,
browser compatibility,
black,
orange,
red,
green,
2 columns,
elegant,
white,
minimalist,
elegant,
WhatsApp share,
free premium,
right,
1 right sidebar,
girl,
custom pages,
slideshow,
Google,
AMP.

Kelly Blogger Template use in

This is used for photography image website recipes and others all that website like

beauty,
makeup,
fashion,
DIY,
Instagram influencer,
travel,
social influences, etc. striking appearance.

Share this model
You will love it too
Blogger model with the best result

Conclusion

It is built with the latest generation of codes and is a fully responsive theme and a very optimal SEO theme, providing optimal performance with the minimum of effort.

Download Hub Blogger Template Seo ready and responsive them

2020-04-19T17:06:00.000+05:00

Download Hub is a highly optimized SEO theme with an updated schema tagging feature. It passes any Google Webmaster Tools test without analyzing any keyboard or webmaster errors. Download Hub Seo ready and responsive Blogger Template.

Download Hub blogger tamplate

Download Hub Blogger Template is a very unique topic and one of a kind for bloggers to create movies for downloading movies on blogger. This theme, loaded with many features and options, will help you create a dream blog if you want to post movies and videos to your blog page.

Download Hub Blogger Template Seo ready and responsive theme

This topic contains a very good tool for creating secure links, so if you are concerned that setting direct links on your blog will prevent your blog from Google search results, don't worry. These tools will help you to create an encrypted version of your download link, so you cannot post direct download links from any host. So go ahead and create your free page to download movies on blogger.

Download Hub Blogger Template Features

Schedule Tool Ready,
Slideshow,
Menu Navigation for Red,
Red,
White,
Black,
Ready Ads,
One Face,
One Side,
Clean,
Minimum,
Search Engine Ready,
Magazine,
Free Premium,
Sidebar,
Thumbnail Gallery,
Responsive,
Social bookmarks - ready list,
dropdown list,
4 columns,
fast download,
browser compatibility,
Web2.0,
video,
WhatsApp part,
Mega list,
WhatsApp part,
AMP,
Google,
Grid.

Download Hub use in

This Download Hub Seo ready and responsive Blogger Template used for movie download video download and other like this website for.

Conclusion

This is a completely responsible and final theme for fast downloading with excellent customization functions.

Fabel Blogger Template Seo ready and responsive blogger theme

2020-04-19T16:56:00.000+05:00

Fabel Blogger Template

This amazing model of bloggers has the latest features and characteristics. It is a fully responsive theme and has the ability to automatically adjust its functionality based on the screen size of the user’s device. This theme is perfectly designed and has the latest generation structure, making it a fast load and an optimal reference.

Fabel Blogger Template Seo ready and responsive

its elegant and minimalist model, it becomes an ideal choice for bloggers who blog on personalities, travel, food, beauty, fashion, OOTD, cosmetics, etc. Publish. This simple blogger theme is loaded with many user-friendly features that allow you to create great blogs at any time, and at the same time, the appropriateness of this theme is very high and you can modify almost anything from the layout.

Fabel Blogger Template features

Ready-made,
responsive,
personalized WordPress ads,
fast loading,
browser compatibility,
pink,
white,
black,
1 right sidebar,
ready-made social bookmarks,
visual presentation,
2 columns,
Drop-down menu,
publishes tables,
navigation menu pages,
Personal pages,
Magazine,
Bread crumbs Navigation,
Elegant,
Google,
AMP,
footer 3 columns,
Minimal,
Minimalist.

Fabel Blogger Template use in

Fabel Blogger Template Seo ready and responsive using for yoga ,health ,recipe, medicine and like these website or blog.

MaxSeo Seo ready and responsive free Blogger Template for blogspot

2020-04-19T16:31:00.000+05:00

Features of MaxSeo Seo ready and responsive Blogger Template:

The MaxSeo blogger model is a blogger theme designed by professionals, very user-friendly for SEO and optimized. Thanks to a specially coded structure, it helps you reach higher positions in search engines quickly and effortlessly. This amazing theme has wonderful features and functionality. This perfect theme, with perfection and up to the level of quality, will help you to create any blog. You can use it to blog about technology, news, authority, film, reviews, food, recipe, video sharing site, DIY, HowTo and more. It's a fully responsive and very fast theme, especially focused on mobile receivers, so you can capture as much as you can. This theme has special features and built-in SEO functionality to provide better service, is made according to the latest update of Google's schema and has future verification codes. Ready for SEO, ready for ads, magazines, responsive, fast loading, browser compatibility, drop-down list, personalized with WordPress, news, technology, 3 column feet, 1 right bar, ready for social bookmarking, several colors, post thumbnails, ready for navigation navigation, Elegant, 2 columns, red, white, black, blue, page navigation menu, AMP, Google.

This really Seo ready and responsive free Blogger Template. All features of maxseo is already write on upper. Please comment this page . It is free of cost and live demo.

How to Build Powerful Abs

2020-04-14T14:30:00.005+05:00

Your abdominal muscles are very smart, in that they can adapt to varying forms of exercise, rather quickly. This is a blessing and a curse because, it’s great knowing that your abs have the ability to adapt to unexpected circumstances, however, this places a pressure on you to constantly shock your abs in order for them to grow.

Similar to your forearms and calves, your abs require a special type of training. I go into detail on this in my article, only for members, Exactly How Often and When to Train Your Forearms, Abs, and Calves, if your curious to learn more.

Anyways, your abs are constantly in use, whether you know it or not. Because of this, frequently changing up your ab exercises is of the highest importance, if you want to see them grow. Do this by alternating on a daily basis between planks, cross movement exercises, changing the reps, order of exercises, and resting intervals.

I have plenty of abdominal exercise variations in my members section, however, for non-members, below is a sample program you could use to add some variety to your workout.

Mini-Program

Day 1

Exercise 1 – Crunches to Failure, Side Crunches To Failure (each Side), Leg Raises Failure

*2 sets for each exercise; rest 2 minutes between sets and exercises*

Day 2: Repeat day 1

Day 3: Repeat day 1

Day 4: Off

Day 5

Exercise 1 – Rope Crunches…until you feel an intense burn… 12-15 reps

Exercise 2 – Wood Chopper, (High –> Low)…12-15 reps

Exercise 3 – Leg Raises…failure … 12-15 reps

Day 6: Repeat day 5

Day 7: Repeat day 5

Perform These 4 Tasks & Increase Subscribers To Your Blog

2020-04-09T13:45:00.000+05:00

How to increase your subscribers?

Today I am going to give you four tasks with which the graph of your number of subscribers will surely go up. I’ve also 2 bonus tips for you to increase the number of subscribers to your blog. Lets start:

Task 1 : Create an attractive dedicated subscription page

The first task that you’ve to do is, create a new page on WordPress with the title “Subscribe”.
Now, create an attractive page that includes the link to your blog feed and subscription box also. For attractive subscription box designs, check out this article.
Congrats! Your first task is completed, lets move on to the second task.

Task 2: Explain your readers “What is RSS”

Many Internet users, does not even know what is RSS and what are the benefits of RSS. So to tell your visitors, here is your second task.
Create a new page on your blog with the title “What is RSS Subscription”. Now, in this page write a brief introduction about RSS so that the new visitors can know about basically RSS is.
I recommend you to embed this video in your post. This video explains about RSS in real simple words.
At the end of the article give the link to “Subscribe” page created in the first step.
After you are finished writing the post, publish it on your blog and move on to the third task.

Task 3 : Tell your readers about benefits of subscribing to your blog

Now, create another page in your blog titled “Benefits of subscribing to my blog” or any similar title.
In this page, tell your readers what will they get when they will subscribe to your blog. Below is an example I usually use at the end of my post.
In this way your readers will get to know the advantages of signing up to your blog.
Again, at the end of the article give the link to “Subscribe” page created in the first step.

Task 4 : Place all the links in the sidebar at the top

After you’re done with these three tasks, give the links of these three pages in the sidebar so that every new visitor to your blog can see and read these three links. Also read the bonus tips below.

Bonus Tips

If you want, you can also place a subscription box below each post. For a unique looking design you can refer this post of mine.
The result
Now, if any new visitor will come to your blog he/she will surely click on “benefits of subscribing” link and if you’ve given a good list of benefits your new visitor can definitely going to turn into lifetime subscriber. Personally I’ve not tried this method, but got an idea by seeing the subscription box on ProBlogger.
I’ll also follow these 4 tasks and soon will be back with the results

Learn how I make money blogging and commenting on others blogs

2020-04-09T09:05:00.002+05:00

First, let me start by telling you that I am going to reveal some of the most intrinsic secrets for making money using your blog. I am going to show you exactly how I got started, what tools I used, and in addition how they benefited in the long term. I will everything in a straight-forward, no bull, no fluff manner…. Are you ready to learn how to make money by creating a blog? Does this sounds like something that you are interested in?
Good, because quite frankly, If I found a resource like this when I first started I would have been able to make money much faster.
Let me first start off by explaining this is not a simple solution to all of your financial problems. You are going to need to dedicate some time to get things up and running. I am going to show you how to decrease the amount of time that you need to spend by giving you my research and my references to many of the valuable resources that I have at my disposal, as well as knowledge from the one’s in the past.

Make money from blogging

Some of these tools are going to be free and others will require you to purchase something. You CAN make money without purchasing anything BUT it will require a little more work in the end. The business model that I followed when I first started was ” You need to spend money to make money.” But You can use the knowledge that I acquired during my investments and see what will provide you with more benefits in the long run.

You are also going to be shown how your blogs going to generate income, Notice I am not saying ” your blogs are going to generate you incredible amounts of income…” and then remember my no bull, no fluff policy above. You are not going to start making 100K a month by just blogging some of your random thoughts, you are shown how to use your blog as a space to draw in an audience, catering to that audience’s interest, and bringing them to the relevant content they desire. Interesting concept? Not really, its actually quite simplistic

Before I continue, I must warn you of a couple of Golden rules which you must adhering to (I will go into more detail later):

Blog Content Must be relevant to the current topic
Blog Consistently
Include a variety of topics

Ultimate Unique blog post ideas for beginners

2020-04-08T18:04:00.001+05:00

Welcome to blogging tutorials, today I am going to tell you a different way to get post ideas. Using today’s method will help you to learn a lot of new things about other blogs. Lets not waste any time and start the article.

The first task

Firstly, select one blog that suits the niche of your blog and you’ve a good relation with that blogger

Now, ask that blogger to swap your blog with him for one day. By swapping I mean, he will run your blog for one day and you will run his but only for one day
What will you do after swapping the blog
After swapping the blog with your friend blogger, you can analyze the following things so as to get maximum knowledge and information about his blog.

1. Which articles gets very high comments

After getting full access to other blog, analyze it and check out which articles get high number of comments.
Check out what kind of articles are getting high comments, check out the categories on which the articles gets high comments.
Adopt the same category in your blog also and start writing on it.
In this way, your blog will also get high number of comments

2. Check out the all the plugins installed & settings

After swapping the blogs, you can also check the list of plugins installed in it, if your b;pg is missing any important plugin you can also use it in your blog and if the swapped blog is missing any plugin, tell him about it.
Also check the settings made in the plugins for better output.

3. Check out which articles get high traffic from major search engines

Almost all blogs have plugins installed to check out the stats, open it and check out which articles are getting very high traffic from Google.
Make a list of around 5-10 articles that gets good traffic from Google and also gets comments, rewrite those articles in your own wordings by giving your own views and adding extra stuff to it.
Also, use good Search Engine Optimized title and description so as to get top on Google. In this way, the first benefit you will get after swapping the blog is you will get to know which articles get high number of comments.

4. Check out the coding part

If you like any good feature in the theme/template of swapped blog, check out the coding and use it in your blog (by taking permission).
This will help to make your blog more attractive

5. See trash/draft posts

Check out the posts in trash, sometimes it happens that an idea strikes in our mind but we do not get enough content to write on it.
Check out the articles in trash or draft and if you think you can write a detailed article on it, then go ahead.
Either you can submit the guest post on the same blog or by taking permission publish that post in your own blog

So, these were five different tasks that you can do after swapping the blog in order to get high traffic and post ideas. If you have any extra stuff to share, drop a comment, if I like it I’ll definitely add it to my post by giving full credits.

Free customizable Seo ready & responsive Need Mag Blogger Template

2020-03-26T13:20:00.000+05:00

Live Demo

Need Mag Blogger Template Features:
The Need Mag Blogger Template is a magazine blogspot theme that has a design that focuses mostly on content. It is packed with many features such as a rich color combination, fast and friendly loading. This is an SEO optimization model that is fully responsive, which means it will change the design of the layout based on the size of the device's screen. Being a magazine theme, it allows you to display your important messages in various styles like grid style, list style, cursor, portfolio, and more. Ideal for publishing the latest Blogger news, newspapers, magazines, blogs, videos and blogger themed sites. General Chat Chat Lounge Also great for tech, DIY, how-to's, multi-cuisine, weddings, institutes and event-based blogging. It has a huge amount of space and position to display ads on, which will increase your revenue like a heavenly rocket. The most commonly used color is loaded with a combination of black and red, it has a well-placed background image that is easily customizable through a template customizer, without touching any code. Slideshow, gallery,red , email subscription tools ready, footer 3 columns, advertise ready, white, 1 sidebar, 1 right sidebar, clean, minimal, ready, magazine, free premium, right sidebar, post Thumbnail, Responsive, Social Bookmark Ready, Dropdown Menu, 2 Columns, Fast Loading, Browser Compatibility, WhatsApp Sharing, Beautiful.

Long tail or generic keywords for effective natural referencing

2020-03-24T14:33:00.001+05:00

Keywords can be short and therefore generic or long-tailed .

The keyword head or generics are shorter sentences with a generic meaning, such as "men's shoes". While the keyword phrases of the tail or long tail are longer ( minimum 3 to 5 words ). The search terms are more specific and better describe a particular thing or concept, for example "cheap men's dress shoes". Thus, the same search term can be qualified as long or short depending on the number of words.

Beginners in SEO often do not know the concept of long tail keywords and do not realize the immense potential of these keywords.

There is nothing complicated in the art of using long keywords. It's just that one should have a good understanding of how they benefit your visibility.

There are many good reasons to exploit the hidden capabilities of long tail keywords, here are 7 reasons:

1. less competition
Consider the following keywords:

men's shoes - 59,800,000 sites found on Google
branded men's shoes - 50,300,000 sites found on Google
Italian brand men's shoes - 7,260,000 sites found on Google
cheap italian brand men's shoes - 2,700,000 sites found on Google
As we can see, the longer the expression, the less there are corresponding sites, that is to say that it is less competitive.

Therefore, long line expressions are generally easier to position on the first page. So instead of working hard to try to rank number 20 on "men's shoes", why not optimize a page for "cheap Italian brand men's shoes". The potential to be on the front page of this expression will be greater.

2. More traffic than a generic keyword
A single long tail key term is unlikely to attract a ton of visitors. However, long tail expressions in numbers can work miracles. Think of a large bubble surrounded by hundreds of small bubbles.

long tail keywords and traffic potential compared to a generic keyword
So the big bubble is your main keyword, for example, men's shoes. The potential for organic traffic is 1,300 Internet users per month. There are many ways to extend this leading keyword into long tail keywords. And, together, all of these alternatives can represent up to 35% (or more) of your total traffic!

3. Better targeted organic traffic
When the police ask someone to describe a thief, they hope to get as much detail as possible, as this will help them find the right person. The same goes for keywords. The better the query describes what you are looking for , the more likely you are to find only the product or service you need. So visitors who end up on your site after typing in long tail keyword phrases are probably the people you are targeting. The latest statistics on the length of the expression, give an average of 4.29 words typed in the search bar.

4. higher conversion rates
Users who search for more specific terms are normally more advanced in their buying cycle than Internet users who enter generic terms. So, normally, long tail expressions bring in visitors who convert better. So investing in long keywords is often a return on investment and a winning "quality over quantity" strategy.

conversion rate of long tail keywords

5. Long lines already include your main keywords
Another reason why it never hurts to bid on long tail keywords is that they usually include your shorter terms. For example, men's shoes from Italian designers contain “men's shoes”. This allows you to kill two birds with one stone.

6. Ideal for very competitive niches
In some areas, the competition is so fierce that when you reach the first position, you have all the competitors ready to pass you by at any time. A good way to feel safer about your traffic is to look for alternative keywords to optimize , that is, long tail search terms.

For example, you own a hotel in PARIS.

How do you compete on Google with all these hotel chains such as Novotel, Marriot, Sofitel, etc.… not to mention booking platforms such as Booking, Liligo, Tripadvisor, etc.?

Here's how.

Being present on "Paris hotel", you can forget, almost 10 billion sites.

On the other hand, work on a more specific request, "Paris 2 charming hotel"

What you are doing is optimizing your site ( meta title , title tags , images and content ) for a boutique hotel in Paris 2. It doesn't seem that different, but it makes all the difference for you, because there has only 31,700,000 sites competing for this term on Google. Your chances are much bigger to be 1 st page Google.

7. Personalization of Google queries
Nowadays, search results are more and more personalized, that is to say personalized according to

the geographical location ,
of age,
sex,
interests,
price,
etc.
People looking for the same keyword can see very different search results. Fortunately, long keywords can help you optimize your website for different categories of users. To go further, how to find the most effective keywords ?

For example, you can create a separate landing page for designer shoes and a separate web page for designer shoes. Thus, the negative effects of personalizing Google query terms, can improve the conversion rate of your natural referencing.

So, as you can see, there are many reasons to optimize your site for long keywords . The mistake of some SEO newbies is that they ignore multiple word search terms and miss out on great traffic opportunities.

But hopefully it won't happen to you, because you now know where the power of the long tail lies .

How to improve your ranking in Google to have more visibility?

2020-03-23T16:22:00.000+05:00

How to improve your ranking in Google to have more visibility?

Here are 10 SEO tips (search engine optimization) to improve the positioning of your website in 2020. SEO optimization of your website is essential to increase your visibility and the ranking of your pages in the search results of Google and other engines.

Before giving you the 10 SEO tips that will allow you to gain places in the rankings, a short definition of the acronym SEO is essential.

The SEO or Search Engine Optimization includes all optimization techniques for indexing and positioning web pages at the highest level in the search results.

We call SEO friendly a properly optimized web page according to the criteria defined by Google.

How to improve your ranking in Google to have more visibility?

10 tips to optimize your SEO!
Now that SEO has no secrets for you, here are 10 SEO tips selected for you from the 200 recommendations from Google to optimize the SEO of your website.

1: The title of your pages with the <title> tag
It may sound simple and obvious, but make sure your pages all have a title with a title tag <title> . This tag must be completed and must be a description of the actual page and not of the site as a whole. The title must include the main keywords of the page, be unique and must not exceed 60 to 65 characters. The title tag is displayed in Google's search results.

2: The meta description of your web pages
The description should not only describe a web page, it should also "sell" it . The description of your page is displayed in the search results, so it should encourage the user to click on your link rather than another. The meta description must also include the keywords of your page, be unique and not exceed 156 characters.

3: The hierarchy of your content using the semantic tags H1, H2,…
When we talk about the titles defined by the h1, h2, h 3, h4, h5, h6 tags, the W3c ( World Wide Web Consortium ) tells us:

"A TITLE SHORTLY DESCRIBES THE SUBJECT OF THE SECTION IT INTRODUCES"
This means that a title (hn) will describe by explicitly summarizing the paragraph it presents.

When you classify the titles and sub-titles of your page by ranking them, you bring a notion of value to each of your titles . An H1 title should therefore summarize the general subject of your page, an H6 title will summarize a very detailed section of the subject in your page.

4: Authentication of the author and the publisher
Google is the number one search engine, but Google+ is not yet the number of social networks. Google+ is the social network of Google and the one to favor by your company to optimize your SEO.

THE ASSOCIATION BETWEEN YOUR GOOGLE + PAGE AND YOUR WEBSITE IS RECOMMENDED FOR THE FOLLOWING REASONS:
It allows you to get in touch with your friends, fans, customers and prospects
It is effective for local referencing (Google My Business)
It provides Google with information that helps determine the relevance of your site to a user's search query in Google.
It also allows Google to authenticate the author of a web page with , the avatar of the Google+ profile can be displayed in the search results provided that you are surfing while connected to G +.
5: Microdata, an “SEO” added value
There are several different formats for metadata such as microformats and RDF. With micro data, you can define an organization, a person, a product and more. Items such as dates, reviews and job titles can be highlighted in search results, it is both an added value for SEO and an opportunity from a marketing point of view.

6: Internal links between the pages of your website
Internal links connecting your pages to each other are often just as important as external links. All pages indexed on Google have a page rank, this page rank can be transmitted to each link on the page that does not have rel = "nofollow". Therefore, if you have links to your own pages, they will get some of that "link juice". The mesh or linking between your web pages must be relevant both for the transmission of the pagerank and for visitors.

7: The website plan or sitemap
A sitemap is a file in XML format which lists the URLs of your website with in addition some metadata like the date of its last update. The Sitemap technique is officially approved by search engines, using the Sitemap protocol does not guarantee that your web pages will be integrated into the index of search engines, but it greatly facilitates and improves the quality of work of crawlers (robot d 'indexing) .

Once built, your sitemap can then be submitted to search engines, usually through a webmaster tools interface like google webmastertools . (now called Google Search Console)

8: Duplicate data and canonical link
Duplicate content or duplicate content is one of the worst things for your site from an SEO perspective. Each page must have a single domain score and a single URL. If a page on your Internet has an old and a new URL, a 301 redirect must be in place to indicate to the search engine that the page has been moved.

9: Tools for webmasters: Bing Webmaster & Google Webmaster Tools (GSC)
Google, Bing and other search engines have a webmaster tools interface to allow you to consult a multitude of information on your website. You can find there for example the search terms used to arrive on your website, the number of pages retained in the Google index or even possible problems with the indexing of your site. Register your site on Google webmaster tools (renamed Google Search Console) in order to gather very useful information for your SEO and positioning strategy.

10: Rich, relevant and unique text content
Respecting the 9 SEO tips listed above is important to take care of your SEO but it is not enough. You should never lose sight of the fact that the most important thing in your web page is the content . Text content should especially not be limited to the listing of keywords. Search engines must of course find the keywords, but the content must also be readable and make people want to come back to your website. SEO is there to highlight your content and promote it in search engines and not vice versa. A number of words between 200 and 400 is recommended for a web page.

Why follow these SEO tips?
Follow these 10 SEO tips will not systematically guarantee you the first page of Google's search results, many other factors are taken into account for the ranking of your web page, competition on the keywords of your page being the first of them . However, if you don't follow these tips, you are unlikely to improve your positioning. If you do not know where to start to optimize the SEO of your site, an SEO audit will give you the first answers.

6 Tips On How To Optimize Your Blog For Upcoming Festivals

Neither ThanksGiving day is coming and nor Christmas and I should have written this article in the month of November or December but after getting the ideas to write this article I could not resist myself. So, today I am going to share some tips on how to optimize your blog for upcoming festivals in order to get high traffic and earn a good amount of money. I am giving all these tips in advance so that you can get enough time to work on the following points. Lets start:

Optimize affiliate links

Suppose Christmas is coming, then in your blog place links of those products that you think people usually buy on Christmas. You can search for different products on Amazon or other sites and use that affiliate links in your blog.

Optimize posts for money

During the festival season, write review posts in your blog of products related to the festival. In this way you can get a large number of affiliate sales.

Optimize posts for traffic

To get high traffic during festival season you can start some sort of contest and giveaways on your blog/site. Doing this will also help you to get high traffic.

Optimize your blog theme

To leave a good impression on your readers you can change your blog theme/template for 2-3 days related to the festival. Like, if its Christmas you can switch to Christmas theme etc.

Optimize your blog for SEO

During the festival season, try writing on those topics that you think people with search more. Now, you will say if you’ve a tech blog how can you write on other topics. For this, you can create a new category on your blog called off-topics and can share off topic articles there. Do read my article titled Write Off Topic Content And Get Traffic

Optimize hosting

If you expect a high traffic on festival seasons then it is good to switch to some reliable hosting server with high bandwidth, space and CPU usage.

I am sure by following the tips above you will surely benefit a lot from the upcoming festivals.

Massage therapist

2020-03-17T12:13:00.000+05:00

Thanks to different massage techniques, the massage therapist contributes to reducing stress, preventing ailments and improving the condition of its beneficiaries. It can have a positive effect on body posture, relieve back pain, help release tension, etc. It allows a better functioning of the organism, whether it is by soothing pain, improving respiratory capacity, digestion, blood circulation, skin quality or even sleep. The massage therapist promotes awareness of the clean body and provides beneficiaries with soothing, calm, self-worth (self-esteem) and resistance to stress.

At the start of the session, the massage therapist assesses whether his skills are capable of improving the beneficiary's condition or whether he should be referred to another professional. If it can contribute to the well-being of the person, it determines the most suitable massage technique. He can thus use acupressure, lymphatic drainage, Trager, shiatsu, reiki, Tui Na massage, Swedish, Californian or Thai, etc. Depending on the technique selected, the duration of the massage varies between 15 and 90 minutes. The massage therapist must be attentive to any pain or discomfort felt by the beneficiary in order to adapt to it as best as possible. It helps children and adults.

What is massage therapy?

Etymologically speaking, massage therapy means "healing massage". This ancestral therapeutic technique existing for thousands of years was already used by our ancestors in many other cultures and civilizations and brings together a great diversity of manual techniques. Despite differences in philosophy and types of manipulation, these techniques share several common points. Thus, the main objectives of massage therapy are to promote relaxation (muscle and nerve), blood and lymphatic circulation, assimilation and digestion of food, elimination of toxins, proper functioning of vital organs and arousal to a bodily consciousness .

As we know it today, massage therapy has simply been perfected, refined, and modernized so that touch becomes a more structured approach. Finally, the opinion of specialists in this therapeutic technique.

The benefits of massage therapy

Massage therapy is suitable for most people, from toddlers to the elderly. Its effects, which can be soothing or energizing, could decrease nervous excitability, relieve conditions caused by stress (including back pain, migraine, exhaustion and insomnia), increase blood and lymphatic circulation and cause a general state of well-being. It also has other therapeutic applications which we will describe below.

Massage therapy after pregnancy

Massage therapy is widely used in pregnancy, since it reduces the risk of injury to the perineum during childbirth as well as postpartum discomfort and discomfort, rebalances the body, reduces tension to help the woman regain her body gently, and also to relax and tone the parts that have been stressed and tired by the overload.

From a psychological point of view, massage therapy promotes better moral recovery, and helps prevent the symptoms of baby blues, but also reduces stress and fatigue thanks to its relaxing effects.

Massage therapy to relax

The beneficial effects of massage therapy on anxiety have been observed in numerous studies: due to its relaxing properties, massage therapy makes it possible to better manage anxiety-provoking situations and events in everyday life.

Relieve lower back and muscle pain

Numerous studies have demonstrated the effectiveness of massage therapy in the treatment of acute or chronic non-specific low back pain, particularly when massage is performed by accredited therapists and combined with exercise and education programs.

Massage therapy helps relieve lower back pain by stretching the pelvis, legs and lumbar region, which will generate a feeling of well-being and muscle relaxation.
It happens that certain back problems are consecutive to a problematic abdominal musculature, in these cases, massages in the abdomen can be beneficial.

Improve the quality of life for people with cancer.

Several studies have concluded that massage therapy has significant benefits, especially in the short term, for people with cancer. Indeed, massage therapy improves the degree of relaxation, mood as well as the quality of the patient's sleep. It also decreases the fatigue, anxiety, nausea and pain of patients, which contributes to an improvement in the response of the immune system. In addition, another clinical trial showed that massage therapy greatly improved the mood of women caring for their spouses with cancer, in addition to significantly reducing perceived stress.

Improving the growth of children born prematurely

Different positive effects of massage in premature newborns are reported in the scientific literature. For example, it could influence weight gain and promote performance in developmental tasks, bone formation when combined with physical activity and visual acuity. It would also decrease the time of hospitalization, the level of stress during hospitalization and improve the neurological development measured at 2 years.

However, most of these findings are based on clinical trials comprising samples of small sizes and often with methodological shortcomings. This is why it is not possible, for the moment, to comment on the effectiveness and relevance of the massage.

Contribute to the treatment of constipation.

A study has shown that abdominal massage sessions can help reduce the severity of certain gastrointestinal symptoms, such as constipation and abdominal pain, and also increase the number of bowel movements.

Contribute to the treatment of fibromyalgia

Some research has found significant positive effects on fibromyalgia symptoms, such as reduced depression, pain and pain reliever use, improved mobility, sleep and quality of life and a decrease in the feeling of helplessness. However, some studies have pointed out that most of these effects do not persist in the long term and that massage can be very painful under these conditions. However, in the long run, it could lead to a reduction in general pain which would compensate for this inconvenience.

Contribute to the treatment of attention deficit hyperactivity disorder (ADHD)

Some trials have shown some positive effects of massage on ADHD, such as a decrease in the level of hyperactivity, an increase in time spent on the task as well as an improvement in mood, behavior in class and feeling of well-being.

The different types of massage

Massage therapy is practiced mainly with the fingers and hands, but also with the feet, elbows and even the knees. Depending on the technique used, the maneuvers can be applied to the whole body or to a single part. We can focus mainly on the skin and muscles or go deeper into the tendons, ligaments and fascia or even target specific points located along the acupuncture meridians. Although we can easily list more than 100 different massage and bodywork techniques, 1 we can group them into 5 main categories.

The European tradition of massage physiotherapy, based on the principles of Western anatomy and physiology and the manipulation of soft tissues, including Swedish massage, is the classic method.
The modern North American tradition, also based on the principles of Western anatomy and physiology, but which incorporates a bodily dimension to traditional concepts. These include Californian massage, Esalen massage, Neo-Reichian massage and neuromuscular massage.
Postural techniques, aimed at reshaping the body structure by re-educating posture and movement, such as postural integration, Rolfing, Trager and Hellerwork. Although they share certain points in common with these techniques, somatic education approaches, such as the Feldenkrais method and the Alexander technique, are not considered as forms of massage therapy.
Oriental techniques, based among others on the principles of Traditional Chinese Medicine , such as Tui na massage, acupressure, shiatsu, reflexology and Jin Shin Do.
Energy therapies, inspired by ancient healing practices using the laying on of hands, such as therapeutic touch, Reiki and polarity.

The massage therapy session

Massage therapy covers a wide variety of techniques, which is why the course of the sessions varies considerably. Indeed, depending on the technique used, massage can be performed on a naked or dressed person, in a prone or seated position, with or without oil. It can be performed on several types of support: massage table, futon on the floor, ergonomic chair. As for the places of massages, these are also very diverse: centers, groups of therapists, at home, at work, in private practice ... The environment and the context (comfort of the room, massage equipment, brightness, noise ) are very important and have a great influence on the smooth running of the massage.

At the beginning of the session, the massage therapist talks to the person who consults him in order to assess his needs, his desires, and to choose with him the type of massage to be given. During the massage therapy session, the masseur performs various gestures depending on the practice used on the body of the massage recipient. During the sessions, massage products can also be used such as massage oil, essential oils, creams ... in order to complete the effectiveness of the gesture and bring certain complementary virtues.

Traditionally, the classic massage is provided for one hour, but the sessions can vary from 20 min to 2 hours depending on the type of massage and the problem of the individual. For example, the seated amma massage adapted to the business world, can cause deep relaxation in just 20 minutes, while certain African massage techniques, or even Shiatsu, may require sessions lasting from 1:30 to 2 hours.
There are some rare contraindications to massage therapy, especially in the event of an inflammatory process, fever, fractures, recent wounds or bruises. In addition, since massage increases blood pressure and lowers the heart rate, it should be preceded and followed by an evaluation of these parameters when it is carried out on patients sensitive to these modifications. In case of circulatory disorders (phlebitis, thrombosis, varicose veins), cardiac (arteriosclerosis, hypertension, etc.) and diabetes, medical advice should be obtained.

Become a massage therapist: the profession of physiotherapist masseur
In practically all European countries, training in massage physiotherapy is spread over 3 or 4 years. It is even possible to follow a university course up to the master's and doctorate levels, as is the case in Belgium. From one end of Europe to the other, the standards applying to the training and practice of massage physiotherapy are however very disparate. The World Confederation for Physical Therapy, an international organization of more than 100 professional associations specializing in body therapy, works to standardize curricula and practice internationally.

History of massage therapy
Texts and illustrations have shown that massage is part of traditional Chinese medicine, 4,000 years old, as well as Ayurvedic medicine from India. Manual healing techniques have also been used in Egypt and Africa for more than 4,000 years.

In the West, the practice dates from the Greco-Roman era. Among the Greeks, passionate about beauty and physical education, massage was part of popular culture. It was customary in gymnasiums and palestrials to follow a bath with good friction with oils. Hippocrates (460-377 BC), the "father" of Western medicine, used it as a method of treatment.

On the other hand, among the Romans, massage had no therapeutic connotation. It was practiced in public places (rest rooms, gymnasiums, massage workshops), later transformed into places of debauchery, which contributed to the bad reputation of massage and its prohibition by the clergy. It was at the end of the Renaissance that some doctors reintroduced this practice.
Since Harvey's discovery of blood circulation in the 17th century, massage therapy has gradually become part of health care. From the 1960s, after a few decades of dominance of technology and pharmacology in modern medicine, there was a renaissance of a more holistic medicine, including massage and bodywork techniques.

Currently, massage therapy is regulated in 3 Canadian provinces (Ontario, British Columbia and Newfoundland and Labrador) and in twenty American states. In Europe, the professions of physiotherapist and masseur-physiotherapist are recognized. In Germany, the practice is covered by the health insurance scheme. In China, it is fully integrated into the health care system.

6 Best Free Responsive Blogger Templates 2020 - Techno-ahmad

2020-03-17T10:05:00.001+05:00

1 :

Responsive and Seo ready free high quality minimo blogger template for blogspot in 2020

Live Demo

Features of the minimo blogger template :

Minimo Blogger Template is an elegant and simple professional blogger theme with an elegant and sleek design. It is a fully responsive and highly optimized theme with excellent SEO functionality; it can automatically adjust the width according to the screen size or the type of device. It has been carefully coded and designed to keep up with modern web trends while supporting the full Blogger generation code. Because it's a simple theme, it loads very quickly at the same time and also contains an incredibly easy-to-read typography style with professional fonts and a striking color combination. This beautifully designed theme is great for personal blogs and can also be used for niches such as travel, adventure, OOTD, fashion, lifestyle, personal blog, journal entries. With a clean and simple design, with an elegant and stylish color combination. Simple and fast loading, responsive, ready for SEO, personalized from WordPress, ready for announcements, ready for retina, ready for Braai navigation, mode, drop-down menu, ready for social bookmarks, page navigation menu , message thumbnails, clean, browser compatibility, black, green, 3 columns, elegant, white, minimalist, elegant, WhatsApp sharing, free premium, right sidebars, 1 right sidebar, black, beautiful custom pages, slideshow, Google , AMP, portfolio, grid.

2 :

Responsive and Seo ready free high quality plate blogger template for blogspot in 2020

Live Demo

Features plate blogger template :

The plate blogger template is incredibly professional and professionally crafted on Blogger Blogger Blog. Built with amazing functionality, this type of theme is a custom prescription print that is great for creating a great selection of recipes and exciting messages for you! Made with the latest technology and the latest codes, this is one of the cleanest features of the blog currently available. Loads fast and brings lots of cool features to your blog. This theme is a great match for organic cafes and restaurants, organic farming, healthy food blogs. Organic and healthy food, daily blogging, personal blogging, OTD blogs, makeup, jewelry, fashion, etc. It is a fully responsive theme and automatically adjusts to any screen size. Simple, fast, responsive, seo ready, ad ready, retina ready, braille navigation ready, fashion, dropdown menu, social bookmarking, page navigation, web navigation, web thumbnails, cleanliness, browser compatibility , Orange, red, white, 2 columns, cute, white, modest, opaque, whatsapp sharing, free premium, right sidebar, 1 right sidebar, black, gray, private pages, slideshow, 3 columns, mega menu, google, Mpg

Malina beauty responsive blogger tamplate 2020

Live Demo

features Malina Beauty Blogger template :

The Malina Beauty Blogger template is a beautiful premium personalized blog theme designed by professionals. This article contains a small magazine. In response to shape, this feature adapts to any screen size on any device. Appears on desktops, laptops, tablets and mobile phones, but looks great in any size. It's an amazing feature created by a wonderful minimal approach that helps you design your dreams and design your blog. It is particularly suitable for fashion magazine blogs and can be used for photography, food, reviews, movies, guides, sports, cosmetics, travel, DDD, personal and more. kee easy, rapid loading, responsive, SEO ready, wordpress friendly, ads ready, retina ready, lounge tent, fashion, drop-down menu, 3 columns, nice, white, small, beautiful, WhatsApp sharing, free premium, right sidebar Barre , 1 right sidebar, black, female, personalized pages, slideshow, Google, desktop, portfolio, grid.

Alva Responsive blogger template 2020

Live Demo

Alva Responsive blogger template is an authentic and well-customized Blogger Blog theme with a robust and unique layout. It's a fully responsive and highly desirable feature that works well on any device - computer, laptop, laptop or mobile. This Blogger theme is beautifully designed, and makes it a great blogger template for blogs of all kinds. This theme is ideal for nails like fashion, travel and tourism, Ottawa, makeup, DIY, clothing, daily blogs, influencers, reviewers, food bloggers and reviewers. At the same time, he looks very attractive and calm. This theme has a very professional color combination with a combination of light and dark colors. It also has a wonderful personal style of luxury. Simple, fast loading, responsive, seo ready, wordpress ready, ad ready, retina ready, dropdown menu, social bookmark, sheet navigation menu, post thumbnails, cleanliness, browser compatible, Blue, black, 2 columns, beauty, white gloss favorites, whatsapp sharing, free premium, 1 right page, magazine, news, technology, blogger, fashion, amp, google, animation.

5:
Raptor responsive Blogger Template 2020

Live Demo

Features Raptor responsive Blogger Template:

The Raptor responsive Blogger Template is a flexible and elegant semi-magazine theme, professionally designed with a feature-rich layout and a responsive design that can adjust the width according to the size of the device, whatever the platform , the operating system or the device does not use the visitor to your blog; it will look pretty in every way. Ideally designed for technical and news blogs, you can use this theme for travel, food, newspapers, viral blogs, authority blogs, reviews, movies, how-to, sports, slots , authority, schools, institutions and more. . Customizable and allows you to create new special designs with a few clicks. This incredibly designed blogspot template is extremely optimized with SEO and fast loading, helping you get high rankings on different search engines. This beautiful blog theme is filled with extremely premium color combinations and looks very elegant. SEO ready, ready ads, magazine, responsive, fast loading, browser compatibility, elegant drop-down menu, 2 columns, red, white, black, page navigation menu, amplifier, Google.

Sora Times responsive Blogger Template

Live Demo
The new SEO Blogger model is a very professional and unique Blogger theme. With its responsive design and flexible aspect ratio, it can accommodate larger sizes depending on the size of the screen and the type of user, whether using a computer or laptop, tablet or smartphone that looks great on any device. This theme is built with the latest technologies and the latest generation codes, making it very much needed for SEO and faster loading. This theme is packed with the latest Google Schema tags to help you analyze the next generation of schema codes. It is ideal for newspaper sites, and can also be used in blogs like travel, magazines, fashion, DIY, lifestyle, girls, etc. Simple, fast loading, responsive, seo ready, wordpress ready, announcement ready, retina ready, dropdown menu elegant, whatsapp share, free premium, 1 right page, magazine, news, technology , Blogger, Fashion, Amp, Google, minimalist

High quality free Sora viral blogger template for blogspot in 2020

2020-03-15T18:02:00.008+05:00

Live preview

Characteristics of the Soraviral template:

Sora Viral Blogger Template is a unique virus blogger template with unique and unusual features. This feature is available in a variety of self-supporting widgets, so you don't need to add them.

This is a very convenient feature that will increase your traffic and revenue.

The most unique feature is a dark and light switch that allows your users to choose a dark and light background so that it doesn't hurt their eyes when reading a virus text.

This is one of the most promising and recent themes in Blogspot

The most promising,
fastest loading,
ready for reference,
fully responsive
published in two separate sections. newsletters,
reviews,
technology,
movies,
food,
how to guide, etc.
. very Simple, very faster installation,
beautiful,
responsive,
SEO-ready,
WordPress,
ads ready,
retina ready,
drop-down menu,
social bookmark ready,
page navigation menu,
post-tent,
clean,
browser compatibility,
red, black, 2 columns, modern, White,
beautiful,
WhatsApp sharing,
free premium,
1 right sidebar,
magazine,
news,
technology,
blogger,
fashion,
EMP,
Google,
minimal features,
day and night.

Conclusion

Soraviral template used for blogspot on any mobile ready devices.Soraviral used for photography and other these things. It is High quality free blogger template for blogspot in 2020.

Tea cup | types of tea cups relation with human and history | Techno-ahmad

2020-03-11T12:57:00.001+05:00

The great thing about tea is the countless varieties of flavors. With the right cup, you will appreciate all the aromas. Stokes offers a full range of mugs in all sizes, colors and models. Share this hot drink with a friend or work colleague by purchasing one of our teapots or our different infusers .

Cup of tea secrets of your personality

1: Like and dislike

A person's likes and dislikes prove to be very helpful in building his character, but you will not believe that at the same time, personal choice also reflects the nature of the person concerned.

2: Cup of tea

According to psychologists, even the cup of tea you use or buy has the ability to present your nature to others.

3:Display of nature
Maybe you are not sure about our words, yet it does not matter, we tell you something that will change your doubts in the belief that yes, your choice can really show your nature.
4:White cup

If you like simple and plain cups among different types of cups, it means that you like to live life without any disturbance or trouble
5:Control emotions

Before starting any work, you make a definite goal and then proceed on the same. Such people prove successful in controlling their emotions.
6: colored cup

People who like cups of different colors believe in living their life in an exciting way.
7: Positive thinking

They move with absolutely positive thinking and expect others to have the same thinking
8: Dark cup

People who like dark colored cups are open minded. These people try to finish their work on time and do not want to waste time unnecessarily.
9: Designer cup

People who like cups with different shapes and sizes lead a life of eagerness. With courage, they make every effort to achieve their definite goal. They have excellent leadership skills.
10: Cartoon Cups

People who like cups and crockery with cartoon characters are very close to their family. His love for children is amazing.
11: Flower-cup

Such people are of creative and honest personality, whom flowers and leaves affect more. They require change over time, otherwise they get bored very quickly.
12: Friends identity

They have a gathering of friends, but in reality, such people are considered to be less.
13: Work tips
Which of these unique ways described affect you and which methods you find useful for you, do tell us.
14: mystery
Soon we will bring to you some other very unique customs, traditions and mythological mysteries.

Tea relieves tiredness, waste time

People also invite you to have tea with us tomorrow evening! Through tea, people find excuses for gossip

** Professor Aft Gul Honor. Karachi **

Tea is a beverage widely consumed all over the world today, though its appearance may be slightly different in different countries. The love, devotion and charm of tea in the dimensions of our country is seldom seen anywhere else. Here in the morning tea cups in the morning are peeled. Tea runs at the office meeting, but in the office, the tea stays constant until the last minute in the office building. Tea is often consumed in the markets, shops, hotels, orbit is served with tea cups for the guests, exhaustion of work is consumed by tea, waste time is consumed by tea. Workers, peasants, office-bearers, housewives, women of all kinds drink tea and get servers. For people, the value of tea and its value is so high that it is morning or evening at their appointed time or After that, if people do not get tea for a while, then people's moods get worse, headaches and pain may start to explode. There is always one scene at our country's railway station. Whenever a train arrives, Ricky, people from every box come down and gather around the stalls at the station below, like ants on a sack of sweets. This gym of people gathers for the demand of ungrateful tea. This item is either very thin or it is cooked on the stove for several hours and then thickened. This item is either dipped or contains a very sweet dessert. Whatever the tea, the tea's taste, aroma and its color are almost completely lost. The majority of travelers drinking this type of tea are relieved of their tea and they are reluctant to remove it from the throat. This reduces the "stroke" of tea. Many people wait for the trip to end when they arrive home to drink their favorite tea. People drink tea in cold weather because it eliminates the effects of frost and brings heat to the body. Tea is consumed with the same passion and enthusiasm, especially when it is running or it is raining, windy or stormy. Devotion to tea does not end in any way. People are also invited nowadays so something like "Have your tea with us tomorrow evening! Through tea, people find excuses for gossip. One problem with tea is that it is purchased at expensive prices from other countries. This puts a huge burden on the domestic treasury and our debt is also increasing. If we quit drinking tea, how much debt would we avoid? We told our friend Salma, who is a tea maker that Mirza Ghalib has said for you:

قرض کی پیتے تھے’’ٹی‘‘ اور سمجھتے تھے کہ ہاں

رنگ لائے گی ہماری فاقہ مستی ایک دن

So they stare at us in anger and say, "Are the loans just being consumed by tea, are they only importing tea? There are a lot of luxury goods coming from outside for foreign exchange, if the poor people of our country are getting tired. If you resort to a cup of tea to object, what does it mean? People are very upset and upset today, inflation has hit our nation like a monster. People are buzzing with loads of electricity. There is unemployment, poverty everywhere, so there are pressures on people. Then, there are the cruel orders of the IMF:

During this period, the IMF struck

Living is the same thing, great thing, dear

So people are desperate and heartbroken as some people in "depression" start to eat more so that they can escape the feeling of frustration and sadness, so people seek refuge in the cup of tea and misery of depression. Anyway, this is just a cup of tea in their bus and there is nothing else for them to drink grief, which they are going to drink. Salami, now the cup of tea is not cheap, milk is expensive. , Tea leaves are getting worse day by day, the price of sugar rises a little bit every month but what to do, some support for living So tea is also a means of living and if tea is taken away then it would be a great injustice. However, now we have thought that everything is bad, so tea is a little bit less fine so that it does not cause more harm than its side effects and we do not lose its benefits. What do you think

How much health enhancer tea?

In modern times, tea is an accessible and inexpensive drink. There are many assumptions about this. The tea we drink in Ayurveda and the Unani system has been described as harmful. But most people use tea only to erase tiredness and tiredness. The British government promoted tea in every city of India free of charge. At that time, double roti was also served with tea. Gradually, every Indian is now drinking an average of three to four cups of tea. Truth be told, tea is the favorite drink of all the poor and rich.
Tea is said to have been discovered in 2400 BC. The former was made by Shenug in an accidental incident. After a day's exhaustion, one day he was resting in his garden with a cup of hot water. At the same time, some leaves of the tree near him fell in his cup. He drank the cup slowly without noticing and Enjoyed the taste, then he felt pain relief from this drink. In this way a cup of tea came into being.
Indian legends tell that during the Buddha's seven-year practice, he felt lethargic in the fifth year, when he chewed himself by chewing a few leaves of a nearby bush, this bush was a tea tree.
The tea plant is called Camilla sinensis in scientific language. There is a process of tea production in which green and fresh calyces are converted into dry and black tea. It goes through many processes, from picking to closing in the box. In the picking phase, the upper leaves are broken at intervals of 7-8 days, from which quality tea is produced. Fresh and green leaves are now heated to fourteen hours to make the moisture free. Generally tea is of the following types - white tea (unoxygenated), green tea (unoxygenated), olog tea (partially oxidized) and black tea (fully oxidized). Herbaceous tea is usually a mixture of decoction leaves, flowers and fruits, vegetables or individual parts of plants that do not contain Camilla sinensis.
White tea is similar to green tea but its taste is mild and sweet. It should be soaked at a temperature below the boiling point of water. The amount of cocaine in white tea is 15 mg instead of 40 mg in black tea. And 20 mg in green tea. Happens till then. Studies show that white tea has more anti-cancer antioxidants than green tea. China and Japan are the two major countries producing white tea. But only in the Darjeeling region of India some quantity is produced.
Green tea is in reality the leaves of Camilla sinensis that undergo a certain process. It tastes like white tea, has low caffeine content and has high antioxidant properties. The amount of oxidation of green leaves before drying is seen. Tea contains enzymes in the veins of leaves, which get oxidized by breaking out or cutting the leaves.
Among the four types of tea, the process of olog tea is the most complex. It is a tea between green and black tea as it is partially oxidized during the process. After picking the leaves, they are usually taken in mode, and are left open in the air to gradually oxidize the essential oily substances. In this process, the leaves turn black over time and a separating aroma is produced and as a result, this tea is located in the middle of black and green tea.
Black tea is the most common of the four types of tea and is the most popular in the world. It is mainly used in making ice tea and English tea. Since there are three main steps in the process of making black tea, cutting, tearing and twisting. Hence it is also called tea. In order to remove the moisture of the leaves, hot air is poured on them till they become soft and soft. In order to take out the aromatic juices from these withered leaves, they are torn between the machine's palms and torn. They are then taken to the fermentation chamber where they change their color to copper in the presence of controlled heat and moisture. Finally: They are dried in the bhathi. Where it penetrates and is black-brown in color due to heat effect. Like other types of tea, it also contains caffeine which is a stimulant. It immediately empowers our senses. It also contains other essential wastes such as polyphenol and vitamins etc. Black tea is also called completely milk-free tea.
Aromatic tea or flower tea is green or white tea. Which is a combination of some flowers. It has a soft, interesting taste and amazing aroma. As in black tea. Like the flowers, the original green teas add bad varieties to confuse them with the preferred flavor. It accompanies many industrially made flower teas. The delicious jasmine flower tea is very famous mainly in Asia and Western countries where many people drink this type of tea.
Tea is healthy for all due to its following properties. It contains 1/3 part caffeine than coffee or cola, which reduces tiredness. Maintains the consciousness of the mind, gives stability to the level of liquids and the amount of fat and calories is zero. The amount of antioxidant present in one cup is equal to the amount of one-time vegetables. Tea is an incredible source of natural fluorides that prevent enzymes responsible for the growth of the bacterial bacteria and the lining of the teeth. It also contains abundant amounts of manganese and potassium, which respectively regulate bones for health and heart rate. Apart from this, vitamin E1, E2, E7 folic acid and calcium etc. are also found.
Consumption of tea can be beneficial for heart diseases. The paleonoids present in it protect from heart disease. Pure tea reduces blood pressure, reduces blood pressure, reduces cholesterol and maintains the body's transport system, arteries and veins. Research has found that people who consume one or more black tea cups have a 60 percent lower risk of heart attack than those who do not consume tea.
Tea is believed to be helpful in preventing cancer. The oxidation present in it helps to protect against cancer of the mouth, stomach, pancreas, lungs, Grass tube, Chest, Older and masculine glands. Green tea is helpful in preventing cancer of the Grass tube. Green and black tea prevents the growth of parasitic cancer. Green and white tea fights with major cancer and reduces the risk of stomach cancer. Hot tea reduces the risk of skin cancer. Not only this, tea also protects against cancer caused by smoking. Tea
is known to enhance immunity, some components of green tea help in killing leukemia cells. It is also considered to reduce the risk of many other diseases such as Alzheimer's, hypertension and AIDS.
Drinking tea also has health side effects. Tea bags (tea bags) also contain cancer causing substances. Some tea bags are coated with soaked paper to give a layer of epichlorohydrin, which is considered as a cancer causing substance. It is not only limited to tea, coffee bags also have this effect. Therefore, open tea leaves should be used or such tea bags should not be used. Stool
are all found fluoride in tea leaves. Adult in a single tree. The leaves have less amount of fluorides than the new leaves. Because it is made only from buds and new leaves. This amount of fluoride directly depends on the amount of fluorides in the soil. Tea plants absorb this element more than other plants.
The effects associated with caffeine are also
no less . It is a primitive medicine and it can be adversely affected by taking an overdose of tea. As the probability of increase in sleeping sickness increases. She goes . Per caffeination reduces the whole caffeine in black and green dry teas by 15 to 3 times respectively.
Black tea is primarily a source of caffeine. Although the average amount of caffeine in most teas is less than a cup of coffee. Some people are uniquely receptive to the effects of caffeine and feel an increase in anxiety, tremor, and blood pressure even in small amounts. The only way to reduce caffeine levels is to drink white tea, which is low in caffeine or buy naturally flavored black or green tea.
Tea contains oxalates which combine with calcium to form kidney stones containing oxalate. Having oxalates in tea is a problem for many people. In some receptive people, too much oxalate increases the risk of kidney stones. Those who have kidney stones in the background should take a very controlled amount of tea and reduce the food sources containing oxalates. It absorbs free calcium and other minerals in the body.
The tannin obtained from tea, which is a type of poly phenal, gives good and nutritious taste when consumed in excess. But it reduces the absorption of certain minerals such as iron. Therefore, some people develop anemia. Tea should not be taken with food to avoid this. Another method is to add a few drops of lemon to the tea before drinking. The presence of vitamin C in the lemon helps prevent the harmful effects of mineral absorption of tannin.
Drinking more tea is associated with a serious risk of cancer. A factor study found that hot tea or very hot tea compared to lukewarm tea or light hot tea increased the risk of cancer of the grass duct. goes . This risk is increased by drinking two to three minutes, or by drinking less than two minutes, as opposed to drinking at least 4 minutes after pouring the tea. goes . Defective storage and packing also make tea harmful. Fungal growth in tea leaves is produced by defective storage technology. Which cannot be separated from ordinary leaves, these fungi dissolve in water while making tea. If they are consumed, it causes many diseases and allergies.
Tea is a beverage liked by people of all ages and we can get related products anywhere. For example, delicious green tea cake, green tea ischem, ice-cold lemon tea etc. are easily available in all the shops or super markets. Along with the delicious food items made from tea,
it is helpful in our digestion by taking them after meals. Green tea leaves are helpful in cleansing the oily nature of meat and also relieves the smell of fish coming from seafood and brings with it a unique aroma. To get maximum health benefits from tea, take only good quality loose tea leaves from your nearest or online shop. Make it and enjoy it and yes even when you are going out of the house do not leave the idea of enjoying tea with a bottle.
After knowing all this, you decide for yourself, eat tea but not so much that it becomes harmful. In today's age, it is very difficult to avoid tea. Sometimes the host is in a big crisis. I don't drink tea when you say that. We can easily say that tea is the same as pumpkin in the vegetables found everywhere, which the poor rich can use.

Techno-Ahmad

Sylva Blogger Template Seo ready responsive | free download

Sylva Blogger Template

1: Sylva Blogger Template use for

2: Features of Sylva Blogger Template

How to create simple | stylish drop down navigation menu in blogger widget WITH ( HTML/CSS)

Turn the Labels Gadget into a drop-down menu on Blogger

Create a drop-down menu with grouping items on Blogger

Link in an article on Blogger

How to add this Dropdown Menu in Blogger

10 Most Popular cute & attractive wordpress | blogger widgets 2020 free ( HTML/ Css )

Read also: Popular Posts widget Blogger

Add the Popular Posts gadget to Blogger

popular posts widget for blogger

Popular Posts Style 2

Popular Posts Style 3 -

Popular Posts Style 3 - Colorful Blogger Boxes

Popular Posts Style 4 - Grid

Popular Posts Style 4 - Blogger Grid

Popular Posts Style 5 -

Popular Posts Style 5 - Numbered Articles For Blogger

Add CSS code

5 New Designs For The Popular Posts Gadget For Blogger

Gadget Image Grid

Horizontal Popular Message Gadget Widget

Show Popular Posts Widget for Blogger with 3D Cube Animation

WordPress Popular Posts: display popular blog posts

Display popular articles in a sidebar widget

Popular WordPress Articles Widget

Decorative line

Choose the posting period

The "Stats" part

WordPress Popular Posts Stats Tab

Set a default image.

Show thumbnails of popular articles

Conclusion

Add Responsive & stylish contact us widgets for blogger | techno-ahmad

1: Checkout our product

CSS Contact us Form for blogger widgets

How do I add a contact form (contact us) to Blogger?

Part 1: Adding the Contact Gadget:

Part 2: Hide the gadget:

Part - 3: Adding a contact form to a page

Step 3: Add a title (like Contact Us) and then change the settings given below.

How to add a contact form on a subpage

Conclusion

How to generate new traffic, leads and conversions Summary

1 generate old reused content

Figure 1: Biggest challenges for marketers (source)

Why reuse old content?

Increase reach

Win time

2 generate old content to reuse

Figure 2: CoSchedule also gathered the challenges of marketers (source)

SEO added value

7 ways to reuse your content

1. Write smaller articles using information from your 10x content

2. Convert your existing content into infographic

Figure 3: Animal-friendly infographic

3. Write a guest contribution

4. Share your content on other platforms

5. Create a presentation

6. Share your content on your social media channels

7. Talk about the topic in a video or podcast

Figure 4: The popularity of podcasts is increasing. (Source)

conclusion

11 steps to the perfect architectural site concept

Smag Blogger Template Seo ready and responsive theme

Smag Blogger Template

Smag Blogger Template Seo ready and responsive theme features:

Blog in use

Foodup blogger template Seo ready and responsive theme

Foodup Blogger Template

Foodup blogger template Seo ready and responsive theme:

Foodup blogger template features

Blog in use

Conclusion

This latest blogging theme for blogs is based on the new generational structure of Blogger, which loads it quickly, provides a complete response and optimizes SEO.

OmMag Blogger Template Seo ready and responsive

OmMag Blogger Template