I have seen that many of those using toolbars such as Wibiya have had to remove it because of interfering with the performance of some scripts like Scriptaculous and Prototype, while others have chosen to remove these scripts just to continue using the toolbar.
Well, for those who prefer to have a custom toolbar that does not give them such problems and allow them to continue using other scripts, here's how to create our own floating toolbar with a close option. The toolbar contains a search box, link for feed subscription, link to follow on Twitter and Facebook, like button to share on Twitter or Facebook and translator in five languages.
Finally, change what is in blue with the URLs of your Facebook and Twitter profiles. If you want to add more items, such as a counter, links, etc.. add a line like this just before the </tr> tag:
<td>Add here the extra content</td>
Add the content where is indicated and that's it.
As you can see, it is not necessary to depend on external sites to have a toolbar, from now on you can have a customized toolbar on your Blogger blog.
When your blog has too many posts, visitors don't always have the time or desire to go through all the posts written there in order to make an idea of the blog's content. Thus, a random posts widget that will allow visitors to find content more easily could be really useful. This tutorial will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and excerpts.
#random-posts li { margin-bottom: 10px; border-bottom: 1px solid #EEEEEE; padding: 4px; } </style> <ul id='random-posts'> <script type='text/javaScript'> var randomposts_number = 5; var randomposts_chars = 110; var randomposts_details = 'yes'; var randomposts_comments = 'Comments'; var randomposts_commentsd = 'Comments Disabled'; var randomposts_current = []; var total_randomposts = 0; var randomposts_current = new Array(randomposts_number);
function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() { for (var i = 0; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < randomposts_current.length; j++) { if (randomposts_current[j] == rndValue) { found = true; break } }; if (found) { i-- } else { randomposts_current[i] = rndValue } } };
function get_random() { var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1)); return ranNum }; </script> <script type='text/javaScript'> function random_posts(json) { for (var i = 0; i < randomposts_number; i++) { var entry = json.feed.entry[i]; var randompoststitle = entry.title.$t; if ('content' in entry) { var randompostsnippet = entry.content.$t } else { if ('summary' in entry) { var randompostsnippet = entry.summary.$t } else { var randompostsnippet = ""; } }; randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, ""); if (randompostsnippet.length < randomposts_chars) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet.substring(0, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(" "); randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…"; }; for (var j = 0; j < entry.link.length; j++) { if ('thr$total' in entry) { var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments } else { randomposts_commentsnum = randomposts_commentsd }; if (entry.link[j].rel == 'alternate') { var randompostsurl = entry.link[j].href; var randomposts_date = entry.published.$t; if ('media$thumbnail' in entry) { var randompoststhumb = entry.media$thumbnail.url } else { randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQ9eovWNAuyJihy7sRgtVnTjAi2uI01UUb_97ksvw_j4ISAhgx0LAwhdHUs5HHe6hpEL6ISKR43DEMt3IEUVxjHF67HcRtkIXzGmX3sbLuZ_fkJQt7H65q5mjcMXk1w6jEF6EomoqjAY/s1600/no_thumb.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>'); document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>'); if (randomposts_details == 'yes') { document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>' }; document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>') } }; getvalue(); for (var i = 0; i < randomposts_number; i++) { document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>') }; </script> </ul>
Random Posts Options
- Thumbnail dimensions: to change the size of the thumbnails in pixels, replace the 75px value. - Summary length: you can control the the length of the summary (in characters) by changing the 110 value from var randomposts_chars=110; - Post info: if you want to hide the post date and comment count change 'yes' from var randomposts_details='yes'; to 'no'; - Font Size for Posts Titles and Summary: to modify the font size for the post snippet modify the 11px value and for the posts title, the 12px value;
Click on the Save button and View your blog. The sidebar will display a random posts widget on each of your blog pages.
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.
In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget even though we can apply this trick on any of the blog widgets.
Changing the Thumbnail Size for the Popular Posts Widget
Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window.
Step 2. Next, go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box.
Step 3. Type or paste the following tag inside the search box then hit Enter to find it:
</head>
After you found the </head> tag, add this CSS above it:
<script type='text/javascript'> function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img"); for(var i=0;i<thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; } } changeThumbSize("PopularPosts1",210); </script>
What I highlighted in red is the widget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widgets, first you need to find the gadget/widget ID and then add a line below this part:
... and replace widget-ID-HERE text with the ID of that widget/gadget.
Note: you won't see the changes if the widget has a class selector - for this you may need to change class with id and replace the dot "." symbol with "#" within the CSS...
Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love.
So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure-CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect.
Demo: hover over the album cover and see how CSS reveals further information:
The Wall is the eleventh studio album by the English progressive rock group Pink Floyd.
How to Apply The Animated Vinyl Record on Blogger Images
Step 1. From your Blogger's Dashboard, go to Template > click on the Edit HTML button:
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:
Step 3. Type or paste inside the search box the tag below and hit Enter to find it:
]]></b:skin>
Step 4. Just above ]]></b:skin> add the following code:
@-moz-keyframes spin { from { -moz-transform:rotate(0deg); transform:rotate(0deg); } to { -moz-transform:rotate(360deg); transform:rotate(360deg); } }
@-webkit-keyframes spin { from { -webkit-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); transform:rotate(360deg); } }
Step 5. Click on the Save template button to save the changes. For applying the animated vinyl record effect on your image, first upload the picture for your album cover, copy the URL of it and then paste it inside a Notepad so that you can use it later. If you don't know how to upload images and get their urls, please read this tutorial: How to upload images and get the URLs
Step 6. When you create a post, add this code inside the HTML section:
Replace the URL in blue with the one that you saved earlier and the text in red with the info to show on mouse over. In case you don't need any info, remove this part:
