Showing posts with label Customization. Show all posts
Showing posts with label Customization. Show all posts

How to find materials for your blog


Hello folks, i hope that the contents of this site is serving well for you online knowledge.
Today our Guest Author Kate Funk has took some of his precious time to write articles on our site. See How To Become a guest author on My Blogging Techniques.

One of the reasons why a lot of blogs are abandoned is because the blog master runs out of material for his or her blog. This article is full of great ideas that you can use to improve your blog and come up with a little bit of material for your blog. Sometimes just seeing how other people do it is enough to get your own ideas flowing. So here are a few you can try for yourself with your blog.

Think about complaints or praise

Sometimes the best material comes from criticism or complaints. If you want to write a review then do, but you do not have to be confined by the supposed fair rules of a good review. For example, a good review should not show too much bias, but there is no rule that says you cannot be biased if you want to be. You can write a whole post that is just one long complaint about something and there is nothing stopping you from doing the opposite and writing a burningly positive post about something.

Google alerts

You can use Google alerts to let you know when a new blog post has been written or a new article has come out that relates to your chosen keywords. You can set it to tell you when a relevant article or blog post comes out that either relates to the query you entered or the selection of keywords that you entered into the Google alerts tool.

It emails you when it thinks a matching blog post or article has just been published (crawled by Google). This sort of thing can be used in two ways. You can hunt for articles within your genre and then copy their theme or use their ideas for your own blog posts, or you can go the other route and write counter arguments or counter attacks to the work of other peoples blogs. You do not even have to write about just one blog post.

For example, there may be several blogs that dislike Iron Man 3 (there are more than several--look it up!) so instead of counter arguing for just one blog you can pick points from several blogs and argue against them in one go. You may counter the argument that anxiety attacks are more than losing your breath from one blog and counter the argument that Pepper is a hero then a girly weakling inconsistently from another blog.

Think of the half life of facts

This idea comes from the fact that a lot of what you learn in college today is not going to be true or even relevant in 20 years. The only trouble is that we do not know which are going to stand the test of time and which are not. People used to think Freud was top notch but now most of his work has been discredited. People thought we had one moon, then two moons and now recent counts show over 18,000. People a few years ago were taught that Pluto was a planet when it is not. You can post about these ever changing facts on your blog (especially if it matches up with your blog theme.

Read case studies

It may be dull and a little boring but if you are going for a higher brow blog then case studies may fill you full of those facts and figures that your blog needs so badly. You may also criticize the case study and find holes in it.

Read more books on your subject

It is not the book itself that is going to inspire you. There will simply be a few parts in it that help you come up with new material. Plus, if you put in a few quotes from books then your blog looks as if it is worth more than it actually is. You may find a number of ideas or concepts that can keep you writing for a long time. Do not forget that each concept you find need not be a single blog post--you can write numerous blog posts based on single concepts you find within books.

Try video seminars and audio books

It seems pointless going to seminars these days when you can find most of them on YouTube or on dedicated websites. If you are still stuck then you can find them on sharing sites. You can watch or listen to these seminars and learn a few new things that you may either further research or you may apply to your blog with a new blog post.

Author's Bio :
Kate is blog writer, essayist and currently writes for www.aussiessay.com.

Facebook Style Blogger Template–Free Download

While surfing throughout the internet I found the most interesting blogger template released by Dapinder Singh of Windroidclub.com. He has designed this very beautifully and in a clean manner with 6 features in it.


facebookstyle25

Features of facebook style blogger template

  • Floating Header.
  • Automatic Post Summaries
  • Custom Fonts
  • Custom popular posts
  • Custom labels
  • Floating Share buttons

4 Stylish and Clean Search Boxes For Blogger

In our previous post, we have provided you with an Expandable Search Box for your blogger blogs. So today similar to that not expandable but clean and good looking search boxes which will attract your visitors to navigate your site more and more.
In this article I will give you 4 different search boxes with great design namely Clean Search Box, Elegant Green, Easy Blue and Dark Elegant Black. So here are the codes, before that look at the steps that you need to follow.

Add 4 Stylish and Clean Search Boxes For Blogger

  • Go to your blogger dashboard and select your blog.
  • Select Layout option.
  • Select Add a gadget option.
  • Select HTML/JavaScript widget.
  • In the HTML/JavaScript widget paste code of the search box widget and save the widget.
Note : You can use the code of any search box from the below given 4 designs.

1. Clean Search Box

search-box 1
<style>
#mbt-searchsimplebox1
{
padding:10px;
}
#mbt-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:130px;
font:14px verdana;
}</style>
<div id='mbt-searchsimple1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchsimplebox1">
            <input name='search' id='mbt-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>

2. Elegant Green

search-box 2
<style>
#mbt-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchgreenbox1
{
padding:10px;
}
#mbt-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchgreen1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchgreenbox1">
            <input name='search' id='mbt-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

3. Easy Blue

search-box 4
    <style>
#mbt-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchbluebox1
{
padding:10px;
}
#mbt-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblue1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchbluebox1">
            <input name='search' id='mbt-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>

4. Dark Elegant Black

search-box 3
    <style>
#mbt-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#mbt-searchblackbox1
{
padding:10px;
}
#mbt-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblack1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchblackbox1">
            <input name='search' id='mbt-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>
Happy Blogging :-)

Add An Expandable Search Box to Blogger

Blogger has its own widget style for its blogspot sites. But it is not necessary that you implement the same widget on your site too. These search box designs are applicable to almost any type of blog design. Adding these search boxes to your blog  is like a breeze, you just need to copy and paste the code on your blog without any modifications in it.

Is it necessary to add search box in our blog?

Yes, it is very important to add search box in our blog. By using search box blog visitors can search any post in our blog`s archive without any effort. Suppose you have a large blog with thousands of posts then it is very difficult for your blog visitors to find any specific article in your blog by going through the complete archive of your blog posts. If you have search box installed on your blog then visitors can directly search any post by using it. In this way search box helps blog visitors to easily navigate through your blog and get their required information.
search-box

Add Search box widget to blogger blog

  • Login to your blogger dashboard
  • Select your desired blog that you wish to add this widget.
  • Select Layout option.
  • Select Add a gadget option.
  • Select HTML/JavaScript widget.
  • In the HTML/JavaScript widget paste code of the search box widget and save the widget.
See the live demo by going to the link given below.


Here is the code
<style>
#mbt-searchexpandbox1
{
padding:10px;
}
#mbt-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#mbt-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='mbt-searchexpand1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchexpandbox1">
            <input name='search' id='mbt-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

Auto Read More Button With Image Thumbnails For Blogger

Auto read more functions automatically shorten your post and create a thumbnail of an image which is present in the post.It also helps to load page faster.It also shows and image thumbnails which helps to attract the readers.I have also added the auto read more to my blog.You just have to add two codes to blog no need jquery or css.Now lets see how to add auto read more with thumbnails for blogger.
btsnts-autoread-moreithumbnail

How To Add Auto Read More With Thumbnails For Blogger

  • Go to Blogger Dashboard -->  --> Edit HTML.
  • Now find </head> tag
  • Place below code just before/above </head> tag.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>
</span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

If you want to change image thumbnail size then find these numbers 100 and 120.

  • Now find   <data:post.body/>  and replace it with below code.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Now save it.
If it doesn't works for you then mention it in comments. I'll glad to help you.



How To Shift Blogger Sidebar To Right Or Left?

Today we are sharing another simple CSS trick which can change the whole layout of your blog.This is the for those who change positions of t heir blog's sidebar wrapper and main wrapper.To apply this trick you just have to find and edit some words in your template.But don't forgot to backup your full template before editing your template.If you want to change positions of your Sidebar Wrapper and Main Wrapper then go though the simple tutorial below.
1

How To Change Position Of Sidebar/Main Wrapper?

  1. Go to your Blogger Dashboard –> Edit HTML.
  2. Download a copy of your template.
  3. Now search for below code or similar code in your template using Ctrl + F
#main-wrapper {
float: left;
width: 600px;
margin: 0;
padding: 0;
}

Now change float: left to float: right
Now you have to shift the sidebar from right to left.To do this find below code or similar to this code in your template.
#sidebar-wrapper {
float: right;
width: 320px;
margin: 0;
padding: 0 20px 10px;
display: inline;
}

Now change float: right to float: left
Take a preview of your template you will noticed that your sidebar has been moved right to left.
Now save your templateand you are done...

How To Add Windows 8 Tiles Style Social Media Widget

Hello bloggers, hope everyone are doing good. We all know that there are unlimited benefits available in social media platforms for promoting our blog/ website. Today we will learn and add an unique social media widget in our blogger blog which is looks like windows 8 titles. In this widget you can link up your social media profiles. (RSS feed, Facebook, Twitter, Google Plus, LinkedIn, YouTube, StumbleUpon and Pinterest.) This is an extra colorful attraction to concentrate your readers for subscribing. I have already applied it to our test blog. So, before you apply it on your blog, you can simply watch a demo.
windows-8-style-social-widget

How To Add Windows 8 Tiles Style Social Media Widget

  • Sign in to Blogger blog
  • Click Layout from left side menu
  • Choose a suitable widget position and click Add a Gadget
  • Select HTML/JavaScript.
  • Now simply paste the below codes in the box.

<style>
/*---My Blogging Techniques Windows 8 Style Social Widget---*/
.sm-win-eight-social{
background: transparent;
width:300px;
}
.sm-win-eight-social li{
position:relative;
cursor:pointer;
padding:0px;
list-style:none;
}
.sm-win-eight-social .smrss,.smfacebook,.smtwitter,.smgoogleplus,.smlinkedin,.smyoutube,.smstumble,.smpinterest {
z-index:8;
float:left;
margin:2px;
display:block;
position:relative;
}
.sm-win-eight-social .smrss{
background: #F98509 url(http://2.bp.blogspot.com/-ZUphGkq3UNM/UdCaXGDHWYI/AAAAAAAAEH8/RtTu5Ow9b_8/s60/shinemat-rss-feed-icon-n.png) no-repeat center;
width:140px;
height:143px;
}
.sm-win-eight-social .smfacebook{
background: #2E89F2 url(http://2.bp.blogspot.com/-w78SGkj0S4g/UdCaVC8jGyI/AAAAAAAAEHw/Kc5L0NbsE10/s37/shinemat-facebook-icon-h.png) no-repeat center;
width:68px;
height:70px;
}
.sm-win-eight-social .smtwitter{
background: #6EB921 url(http://2.bp.blogspot.com/-hDccFupO26Q/UdCaavsEC7I/AAAAAAAAEIU/lVESKdBJsWk/s50/shinemat-twitter-icon-n.png) no-repeat center;
width:69px;
height:70px;
}
.sm-win-eight-social .smgoogleplus{
background: #5533AE url(http://1.bp.blogspot.com/-kE_-sK9FpEE/UdCaUjFdUuI/AAAAAAAAEHk/JULJosvEAfU/s40/shinemat-googleplus-icon-n.png) no-repeat center;
width:68px;
height:69px;
}
.sm-win-eight-social .smlinkedin{
background: #0097BD url(http://1.bp.blogspot.com/-qSTYsuxhK2Y/UdCaU8K3ncI/AAAAAAAAEHs/dzrr30FjEEQ/s30/shinemat-linkedin-icon-n.png) no-repeat center;
width:69px;
height:69px;
}
.sm-win-eight-social .smyoutube{
background: #e64a41 url(http://4.bp.blogspot.com/-KWF7QiEHOl8/UdCabQTUkcI/AAAAAAAAEIc/P9rS5Fe_h3Q/s80/shinemat-youtube-icon-n.png) no-repeat center;
width:285px;
height:69px;
}
.sm-win-eight-social .smstumble{
background: #FA05EC url(http://4.bp.blogspot.com/-TlprUIB_GvA/UdCaX8PyhTI/AAAAAAAAEIM/DXimB7E-x0o/s50/shinemat-stumbleupon-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social .smpinterest{
background: #0B54A9 url(http://4.bp.blogspot.com/-n6OJ4lHESvE/UdCaXd7eD9I/AAAAAAAAEIA/l_9v7SUd2YY/s38/shinemat-pinterest-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social li:hover .smrss{
background: #F98509 url(http://1.bp.blogspot.com/-qyPyojUEMi8/UdCW2H-k6lI/AAAAAAAAEG8/8DqJq5atouU/s70/shinemat-rss-feed-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smfacebook{
background: #2E89F2 url(http://1.bp.blogspot.com/-gGtzAVHcW44/UdCWwttlLHI/AAAAAAAAEGc/AFmwcosgvZw/s56/shinemat-facebook-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smtwitter{
background: #6EB921 url(http://2.bp.blogspot.com/-sc_qxC0Mmfo/UdCW6v2hW5I/AAAAAAAAEHM/MXXPV1bHoBU/s60/shinemat-twitter-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smgoogleplus{
background: #5533AE url(http://4.bp.blogspot.com/-JyK9dFzixBg/UdCWxPpigiI/AAAAAAAAEGk/jr5Aozqw-4Y/s50/shinemat-googleplus-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smlinkedin{
background: #0097BD url(http://2.bp.blogspot.com/-Tvs-yuw7vvA/UdCWxYRBPKI/AAAAAAAAEGo/jffPCC9TgQA/s40/shinemat-linkedin-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smyoutube{
background: #e64a41 url(http://3.bp.blogspot.com/-_Tfex556WOw/UdCW7nHj8nI/AAAAAAAAEHU/eCKq6j8ZL24/s100/shinemat-youtube-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smstumble{
background: #FA05EC url(http://3.bp.blogspot.com/-czu-X4tuiQ0/UdCW3B8tzqI/AAAAAAAAEHE/s8AbDK_f9JA/s60/shinemat-stumbleupon-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smpinterest{
background: #0B54A9 url(http://4.bp.blogspot.com/-JcV5ObMAkJs/UdCW1NOIETI/AAAAAAAAEG0/3ro_lw7KHvk/s51/shinemat-pinterest-icon.png) no-repeat center;
}
</style>

<div class="sm-win-eight-social">

<li><a class="smrss" href="http://feeds.feedburner.com/RSS-USERNAME"></a></li>
<li><a class="smfacebook" href="http://www.facebook.com/FACEBOOK-USERNAME"></a></li>
<li><a class="smtwitter" href="http://twitter.com/TWITTER-USERNAME"></a></li>
<li><a class="smgoogleplus" href="https://plus.google.com/G+PROFILE-ID"></a></li>
<li><a class="smlinkedin" href="https://www.linkedin.com/LINKEDIN-USERNAME"></a></li>
<li><a class="smyoutube" href="http://www.youtube.com/YOUTUBE-USERNAME"></a></li>
<li><a class="smstumble" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME"></a></li>
<li><a class="smpinterest" href="http://pinterest.com/PINTEREST-USERNAME"></a></li>

</div>


  • Replace the following areas with your own details...


    • Replace RSS-USERNAME with your blog's RSS feed link.

    • Replace FACEBOOK-USERNAME with your Facebook username.

    • Replace TWITTER-USERNAME with your own Twitter username

    • Replace G+PROFILE-ID with your Google Plus profile ID.

    • Replace LINKEDIN-USERNAME with your LinkedIn username.

    • Replace YOUTUBE-USERNAME with your Youtube username.

    • Replace STUMBLEUPON-USERNAME with your Stumbleupon username.

    • Replace PINTEREST-USERNAME with your Pinterest username..

  • Now click Save button to done everything.
    Reload your blog to see this nice widget is working on your blog.
    If any problem you will face please do not late to let me know. I will assist you with smiles.

How To Change Mouse Cursor On Blogger Blog

As a smart blogger or site designer you always want to decorate with new style to your blogger blog or site. Is not it? I know you are very careful to change the look of every part of the blog. One of my friend asked me about changing the mouse pointer on his blogger blog. You know, its very easy to do. So Lets do it now.
blogger-mouse-pointer-change-by-saimoom-shinemark
  • Log in to Blogger Blog.
  • Go to Design, click Edit HTML (Don't forget to backup your template)
  • Find the following code  by pressing Ctrl+F
]]></b:skin>
  • Now simply paste the below code before/ above ]]></b:skin>
/*------- Mouse pointer style start www.mybloggingtechniques.com --------*/
body, a, a:hover {cursor: url(ADD CURSOR URL HERE), progress;}
/*------- Mouse pointer style end www.mybloggingtechniques.com --------*/


  • Click Save Template and you are done.

Note: Change the red link with your own selected pointer link. Here are 2 websites link where you can get huge mouse pointer.


  1.  Cursors-4U.com

  2. Totally Free Cursors


If you still having problem just let me know. Have a good day. :-)

How To Verify Your Blog Ownership In Google Webmaster Tools

hello folks, I have already posted an article on “How To Submit your Blogger Sitemap to Google” before you do that you need to verify your owner ship in Google webmasters tools.

How to verify ownership in Google webmasters tools

  • Sign into your Google Webmaster Tools using your Blogger account.
  • Click ADD A SITE button and enter your blog URL in pop up box and click Continue button
  • In next page you have to verify your ownership.
  • Select Alternate methods –> HTML Tag and Copy the meta tag.
    (See the screenshot provided below)
how-to-submit-sitemap-to-google-shinemat
Now copy the code to your blogger template. To do so follow the below instructions carefully.

Add the code to Blogger Head

  • Login to your blogger dashboard.
  • Make sure you always keep a backup of your blogger template on your computer before editing with your HTML Codes.
  • Now go to Template –> Edit HTML.
  • And find for this code. (Press CTRL+F to search)
<head>
  • Now paste the previously copied code right after or below the <head> tag
  • Click Save Template
  • Now go to Google webmaster tools tab and click VERIFY button to done the verification step.

How To Add Twitter Official Tweet Buttons to Blogger

Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.

Twiiter Tweet Buttons

  • Login to your blogger Dashboard--> Design- -> Edit HTML
  • Click on "Expand Widget Templates"
  • Scroll down to where you see below code:

<div class='post-header-line-1'/>

  • Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .

Code 1 : Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Code 2 : Horizontal Count


<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Code 3 : No Count


<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button

CSS : Text Shadow In 3D Effect

Hello Friends Today we are discuss Text-Shadow With CSS.this Word Firefox,safari,Chrome and Internet explorer Is Not Working . The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

CSS-3D-Text-Shadow2
Today I am Sharing How to 3D Text Shadow With CSS.

CSS :

h1.tg-sha { font-size:200%;margin:10px 0 0;padding:0;color: #ffffff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15); font-weight: bold;}

HTML :

<h1 class="tg-sha"> Text Here </h1>

Text CSS-3D

Using This Blog Title h1 tag <h1> </h1>

How To Add Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title. breadcrumb-navigation-for-blogger.png

Add Breadcrumbs Navigation To Blogger

  • Login to your Blogger Dashboard –> Template
  • As always download a copy of your template
  • Click on Edit HTML.
  • Now find below code,
  • ]]></b:skin>

    add below CSS code just above it,

    .breadcrumbs {

    background: #F7F7F7;

    float: left;

    border: 1px solid #E6E6E6;

    width: 575px;

    font-size: 11px;

    margin: 10px 10px 10px 10px;

    padding: 5px 10px 5px 10px;

    }

  • Now find below code,
  • <b:include data='top' name='status-message'/>

    just above it copy and paste below code,

    <b:include data='posts' name='breadcrumb'/>

    Now find below code (if you find two occurrences of this, then locate the second one)

    <b:includable id='main' var='top'>

    just above it paste below code,

    <b:includable id='breadcrumb' var='posts'>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>

    <b:if cond='data:blog.pageType == "static_page"'>

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

    </div>

    <b:else/>

    <b:if cond='data:blog.pageType == "item"'>

    <!-- breadcrumb for the post page -->

    <b:loop values='data:posts' var='post'>

    <b:if cond='data:post.labels'>

    <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

    <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:label.isLast == "true"'>

    » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

    </b:if>

    </b:loop>

    » <span><data:post.title/></span>

    </div>

    <b:else/>

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

    </div>

    </b:if>

    </b:loop>

    <b:else/>

    <b:if cond='data:blog.pageType == "archive"'>

    <!-- breadcrumb for the label archive page and search pages.. -->

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

    </div>

    <b:else/>

    <b:if cond='data:blog.pageType == "index"'>

    <div class='breadcrumbs'>

    <b:if cond='data:blog.pageName == ""'>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

    <b:else/>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

    </b:if>

    </div>

    </b:if>

    </b:if>

    </b:if>

    </b:if>

    </b:if>

    </b:includable>

    How To Add Breadcrumbs Navigation Widget For Blogger

    Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title. breadcrumb-navigation-for-blogger.png

    Add Breadcrumbs Navigation To Blogger

  • Login to your Blogger Dashboard –> Template
  • As always download a copy of your template
  • Click on Edit HTML.
  • Now find below code,
  • ]]></b:skin>

    add below CSS code just above it,

    .breadcrumbs {

    background: #F7F7F7;

    float: left;

    border: 1px solid #E6E6E6;

    width: 575px;

    font-size: 11px;

    margin: 10px 10px 10px 10px;

    padding: 5px 10px 5px 10px;

    }

  • Now find below code,
  • <b:include data='top' name='status-message'/>

    just above it copy and paste below code,

    <b:include data='posts' name='breadcrumb'/>

    Now find below code (if you find two occurrences of this, then locate the second one)

    <b:includable id='main' var='top'>

    just above it paste below code,

    <b:includable id='breadcrumb' var='posts'>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>

    <b:if cond='data:blog.pageType == "static_page"'>

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

    </div>

    <b:else/>

    <b:if cond='data:blog.pageType == "item"'>

    <!-- breadcrumb for the post page -->

    <b:loop values='data:posts' var='post'>

    <b:if cond='data:post.labels'>

    <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

    <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:label.isLast == "true"'>

    » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

    </b:if>

    </b:loop>

    » <span><data:post.title/></span>

    </div>

    <b:else/>

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

    </div>

    </b:if>

    </b:loop>

    <b:else/>

    <b:if cond='data:blog.pageType == "archive"'>

    <!-- breadcrumb for the label archive page and search pages.. -->

    <div class='breadcrumbs'>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

    </div>

    <b:else/>

    <b:if cond='data:blog.pageType == "index"'>

    <div class='breadcrumbs'>

    <b:if cond='data:blog.pageName == ""'>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

    <b:else/>

    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

    </b:if>

    </div>

    </b:if>

    </b:if>

    </b:if>

    </b:if>

    </b:if>

    </b:includable>

    How To Add a Breadcrumb Trail to your Blogger Post

    Have you ever experienced after searching and googling to a comprehensive website, then lose track of where you are, and what you are really looking for? I did, many times. To quote a page on the Yahoo's Design Pattern Library: "When the page displayed is within a hierarchy of pages and is not the topmost page," the reader needs some sort of "understanding of where she is in relation to the rest of the site."
    The breadcrumb trail at the top of a post provides a nice solution to this problem. In a breadcrumb, you can always click on the label/category before it, or click the "Home" link to go back to the front page. More importantly, the user knows where she is, something that other navigation widgets such as the out-of-the box label, or my previous "tab hack" are not able to address (yet.)

    bc

     

    Below are two easy steps to install the "Breadcrumbs Hack"

    Step1: Embedding Function Definition and Function Call.
    Go to Template->Edit HTML, then check the Expand Widget Templates checkbox.
    Look for the Blog1 widget (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">), then locate the main includable:
    Put the below code right in front of the highlighted text:

    bc1

    <b:includable id='breadcrumbs' var='post'>
    <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
      <b:if cond='data:blog.pageType == "item"'>
          <p class='breadcrumbs'>
          <span class='post-labels'>
            <b:if cond='data:post.labels'>
              You are here:
              <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
              <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == "true"'>
                  <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
                </b:if>
              </b:loop>
              <b:if cond='data:post.title'>
    &gt;  <b><data:post.title/></b>
              </b:if>
            </b:if>
          </span>
          </p>
      </b:if>
    <!-- End of Breadcrums Hack -->
    </b:includable>

    Next, add this line:

    <b:include data='post' name='breadcrumbs'/>


    right in front of the line <b:if cond='data:post.dateHeader'>. (Since you're already located the line <b:includable id='main' var='top'>, once you add this new line, it is now part of blog1 widget.)

    bc2

     

    Step 2: Add CSS code
    Add this code at the end of the CSS portion (between the pair skin tags (see picture)


    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
    }


    (Feel free to modify the first & third parameters of the last two lines (in bold) to expand/shorten the top & bottom heights.)

    Save your editing, and you should see the breadcrumb only when you view an item page.

    bc4

    How to Change your Facebook Background

    Facebook, is the largest growing social network which is spread around widest of the most countries. By default, Facebook comes in White and Blue for all users. There is a reason behind selecting blue colour theme for Facebook because Mark Zuckerberg, the founder of Facebook suffers from red-green blind, Blue colour is the richest color to him. If you get bored with this blue theme of Facebook, lets change the theme . Are you ready ?

    Requirements To Change a Facebook Background

    Mozilla Firefox Browser

    How to Change your Facebook Background

    • Open Mozilla Firefox.
    • Firstly, you need to download a Firefox plugin named Stylish. To download this click here.
    • Click on Add to Firefox.
    • Now the add-on gets downloaded, and a pop-up window appears to install . Now click Install as shown below . addon1
    • Now the add-on gets installed in a few seconds , restart firefox or just click restart firefox on the top . 
    • Visit the stylish themes official website here.
    • Click on the Facebook Themes.
    • Now the select the theme you like and click on it .
    • You need to install the theme . Click on + Install with Stylish.
    • Now you’re done. And at last, Finally Login into your Facebook account to see the changes occured.

    How To Add New Official Google+ Badge Widget To Blogger

    Google Plus has launched its New Official Google Plus Badge for all blogger to increase their followers in a single click. There are hundreds of blogging goods provided by Google for bloggers to publicize their blog. But according to me, Blogger is always on top because blogger.com is very useful and easy to customize Newbie bloggers. I would recommend Newbie bloggers to create and continue their work on blogger.com.

    This widget has two layouts i.e., Portrait and Landscape. You can edit this widget for all background themes.

    Today, in this article we will show you how to add Google’s official Google+ Badge widget to your blogger blog.

    Google  widget to blogger

    How to Add Widget to Your Blog

    • Login with you Google account.
    • Go to G+ Badge Page.
    • Customize your widget as you wish.

    Google  Badge - Google  Platform — Google Developers

    • Copy the code (as from highlighted in the box in the above screenshot) and follow next steps.
    • Login to your blogger dashboard.
    • Go to Layout –> Add a Gadget –> HTML/Javascript.
    • Paste The Above Copied Code In HTML/Javascript.
    • After That Save it.

    Also See - Google +1 Button And Google+ Badge To Blogger Blogs

    Now your New Badges are ready with new look and new feature to attract your visitors to follow you.

    Benefits Of Google+ Badge

    • Best quality back link for your blog.
    • Increase your Google plus followers.
    • Get Google authorship easily with it.
    • It will improve your Google page rank also.

    How To Add Google Plus Add To Circle Badge With Author Image in Blogger

    Google Plus plays a vital role in boosting huge amount of traffic to your blog and to increase Author Rank algorithm. It is more important you to increase your Google+ Followers the search results are varying according to author rank.
    Google Plus Add to Circle Badge is the best widget that can help you to increase the list of peoples who added you in their circle. But the blogger default badge is not too much attractive for your visitors. So, today I bring you with a stylish Google Plus - Add to Circle Badge along with author image that works awesomely to increase your fan.
    add-google -stylish-badge-to-your-blog
    To see the live demo of this gadget you can check out in this blogs sidebar with my picture.

    Add Google Plus Add to Circle Badge to Blogger

    • Login to your blogger dashboard.
    • Go to Layout –> Add a Gadget –> HTML/Javascript.
    • Copy the below code and paste it there.
    <div style="width:275px; padding:10px 10px 5px 10px; margin-bottom:3px; border:1px solid #dcdcdc;"><font style=" font-size:14px; color:#333333; font-family:arial;"><strong>Rakshith M'lore In <a href="Your Google Plus Profile URL Here">15+</a> Circles →</strong></font><div  style="width:250px; padding:10px 10px 5px 10px; margin-bottom:3px; border:1px solid #dcdcdc;">
    <a href="Your About Us Page URL Here"><img width="54" height="54" style="margin-right:10px;" src="Your Image URL Here" align="left"/></a>
    <script type="text/javascript">
    window.___gcfg = {lang: 'en'};
    (function()
    {var po = document.createElement("script");
    po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
    })();</script>
    <g:plus href="Your Google Plus Profile URL Here" rel="author" width="180" height="69"></g:plus></div>
    </div>

    Editing the code

    • Your Google Plus Profile URL Here with your Google+ URL.
    • Your About Us Page URL Here with your About Us Page URL.
    • Your Image URL Here with your Profile Image URL.
    • Change “15+” to the number of your choice.
    • Now Save the Gadget.
    Proudly powered by Blogger