Make a Navigation Bar with Automatic Highlighted Current Links
Dante Araújo |
Oct 7, 2009
| Tutorial
Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.
Visit Bloggertuts.com to get this great tutorial!
Read more!
BloggerTuts - Blogger Tutorials, Templates and Resources
Dante Araújo |
Oct 3, 2009
|
Hello guys, Today I announce you the launch of my newest project: BloggerTuts, a place for all thing Blogger related. Now I won’t just make things and give them for free, but I will give away tutorials, articles, round ups and freebies to make possible for anyone to become a Blogger master.
We’ll also have a Blogger Resources Link Feed, where you guys will be able to promote your own articles, tutorials and templates to the whole blogger community, we are expecting many subscribers, so feel free to submit as many link as you wish, I will moderate them in order to keep the quality for our community.
I want also announce that for now on I will be most active on BloggerTuts than here. So all of my template releases, tutorials and articles will have the BloggerTuts brand. This blog will be soon transformed in a personal portfolio for freelancing jobs (Visit my Blogger Premium Services section for more info.)
I am very proud of this project, the main reason is because I am not alone on it, I’ve got help from a real nice team of blogger gurus, They are going to be announced soon in a section for the team.
Help promoting BloggerTuts
There are many ways that you can help promoting the launch of BloggerTuts, It would be great to have you helping us over to become the main source for premium blogger resources. This motivation will allow us to bring you even better tutorials and articles:
- Follow BloggerTuts on twitter
- Place banners on your blog
- Write posts about BloggerTuts
- Follow BloggerTuts on our Google gadget
- Subscribe to BloggerTuts RSS feed or trough Email
- Submit links to our community feed
So I hope you guys enjoy my effort on this project, I will give my best to share with you all my Blogger knowledge, so you can improve your blogs and become a Blogger master.
Read more!
BloggerTube - The first Blogger video template!
Dante Araújo |
Sep 23, 2009
| Free Template
Since from the very beginning of this blog, I had in mind that most of people do not use Blogger just because of its "limitations", or whatever they think blogger has, so I have decided to creat unique templates that would blow people's minds not only because of their designs, but also for its many unique and out-of-the-box features.
Now I bring you a template that no one has never made for Blogger: a video template. Yes, now you guys can showcase your videos using blogger! ins't that awesome?
The fact is that I am very excited about this template, because this one may turn out in a revolution on Blogger templates, People will now see that Blogger is not as limited as they thought it was, believe me: I didn't even start describing its features yet.
I have been working on this template for the past weeks, finding a way to improve it each time I put my hands on it. The best thing was the help I have got from my gift-minded friends Abu Farhan and Aneesh (from Bloggerplugins.org). They are (seriously) the best and fastest Blogger developers that I have ever known, I am very lucky to get to work with this guys.
Now let me present you BloggerTube: A video template that creates a perfect link between Blogger (The best blogging tool in my opinion) and Youtube (The biggest and most used online video service on the internet).
There are many reasons for my excitement, but I can summarize them in two simple ones:
#1 - This template is totally automatic, anyone can use it, and even the most newbie guys will be able to post videos on it.
#2 - It is the first of its kind, So this will motivate me to release new version and implement new features each version.
Check out the live demo and you'll what I am talking about!
BloggerTube Instructions:
Note: A really nice user from our community (Thanks Mesothelioma) has just made this great collection of video tutorials for Bloggertuts, Please check it out, specially beginners. Make sure you watch them before asking for help!
How to post a new video on BloggerTuts
1 - You'll only need 2 things: A post sample (Please download it here and save it as post sample under your Blogger settings) and a video URL from youtube.
2 - Go to Youtube.com and grab a video URL:
3 - Now head to your Blogger dashboard and create a new post, It will open up the posting page with your previously saved post sample:
4 - Note that you have 2 important elements:
- "endofvid" - Will be used to tell the template that your video URL has finished, you should paste your URL right before it, with no spaces!
- [starttext] and [endtext] - Those are your post content wrapper, so if you need to write anything, post any picture on your post, please do it inside these two lines. This is an important step, if you write anything out of these two lines, it will not be shown on your post.
5 - Here's how the your post should looks like:
I have highlighted the important elements just for your reference, but you should not do that on your posts.
How to install the "Recent Videos" widget"
Just go to your Page Elements section, click to edit the HTML/Javascript Widget called "Recent Videos" and paste the following code inside:
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/dante.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<div class="clear"/></div>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<div class="clear"/></div>
Automatic features on BloggerTube:
Once you have made your post, BloggerTube has taken care of it, let's check it out the awesome automatic features on this neat template:
Automatic video thumbnails on home page:
BloggerTube will automatically create a thumbnail out of your video, and show it only on your home page, in a nice and organized gallery style.
Automatic embedded video on post page:
You'll get your video automatically embedded on your post page, together with your description/post below it.
Automatic slider for the last featured videos
This one may be the most cool feature of this template, it is completely mind blowing, and you doesn't even to touch the code to get it, It's already installed and running for you!
BloggerTube Highlights
Custom star ratings from js-kit.com :
Recent videos widget from Bloggerplugins.org (adapted specially for this template):
Exclusive scripts from Abu-farhan.com created specially for this Blogger video template that makes it totally awesome and intelligent.
Note: if you are experiencing any problems with the page navigations, go to your Edit HTML pade, check Expand Widget models, and replace the following url:
http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js
for this one:
http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js
Final Words
I hope everyone enjoy this template, I have put so much effort to show people that blogger can really be awesome and to break all the limitation walls that some people create for this great blogging platform.Feel free to subscribe to my RSS feed, and Follow me on twitter.
BloggerTube FAQ's
1. Can I show videos from another websites other than youtube? Maybe FlashGames? Or even Pictures?
No, This template only supports youtube videos, because that's what it was made for, so changing it to support any other kind of media, would be as hard as developing a whole new template again.
2. Why did you support only youtube on this one?
Because it is the most used video service on the internet, as simple as that.
3. Why don't you make another template supporting another kinds of videos?
I never told you guys that I was never going to release new templates anymore, please be calm and let things happen, I have many plans on new templates, but due to lack of time for doing it, I didn't had the chance yet.
4. Why you answered that for question #3 ?
Because I am not a full time blogger/webdesigner like other template developers, I study Engineering and also work on other projects, so please understand my point.
1. Can I show videos from another websites other than youtube? Maybe FlashGames? Or even Pictures?
No, This template only supports youtube videos, because that's what it was made for, so changing it to support any other kind of media, would be as hard as developing a whole new template again.
2. Why did you support only youtube on this one?
Because it is the most used video service on the internet, as simple as that.
3. Why don't you make another template supporting another kinds of videos?
I never told you guys that I was never going to release new templates anymore, please be calm and let things happen, I have many plans on new templates, but due to lack of time for doing it, I didn't had the chance yet.
4. Why you answered that for question #3 ?
Because I am not a full time blogger/webdesigner like other template developers, I study Engineering and also work on other projects, so please understand my point.
Sign up for testking online course and go through Testking 642-642 tutorials and Testking HP0-D07 live demos to learn best blogging tips and ideas.
Read more!
Blogger bring us comment avatars! Awesome! (Updated)
Dante Araújo |
Sep 18, 2009
| Blogger Quick Tips
Blogger just brought us one of the most wanted features on any kind of Blogging platform: Avatars on comments. From a long time ago I have been looking for a way to implement Gravatar or any other way to show avatars on Blogger comments, but never really found a way that was really customizable, so no sucess.
Now as one of the Blogger Birthday feature series, the Blogger team allow us to show profile pictures besides every comment, what increases the idea of "community" in your templates and give it a more "netwroking with users" feeling, at least for me.
Unfortunaltely that feature does not immediately work for users with highly modificated templates such as me and many people around, but don't worry, I have made this little tutorial on how to implement that on your blogs.
How to activate avatar on your blogger comments
Go to your blogger Dashboard > Layout > Edit HTML. I recommend you to save a copy of your template in order to do changes safely. To do that just click the "Download Full Template" link.Now click "Expand Widget Templates", and look for the following lines on your code:
<dl id='comments-block'>
and REPLACE it for the following:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
After doing that, look for this line:
<a expr:name='data:comment.anchorName'/>
and ADD the following code right AFTER it:
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<data:comment.authorAvatarImage/>
</b:if>
Save it, and you are done.
How to replace the blank space for a 35x35 image (Update)
Note: I give credits to Soufiane from LeBlogger for this step.First look for this line of code:
<a expr:name='data:comment.anchorName'/>
And REPLACE it for the following:
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
And for last, add the following code just before the line ]]></b:skin> :
/* Avatar */
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/AvatarBlogger.png);
width:35px;
height:35px;
}
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/AvatarBlogger.png);
width:35px;
height:35px;
}
Save it, You're done.
Note: If this tutorial does not work, make sure you have enabled "Show profile images on comments?" on your Settings > Comments section.
Read more!
Photoplus Light - Free Ultimate Blogger Template
Dante Araújo |
Sep 10, 2009
| Free Template
Due to the success of Photoplus, I got many comments on it, and a lot of people were asking me to make a lighter version of it, so here's it! I tried to use a different style of design, keeping it clean and minimalistic, but not less professional.
This template is for photography only, so if you need to show texts or anything else, It will not work.
I also would like to thank CSS Reflex for this great tutorial.
How to post on Photoplus Light
Your posts on photoplus should be only an image tag. This means that the title will not be shown on the main page, it has only SEO purposes. Same thing with Labels, It will serve you only to organize the main menu.Here's the post model:
<img alt="A description of the image goes here." longdesc="LINK_TO_THE_FULLSIZE_IMAGE" src="LINK_TO_THE_THUMBNAIL" />
Note: The thumbnail size should be 187x128 pixels.
I recommend you guys to save it as post model, it will make your life easier.
Features:
- Photography
- jQuery Special Feature
- Web 2.0
- Easy to customize
- 3 Column Footer
- Minimalistic
- White
Read more!
5 Blogger gurus you should know, and why you should follow them
Dante Araújo |
Sep 9, 2009
| Blogger
Since I started dealing with blogger (about 5 months ago), I was able to experience a lot of good stuff, learn and share knowledge with many great people from this networl/niche. Everyday I surf around the web looking for inspiration and also new stuff that come up for blogging. Blogger is a pretty old (10 years old) tool, so since its creation people were able to make guides, tutorials, templates, etc, and that makes internet full of all kinds of things blogger related.
The problem is that when you get too much stuff, you can't really tell whether all of them are trustable or not. You got to have good eyes to see if a template, tweak or tutorial is really worth to implement on your blog, because if not, you can simply ruin months/years of work.
So thinking of that, I made a little list of people I call "Blogger Gurus" and want to share with you. Those are the Blogger people I follow daily and trust every thing that comes from them. I don't mean that they are the best people around, neither that they are the ONLY "Blogger Gurus". Please understand that this is a personal list and you may agree or not with it. If you don't please don't hesitate to leave a comment, so we can let the conversation begin.
Amanda Fazani
This girl is fantastic, I learned almost everything I know reading her blog, It has a very useful list of essential blogger tutorials for beginners. Everything that comes from her is professional, including her templates. That makes her one of the best template author when it comes to selling blogger templates on ThemeForest marketplace.Follow Amanda on twitter.
Klodian
He is my best friend on Blogger niche. Klodian has a great mind when it comes to good taste and choosing the best templates to convert. He is also very clever and a real good internet strategist. I trust him to death and his advices are the way to go.Follow Klodian on twitter.
Claudia Contreras
Co-hoster of BTemplates.com, She does a great work designing templates, giving support, writing about bloggersphere. For me what she does best is to classify template submission in order to keep a great list of templates over at BTemplates (the best template collection in my opinion).Follow Claudia on twitter.
Francisco Oliveros
BTemplates founder, He is a great blogger and lover of webdesign. Pioner developer of blogger templates, He also writes on his personal site about blogging and web development.Follow Francisco on twitter.
Vin
He is one of the pioneers in blogger learning. Vin is very succesful on Google Blogger Help Group, he also maintains a kind of old blog with so many content, and so many people have been helped by him, that he must surely be considered a Blogger guru.Follow Vin on twitter.
No, the list is not complete, I will wait for your feedback in order to make it bigger. Please help me building this article, Send me your opinion, tell me what you think, who you think should be included on the list? Who do you consider a "Blogger Guru" and why? Let's start the conversation!
Read more!