How to Make Rotating Image Holder For Blogger Images

Hello guys out there, are you looking for a different and unique  hover effects style to your images? Today, I will share you a rotating image holder for a specific image(s) in your blogger blog. This tutorial was made possible after I visited the about page of  Md. Atiqur Rahman of Bangladesh. This tutorial is divided into  two parts : First, the putting of HTML in your Blogger post editor's page and the second is adding the CSS in your Blogger template source code.

Live demo :  How to Make Rotating Image Holder For Blogger Images

Add Rotating Image Holder For Blogger Images

Part A.  Adding HTML code to Blogger Post Editor's page

Step 1. Go to Blogger Dashboard >>  Post or New Post
Step 2. Switch it HTML mode and paste the code below

<div align="center">
<div class="imgholder">
<div class="outer1 circle">
</div>
<div class="outer2 circle">
</div>
<br />
<figure>
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvKmHfxtDYE8cI7Nrx-hgbCPqcFkdmviXS_OQJzAbLrwaghL1WalqDiVGr-TqAXRG3mtkJQdqLLprNXovsxh8s-PM1Vx7ftXqRMDjIAhGqlG9fbTnl8teyIif31DH7fUmZLZKHZrY6mqi/s1600/blogger+guest+author.jpg" />
   <figcaption class="caption">Manny Pacman</figcaption>
  </figure>
 </div>
</div>

Step 3.  Replace the  orange bold line with the  image url of your own and the red bold line with your own  image caption.

Recommended: How to upload images to Blogger and Get Image Link

Step 4. Save your work and your halfway done!

Part B. Adding of CSS to Blogger Template Source Code

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look the code below

]]></b:skin>

Step 3. Copy the code below and paste it above the code in step 2

.imgholder:hover img {
opacity: 1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder img {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 120px;
z-index: 2;
/* border-radius: 100px; */
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
opacity: 0.3;
filter: alpha(opacity = 30);
box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
/* -webkit-box-shadow: 0 0 5px #000; */
transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transition: opacity 1s, transform 1s ease-in-out 0.3s;
-moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s;
-webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover .outer1 {
border-color: #0088EA #7FC9FF #0088EA #7FC9FF;
box-shadow: 0 0 10px #0285E2;
-moz-box-shadow: 0 0 10px #0285E2;
-webkit-box-shadow: 0 0 10px #0285E2;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.imgholder:hover .outer2{ opacity:0.9; filter: alpha(opacity = 90); transform: scale(1,1) rotate(-10deg); -ms-transform: scale(1,1) rotate(-10deg); -moz-transform: scale(1,1) rotate(-10deg); -webkit-transform: scale(1,1)rotate(-10deg);}
.imgholder .outer1 {
top: -8px;
left: -8px;
width: 120px;
height: 120px;
z-index: 2;
border: 8px solid;
border-color: #DEEBFC;
box-shadow: 0 0 3px #AFD3FF;
-moz-ox-shadow: 0 0 3px #AFD3FF;
-webkit-box-shadow: 0 0 3px #AFD3FF;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
/* background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); */
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s;
-moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s;
-webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;
}
.imgholder .circle {
position: absolute;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder .outer2 {
top: -18px;
left: -18px;
width: 136px;
height: 136px;
z-index: 1;
border: 10px solid;
border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
box-shadow: 0 0 20px #8EB9FF;
-moz-box-shadow: 0 0 20px #8EB9FF;
-webkit-box-shadow: 0 0 20px #8EB9FF;
opacity: 0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3) rotate(180deg);
-ms-transform: scale(1.3,1.3) rotate(180deg);
-moz-transform: scale(1.3,1.3) rotate(180deg);
-webkit-transform: scale(1.3,1.3) rotate(180deg);
transition: opacity 0.5s, transform 0.7s ease-out;
-moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out;
-webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;
}
.imgholder .circle {
position: absolute;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.imgholder:hover figcaption {
top: 85%;
}
.imgholder figcaption {
position: absolute;
left: -5px;
top: 31%;
width: 130px;
color: #004E87;
font-weight: bold;
text-shadow: -1px -1px 0 #fff;
z-index: 4;
transition: top 0.5s ease-out;
-moz-transition: top 0.5s ease-out;
-webkit-transition: top 0.5s ease-out;
}

Step 4. Save your work and your done with the tutorial

Customization:

We will focus  first  on the image holder on its default and with  a mouse hover effects on it.
On default for image holder outer 1: Change the hexadecimal color #DEEBFC with another one. You can try also  our hexadecimal colors.

With mouse hover for image holder outer 1: Replace the hexadecimal colors #0088EA #7FC9FF #0088EA #7FC9FF with another sets. The sequence is from top (#0088EA), right (#7FC9FF ), bottom (#0088EA ), and left ( #7FC9FF) respectively.

 With mouse hover for image holder outer 2:  Just change the hexadecimal colors #D6E5FC #9BC8FF #D6E5FC #9BC8FF with another sets. The sequence is from top (#D6E5FC), right (#9BC8FF ), bottom (#D6E5FC), and left ( #9BC8FF ) respectively.

 For the image holder caption in its default setting, change #004E87  to change  the color of the image caption. You can also change the margin by customizing the top and left attributes of the CSS under .imgholder figcaption.

And finally for the hover effect on the  image caption, replace the margin attribute which is 85% for the top margin depending on the position of your caption of the image on your post.

How to Integrate Font Awesome to Blogger Sidebar

Hello friends out there! Font Awesome integration to our  Blogger posts body is really nice. This give more emphasis to the meaning of our written article aside from putting professional images on it. Today, I will share  how to add font awesome icons to your sidebar since it also provoke your readers to stay longer in your blog to by clicking the widget below on it like your most commented widget, popular posts and the like. You can also glance my sidebar to the live demo of this post. Without much words to say buddies, let us proceed to its tutorial.

Recommended

How To Integrate Properly Font Awesome Icons In Blogger Blog

How to Add Font Awesome to Blogger Sidebar

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Locate the code below

</head> 

Step 3. Just above the code in step 2, paste the code below

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Note:  Just skip this step, if you have already installed the font awesome icon library in your blog

Step 4. Go back to Blogger Dashboard >> Lay- out
Step 5. Select among your Sidebar widget of which among them you are going to put the font awesome icon
For example in my case, I choose the widget which is  "Categories". Locate the widget ID  of it by clicking its name "Categories" and click the address bar which is located in the top portion on it. The image  below will speak more of what I mean to say.

Step 6. Go to Template and click Edit HTML

Step 7. Inside your template Editor's page type the widget ID of your sidebar gadget (Label 1)

Step 7. Expand the code by clicking the triangle as shown in the image above (the triangle after the violet arrow)

Step 8. Then you will see the code below, click it to expand

Step 9. Then you will see the code below

<b:if cond='data:title'>
    <h2><span><data:title/></span></h2></b:if>

Step 10. Insert the HTML line that bears the font awesome icon after the tag <span>. See the example below

<b:if cond='data:title'><h2><span><i class='fa fa-stack-overflow'/><data:title/></span></h2></b:if>

Do this in the other widget in your sidebar! Try to view the list of available icons font awesome for your varied choices.
Thanks Buddies for usual support and God Bless!!!

8 Best Content Writing Tips For SEO Friendly Blog Post

As all web developers know about content writing for SEO, it is an action by which we create content that has a sole purpose and that is to direct  search engine traffic to our site and no other more! Such move  helps to improve our ranking on a SERP (Search Engine Results Page) on major search engines like Google, Yahoo and Bing. In order to make our  content easy for search engine robots to rank in the front page (rank 1) especially for beginners is  we should apply the best tips like  submission of sitemaps to Google webmastertools, write not for robots only but to your real consumers, optimize blog  via social media and the like. Those are just the components  to make your content well and change the overall ranking of your website. Have a look at some of the best content writing tips to make a SEO friendly blog.

Best Content Writing Tips For SEO Friendly Blog

1. The essence of content you write

With much respect to your chosen topic, the content you wrote should have the power to drive  large audience. In order to make this is we should put in our minds the main purpose of our job which is to help other people or  company much more than what SEO does. Even if there are lot of competitors out there, then if you have a very nice articles that could change the world then Search engine robots will love it. Good content will increase the page rank and would also be shared by your readers to others in the web via social media like facebook and twitter .

2. Stick to one topic per post

If you are discussing in a certain post about "Best Content Writings Tips For  SEO Friendly Blog" then stick to it. Don't integrate in your content like "Best Cooking Schools in the World" which is quite irrelevant to the former.Writing can be done in various ways or modes. Each way is different from all others and better to the other person. Do not deprive your self to write naturally because in this way you're showing your true personality and that's what people really like to read.

3. Write article with attractive heading(s)

Readability of the content must  be the first objective of any writer and we should start it at our blog title and  post titles. Titles of web pages and article that grab audience attention are the ones which be clicked first by the readers.Unfortunately many  bloggers especially  the new one tend to commit mistakes here is by making very generic and boring titles like "SEO Friendly Blog" instead of "Best Content Writing Tips For  SEO Friendly Blog ".  Try to be creative, imaginative and make your title attractive so that visitors will stay longer on your site and click more to other posts. Constant practice will make your work perfect.

Also read:  Optimize H1,H2 & H3 Heading Tags For Better Seo In Blogger

4. Appropriate Use of Keyword

Always watch your keyword length and density in a specific article. Posts written for directory submission and content for web copy should ideally have 300- 1000 words. Blog posts and social media posts must be shorter in length.  A keyword for every 50 to 100 words is desirable in an article. But avoid keyword stuffing. Your keyword should be evenly distributed throughout the post and should be not be  over used! Your number of keywords used speaks the length of the article you are writing.

5. Use Meta descriptions

One way to drive more traffic to your site is to have a meta descriptions which is highly recognizable by visitors. Meta descriptions are 150 character descriptions of the content. The content written should have Meta descriptions with keywords.

Recommended:
                        How To Add Meta Description To Blogger Using Blogger Settings
                        How To Add Meta Tag Description In Blogger

6. Write original content

Avoid spinning articles from different sources since it could adversely affect search engine optimization. Writing content which comes from your imaginative and clever mind is very much essential for  your SEO plan.  Copying content from others degraded your website reputation. If it cant be avoided, try to put attribution link as a sort of complement from the source.

7. Have a friendly tone and interactive mode

Try to be friendly to your readers as much as you can. Be courteous to them since they are the true consumers of your written articles. You can't be a good content writer if you don't know how to humble and with 100% tolerance to "back bites" or people who wants to pull you back.

8. SEO Friendly Blog Structure

Sometimes readers will judge the author by seeing alone its blog appearance. They loved to read articles with beautiful blog design. Just like  a visitor in a Mall with no intention to buy who founds the place very conducive will be provoked to buy something. In other words, readers should not leave your blog without buying any stuff since they found your site very interesting and  helpful to them.

Make every blog post as a magic post of your site. You should have well constructed headings, internal sub headings, keywords and a well position classifieds ads to promote itself in the market online. Furthermore, the use of images will  further add  value of your content. Visual supplements play a vital role to make readers not to fell bored and dull. Photographs, infographics, slideshows and artwork are just few of them.Much better if the images you use don't violate copyright laws or you can ask the permission of the owner before using it your blog.

Final Words:

So friends, these are some of the best Content Writing Tips to make your blog a SEO friendly one. Avoid manufacturing spam articles since you are not only wasting your time but also your resources. Always remember to be more natural in your ways to be like more to your readers so that the latter can have good user experience with your site and they will come back again and again!

How Users Use Search Terms - an Analysis

We have been a computer users  not so long ago upon the invention of this very amazing machines. Were so excited to browse our query and look for the  answer on it . In order the computer to respond to your query is you will need a certain keyword that make as a thrust to a computer to  generate answers out from its database. And perhaps you have heard of keyword forensics? This refers to this research driving having the truth instead with coming up with search engine terms. Key phrase analysis will be the pillar of developing internet sites much more lookup engine-friendly. Nevertheless, there’s a major change concerning searching for key phrases in addition to find out this generating force driving these types of key phrases in addition to the individuals on the subject of WEB OPTIMIZATION.

A look into keyword forensics

A lot of search results optimizers have a tendency to search this search phrases to optimize with no recognizing this behavior-based movements. These kind of movements show exactly what this end users want. This can be essentially search term forensics.

Well then, I'll apparent the air. Some sort of search term can be a time period together with only two or even more text whilst an important time period is usually a long-tail search term. So, whilst a search term provides only two text or even more, it is called a search term. Degrees of search phrases usually are ‘SEO, ’ ‘SEO consultancy, ’ ‘SEO packages’ along with ‘best SEO agency’ whilst an illustration of this a long-tail search term is actually ‘SEO consultancy Philippines together with reasonably priced SEO plans, ’ that's certainly a lot more behavior-targeted.

It goes without saying, this is the reason semantic SEO is actually emphasized currently. Thanks to The search engines Hummingbird, The search engines can easily understand what this end users are seeking accurately. This specific results in receiving a lot more accurate outcomes.

In most cases, people are only utilizing about three key lookup functions:

Informational – to accumulate information
Navigational – to find a site
Transactional – to do a business.

The searcher will use numerous steps text any time browsing. Informational lookups focus on exactly what, which in turn, exactly who, any time, wherever, why as well as exactly how. Navigational lookups tend to be strong such as xxxxxxx. com,. org,. online,. edu as well as. gov. Transactional lookups usually are purposes to accomplish an activity including ‘download’ as well as ‘buy. ’

In essence, your website (or contents) has to be tightly related to the needs of the searcher so they really will check out your site. Indeed, search phrases of which actual people use usually are needs-based as well as solutions-oriented!

A lateral change in SEO mindset

Intended for optimizers in addition to a digital internet marketers the same, it's moment to think about behaviorally similar terms to think of the most effective key phrases to. This calls for planning over and above principle internet site key phrase exploration. In particular, if you're inside SEARCH ENGINE OPTIMIZATION consultancy organization based inside Philippines, you should not use ‘SEO company’ as much of your key phrase because it is actually way too hazy or generic. Alternatively, use ‘best SEARCH ENGINE OPTIMIZATION organization Manila’ as well as ‘top SEARCH ENGINE OPTIMIZATION organization Cebu’ given that particular key phrases including most of these include greater key phrase efficiency list (KEI) in addition to minimal competitors. The particular extended and more focused ones key phrases are generally, the higher quality.

Final Words:

A few a digital citizens search for key phrases (or long-tail keywords) like the kinds famous previously mentioned. When selecting key phrases for you to enhance, on the other hand, they have to produce impression. They should possibly be very easily incorporated about the system word too. The particular target is actually making this article as organic and natural as is possible. To put it differently, your subject matter should be optimized for your viewers rather than specifically the various search engines, that is, human readability.

How to Integrate Properly Font Awesome Icons in Blogger Blog

Everyone of us in the field of blogging wants to play around with our Blogger template and customize its design. Isn't it? One of the interesting  activity is dealing with icons such as buttons, form controls, navigation signals and the like. Most web developers use pictures for such symbols, which have a disadvantage to disintegrate as it increases or decreases  its size. But don't worry since we have a Font Awesome Icons  which can help us to solve such problem.

Font Awesome- Meaning

Font Awesome is a notable textual style initially developed by Bootstrap. It is a gathering of some SVG (Scalable Vector Graphic) symbols that might be redone, and utilized on any page. These are minimal measured symbols that are not overwhelming on size, but then are versatile, which implies they hold their honesty when they're extended to essentially any size.

Textual style Awesome contains a gathering of 369 SVG symbols from a wide exhibit of classifications, including route controls, structure controls, catches, coin symbols, web application and brand symbols, etc

Textual style amazing symbols are extremely lightweight, and they stack much quicker as contrasted with CSS sprite pictures. They are likewise versatile, and could be changed into any size without having their quality effected

The best part - they're effectively adaptable! You can apply CSS styles to change them as indicated by your needs. You can change their size, shade, shadows - anything that can ordinarily be finished with CSS.

Adding Font Awesome icons to Blogger?

Follow the very simple steps below  to add Font Awesome icons anywhere on your Blogger blog (or any HTML webpage for that matter).


Step 1. Go to Blogger dashboard >> Template >> Edit HTML and locate the code below

</head>

Step 2. Once you've located the header section, copy the following line below and paste it  just above that code.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Pick an icon of your preference, and note down its CSS Class name (for e.g. fa-arrow-down). Now, to use this icon, use the <i> tag as shown below.

<i class="fa fa-arrow-down"></i>

You can replace the highlighted texts with the class name of any icon you like. And since this is an inline tag, you can use it inside a paragraph tag, list tag, even anchor (<a>) tag, and so on.
Please see my sidebar on how to add font awesome icons  and my navigation tab below to see how it works.
You can view a list of available icons in Font Awesome.

Editing icons

You can apply any CSS Style to an icon. Just take the class name, and write a new CSS style as shown below.

.fa-arrow-down{
 font-size: 30px;
 color: #ddd;
 padding: 8px;
 border: 1px dashed #000;
 float:left;}

Hope you find this tutorial helpful to you buddy and if you have questions you can leave it at our comment box.
Thank You and have a Nice Day!!!

Infographics - The Health Problems of Using Computer,Tablets and Cellphones

Technology innovation gives us  better way of  life like using computers   in operation of our business and in return getting paid for it, however the truth of the matter is that  there are dangers identified with this kind of style and oftentimes we tend to  neglect its bad side.  One of that is eye strain which we believed as  normal and a couple of people have undeniable it at just once inside the past. Furthermore, there are a great deal of disorders like Insomia, Carpal Shaft Disorder (CTS) and the like. For men out there who has not yet given a child,  be careful since cellphone compulsion will result  to low sperm count. The  infographic below  from OnlineDegrees includes research from a Harvard study  will elaborate more about the health problems of using computer, tablet and cellphones slowly deteriorate our health and vitality.