Connecting people: General tricks

Showing posts with label General tricks. Show all posts

Add Music to Blogspot blog

Posted by vu on Saturday, 5 March 2011 , under General tricks | comments (0)

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog. As well, read our article on Flash Music Player and Music Playlists to add a playlist of several musical pieces or songs.

“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.

If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

<a href="URL of music file">Click to hear music file</a>

Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

<embed autostart="false" height="40" loop="true" playcount="2" src="URL of music file" width="300"/></embed>

For instance, using the following code:-

<embed autostart="false" height="40" loop="true" src="http://ownlblog.googlepages.com/BalladePourAdeline.mid" width="300"/></embed>

this is what you see:-
http://ownlblog.googlepages.com/BalladePourAdeline.mid

(It will look different in IE and Firefox, depending on the installed plugins)

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is "300". If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose "true", the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as "false". If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is "false" which means the music will not play automatically. The default setting for Firefox is "true", and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to "false". If you are working on the Mac, the default setting for both browsers is "false".

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are "false" or "true". If the attribute is "false", the music ends after it is played once. If it is "true", the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose "true".

For certain versions of Netscape browsers, another attribute that might work is loop="n" where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount="2", the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

<embed autostart="true" height="0" loop="true" src="URL of music file" width="0"/>

Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

about:plugins

It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.

Further reading:

If you are looking to have a video clip or movie file added to your blog or template, you may check out our other article Add video clip to Blog. We have also written a guide on how to add a music player to display a music playlist and allow readers to select and play the music they want to hear.

Add Digg button to Blogger or Blogspot

Posted by vu on Friday, 4 March 2011 , under General tricks | comments (0)

This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

<p><data:post.body/></p>

If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

This is what you get:-

If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p> <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

The result will be this:-

If you want to have the button at the top left corner of your post, change the alignment.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

The outcome is this:-

Digg has another compact button. If you insert this code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; digg_skin="compact"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

You will see a compact Digg count button like this:-

You can also change the background color of the button to blend with your site. For example, a code like this:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; digg_bgcolor="#BDEDFF"; digg_skin="compact"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

will give you this:-

You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p>

If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; digg_skin="compact"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

The resulting layout is this:-

Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

<div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div style="float:right; margin-left:10px;"> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>

With the code, this is what you will see at the end of every post.

You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.

Take note of the image URL. For example, the image URL of this button

http://digg.com/img/badges/91x17-digg-button.gif

Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank"><img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>

Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

For this article, I have manually inserted the Digg button. If you would like to Digg this article, or just to see how it works, click this button.

Background Image for Blogger Template(st)

Posted by vu on , under General tricks | comments (0)

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google's Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

body { background:$bgcolor;

Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. Search online for color codes, or take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body { background-color:#B38481;

If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

#sidebar-wrapper { background-color:#B38481;

Similarly, if you want a different color for your main post column, add the color code as follows:-

#main-wrapper { background-color:#B38481;

Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited. For more details, read the article on Background Color of TicTac Template.

Add a background image

The code to insert is this:-

body { background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets. If you would like to have a feel of how a background picture will look like, I have uploaded a test image at this address – http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

#sidebar-wrapper { background-image: url(URL address of your image);

For a background image to your main post body only, add the code here:-

#main-wrapper { background-image: url(URL address of your image);

Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

background-repeat: no-repeat;

Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;

To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;

Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: top left;

Your image will appear at the top left corner of your page. The other possible values that you can use to replace “top left” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

Static background image

After that, you may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To have it stay put, the code to insert is this:-

background-attachment: fixed;

Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

body { background-color:#B38481; background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;

You can also combine the attributes into one line and the shorthand code will look like this:-

body { background:#B38481 url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed;

Putting the above code into my blog, this is what you would see.

Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the background images rotated and a random image shown upon every page load.

You may also want to refer to the related article if you are thinking of adding an image to the Blogger Header.

Add Blogger search box

Posted by vu on , under General tricks | comments (0)

The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

<p align="left"> <form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"> <strong>NAME OF YOUR BLOG<br/></strong> <input id="b-query" maxlength="255" name="q" size="20" type="text"/> <input id="b-searchbtn" value="Search" type="submit"/> </form></p>

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-

Whereas a width size="30" and value="Go" will give you this:-

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Image instead of Search button

Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

<p align="left"> <form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"> <strong>NAME OF YOUR BLOG<br/></strong> <input id="b-query" maxlength="255" name="q" size="20" type="text"/> <input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/> </form></p>

Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag. For more examples on alignment of images, you may refer to the article Hyperlinks and Image Links (II).

While it is alright to replace the button of your Blogger search box, you may not want to do that with the Google search box since their T.O.S. disallows any alteration of their code.

Add Scrollbars to Blog Posts

Posted by vu on , under General tricks | comments (0)

If you have followed our main article Add Scrollbars to Blog Widgets, you would be able to introduce horizontal and vertical scrollbars to all or any of the widgets in the Blogger template. These scrollbars can be made to automatically appear when the contents overflow a certain specified width or height setting. We have also talked about how scrollbars can be added to the Blog Post body. We shall in this tutorial elaborate on that and let you know how to add the scrollbars within each Blog Post.

Scrollbars to Blog Post body

As we had mentioned in our article, to have the scrollbars to each of the blog posts, once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

.post { height:200px; overflow:auto; }

This will give you scrollbars to every post:-

Scrollbars within Blog Post

Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows this setting, scrollbars will automatically appear:-

.scrollbox { height:100px; width:400px; overflow:auto; }

Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.

Add these tags (shown in red) before and after the part of the text that you want to enclose within the scrollbox.

<div class="scrollbox">TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

Change Widget Background Color

Posted by vu on Thursday, 3 March 2011 , under General tricks | comments (0)

In our article on Background Image for Blogger Template, we had explained how to have a background color or background image in the body, main posts, or sidebars. This will apply to most blog templates except templates like TicTac. Instead of having the entire sidebar in one color, you can also assign a different color to each of the widgets. This guide will let you know how you can change the background color of each individual widget.

Let us assume that you have created a Link List via Template -> Page Elements -> Add a Page Element. If your Link List has no title, temporarily assign to it a title. Next, go to Template -> Edit HTML and press Ctrl+F to search for that title.

For example, we have a Link List entitled “My Blogs”. We search for this title in the template and we see this:-

<b:widget id='LinkList1' locked='false' title='My Blogs' type='LinkList'/>

What we want to know is the widget ID. In this case, it is called “LinkList1”. The next Link List will be “LinkList2” and so on. If you have a HTML/JavaScript page element, it will be “HTML1” and if it were a Label List, it will be named “Label1”.

We need to set a background color for this particular widget. Scroll back up to where we see all the # and insert the following code after a curly bracket }. For easy reference in the future, we have inserted it under /* Sidebar Content */ although it doesn't really matter where you insert it as long as it is between <head> and </head> and after a } character.

#LinkList1{ background: #FCDFFF; }

We pulled off a color code from our Color Code Chart.

We can do the same for our LinkList2, Label1, Label2, HTML1, HTML2, etc. Just insert the relevant ID and color code.

#Label1{ background: #FCDFFF; } #HTML1{ background: #FCDFFF; }

After that, Preview the template. This is what a colorful set of widgets can look like:-

With a wise choice of colors, you can customize the background color of each widget to something that you like and which suits the theme of the widget or Blog.

Resize images in the posts automatically with CSS code

Posted by vu on Wednesday, 2 March 2011 , under General tricks | comments (0)

Go to design\edit HTML
Insert below CSS code before ]]></b:skin>
.post IMG {
   max-width:250px;
   width: expression(this.width > 250 ? 250: true);
   max-height:220px;
   height: expression(this.height > 220 ? 220: true);
}

You can change the values 250,220 if you like.250 is width and

220 is height of the image

Save template to finish.

Một kiểu phân trang đẹp cho blogspot

Posted by vu on Tuesday, 1 March 2011 , under General tricks | comments (0)

(Huynh Nhat Ha's Blog) -- Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình. Bạn có thể dùng từ khóa “phan trang” để tìm trên blog này một số kiểu phân trang cho blogspot.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây tôi xin giới thiệu một kiểu phân trang cũng khá đẹp.

Xem Demo.

Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham số postperpage=7.

Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'

Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=7"'

Lưu Template là OK

Một kiểu phân trang đẹp cho blogspot

Posted by vu on , under General tricks | comments (0)

.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}

Bước 2. Đặt đoạn code bên dưới vào trước thẻ .

Công cụ hỗ trợ giải mã HTML

Posted by vu on , under General tricks | comments (0)

Translate

Đối với các bạn khi thiết kế blog trên Blogger, việc đăng các bài viết có trình bày các đoạn mã HTML khá dài thì việc phân tích giải mã bằng thủ công rất tốn thời gian. Để khắc phục điều này, có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.
Trước tiên hãy vào địa chỉ Escape HTML, kéo xuống dưới sẽ thấy giao diện trông như hình bên dưới:

Bạn chỉ việc dán đoạn code mà bạn cần chuyển đổi vào khung dưới dòng chữ Parse HTML rồi nhấn Parse sau đó trang web tự động hiển thị đoạn code đã được mã hóa ở khung đầu tiên, bạn chỉ việc copy đoạn code được mã hóa đó rồi sử dụng cho việc đăng bài; nếu muốn mã hóa tiếp đoạn code khác, thì bạn tiếp tục dán đoạn code đó khung thứ 2 nằm ở dưới khung thứ nhất.

Sau đó trang web sẽ tự động hiển thị đoạn code đã được mã hóa.
Bạn có thể liên tục xoay vòng thao tác dán code đến n lần cũng được.

Có một trang web khác cho phép giải mã (encode) HTML và làm ngược lại (decode) rất thuận tiện cho việc đăng bài viết có giới thiệu code. Đó là trang centricle.com.
Nguồn: http://huynh-nhat-ha.blogspot.com

Template by BloggerTricks.com

Posted by vu on Tuesday, 22 February 2011 , under General tricks | comments (0)

This template was designed by Kranthi of BloggerTricks.com based on the wordpress theme by Dreamlinestudio.com
Vivamus lectus sapien, pulvinar nec ultrices at, laoreet et urna. Suspendisse commodo risus a sapien pellentesque id elementum augue tincidunt. Proin viverra ipsum odio, vitae pellentesque leo. Integer a urna vitae erat consectetur suscipit. Mauris vel accumsan augue. Integer et diam non enim blandit blandit vel eget diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris fermentum, nisl in elementum aliquet, nibh mi semper tellus, sit amet rhoncus est purus eu augue. Quisque pharetra tristique tincidunt. Duis eu sapien odio. Phasellus feugiat purus magna. Praesent vulputate molestie lacus ut lobortis. Curabitur eget magna eu tellus facilisis elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum quis quam eget risus pulvinar lacinia. Donec accumsan placerat libero non imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam lacinia vehicula nulla, id convallis nunc egestas a. Morbi et purus vitae neque pulvinar sagittis a quis justo. Praesent leo sapien, adipiscing sit amet dictum in, mollis sed sapien. Sed ligula est, cursus nec fermentum sit amet, varius sed odio. Nullam scelerisque tortor eu nulla placerat non bibendum quam porttitor. Duis viverra massa ligula, ac vestibulum eros. Phasellus iaculis, magna non tristique congue, ipsum neque porttitor purus, sit amet lobortis felis purus vel dui. Nulla auctor neque at arcu vehicula egestas. Integer nec tellus urna. Vestibulum cursus, massa vitae sagittis lobortis, magna arcu lobortis diam, nec cursus magna dui sit amet nisi. Suspendisse potenti.
Cras at quam ante. Suspendisse vulputate mattis tellus, et malesuada mauris molestie id. Morbi et blandit nibh. Nam suscipit semper sagittis. Sed ipsum diam, bibendum et tempus vel, convallis eget enim. Curabitur sit amet urna metus, id pellentesque mi. Morbi a nulla turpis, semper cursus sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non tellus eu justo auctor viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin luctus justo id nisl auctor in blandit urna tincidunt. Donec dui risus, consectetur vitae malesuada a, hendrerit nec enim. Vestibulum nunc velit, auctor eu pretium sit amet, bibendum semper metus. Mauris accumsan libero a nunc sodales elementum. Sed consequat nibh sit amet libero mattis eu ullamcorper nibh faucibus. Nulla ante nisl, auctor quis varius nec, interdum vitae ante.
Maecenas sollicitudin neque quis odio ornare egestas. Praesent sed erat ipsum, quis elementum massa. Etiam pulvinar bibendum enim consequat ullamcorper. Duis tempor interdum porttitor. Cras laoreet suscipit lobortis. Sed a mauris in sapien placerat vestibulum. Nunc gravida nibh vel lacus elementum et placerat erat commodo. Integer sapien odio, blandit non dapibus non, cursus id massa. Donec non metus odio, in suscipit urna. Praesent et diam erat, nec tempus mauris. Cras luctus nunc in augue lacinia commodo tempor ipsum vulputate. Aliquam ac lacus et purus imperdiet euismod.
Praesent libero nibh, pellentesque non luctus at, suscipit ut ipsum. Duis at erat ipsum, fringilla pharetra nibh. Proin vehicula congue odio, eget auctor lacus bibendum quis. Duis ultricies bibendum est, quis rhoncus lectus porta vel. Morbi at eros erat, et varius nisl. Morbi mattis eros sed tellus suscipit a condimentum nibh lobortis. Mauris mollis dictum nunc non facilisis. Suspendisse potenti. Cras diam dolor, blandit nec ullamcorper et, cursus vitae augue. Donec eros eros, vestibulum non elementum in, tempus non nunc. Pellentesque sodales ultrices sapien sed ullamcorper. Mauris viverra ante a tortor sollicitudin sit amet scelerisque lorem aliquet.

Automatic captions in YouTube

Posted by vu on Sunday, 20 February 2011 , under General tricks | comments (0)

Posted by Ken Harrenstien, Software Engineer

Since we first announced captions in Google Video and YouTube, we've introduced multiple caption tracks, improved search functionality and even automatic translation. Each of these features has had great personal significance to me, not only because I helped to design them, but also because I'm deaf. Today, I'm in Washington, D.C. to announce what I consider the most important and exciting milestone yet: machine-generated automatic captions.

Since the original launch of captions in our products, we’ve been happy to see growth in the number of captioned videos on our services, which now number in the hundreds of thousands. This suggests that more and more people are becoming aware of how useful captions can be. As we’ve explained in the past, captions not only help the deaf and hearing impaired, but with machine translation, they also enable people around the world to access video content in any of 51 languages. Captions can also improve search and even enable users to jump to the exact parts of the videos they're looking for.

However, like everything YouTube does, captions face a tremendous challenge of scale. Every minute, 20 hours of video are uploaded. How can we expect every video owner to spend the time and effort necessary to add captions to their videos? Even with all of the captioning support already available on YouTube, the majority of user-generated video content online is still inaccessible to people like me.

To help address this challenge, we've combined Google's automatic speech recognition (ASR) technology with the YouTube caption system to offer automatic captions, or auto-caps for short. Auto-caps use the same voice recognition algorithms in Google Voice to automatically generate captions for video. The captions will not always be perfect (check out the video below for an amusing example), but even when they're off, they can still be helpful—and the technology will continue to improve with time.

In addition to automatic captions, we’re also launching automatic caption timing, or auto-timing, to make it significantly easier to create captions manually. With auto-timing, you no longer need to have special expertise to create your own captions in YouTube. All you need to do is create a simple text file with all the words in the video and we’ll use Google’s ASR technology to figure out when the words are spoken and create captions for your video. This should significantly lower the barriers for video owners who want to add captions, but who don’t have the time or resources to create professional caption tracks.

To learn more about how to use auto-caps and auto-timing, check out this short video and our help center article:

You should see both features available in English by the end of the week. For our initial launch, auto-caps are only visible on a handful of partner channels (list below*). Because auto-caps are not perfect, we want to make sure we get feedback from both viewers and video owners before we roll them out more broadly. Auto-timing, on the other hand, is rolling out globally for all English-language videos on YouTube. We hope to expand these features for other channels and languages in the future. Please send us your feedback to help make that happen.

Today I'm more hopeful than ever that we'll achieve our long-term goal of making videos universally accessible. Even with its flaws, I see the addition of automatic captioning as a huge step forward.

* Partners for the initial launch of auto-caps: UC Berkeley, Stanford, MIT, Yale, UCLA, Duke, UCTV, Columbia, PBS, National Geographic, Demand Media, UNSW and most Google & YouTube channels.

Update on 11/24: We've posted a full length video of our announcement event in Washington D.C. on YouTube. We've included English captions using our new auto-timing feature.

Hướng dẫn tạo 1 PAGE cho blogspot

Posted by vu on Wednesday, 2 February 2011 , under General tricks | comments (0)

Translate

Như các bạn đã biết, muốn tạo thêm 1 page cho blogspot ta chỉ có 1 cách duy nhất là tạo thêm 1 bài viết mới. Và lợi dụng điều này, và áp dụng các thủ thuật cũ đã đăng, hôm nay mình sẽ hướng dẫn 1 cách nhỏ để tạo thêm 1 page cho blogspot của bạn. Với thủ thuật này blog bạn sẽ ngày càng giống 1 weblog hơn.
Các bạn có thể xem thử demo minh họa ở đây : http://www.fandung.com/2009/02/contact-me.html

Mô tả chung thủ thuật : thủ thuật này lợi dụng việc tạo thêm 1 bài viết mới để lấy link liên kết cho trang page mà bạn sẽ tạo. Tức là khi xuất bản bài viết mới, ta không cần quan tâm tới nội dung của bài viết này, có thể bạn không cần soạn nội dung của nó cũng đc, ko sao cả. Khi đã có được link, bây giờ ta sẽ tạo 1 widget HTML/Javascript, và soạn nội dung của page vào đó. Tiếp đến ta dùng thủ thuật ẩn bài viết khi truy cập tới link liên kết này, và thêm 1 thủ thuật nữa là chỉ cho phép widget vừa tạo hiển thị khi truy cập tới link liên kết trên.

Như vậy ở thủ thuật này sẽ có 3 bước :
- Bước 1: tạo 1 trang bài viết để lấy link cho page.
- Bước 2: tạo 1 widget HTML/Javascript, và dán nội dung của trang page sẽ được tạo vào.
- Bước 3: tùy chỉnh việc hiển thị bài viết và widget HTML/Javascript.

☼ Bây giờ ta sẽ đi vào từng bước:
I. Bước 1 : tạo 1 trang bài viết để lấy link cho page.
- Vào phần soạn thảo bài viết mới và tạo 1 trang bài viết mới. với nội dung của bài viết để trống, nhãn cũng được để trống, chỉ duy nhất có phần tiêu đề.
- Mẹo : để link của trang page được đẹp, ta nên đặt tên của tiêu đề bài viết này là không dấu, ví dụ như hình minh họa :

- Ví dụ như với tiêu đề của mình minh họa trên ta sẽ có link liên kết của trang page như thế này :
http://www.fandung.com/2009/02/contact-me.html

- Và thêm 1 mẹo thứ 2 ở bước 1 này là : nên chỉnh sửa lại ngày đăng bài viết, để cho bài viết được nằm ở cuối của danh sách các bài đăng. Ví dụ như blog bạn tạo ngày 20/4/2008 thì ta chỉnh lại ngày đăng cho bài viết nằm trong ngày này chẳng hạn. Với mẹo này sẽ làm việc hiển thị bài viết ở trang chủ trở nên khó hơn.

II. Bước 2 : Tạo 1 widget HTML/Javascript và dán nội dung của trang mà bạn muốn tạo.

- Với việc này, bạn sẽ phải soạn thảo code HTML cho trang page ngay trên widget. Code để tạo nên trang này nhất thiết phải là code HTML, ngoài ra có thể kèm theo các code CSS, code Javascript để trang được tạo sẽ đẹp hơn. Việc này tương tự như các thủ thuật khác.

- Lưu ý : widget này phải nằm ở vị trí bên trên (hoặc dưới) phần "Bài đăng trên blog", tức là nó nằm ở cột Main. Như hình minh họa bên dưới:

- Như vậy đã xong bước 2, tiếp tục sang bước 3.

III. Bước 3 : ẩn bài viết và tùy chỉnh việc hiển thị của widget chứa nội dung của trang page.
- Ở bước 3 này ta sẽ có 2 bước nhỏ phải làm : ẩn bài viết khi truy cập tới link liên kết của trang page, và tùy chỉnh để widget chỉ hiển thị khi bạn truy cập tới link liên kết của trang page.

+ b1 : ẩn bài viết khi truy cập tới link liên kết của trang page.

Với bước này, ta sẽ ẩn hoàn toàn phần bài viết và chỉ cho phép hiển thị widget (và các phần còn lại của blog). Khi đó widget hiển thị chính là trang page mà bạn muốn tạo.
Để thực hiện điều này rất đơn giản, bạn chỉ cần thực hiện các bước như bên dưới :
1. Vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước dòng code </head>

- Với link màu xanh sẽ là link liên kết của bài viết mà bạn đã tạo để gán cho trang page.
4. Save template.

+ b2: chỉ cho phép widget chứa nội dung hiển thị khi bạn truy cập tới đúng link liên kết của trang page (ví dụ như trong code mẫu sẽ là link : http://www.fandung.com/2009/02/contact-me.html )

Với bước này, trước tiên bạn phải xác định ID của widget chứa nội dung của trang page. Để biết được ID, thực hiện các bước sau :
1. vào phần tử trang
2. Nhấp chọn chỉnh sửa ở widget chứa nội dung của trang page.
3. Và ta sẽ thấy được ID của nó như bên dưới :

- Trong hình minh họa ta thấy ID của nó là HTML8
- Bây giờ ta sang bước chính là chỉ cho widget này hiển thị khi ta truy cập tới link của trang page. Để làm điều này, các bạn thực hiện các bước như bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích.
4. Tìm đoạn code của widget chứa nội dung của trang page (nhấn Ctrl + F và điền ID của widget vào là có thể tìm thấy Code của nó)

Và code của nó tương tự như thế này :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Thêm đoạn code được đánh dấu highlight như bên dưới :

<b:widget id='HTML8' locked='false' title='Form contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "http://www.fandung.com/2009/02/contact-me.html"'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

- Thay link (code màu đỏ) lại thành link liên kết tương ứng với trang page của bạn.

6. Save template.

Chúc các bạn thành công.(st fandung'blog)

Logo

Add Music to Blogspot blog

Add Digg button to Blogger or Blogspot

Background Image for Blogger Template(st)

Add Blogger search box

Add Scrollbars to Blog Posts

Change Widget Background Color

Resize images in the posts automatically with CSS code

Một kiểu phân trang đẹp cho blogspot

Một kiểu phân trang đẹp cho blogspot

Công cụ hỗ trợ giải mã HTML

Template by BloggerTricks.com

Automatic captions in YouTube

Hướng dẫn tạo 1 PAGE cho blogspot

Labels

Recent Update Tricks

Labels

Recent Update Tricks

Be my Friend ?