Blogger Smasher | The Ultimate Portal for Blogger Tricks: Html

Html

Showing posts with label Html. Show all posts

Increase Your Blog's Alexa Ranking

Alexa, definitely you have heard the name before has now come to first position in ranking system. Almost every one having a blog or a website want's higher rank. For this they spend hours and pay high amount of money to boost their ranking. The paid traffic may boost your ranking but infact later on it will decrease rapidly.
The only reason for boosting alexa rank is because it matters for everyone website. People choose to select the website for different purposes viewing their alexa rank. The lower the number is the larger it is popular. According to alexa rank google ranks first, facebook second, youtube third and so on. These sites get thousands of unique pageviews daily so they rank first, second and third. But some sites do get thousand pageviews but their ranking isn't good. So for those people whose alexa ranking isn't improving, here are some tips. These tips comes from my experience and believe it really works.
So here we go:

Traffic

The most important thing for boosting alexa rank is traffic. Without traffic if you implemented other steps also then your site cannot improve. So try getting more and more traffic. The best traffic is the organic traffic that comes from search engines, probably more from google. So index your pages on google very fast. Don't buy traffic and if you wish also then buy unique one !

Alexa Widgets

Alexa provides number of widgets related to traffic rank. Install any one of those in your site. You can see a live example of it in my blog also. You might ask how it will help to boost rank as it doesn't bring visitors. But believe me it helps to connect your site to alexa and provide good ranks. You also can see most of the webmaster have this widget. It is because they also will to boost their rank.

Alexa Toolbar

The most important feature of alexa ranking is that it provide rank according to the number of toolbar available. Before some months i also used to think that it does nothing but before some weeks i found great results. It really matters. So, inform your readers about toolbar. Do the starting of it by downloading it yourself.

Claim/ Review your site

As soon as you start your site sign up for alexa and claim your site. Claiming your site gives more control over your site. If you can then you can certify your site. After certifying your site metrics your ranking will be increasing. Fill up all the information of your site, information, country, region,etc. Fill up all the info. Ask your visitors, friends, relatives, pal, etc to review your site. Reviewing your site makes it to make it closer to Alexa. be sure that they review good not bad.

Update your site

It's strictly recommend that you update your site regularly. Keep on posting articles that are unique and are likely to get impressions. Get more backlinks and comments. Updating your site bounds alexa to rank your site.

So these were the tips that i could give. Hope that your alexa ranking will be good. Implement now as it takes lots of time. No matter how much traffic you get ranking good in alexa takes a long time. So it's better to start your journey from now on.
Thank you !

Read Our Other Useful Posts;

Make Your Blogger Page Title SEO Friendly

Html SERP Tech

1 Comment

You might have seen the bunch of text appearing at the top your every browser. That is what we called page title. In addition to this it is also the same link that we see on search engines which is clickable. From the SEO (Search Engine Optimization) point of the view it is the most important element of your blog for ranking better in search engines. It is obvious that people might search the hot trending topics like "Cardi B arrested at NYC Strip Club" or something like "Patrik Mahomes vs Broncos", and it's our major focus to get our blog's post at the first page of google search, for which SEO is an essential factor. And further more, making our titles SEO friendly will enhance the search as well as quality of our blog's post.
From this it can be concluded that a page title with high impact keywords ranks good in search engines and ultimately leady to boost our click through. Moreover it also drives some amount of unique traffic to our site. In blogger the page title is made up of blog title and post title. If the title of the post is not mentioned then its title will be the initial words of the posts.
Here is an example of it:

The above example is the search listing for the post having title "Water is colorless but ice made of water is white, why? In the above search listing some keywords (is, white, why?) are missing. Only first keywords are seen and the last few keywords are hidden. This is because of google as it only shows up to 70 characters of the page title in search results page. So whenever the page title exceeds the limit (70 characters) google simply cuts it off and so its victim will have to suffer low rank in search engine's result pages.

Now what will you do ? Whats the solution for it? If it's so then you came to the right place.

The solution for this is simple. The thing that should be done is just reverse the position of blog title and post title. By this post title will be shown in full granting it high priority in comparison to blog title. So here is the explanation of this:

Go to your Blogger Dashboard
Move towards Theme > Edit HTML
Look for the below code using CTRL + F

<title><data:blog.pageTitle/></title>

Replace the above code with the one below;

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Save your template

After replacing your code, it will replace your Blog's post title as mentioned above.
If you're having any queries regarding it, you can simply ask me !
Thank you,
Blogger Smasher

Read Our Other Useful Posts;

How To Add New Fonts in Blogger

Blogger-how-tos Html

8 Comments

Wondering how to use Google Web Font in Blogger. You may not wonder if you use Blogger
Default Template as we can browse several font using Template Designer. But What if you are using Layout Template. You need to change your blogger posts fonts to make it more attractive. Ya, there is way to use Google Font by embedding it.

To use Google Font kindly follow these below steps;

Go To This Link
Select You Font that you wish to add it .
Click on quick use. You can see the codes like this;

Inside it, you can see code similar to this;

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

Now, add / just after 'text/css'. Now, your code will be similar to this

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/>

Go To Blogger Dashboard
Click on template and select Edit HTML
Now, just above </head>, add those codes
Search for this code using CTRL + F: ]]></b:skin>
Now, in Google Fonts tab, scroll to Intregate Your Fonts To CSS and copy the codes given there. As an example, I will copy these codes;

font-family: 'Great Vibes', cursive;

Now, you must paste these codes where you want to use it. For an example, If you want to use as your sidebar title, you must find sidebar h2 and add your code inside {YOUR CODES}. L Have a look at an example of it;

.sidebar h2 { font-family: 'Great Vibes', cursive; }

Save Your Template

If you have any confusions, you can comment below and I will try my best to solve your problem. Till then goodbye everyone!

Read Our Other Useful Posts;

Adding Attractive Navigation Bar For Blogger

Blogger-how-tos Forum Html Navigation Widget

37 Comments

A navigation menu is highly required organize your blog labels, or to add a menu button for a new Blogger page, or to link to another page on the web. This can be done using some basic HTML and CSS. Before 2 years, our previous admin Mr. Ajaya Gajurel wrote a post on "Creating Custom Navigation Bar for Blogger". You can see it here. So, I'm not going to describe more about it. Just I will be telling you that they will work as a buttons for bloggers. When we click on any of them, it redirects to the specified URL of it.

Follow My Steps on Adding Custom Navigation Bar;

Go To Blogger Dashboard
Click On Add A Gadget Just Below Your Blogger Header (Because We will be showing it in the top of our blog)
Click On HTML/Javascript
Paste The Below Code there;

 <div id="tabs24">  
      <ul>  
           <li><a href="1st link" title="Smasher Menu"><span>Home</span></a></li>  
           <li><a href="2nd Link" title="Smasher Menu" class="current"><span>About Us</span></a></li>  
           <li><a href="3rd link" title="Smasher Menu"><span>Services</span></a></li>  
           <li><a href="4th Link" title="Smasher Menu"><span>Our Work</span></a></li>  
           <li><a href="5th link" title="Smasher Menu"><span>Contact Us</span></a></li>  
      </ul>  
 </div>

Change 1st Link, 2nd Link, 3rd Link, etc with your respective links.
Change Home, About Us, Services, Our Work, Contact us, etc with the text to appear in the button.
Save it!

Now, we have added the links. But it is incomplete and looks very very simple. Now, let's stylize the bar. Follow My Steps To Stylize the navigation bar;

Go To Blogger Dashboard And Select Template And Click On Edit HTML
Then Search for This Code inside the HTML Codes: ]]></b:skin>
Now Just Paste This below code before/above ]]></b:skin>

 /* ---------------------- Start Smasher Navigation Bar ---------------------- */  
 #tabs24{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}  
 #tabs24 ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}  
 #tabs24 ul li{display:block;float:left;margin:0 2px;}  
 #tabs24 ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}  
 #tabs24 ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}  
 #tabs24 ul li a:hover{color:#fff;}  
 #tabs24 ul li a:hover span{display:block;cursor:pointer;}  
 #tabs24 ul li a.current,#tabs24 ul li a.current:hover{color:#894d12;background:transparent url("images/time2bed_left-ON.gif") no-repeat top left;}  
 #tabs24 ul li a.current span{background:transparent url("images/time2bed_right-ON.gif") no-repeat top right;height:43px;}  
 /* ---------------------- END Smasher Navigation Bar ---------------------- */

Save Your Template
Check Your blog

Now, we have made a custom navigation bar for blogger. The final work in your blog looks similar to this;

If you guys have any problems regarding this topic, you can comment below;

Regards,

Nischal Khanal

Read Our Other Useful Posts;

Add Beautiful E-mail Subscription Box For Blogger

Blogger-how-tos Html Widget

1 Comment

Sometimes, our reliable visitors may not be able to view our blog posts. So, they'd like to subscribe via RSS. Each of the visitor subscribed by RSS would be updated immediately after updating the site. So, it is preety much cool. Visitors will be e-mailed automatically after the update of the website.

But, many of the users have the default blogger Feedburner E-mail Subscription Box which doesn't look preety and attractive. So, in this tutorial, We've brought you guys a beautiful e-mail subscription box for blogger.

So, let's get started;

Add Stylish E-mail Subscription Box For Blogger;

Go To Blogger Dashboard and select your blog
Click On Layout And Select Add A Gadget(Recommended To Add It On Footer)
Then Choose HTML/Javascript
Paste the Below Code There;

 <div id='footer-newsletter-wrap'>   
 <div id='footer-newsletter'>   
 <h2 class='title'>Subscribe to our newsletter<span style='color:#f54000;'>.</span></h2> <span>(Get fresh updates in your inbox. Unsubscribe at anytime)</span>  
  <div class='newsletter-inner'>   
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bloggersmasher", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'> <table> <tr> <td width='100%'> <input class='newsletter-address' name='email' placeholder='Your Email Address' type='text'/> </td> <td> <input class='newsletter-submit' type='submit' value='Subscribe'/>   
 </td>  
 </tr>   
 </table>  
  <input name='uri' type='hidden' value='newbloggerlab'/>   
 <input name='loc' type='hidden' value='en_US'/> </form>   
 </div> </div> </div>   
 <style> .newsletter-inner { margin-top:15px; } .newsletter-inner .newsletter-address{ color:#fff !important; width:100%; font-size:16px; border:0; background-color:#2B4052; padding:20px 0px 20px 25px; border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .newsletter-inner .newsletter-submit{ width:100%; margin:0px 0px 0px 29px; border:0; background:#a3d14f !important; color:#1E2D3A; font-size:16px; z-index:0 border-radius: 0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-weight:bold; padding:20px 20px 20px 20px; } .newsletter-inner .newsletter-submit:hover{ background:#93bc47 !important; } .grid a, .grid a:visited {color:#eeeeee} .grid a:visited {text-decoration:underline} .grid a:hover {color:#cccccc} #footer-newsletter-wrap { background:#1E2D3A; margin: 0 0 0 0; padding: 50px 0 60px 0; } #footer-newsletter-wrap a { color:#66665f; } #footer-newsletter { color:#5b5b5e; width: 520px; margin: 0 auto; } #footer-newsletter h2 { margin: 0px 0 10px 0; padding: 0; border-bottom: none; font-weight: bold; text-transform: none; color: #fff; font-size: 26px; text-shadow:2px 2px #151f28; } #footer-newsletter ::-webkit-input-placeholder { color: #fff; } </style>

Change Bloggesmasher with your Feedbuner URL
Save Your Layout
Done!

Now, we have successfully added stylish E-mail Subscription Box. If you have any problems, you can ask us below.

Regards,

Nischal Khanal

Read Our Other Useful Posts;

How To Create A Stylish Contact Form For Blogger

Blogger-how-tos Forum Html Widget

26 Comments

Visitors may need to contact the blog administrators for some reasons or for requesting something and many other reasons. Many visitor may have some difficulties in contacting the author. For an example, if the users don't mention their e-mail address or if they don't have contact form. Sometimes it becomes a great need to contact an author, and if there are no any sufficient measures for it readers may get disappointed and leave visiting the specific blog.
So, in this video tutorial, we will be discussing on creating the contact form. You guys just need to follow my easy tutorials.
So, let's get Started;

Go To This Link(Opens In New Tab)
Go Through Sign-Up
In it's Dashboard, you'd see many options like this;

Click On Contact Form Box.
In the form name, type the title of your contact form and click on "OK"
Then, you can see the layout of the form. Just make it as you like.
After customizing the layout, click on Continue Button
Select Blogger (Since We Are Using Blogger Platform)
Then Copy The Codes
Open Your Blogger Dashboard And Select Your Blog
Click On Page And create A New Page
Switch To HTML From Compose Button
Paste The Code and give a suitable title.
At last, click on publish post.

Now, we have added contact form fr our blog. If you guys have any problems, you can ask any questions.

Read Our Other Useful Posts;

Regards,

Nischal Khanal(Author)

Showing Codes Using Syntax Highlighter

Html

30 Comments

Sometimes there is great need to show some codes in tutorials. You can take an example of Blogger Smasher itself. If you are posting posts in tutorials then this sort of tool would come in handy! Before I had posted the tutorial of showing codes. There were much good comments. Normally we have to go at rapid pace in blogger development.

But that was soon removed, as for me I adapted to syntax highlighter. From today I would also like my dear friends to use this amazing tool. For this follow the steps below;

Adding Code;

Before using syntax highlighter, you will need to add the code for it. See below;

Go to Dashboard>Template>Edit Html.
Then find </body> tag in your template.
After you found the </body> tag insert the below code just above </body> tag;

<!--syntax highlighter code starts --> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();
</script>
<!-- http://bloggersmasher.blogspot.com -->
<!-- syntax highlighter code ends -–>

Then save your template.

Using Syntax Highlighter;

After you have added the above code we can now use syntax highlighter. To use it see below;

First of all you will need to escape your code which you want to show using this tool.
Then copy the code below;

<pre class="brush: js">
Code Here
</pre>

In the above code replace "code here" with the code you escaped using the tool.
Then copy the whole code and place it in html editor and save it.

Now, you can also see your code highlighted as mine.

Happy Blogging!

Free HTML Encoder Tool

Html Widget

Add Comment

Hello guys! Today I am bringing you an amazing tool. A free Html Encoder Tool. It will encode the especial characters in a single click.

As you all know what HTML already is ya and how important it is for blogger. But sometimes (like while commenting) the HTML codes like <,>,",etc won't work. It will instead mess up the site. SO as a solution this Html encoder tool is made.

The code in HTML are encoded like this

'<' will be encoded to '<'
'>' will be encoded to '>'
'"' (double quote) will be encoded to '"'
''' (single quote) will be encoded to '''
'&' becomes '&'

I hardly can guess people who can encode all these codes. Sometimes we may mistake also. So, don't worry. Here is the tool;

HTML Encoder By Blogger Smasher

Some tips to use this tools are;

Type in your code.
Then hit encode and it will be encoded.
Copy it and paste it in your site.

Happy Blogging!!

Showing Codes In Blogger

Blogger-how-tos Html

Add Comment

Hello guys! Today I am going to share with you all an experience. When before some years ago it was too early for me to blog, I didn't know anything. I remember a incident that I tried to show some codes but i messed up with it.

It was a pretty shameful thing for me, but anyway I later on knew and today I am going to teach you the easiest way to show codes in blogger. In fact it is very easy to show codes as we just have to do some editing.

But first of all see a preview of what code really is;

The above picture is a preview of a code which I wrote in Adding Rss Button In Blogger. The basic thing to know while showing code is that the code should appear the very way we type it. Sometimes it happens that the code we want to show acts like a Html code of that page and that is what I meant by messing up.
In order to show the code we have to use <pre> tag. It is also a html tag. See an example below;
<pre><a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free"><pre>

The above code when displayed shows like this;
<a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free">

I am sure that you have already figured it out the way to show code. If not also than don't regret and follow below steps;

Right in your code by switching to Html mode.
Then close the whole code by <pre> at the beginning and </pre> at the end.

Advanced Way To Show Code;

As we are one of the good bloggers we need to become better than others. The above way to show code is the simplest one. So, we will show the code in a more advanced way. See the code below;

<a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free">
<img src="Rss icon URL" style="border:0"/>Subscribe to my feed</a>

The above code is closed inside a rectangle ya. It definitely looks good than the plain lined code. For it you need to use different attributes. See the code which gives the above output;

<pre style="background-color: #f4f4f4; border: 2px solid rgb(230, 230, 230); clear: both; line-height: 18.71875px; margin: 15px; overflow: auto; padding: 10px; width: 531px;"><pre style="line-height: normal;"><span style="font-family: Verdana, sans-serif;">&lt;a href="http://<span style="color: red;">YourBlogname</span>.blogspot.com/atom.xml" title="Subscribe For Free"&gt; &lt;img src="<span style="color: red;">Rss icon URL</span>" style="border:0"/&gt;Subscribe to my feed&lt;/a&gt;</span></pre>

Here in the above code the code highlighted by red colour are the codes which results in the uppermost code. Cutting of this will give the rectangle only. So, you will have to do the following things;