Showing posts with label Blogger Tutorial. Show all posts
Showing posts with label Blogger Tutorial. Show all posts

Installing Snow Effect in Blog


Installing Snow Effect in Blog - Pingin snowing on your blog to make it look more lively and cool (read: cool)? Well, then you need to put on the blog snow effect you. 

To install snow effect, it is very easy: 
1. Open blogger. Go to the menu Design -> Page Elements 
2. Click the Add a Gadgets -> HTML / Javascript 
3. Insert the following script into the box



<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>
4. Press Save . Finish is tough is not it? If you do not want to bother ya use any of the following ways 1. click the Add Effect Snow In the blog below







2. Select the blog you want to install snow effect and then click Add Widget
3. Finish. luck ...

How to Change Cursor Display Blog


How to Change Cursor Display Blog - By default, the display cursor on the blog are arrow-shaped, but for those of you who are bored with the look of them or would like to give admiration for visitors. You can replace the icon image so that when a visitor comes to your blog, the display cursor icon will change according to what you use. In order to more clearly you can see here .

change the cursor into the image icon, it is very easy. Here are the steps: 
1. Log in to Blogger. Go to the menu Design-> Edit HTML 
2. Find the code</ head> 
3. Put the following css code above






<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Description: 


The text in red is the url address of the cursor. Please change the url address you want to use the cursor.

4. After that, save your template. Done If you do not have a cursor icon, try visiting http://www.totallyfreecursors.com . 
The site provides hundreds of thousands of interesting cursor icon that you can choose according to taste. Congratulations creative blog :)

Installing Music Player On Blog

Installing Music Player On Blog - For you fans of music. Play a song through HP, Mp3 player or computer may be used. But what if you play music through the blog? With put music player on the blog then not only you but your blog visitors can also enjoy your favorite songs. So this method is very suitable for those of you who blog contains music or for those who want to promote a personal song. There are many services like this available on the internet. Of the many existing services. I think there are two pretty good music player that is music-live and eSnips . 

Both the music player each has advantages and disadvantages. So please specify yourself which is better. 

1.Music-Live Pros: - Songs are available, stay put - Many skin models you can choose Weaknesses: - Not able to upload your own songs 
2. eSnips Pros: - can upload songs from your computer - There are songs that you can playWeaknesses: - Only 2 model skins to choose from - looks less attractive Now that the advantages and disadvantages of each. Please specify which one is better suited to your needs. 

In order to more clearly you can see the demo music-live here and eSnips here . If it determines the music player of your choice, here are the installation steps: 



A. Music-Livet.Net 
1. Visit http://musik-live.net/ click Skin Mp3 Player 
2. Select the player you want to display. To see how it looks clickPreview Skin 
3. Copy the code in the 'embed code' and go to the blogger. 
Click the menu Design -> Page Elements 
4. Paste code into the menu HTML / Javascript 
5. Finish. above is how to put a music player with songs that have been provided. 


If you want to choose their own song. 

Here's how: 
1. Music-Live on the page, find your favorite songs with the search box. 
2. Then click the Play & Embed code to display code 
3. Copy and paste the code into the menu HTML / Javascript blogger. Finish 

Note: This method is only able to play one song. If you want to play a lot of songs that use the eSnips. 



B. eSnips 

1. Kunjugi http://www.esnips.com/ . To be able to take advantage of the amenities you need to signup first. If so, sign-in to your account. 
2. Click Upload Files and then clickSelect Files 
3. Select the songs you want to play and select the folder where you want memyimpan song. Make sure the folder you choose is to be Public . Because if private you can not add the song into the playlist. 
4. If you have click Upload Now
5. Wait until the upload is complete. 
6. If it is click the menu folder . Choose the folder where you saved the save song 
7. Select the songs you want to install by clicking Add to quicklist 
8. If so, scroll to the top of the page and then click the Create playlist widgets 
9. Select the skin you want. Then copy the code on the box. 
10. Open blogger. Paste code in the menu HTML / Javascript and then clickSave 
11. Completed. Please see the results. If size does not fit you can adjust the size to edit the width of her on their respective codes.
 Good luck .. 

Fiuhh .. . Finally finished well the experimental results for 3 days.






live music


















esnips
















esnips add to quicklist
esnips create playlist


esnips widget

How to Check Backlinks

How to Check Backlinks - For a long plunge into the world of blogging is certainly familiar with the termbacklinks . But for those who are new or do not know what backlinks. In short, Backlinks are links on our site are posted on other sites. Backlink there is one way links and two way link . 
What is meant by One way link is a link to our site posted by another site, but we did not put the link on our site, while two way link is my link on your site and you also link my site or what is often referred to as link exchange.purpose of seeking backlinks is to improve pagerank blog. On how to find backlinks and pagerank understanding.

After learning how to build backlinks. Sure you wanna know how to check backlinks and how many number of backlinks that you have successfully collected. Ok to check it out you can use the tool backlink watch the address at http://www.backlinkwatch.com How to use it very easily. 

After visiting the site. Enter the web address you want to check and click the Check backlinks . For example I put hermanblog.com and here are the results. Specification: 354 is the number of backlinks obtained figures that I circled on the OBL is the number of external links from sites that provide backlinks.The larger the value the better the backlink OBLnya you earn. flags for displaying information part follow or nofollow 

If there is information nofollow tag means that the site provides nofollow on our link, which means we do not get backlinks from these sites. To check other sites do the same. Good luck. May be useful





How to Display Form Comments Only in Specific Postings


How to Display Form Comments Only in Specific PostingsA few days ago, there was a blogger friend who asked me via email about how to display the comment form only in certain posts . Since the question is quite interesting and it is possible there are other bloggers who do not know how. 

So on this occasion I will try to explain it here. Well to display the comments form only in a particular post is very easy, because blogger.com has provided an option for it, so we just want to determine which post comments displayed form and which are not .
these options can be found at the bottom of the page post editor. Watch my column below the red line:



By default, the comments will always be "allow", if you do not want readers to comment on your posts, simply select "Do not allow" the commentary form will disappear. It's as easy a try. If there are less obvious please inquire through the comment form.

Submit your RSS feed to Facebook


Submit your RSS feed to Facebook - If you want your blog posts can be read by more people then one way you have to do is submit your RSS feed to Facebook .
 By submitting your blog RSS feed into Facebook, then every time you post a new article, the article will appear automatically posted on your facebook profile so your friends or your facebook friends can read your blog posts directly on your facebook profile page. If your articles are good they certainly will visit your blog to read further so that it can also promote your blog. 
Regarding how to submit your RSS feed to Facebook actually I've posted on this blog. But because Facebook has changed the display page and to submit RSS feature has also been removed so that way previously been unusable. Though Facebook already does not provide a feature to submit rss feed.But now there are many facebook applications that can perform this task. One that I use is the RSS Graffiti . 

RSS Graffiti will automatically submit your blog posts to your facebook profile page every time you update the post so you do not have to submit articles manually to facebook. What you should do is open the app and graffiti RSS add the address of your blog feed. After that everything will run automatically .. tis .. tis .. tis addition, RSS Graffiti also provides multiple settings so you can customize the display according to the feeds you want. Several features provided by the RSS graffiti such as:











  1. Allows you to set the appearance of the article in the form of regular feed or short messages such as Twitter
  2. Filtering articles from a specific date
  3. Giving an additional message on any article published
  4. Set posting schedule
  5. Tweak to publish twitter facebook

How to submit RSS feeds to RSS Graffiti

1. Log in to Facebook. 
2. Open the RSS Graffiti application and run it. 
3. After that, click Add Feed . 
4. Then the page will appear as follows

Feed URL : browse your blog feed address. Examplehttp://bloganda.blogspot.com/feeds/posts/default 
Source Name : Fill in the name of your blog Source URL : Fill out your blog style Post : Let the 'Standard'. If you want to post up in the form of a short message such as Twitter select 'Compact' or 'status updates'

5. If you have press Save . Done Now every time you post an article, the article will automatically appear at page facebook.

What is Alexa Rank and Benefits

alexa logo
What is Alexa Rank and Benefits After discussing the google page rank , this time I want to review a little aboutAlexa rank . Because in addition to google page rank, Alexa rank is one factor to make money on the internet. So if you're serious about making money on the internet then you must know Alexa rank.


What is Alexa rank? Alexa rank is a tool created by Alexa.com to analyze how much traffic or page views of a website based on the number of visitors to install the Alexa toolbar on their browser. After that, the data will be collected and then ranked based on the traffic. The greater the traffic in the lower rank. So how to find our website Alexa ranking? 

There are 2 ways you can use to find your website ranking alexa rank, namely:

 I. Install the Alexa widget on your blog that looks like this way of installation: 

1. Open http://alexa.com then click For Site Owners 
2. Then clickSite Widgets , located on the left 
3. Enter the address of your website on the widget you want to install. For example: hermanblog.com then click Build Widget
4. Copy the code of the widget you want to install and then paste into your blog.
Done 


II. Install the Alexa toolbar in your browser that looks like this. 
way of installation: 

1. On page alexa.com. Click the Toolbar 
2. If using the browserFirefox . Then the page that appears is like this 
3. Click the Get Sparky and follow the prompts to install the Alexa toolbar 
4. If you use the browser Internet Explorerthe page that appears is like this 
5. click Install Now to install the Alexa toolbar on your browser. 
6. If you've restarted your browser and see the result. 

then what good alexa rank for your blog?


 If your blog is used to make money on the internet then alexa rank is very important to you. Because many dollars producing programs on the internet such as TLA , SponsoredReviews , Blogsvertise ,Buyblogreviews , Linkworth , etc. 

which require alexa rank to join. So the smaller the alexa ranking of your blog more and more programs that you can follow which means the greater your chance to make money on the internet. In addition, Alexa rank can also be used to determine whether or not a popular blog. 
Alexa rank blogs that have small usually will be more popular and liked by the advertiser than a blog that has a big alexa rank. 





alexa widget1








alexa toolbar




install alexa toolbar

alexa toolbar for firefox



alexa toolbar for internet explorer

Designer model - how to remove navbar


Designer model - how to remove navbar - If you're already using one of the new Blogger templates, page through Blogger in Draft , know that removing the navbar just got easier.
I have explained in this post How to create a template for Blogger / Blogspot , but it seems that not everyone could understand. Therefore, I will explain in detail.

Access the template designer, click Advanced (1) and then add CSS (2). Paste the code below into the blank portion (3) and press the enter key on your keyboard.

# Navbar-iframe {height: 0px; visibility: transparent; display: transparent;}

retirar_navbar
Click on image to enlarge

Once you paste the code and hit the enter key, the navbar will be invisible. 
To my knowledge, there is no restriction on the part of the Blogger as the withdrawal of navbar: 

Confirmed: Blogger NavBar is optional - User Compulsive blog
While we do not recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service That Explicitly mandate its use. Source: Blogger forum English


UPDATE - This method is no longer working as well, since the team has been making changes in Blogger Template Designer. The @velosomanel , posted on his blog Blogger Drafts, a way to completely remove the navbar and that can be adapted to new models. Among the html and search for <body class='loading'>
Cole just before the following code:

<- Navbar ->
<script type='text/javascript'>
<! [CDATA [
<-
/ * <body> * /
->
]]>
</ Script>
<- Navbar ->

Accept deleting the widget and save navbar.
 
Sources: Blogger Plugins and Blogger Drafts

Sitemap for Blogger / Blogspot


Sitemap for Blogger / Blogspot - How about having a page on your blog where all your posts are organized by date? We might call this page or Sitemap Blog Archive and it can be quite useful when a visitor can not find any specific post on your blog using search or even if this visitor want to read everything you've posted.
If you want to see how well a page, take a look at what I created on my blog at this link . If you want a page equal to your blog, follow the tutorial below.


First create a new page on your blog (1) and enter the HTML editing mode (2). Copy the code below, changing the part in red the full address of your blog. Paste the code into the html page (3) and click publish now.

<script style="text/javascript" src="http://100rede.com/mapablogger.js"> </ script>
<Script
sitemap_blogger

See the result file's Blogger Tips in the image below: 

Arquivo ou mapa
Remarks:
I got this tip from the blog Abu Farhan , credits the script were kept, and I just translate the month names into Portuguese.
I do not know how Google bots can interpret this new page on your blog full of internal links, I believe it would not yield any punishment in Google search results, but I can not say such a thing with certainty.
Realize that there is a value in the URL that indicates the number of posts to be displayed, in the example above this value is set to 1000 because I wanted to show all of my blog posts on the map.Change the value as the number of posts on your blog, always put a value well above the number of posts on your blog will ensure that all are shown.

Slideshow on Blogger


Slideshow on BloggerThe latest craze on custom templates for Blogger, is the use of a slideshow at the top or bottom of posts header. 

There were already several ways to put a slideshow on Blogger, but most of them depended on externally host a file type. Js (javascript). 

Why was it bad? Because there is no on Blogger hosting service files, free services, many change rules without notice, deleting files or changing the URLs (addresses) of the same. 

Today I saw the excellent MetaBlog Spanish Gem Blog , a way to use a slideshow without hosting the external javascript file. 

See an example of this beautiful template Mamanunes - Template Animal 



To put a slideshow on your blog, first of all you need to find the images that will be part of the slide deck. In the tutorial girlfriend Gemma, images were used in the size 750 x 250 px. Edit the images of your choice, using an appropriate program or site and host them in Picasa. 
Make a backup of the template . Go to design> edit HTML and using the command Ctrl + F on your keyboard, look for the tag </ head>. Paste the following code before it: 

<style> #slidearea{ height: 250px; overflow: hidden; position: relative; width:980px; background:#fff; border:5px solid #fff; margin:20px 0px 20px 0px; box-shadow: 0 0 10px #aaa; -moz-box-shadow: 0 0 10px #aaa; -webkit-box-shadow: 0 0 10px #aaa; } ul.kwicks{ margin:0px; padding:0px 10px; list-style:none; } .kwicks li { float: left; width: 196px; height: 250px; position:relative; } .kwikmet{ position:absolute; bottom:10px; left:10px; right:10px; display:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCCHxmhMDvFI6F8sdQBfwIoH6KrXdhelSoxAKvmX8D7VIWNfWCsc6Yv-B6FJPmJrShtJgQOdC9fPVuz_yQ5L6DfZU7taHBgFZFbqWDMxReKqtSIVCt8ZFzehBhDTC-QTPkVvRpcC7qxfg/s1600/trans.png); padding:10px; width:710px; color:#888; } .kwikmet h2 a{ color:#fff; font-size:16px; font-family:georgia; font-weight:normal; padding-bottom:10px; } .slidimg{ width:750px; height:250px; } .rounded{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- /** * hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+ * <http://cherne.net/brian/resources/jquery.hoverIntent.html> * * @param f onMouseOver function || An object with configuration options * @param g onMouseOut function || Nothing (use configuration options object) * @author Brian Cherne <brian@cherne.net> */ (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery); //--><!]]></script> <script type='text/javascript'><!--//--><![CDATA[//><!-- /* Kwicks for jQuery (version 1.5.1) Copyright (c) 2008 Jeremy Martin http://www.jeremymartin.name/projects.php?project=kwicks Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php Any and all use of this script must be accompanied by this copyright/license notice in its present form. */ (function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/fg:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=lc[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(ac[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery); //--><!]]></script> <script type='text/javascript'> jQuery().ready(function() { jQuery(&#39;.kwicks&#39;).kwicks({ max: 750, duration: 1000 }); jQuery(&quot;.kwik&quot;).hoverIntent(function() { jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ; }, function() { jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;); }); }); </script> 

Preview the template to check if everything is fine and save. 

Now, go to design> page elements and click add gadget. 

Choose the gadget HTML / JavaScript and paste the following code: 

 <div id='slidearea'> <ul class='kwicks'> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> </ul> <div class='clear'/> </div></div> 

Each slide is that you include, make the following substitutions: 

<a href=''> # (put the link that will be associated with the image)
<img alt="" class="slidimg" src=" image URL "style="width: 750px; height: 250px;" />
</ A> (paste the URL of the image and size)
<div class='kwikmet rounded'>
<h2> <a href='#' rel='bookmark' title=''> Title </ a> </ h2> (give a title to the image)
<p> Content </ p> (type a description)

See an example, using the template Style: 

<A href = ' http://www.templates.dicasblogger.com.br/2010/09/template-style.html '> (link to be associated with the image)
<Img alt = "" class = "slidimg" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8wobslrmPC23yFaHm_kg-Au7hz940JmFFTmfJx687kWN3bII3_slkzAfZBAS7mKzRdMwxaZcWnN64B4OEYRYq_4KFzAqve9Ya2xNtfmYWN3TNDlegRvpKQpreXHt0xOo5KxHkCJDy6V-/?imgmax=800 "style =" width: 750px; height: 250px ; "/>
</ A> (URL and image size)
<div class='kwikmet rounded'>
<h2> <a href='#' rel='bookmark' title=''> Template Style </ a> </ h2> (title)
<p> Style template has 1 column on each side etc ... </ p> (description)