Top Qualities To Become a Successful Blogger
The qualities of a blogger should be attended at all times in
order to become someone popular, a blogger should have plenty of ideas
for creative writing, along with a truckload of motivation. The results
sought will not come overnight, there's no guarantee. What you need
first are two things in order realize your dream of running a successful
blog: a lot of exclusive content and reader loyalty. In each case, time
will be needed to develop the success, this is a process and not a
short-term event.
Here are three qualities of a blogger who, as a site administrator will need to provide, if his goal is to manage a successful blog.
Patience
A successful blog is a product of time and effort and as a site administrator, you will need patience. As previously mentioned the results will not arrive rapidly overnight, therefore, it is important to realize this from the start. If you are constantly trying to develop new and creative ideas for writing on your blog and at the same time you are worried if you will see any results, this will only make things more difficult. The building of a blogging platform is a "long term" effort, therefore, you must decide whether to accept the challenge or not. This is the main qualities of a blogger.Credibility
Much of the traffic of any successful blog is based on publishing unique content and its credibility. In fact, the quality of what is in the site will have a direct impact on what will become viral visitors coming to your platform. If it's worth people will talk about your blog, and if they do, others will come to see what you have. Depends on you to publish useful and accurate information, your readers will do the rest.Consistency
Maintaining a steady stream of creative writing ideas is vital to be able to constantly update the blog. The frequency of publication to a proper schedule is related to the measure of the amount of time you have available and your level of motivation. However, it is important to establish a sort of consistency so that people can schedule their own visits accordingly. Just remember that the more often you write, the more people will visit, so their loyalty will grow faster and their referrals will be extended.For becoming a popular blogger is important having a healthy source of creative writing ideas, along with a lot of patience and motivation. Ultimately, it will be reduced to you as the system administrator to provide the three qualities of a blogger we discussed above, who is searching tirelessly his goal of having a successful blog. In the end, your own motivation and patience will be the glue with which all the elements will be put together for your dream to come true.
There are many types of galleries for images that we find on the net,
but we rarely see one showing images so differently like this one.
Those using Mac OS X will surely find a lot of similarity with TimeMachine and those who don't, I'm sure will enjoy this type of effect for viewing images.
I'm talking about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when you click on them.
To use this gallery follow the steps below:
Step 1. Log in to your Blogger Dashboard, click on your blog and then go to Template and click on the Edit HTML button.
Step 2. Search using CTRL + F keys for the </head> tag and before it paste the following:
Note: if you have already added jQuery in your template, then delete the line in red.
Step 3. Search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:
Paste just above ]]></b:skin> the following CSS style:
Step 4. Click on the Save template button
Step 5. Finally go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:
Replace the Image URL text with the URLs of the images of your gallery, keeping in mind that the last image is the first to be displayed.
And so you can enjoy this simple image gallery on your blog, and although it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.
Those using Mac OS X will surely find a lot of similarity with TimeMachine and those who don't, I'm sure will enjoy this type of effect for viewing images.
I'm talking about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when you click on them.
To use this gallery follow the steps below:
Step 1. Log in to your Blogger Dashboard, click on your blog and then go to Template and click on the Edit HTML button.
Step 2. Search using CTRL + F keys for the </head> tag and before it paste the following:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};
var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};
EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>
 |
| Screenshot |
Step 3. Search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:
Paste just above ]]></b:skin> the following CSS style:
#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZEaAbj3U4gIFZntPi-3o81270rlcpy2LxYLLsW0-LKt6McuB7fk58ZD1ug0_va5oAt7rA0nWLdaZitwCkfrX67SJ4b_KdYlsQgvfJ7VeHVVCGt54LUfVicdC30mAzvYbhMLmpgwGAHA/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Step 4. Click on the Save template button
Step 5. Finally go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:
<div class="spacegallery" id="myGallery">Note: In case you want to add this slideshow inside a post, then create a new post and paste the code in the HTML section
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>
Replace the Image URL text with the URLs of the images of your gallery, keeping in mind that the last image is the first to be displayed.
And so you can enjoy this simple image gallery on your blog, and although it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.
Tiny Circleslider is a small jQuery plugin that generates a circular carousel of images.
There is noting complicated about using this type of carousel, however
when it's about customizing it, it's necessary to use a bit of
arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.
Obviously, we need to add the javascript jQuery library in our template:
Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button
Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:
Step 3. Now here's the HTML that has to be added to where we want to display the carousel.
Create a New post and paste on the HTML section, the code below:
Note: replace the imageURL text with the URL of your images
and here are other options that could be added, separated by commas:
snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)
Obviously, we need to add the javascript jQuery library in our template:
Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button
Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>We would lack the CSS styles that we need to add above the </head> tag as well:
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
<style>
#rotatescroll { /* is the rectangle container */
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .viewport { /* is the rectangle containing the images */
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px
}
#rotatescroll .overview { /* is the list with the images */
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#rotatescroll .overview li { /* each item of the list */
float: left;
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .overlay { /* the image with the circle overlapping the list */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CQuo8Gx_OCzh0LRIVDuvuQJ9PVKRui2Rs6CAthqhxsCqkG1XlI1ZpDnq-Of984XcryV3fk1fI0c8uQZJwIE4bU3XZls0yX2x1QmbXocCXWUYaVml0rWZtFm8lKMG_BneF4azvCD5Hp4/s1600/bg-rotatescroll.png) no-repeat 0 0;
height: 300px;
left: 0;
position: absolute;
top: 0;
width:300px;
}
#rotatescroll .thumb { /* the red circle that allows us to navigate */
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2sdKgvpdX761gSJB9sHtPi13L7US0L30VLij7wL6oh0HnVeVb0Cb84JbhbZ9pvzAiskWKleQeDBJoCn8iTMMIKjWF72NlWsOdZKvXjtEC_zf_FZE1JwytR2j5Tda0j2LzWXgtU18fs4/s1600/bg-thumb.png) no-repeat 0 0;
cursor: pointer;
height: 26px;
left: 137px;
position: absolute;
top: -3px;
width: 26px;
z-index: 200;
}
#rotatescroll .dot { /* the points indicating the position of each image */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcl1rJb9uevsukwYwgCwF6Ur9hpIaPINMom3EpDba6N0lZ2wOpMFrQ9tGNGdV5NS-smakKOX9AV8NCgCnUdl6TpT9ZraN93emkyi73KWK2j9s_7ipDlUKrvG-KsK7fwBUrovqzG_ionCQ/s1600/bg-dot.png) no-repeat 0 0;
display: none;
height: 12px;
left: 155px;
position: absolute;
top: 3px;
width: 12px;
z-index: 100;
}
#rotatescroll .dot span { /* are hidden by default */
display: none;
}
</style>
 |
| Screenshot |
Create a New post and paste on the HTML section, the code below:
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
<li><img src="imageURL" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>
 |
| Screenshot |
Note: replace the imageURL text with the URL of your images
and here are other options that could be added, separated by commas:
snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)
Although many insist that blogs hosted on free servers, such as Blogger,
are not ideal for performing a correct positioning of your web site,
the truth is that a blog hosted by Blogger can be really well positioned
and quickly on the Internet if you are using the right SEO tools.Now, given the latest updates from Google, the best would be hiring a specialized person, however, if we don't have the resources or we want to learn doing this job alone, we can choose to begin with the natural positioning. Here are some tips to start a SEO work (Search Engine Optimization).
The first thing is to pick a correct domain
We must try having our keyword included in our domain name, of course, this may sacrifice our branding but we can use the redirection.
Create Value Added Content
Not only rewrite articles, or write like it would be something for us. We should write thinking about our target audience, i.e., giving advices, tips, suggestions, guidance on specific topics and, aside, put links, use anchortext and keyfrases.
The topic of the links is important
They should be of quality and is no longer needed to place five or ten links within the text of your website, now, what matters is that the link is in context and is relevant.
Finally, the domain, in value-added content and a right use of the internal and external links, will not be useful if we don't try to update our blog constantly.
How often should you update your blog?
This is not necessary to be done on daily basis, although this may be ideal as in this way we could achieve a greater relevance in search engines, but has to be a constant work. Let's say, two or three times a week would be enough, what should not happen is updating only three times a week and doing nothing next week.
Keep in mind that search engines happen to pass daily on our blog in order to index our content.
I hope that you find these SEO tips useful and if you would like to receive more tutorials by email, subscribe for free to this blog, check out the facebook page or add the RSS feed.
Of course, not all the cases are alike, nor all blogs are positioned similarly, some may have greater competition than others depending on how popular is the topic they handle, so when it comes to positioning there's no specific time that applies for all. Having said this, let's begin.
Focus on a topic
Whatever the theme of your blog is, when writing a post, try focusing on a definite subject that has a clear objective and has no distractions, for example, if you write about Digital Cameras, then the beginning and the end of the post should be only about it. Don't start talking about digital cameras and end up telling about what you have done last weekend. A reader goes to a page because is looking for a specific information, so unless it is not a personal blog (where you write about your daily life) do not digress.Define the post title
The post title should be precise, so that you can briefly summarize the content of the post, but you must not abuse this either and although it should be concise, do not save words that might be keys to the search.Examples:
Collection of all the cameras that have been released last year on the market
The best digital cameras of 2012Clearly, the first one hasn't been defined so much and the second is not only more accurate but it is more appropriate for what people are searching on the internet.
The keywords
Keywords are those terms that the most people search for on the internet and you should try focusing on them when writing an article; these keywords have to be included throughout the entire article but you should be careful not repeating them too many times.Example:
During the fourth week of the technology, there were many products that are consumed today, and the most famous experts gave a speech on them.
At the opening of the fourth Technology Week, the experts talked about various topics, including how to choose a digital camera, frequent discussions about the pros and cons of the iPad, and what are the best smartphones.In the first example we have written without giving importance to any terms, however in the second one, we used phrases that are searched on the internet by the users.
So, the most frequent search terms should be included wisely but without cluttering your posts with these words, or it can be counterproductive.
These keywords should be added in the title of the posts, as well.
Rely on synonyms
While it is good using keywords, we should not limit ourselves to a single word. It is recommended using synonyms because users do not name things in same way and using less keywords, you'll avoid leaving the reader under the impression that you are being repetitive and insistent.Examples:
Nikon D7000s Digital Camera is a 16.2 megapixel digital camera that takes great pictures, for those who like good quality pictures.
Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures, for those who like good quality images.In the first example we have repeated the word digital camera and pictures twice meanwhile in the second one, we used the digital camera keyword once and changed the word pictures with images.
This way, the reader will find a greater diversity of words and could enjoy the article more.
Using bold and italics
The main keywords should be highlighted, so that they will stand out from the rest; this is taken into account by the search engine robots being like some kind of lures for them, so the words with which you want to position yourself have to be highlighted with bold, but be careful, this shouldn't be done with CSS, but with HTML, i.e. they should not be tagged with font-weight: bold; but rather with <b> or even better, with <strong>.Examples:
Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures, for those who like good quality images.The result seems to be the same, but it is not. Although the three sentences are in bold, only one is more attractive to robots, which is the first.
<strong>Nikon D7000s</strong> is a 16.2 megapixel <b>digital camera</b> that takes excellent pictures, for those who like <span style="font-weight: bold;">good quality images</span>.The same goes for the italics, use them for highlighting important words, but do not put them between font-style: italic; but rather between <i> or even better <em>.
<em>Nikon D7000s</em> is a 16.2 megapixel <i>digital camera</i> that takes excellent pictures, for those who like <span style="font-style: italic;">good quality images</span>.Again, the first has a better chance of positioning than the others. So, it is recommended to highlight the keywords in bold and italics, or put them between <strong> and </strong>, or between <em> and </em>.
Using links
Some believe that we shouldn't use links in the posts because this way we are giving away our Page Rank. This is not quite true, using referral links to sites that have already shaped their credibility, will also help us to shape our own. Certainly, we should not flood our posts with links, but do it when is necessary, and especially with sites that address the same topics as you.Also, avoid putting the typical "click here" or similar texts. When you put a link, the anchor text should be fairly descriptive.
Examples:
<a href="Link URL">Click here</a> to know more
More information about <a href="Link URL">digital cameras</a>In the first example, the anchor text is not relevant and descriptive, in the second it is.
Illustrating with images
Articles with images are not only visually appealing, but might help the reader to understand what you are talking about, thus, whenever you can, use an image in your post to illustrate the publishing, but do not overdo it, because many images or very large images can slow the loading time of the blog.New and relevant content
You should focus not only on writing many posts, but also making them relevant to your readers. New and original content is more attractive to the search engines than a copy & paste, and actually the last gets penalized. So try to write new stuff, even if you think that all has been said, it isn't so, each person has a different way of saying things.Also, always try to get informed before writing an article; do a research and see if the information is valid, based on that you will gain the trust of your readers.
With these few techniques you can increase the chances of positioning your posts on the internet. As I said earlier, these aren't things that no one heard about, but I know that many start and do not know how to optimize the blog posts.
It does not hurt repeating that the positioning is not given overnight, but with some effort and patience, you should see the desired results over time.
If you are using the Nabble forum
in your blog is very likely that this gadget will interest you because,
as the title says, it will show the lastest topics that have been
published in your forum in a very similar manner to the recent comments
gadget which uses the blog's feed.
First you should go to your forum and look at the bottom where it says Feeds, click there, then two links of the Feed will appear (the first being the Topics only Feed and the other one is Topics and replies), choose the one you want.
After this, log in to your Blogger Dashboard, go to Layout, click on Add a Gadget link, choose Feed from the gadgets list and paste the Feed URL you have selected inside the text box.
Click on Continue, and you only have to configure the parameters, then Save changes to see the results.
First you should go to your forum and look at the bottom where it says Feeds, click there, then two links of the Feed will appear (the first being the Topics only Feed and the other one is Topics and replies), choose the one you want.
After this, log in to your Blogger Dashboard, go to Layout, click on Add a Gadget link, choose Feed from the gadgets list and paste the Feed URL you have selected inside the text box.
Click on Continue, and you only have to configure the parameters, then Save changes to see the results.
This is a very nice carousel slideshow made by Brian R. Miedlar which shows a gallery of images having a sliding effect that returns to the beginning once it gets to the last image.
To add this image carousel on your Blogger blog, follow the steps below:
Step 1. Login to your Blogger Dashboard, go to Template and click on the Edit HTML button:
Step 2. Search using CTRL + F for the </head> tag.
Step 3. Just above the </head> tag, add this code:
Step 4. Now search for the following code:
The width of the carousel is of 685px, so below the header might look good. If you want to change the length then you have to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that occupy all the thumbnails together.
Step 5. Save the Template.
Step 6. Go to Layout > click on Add a Gadget link > choose HTML/Javascript from the pop-up box and paste the structure of the carousel:
If you add more images or remove some, you also need to change the width of the thumbnails, otherwise some pictures will appear behind the others.
To add more pictures, just add before the </div> in red a piece of code like this:
To add this image carousel on your Blogger blog, follow the steps below:
Step 1. Login to your Blogger Dashboard, go to Template and click on the Edit HTML button:
Step 2. Search using CTRL + F for the </head> tag.
Step 3. Just above the </head> tag, add this code:
<script src='http://www.google.com/jsapi'></script>Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red.
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/>
Step 4. Now search for the following code:
]]></b:skin>And just above it, add these styles:
.carousel {Here, I have put some styles in green that can be customized as you wish, such as the border color and the background color. The arrows are images, so if you want changing their color or use other, you have to change the two URLs in blue.
position:relative;
clear:both;
left:20px; /* Distance from left */
margin-top:10px;
margin-bottom:20px;
border:2px solid #000; /* Carousel border */
background-color:#333333; /* Background color */
}
.carousel .navButton { cursor:pointer; display:block;
text-indent:-9999px;
background-repeat:none;
z-index:10;
}
.carousel .container {
position:absolute;
overflow:hidden;
}
.carousel .items {
position:absolute; }
#Carousel2 {
height:88px; /* height of the container */
width:685px; /* width of the container */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* width of the images container */
height:100px; /* height of the images container */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* overall width of all the thumbnails */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXMQk-WetygnvM8oF1jWBJ3_0ohplahHsBFsBruq-iZ4g4oztuyv7Wix5N9adxkP2ZrF96Zm8Co1ZNIMof-2cMo4uPmsUX87sqyrTpxS2KEcSV4EIAdJAWThvslyrw9wSuPrSGf3SRw/s1600/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyt3bDsExXMDVBVcznBQzLSLUmA3yuyqguvGq9STywUIskG9M_hFIsbCkET8ffuKegsjDTx8rpz-ewzwImctBj0akAj8IfKhjSL6JT1WyG9vk_P0_3z1-58MPDMKnUeCnWWSiATUzEBg/s1600/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}
The width of the carousel is of 685px, so below the header might look good. If you want to change the length then you have to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that occupy all the thumbnails together.
Step 5. Save the Template.
Step 6. Go to Layout > click on Add a Gadget link > choose HTML/Javascript from the pop-up box and paste the structure of the carousel:
<div id="Carousel2" class="carousel">Add the URLs of the links and the URLs of the images. The link URL is optional if you want to link the images to some posts.
<div class="button navButton previous" style="display:none;">Back</div>
<div class="button navButton next" style="display:none;">Forward</div>
<div class="container">
<div class="items">
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
</div>
</div>
</div>
If you add more images or remove some, you also need to change the width of the thumbnails, otherwise some pictures will appear behind the others.
To add more pictures, just add before the </div> in red a piece of code like this:
<div class="item">To align the gadget just change the distance from the left (in green) to another value.
<div class="key caption">Thumb</div>
<div class="icon">
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
<div class="picture"></div>
</div>
For many of us the design and the template are the most important,
making our readers be more interested and coming back to our blog. In
this tutorial, I will show you how to create a keyboard keys effect only with CSS. It is not necessary to add an image, so that your blog will load faster.
Step 2: Look for this line (Ctrl + F)
Step 3: Just above ]]></b:skin> paste this CSS code:
Now the only thing left to do is adding the tags to the desired text to make it look as it would be inside of the keyboard keys.
For this you need to create a new post, write the text on which you want to apply the style and then switch to HTML - where you have to add before and after it, the following HTML tags:
<kbd>Ctrl</kbd> + <kbd>F</kbd>
And, it will be visible in your post as: Ctrl + F
How to Add Keyboard Keys to Blogger
Step 1: From Blogger Dashboard, go to Template > Edit HTMLStep 2: Look for this line (Ctrl + F)
]]></b:skin>
Screenshot
 |
| Click on the arrow to expand the code |
Step 3: Just above ]]></b:skin> paste this CSS code:
Step 4: Save the change made.
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}
Now the only thing left to do is adding the tags to the desired text to make it look as it would be inside of the keyboard keys.
For this you need to create a new post, write the text on which you want to apply the style and then switch to HTML - where you have to add before and after it, the following HTML tags:
<kbd>Ctrl</kbd> + <kbd>F</kbd>
Screenshot
And, it will be visible in your post as: Ctrl + F
Google Analytics is a platform created with the purpose of providing us a tracking of the number of visits and page views on our blog that also uses several filters to check exactly from where visitors are coming via standard or custom reports.Google Analytics is the leading free tool that has a good relationship with the internet marketing and offers suggestions and improvements or benefits for our website.
Implementing Google Analytics on Blogger
1. Do you have a Google Analytics account? Then it's perfect. If you don't have one, please Register.2. Within the account, we'll go to Admin and in the Property column, click the menu, then click Create new property, where we enter the information from the website.
3. Click on "Get Tracking ID" and it will provide a box with a code, select and copy the code (CTRL + C).
4. Now let's go to our Blogger account.
5. Look for your blog and in the Template > Edit HTML, paste the code previously generated in Analytics before the </head> tag (CTRL + F in order to find it).
And this would be the entire procedure. And within about 24 hours, we shall see the first statistics of our blog in Google Analytics, otherwise do the following:
- Double check that the code has no spaces or characters.
- Errors in the configuration.
- Poor implementation of the filters.
- The Flash plugin is not working or javascript is disabled.
- Will have minor issues if you are receiving visits from China (this conflict is not yet solved, according to Google).
11 World Heritage Objects in Indonesia
World Heritage of Intangible Culture :
Indonesia has 4 World Heritage Intangible Culture objects.
BatikBatik is recognized as World Heritage by UNESCO in 2009. To celebrate it, Indonesia has set 2 October as batik day. Indonesian batik has various motives depending on regions. The techniques, symbolism and culture surrounding hand-dyed cotton and silk garments known as Indonesian Batik permeate the lives of Indonesians from beginning to end: infants are carried in batik slings decorated with symbols designed to bring the child luck, and the dead are shrouded in funerary batik. Clothes with everyday designs are worn regularly in business and academic settings, while special varieties are incorporated into celebrations of marriage and pregnancy and into puppet theatre and other art forms.
The garments even play the central role in certain rituals, such as the ceremonial casting of royal batik into a volcano. Batik is dyed by proud craftspeople who draw designs on fabric using dots and lines of hot wax, which resists vegetable and other dyes and therefore allows the artisan to colour selectively by soaking the cloth in one colour, removing the wax with boiling water and repeating if multiple colours are desired. The wide diversity of patterns reflects a variety of influences, ranging from Arabic calligraphy, European bouquets and Chinese phoenixes to Japanese cherry blossoms and Indian or Persian peacocks. Often handed down within families for generations, the craft of batik is intertwined with the cultural identity of the Indonesian people and, through the symbolic meanings of its colours and designs, expresses their creativity and spirituality.
We know that SEO Off Page is all the optimization that can be done off the page, such as link wheels, reviews, social bookmarking, social media (references and followers), sidebar links, among other techniques.However, is useless optimizing outside the website, if within is not created the same process, this mostly because the search engines (especially Google) pay much attention to alt and title tags (for images), meta tags, internal links, robots and so on, in order to display the content of your web page to the user who made a specific query in the search.
To never fall in this depression of search engine optimization, you can choose a good and reliable blog platform like Blogger, which is not like WordPress, but has similar characteristics. If you are working only on Blogger, today I will show you several really good tips to optimize SEO On Page on Blogger and become successful in daily visits as Internet popularity.
Important On-Page SEO Tips For Blogger
Implementation of the robots.txt file: besides alerting Google search engine, this file also helps us to prevent certain pages being indexed by Google in order to protect our blog against duplicate content issues.Title optimization: In the default blogger template, post titles are not optimized properly for the search engines. To solve this, we need to touch some code in the design and optimize both page and post titles.
Image optimization: Whether your blog is about pictures or images as general topics, by simply placing a keyword related to articles, by compressing the image and placing the title=”" and alt=”", we would be optimizing SEO On Page a bit more.
Internal links: Internal links within posts on our website will not only increase page views, it will also help us to be well ranked in search engines.
Blog's loading time: When you start with a blog either new or old, is important to offer a user experience filled with a fast loading time without saturation of objects. Search engines give higher priority to a faster blog than to a slow or saturated one.
Using Google Webmaster Tools: After making sure that your blog is 100% SEO, this amazing Google tool will provide you support with both fast indexing and broken links, HTML improvements, page errors and many other specific suggestions for your website.
Got any other ideas or thoughts about natural and positive techniques to improve the On Page SEO on a web page?
Many think that Google AdWords is the only tool dedicated and available to perform a study such as a keyword search,
but it isn't so, today I refute this little lie by collecting some
alternatives that, although are not equal to Google AdWords, at least
encourage us to make good keyword analysis for the SEO of our website.
Going back a bit, for those unfamiliar with the main features and tools of Google AdWords, we can find a very simple interface yet complete in every sense.
After we register, to access the tool, go to Diagnostics & Tools and click on the second option on the list: Keyword Research.
SEMRush:
Other freemium alternative that displays a very complete report of a
particular keyword or website. However, it has limitations and if you
opt for a PRO recurring plan you need to pay a monthly membership from
$69.95 per month.
Ubersuggest: This nice and simple online tool searches keywords suggestion as well as potential titles for an article. Personally, I recommend it 100%.
Keyword Eye:
If you are looking to perform a keyword research on a particular
region, Keyword Eye will be your help. It also has the option of
requesting the display of search volume or AdWords competition and a
full report of anchor text, keywords and domain.
At first it offers a free plan with limitations and to enjoy all other benefits we have to pay $9.99 per month.
Going back a bit, for those unfamiliar with the main features and tools of Google AdWords, we can find a very simple interface yet complete in every sense.
- AdWords appearance has changed, however there is a chance of returning to the old design.
- Allows you to place a phrase or keyword, a web site and use the categories.
- For a better keywords search, you can apply filters such as location, language and add custom fields (competition, local or global monthly searches, CPC, Ad share, etc.).
- Displays keyword ideas in columns with the amount of local and global monthly searches and approximate CPC.
- You can download keyword ideas, search results in a format to open with Excel.
Google AdWords Alternatives
Bing Webmaster Tools: Bing may not be the tool that we had first thought of, however it wants to provide the best conditions for studying keywords.After we register, to access the tool, go to Diagnostics & Tools and click on the second option on the list: Keyword Research.
Ubersuggest: This nice and simple online tool searches keywords suggestion as well as potential titles for an article. Personally, I recommend it 100%.
At first it offers a free plan with limitations and to enjoy all other benefits we have to pay $9.99 per month.
An important part of a good SEO
is the incorporation of meta tags, which are commonly located in the
header of our website and which, in the same time, are invisible to
users visiting the site. Well, to be more succinct, these tags have only
one purpose: to include information about the page such as author name, date, key word, description, title, among others.
However, here we will only mention one, which is the meta description in Blogger, this description will appear as a fragment in the search results and as a description when sharing on Google+, Facebook and other social networks. A clear and precise description increases the chances of getting visits or clicks.
As we will work only on the Blogger platform, here I leave a little guide to easily add a meta description.
Then check the box "Yes" to enable search description and finally click on the "Save Changes" button.
You are ready, however it is best to test if it works and we will do so with the MetaChecker online tool, where we only have to introduce the url of a post or page, click Analyze and then it will show the results, including a complete analysis of keywords, on-page seo , meta tags, URLs, current server status and a rating bar that goes from Horror to Excellent.
If none of the meta descriptions appear (rarely fails), we will do the process manually, but it requires us to touch a bit of code. In this case, go to Template > Edit HTML and then insert before <b:skin><
Then check the box "Yes" to enable search description and finally click on the "Save Changes" button.
Adding Meta Description To individual Posts
Now we will focus on adding the meta description to individual pages. Simply edit the page or post, look for the Search Description setting, where we enter the text and then save by clicking on the Done button.You are ready, however it is best to test if it works and we will do so with the MetaChecker online tool, where we only have to introduce the url of a post or page, click Analyze and then it will show the results, including a complete analysis of keywords, on-page seo , meta tags, URLs, current server status and a rating bar that goes from Horror to Excellent.
If none of the meta descriptions appear (rarely fails), we will do the process manually, but it requires us to touch a bit of code. In this case, go to Template > Edit HTML and then insert before <b:skin><
"Sorry, the page you were looking for in this blog does not exist."
And probably this will not make a good impression on the greatest potential users of our blog. Before the user clicks the back button or close the window/browser's tab, thus leaving our site forever, we may want to redirect 404 error in Blogger to a page, where are chances that the visitor will continue reading our blog.
One of the most used methods is the "meta refresh" but the problem with this method
is that it breaks navigation (doesn't allow returning back). In this
case, the best method is by using Javascript which will be shown below.
Copy and paste the following code:
Next thing to do is to save all changes made in this section and do a little test to check if the code works well. You can enter a nonexistent URL on your blog, and see if the 404 error page added previously appears, followed by a redirection after 5 seconds.
Redirect Blogger 404 Error with Javascript
First of all, go to your Blogger dashboard and then to Settings > Search preferences > Custom Page Not Found.
Copy and paste the following code:
Sorry, the page you're looking for in this blog does not exist.The message which is going to be displayed can be edited as you want. If you are willing to redirect your blog 404 error page to another page other than your home page, just replace pathname to href and / with the url of your page. And finally, the number 5000 is the delay expressed in milliseconds. You can edit any value if this is more convenient.
You will be redirected to homepage shortly.
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>
Next thing to do is to save all changes made in this section and do a little test to check if the code works well. You can enter a nonexistent URL on your blog, and see if the 404 error page added previously appears, followed by a redirection after 5 seconds.
Page Peel is a popular page flip effect that when your cursor is passing
over it will show "what's behind" as if it would be a book.
There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.
Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.
In red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.
And that's it. Save the template.
Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.
There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.
Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.
To add this page curl effect on your blog:
1. Go to Template > Edit HTML and before </head> paste the script:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>2. Then before ]]></b:skin> paste these styles:
<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>
/* Page Flip3. Finally, paste after <body> or:
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
<body expr:class='"loading" + data:blog.mobileClass'>The following code:
<div id='pageflip'>In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size) if you want.
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
In red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.
And that's it. Save the template.
Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.
8AAU2XTXFSX3
As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?
On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.
The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.
On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.
The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.
