Kejutan Internet: Blogger tricks

Tampilkan postingan dengan label Blogger tricks. Tampilkan semua postingan

How to change Height and Width of Blogger Comment form

After my previous post about hiding blogger contact form, today I thought to write this tutorial for answering
a question asked by an Anonymous visitor .So this post would be helpful for blogger users who want to change the width of the blogger comment form easily. The area that is used for typing the words is known as the Comment form. When anyone wants to post a long comment, they could be feeling that it’s difficult to type long sentences. So changing the default appearances and performances of blogger template is very important to increase the user friendliness.

By default blogger comment form is very narrow. It means comment box appears as the default value in spite of fluid or fixed template. By changing the width of the blogger comment box to fix it to blog-post layout, people can share long words without any fuss.Because they do not have to change the width manually.This makes your blog look better and fit well to blog post.

Now let’s see how to change the width of comment form easily.Follow below instructions respectively.

1: Sign in to your Blogger account.
2: Now go to Dashboard → Template and backup your current template first.
3: After downloading the template,click on the Edit HTML button and find below HTML code in your template.

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Note : This HTML code may be encountered more than once time in your template, So make the changes to all of them.

4: Now we have to change above highlighted codes. Let's see what we can do above codes.

The width of comment form is defined by the percentage of the whole width of blog content.You might need to know how to check the width of blog content and change it.

If you want to wide the comment form by 120%,you would change the value to width='120%'.

Also you can specify a constant value/width to the comment form using length measures such as em,px,pt,in,cm,mm etc. If my blog post layout width is 600px and i want to fit the comment form to body layout and increase the height,i should change the comment editor width like below.

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='500px' id='comment-editor' name='comment-editor' src='' width='600px'/>

5: After setting up width and height of comment editor,Save your template to affect the changes.

Check : Add Blogger Contact Form to Specific Pages

This tutorial explained you how to change the width and height of blogger comment form easily. I would like to know your questions,suggestions and views. So share your thoughts via commenting below.Happy blogging day pals :)

Display Date & Time in Title Bar

Blogger tricks Browsers HTML

The title tag plays an important preface especially in SEO. Generally title appears in the web page and in a
browser tab. We can design the title by using a styling language like CSS (Cascading-Style-Sheet).Most pro bloggers and webmasters give the prominence to the Title of the web page. That should be, because people see the first title in the SERPs ( Search Engine Result Pages) and on the homepage. Many points to talk about the title tag are out there. I will write some posts about the Title in my future posts.

Today I’m going to show you how to display date and time in the title. The current date and time in the user’s computer will be identified by the Script. Then it will be appearing on the tab bar in the browser. So check out the demo first.

Demo

Display Date, Time in title tab

Place below code between <head> and </head> HTML tags in your website.

<script src='https://pro-blog-tricks.googlecode.com/svn/trunk/date-title.js' type='text/javascript'></script>

Display Date & Time in tab bar on Blogger

1: Sign in to your Blogger account.
2: Go to Template >> Edit HTML and find the </head> HTML code in your template.
3: Now paste below code just above of </head> HTML tag.

<b:if cond='data:blog.url == "URL of the page"'>
<script src='https://pro-blog-tricks.googlecode.com/svn/trunk/date-title.js' type='text/javascript'></script>
</b:if>

Replace URL of the page with the post/static page URL in which you want to display the date and time.
If you want to implement above script in more than one web page,Just repeat the conditional tag like below example.

<b:if cond='data:blog.url == "URL of the page-1"'>
<b:if cond='data:blog.url == "URL of the page-2"'>
<b:if cond='data:blog.url == "URL of the page-3"'>
<script src='https://pro-blog-tricks.googlecode.com/svn/trunk/date-title.js' type='text/javascript'></script>
</b:if>
</b:if>
</b:if>

Related Post :- How to Show or Hide widgets in Any Pages In Blogger

4: Save your Template.

Leave your questions,views and comments in below.

Make Blog Title Scrolling in Blogger

Blogger tricks

The blog title is one of the crucial points in any website or blog even in SEO or Design. You know generally blog title is non-scrolling. When someone has opened your blog and not been visiting your stuff (This might be he/she would open another tab), They could be close the tab accidently. So you can alert them by making the blog title or the post title scrolling. It would be a great indication for the user to be active in your blog like in Facebook. If you’re a fan of Facebook, you would know that whenever someone comment, it is notified in the title bar. It’s very helpful in many occasions to control the activities that we do in Internet. So by making blog title scrolling, you can increase the conversation rate, page views and decrease the bounce rate. You know that these objects are most essential measures for increasing the Alexa rank.

In a previous post I explained you how to make your blog title scrolling. So this is another method to do it. Both are similar, but codes are different. So you may implement the script on your to scroll the blog title and add custom massage. The message could be a word phrase or Entities. Design your own stylish word to be added to the blog title and then follow below steps.

Demo

1: Sign in to your blogger account.
2: Go to Dashboard >> Template >> Edit HTML.
3: Now search for </head> HTML tag in your template and paste below code just before it.

<script type='text/javascript'>
//<![CDATA[
msg = "NAME OF BLOG - YOUR MESSAGE HERE";
msg = " ... " + msg;pos = 0;
function Scroll_MSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("Scroll_MSG()",300);
}
Scroll_MSG();
//]]>
</script>

Replace NAME OF BLOG - YOUR MESSAGE HERE with your blog's title and your message.You can make a use of HTML Character Entities to display special characters such as ©,♠,♥,♣,♦
Set the animating speed by changing the 300.

4: Save your Template.

Similar Posts:-

Leave your queries,Requests and Views below.Happy blogging day!

How to find Email address of your Blogger blogs

Blogger tricks

These days many people are using Blogger platform to create a blog. Blogger is own to Google Inc. So you are given away many services when you create a new Google account ( Gmail, Blogger, Drive, Code, Feedburner,Wallet, YouTube etc.). An individual person might have more than one Google account. For instance, if you use Google apps so you have another Google account for your business. I personally know some people have more than two-three Google accounts. They use each account for different purposes. If you’re one like them, you might forget the passwords of some accounts. Also if you’re a blogger you might have many blogs in each account. So in some cases, you would be forgotten which blogger account has the blog established or what blog has been created in which account. So here we have found the best and 100% working method to find the email address of your blogger blog.

1: Go to this URL:

http://www.blogger.com/forgot.g

2: Now you will see a web page like below. On this page, you can find the forgotten Google email address of the blog or existing blogs in each account.

3: Now type your blog’s primary URL. Ex: www.problogtricks.com = www.bestlodge.blogspot.com Then click on “LOOKUP” button.

4: In next page opening in same window, you will be notified that an email was sent to your gmail.com account. Now log in to each Google account you have and check the Inbox. You would be received an email form blogger slightly similar to below one.

Now you can log in to your Google account and find the blog which you want to update.

By using second option you can find the forgotten URL of a blog. Just type your Email address and click on "LOOKUP" button.

Blogger is one of most popular blogging platforms. Your blog is secured until your Google account is active. Anyone can not hack or delete your blog. So you can find your blog's email address by using this method.

What methods do you use for finding the forgotten email address of your blogger account ? If you use different method,please share it with us.Happy blogging pals :)

Blogger Keyboard Shortcuts for Post Editor

Blogger tricks

Keyboard shortcuts are very useful,when it comes to present scope.We all are looking for doing tasks as quickly as possible.That's why people are searching computer keyboard shortcuts.In my previous posts, I rendered you several programs and operating systems which have specific keyboard shortcuts for making long-tail tasks easily using couple of buttons. Each program have various shortcuts.So identifying what are they and using them typically is worthwhile.

When it comes to online,we can find few keyboard shortcuts are available in special websites. Blogger is one of most popular blogging platforms. So we are at PBT, found some profitable keyboard shortcuts for Window and Mac users. Using Blogger post editor keyboard shortcuts regularly would make you a more engaged blogger.

Read also : How to use Keyboard in Gmail & adapt to shortcuts

Complete List of Blogger Post editor keyboard shortcuts

These shortcuts for Windows is working with Google Chrome, Internet Explorer 5.5+ and Mozilla family (1.6+ and Firefox 0.9+).

Shortcut	Operation
Ctrl + C	Copy Selected Text
Ctrl + V	Paste Copied Text
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + X	Cut
Ctrl + A	Highlight the All text
Ctrl + D	AutoSave as Draft
Ctrl + S	Autosave and keep editing
Ctrl + F	Find a Word or Phrase
Ctrl + B	Bold the Selected text
Ctrl + U	Underline the Selected text
Ctrl + I	Change to Italic
Ctrl + G	Transliterate using Indian font
Ctrl + P	Publish the Post
Ctrl + L	Format selected text as blockquote (only works in HTML mode)
Ctrl + Shift + A	Insert Hyperlink
Ctrl + Shift + P	Preview the Post

If you know any keyboard shortcut which is using in Blogger post editor and I have not shared yet,kindly share it with us from commenting section. I expect that this information will may help you to save your valuable time and work in blogger post editor comfortably.

Have you used Keyboard shortcuts when you editing Blog posts before ?

If yes,What are the short keys which you used regularly ?

How to Change Language on Blogger

Blogger tricks

After long term today I am posting my first post under new address. Before starting a blog, we have to decide what the niche is and basically what is the language using for blogging. Many bloggers are blogging in English medium. Their target visitors are often Western people and some people who understand English. Although you know that world’s fifth most popular website as Alexa Baidu.com and qq.com( Alexa Rank #8) are not established in pure English. Huge people from China, Hong Kong, South Korea use Baidu Chinese search engine.

Also Vkontakte or well known Vk social network ( Alexa rank: #19) is based on Russian language. Almost more than half of daily visitors are from Russia. Now they use more than 70 languages such as English, Spanish etc. So Local Websites can attract further visitors easily.

You might see that some bloggers use their mother languages as the language of the whole blog. They can boost target local traffic easily and especially making posts. As a South Asian blogger, I have to know English first for Blogging. It’s the dominant aspect that I must fulfill. But if you’re one of people who think to engage in blogging using your desired language(s) or want to attract local visitors, This tutorial will help you for making your blog posts using available custom languages (Blogger Change Language).

Recommend : How to Add Bing Translate Gadget

Blogger allows you for making blog posts using your language. The easiest method to do is use Indic Transliteration feature in blogger.

What is the transliteration?

This automatic transliteration option is used for converting Roman characters to the special available characters. Any character in below languages can be used in your blog post. But note that the meaning of each word is not translated. i.e.: “Book” >> “புக் ”

Amharic
Arabic
Bengali
Greek
Persian
Gujarati
Kannada
Hindi
Malayalam
Marathi
Nepali
Punjabi
Russian
Sanskrit
Serbian
Tamil
Telugu
Tigrinya
Urdu

How to Enable Indic transliteration feature in Blogger ?

You can enable Indic transliteration for translating English words to other languages in blog post editor. Follow below steps to do this matter.

1: Sign in to your Blogger account >> Choose your blog >> Settings >> Language and Formatting.
2: Now select Enable for transliteration option and select your preferred language.

3: Click on “Save Settings” button.

Use Indic transliteration in Blogger post editor.

Now you’re almost done. Go to post editor and you will see a new button. When this button is on, it affect to the post title, post Label and also post body.

Select all your text and click on the button. Then all text you selected will be translated at once.

Note: Text in Label field and title will not be translated.

Nevertheless you can type your title in the body field and translate them. Then copy and paste into title area.

When Indic transliteration is on and you’re typing any word, the similar words in your preferred language appear in a box with alternative suggestions. You can select one correct and relevant character/word. Then Once you type a space or other punctuation mark , that letter will be converted to the new characters like below.

That's all.Now you can make a blog for your local readers.If you're going to make a blog using Adsense support language,so not to worry about your adsense earnings. You need to do is blogging,blogging and blogging!

Change Blog title to 3D styled Header title

Blogger tricks Edit Template HTML and CSS

Friends, Today I am going to render another great tutorial which I think you will be happy with that. You know that since creating a blogger blog, first we have to give a good significant name or title for our blog. Definitely you are a pro blogger to choose relevant keyword rich title for higher rankings on search result pages like in Google. After creating your blog and adapting an image for substituting the header title, you might visit your blog to see how your blog will look like. But as a blogger user, we haven’t enough plugin for each aspect such as reducing loading time, adding Adsense ads in anywhere blog posts like in WordPress. Thousands of WordPress plugins are out there, But Blogger ?

Hence we should consider about some basic things like adding more JavaScript codes into the template, adding unusual images to sidebar and home page … etc. Today this tutorial will show you how to make a 3D blogger title instead of adding an image.

...................................................................................................................................

Styled 3D Header Title for Blogger

....................................................................................................................................

This is the default title style which is on my label editing blog.You can see it looks like unprofessional and we are excited to add a background image.But guys as I told in above, we should keep in mind everything..yes everything that we do which affect to our blog either inside or outside from the blog.

Now you will ask me can we make a beautiful header title for my blog without images. Absolutely you can. These days are technically amazing as well as web designing languages. In the past we used Photoshop for creating gradients, but today we can create them using CSS3 easily. Look at below image in which header title is styled Can you identify that the title is not an image? It is just some characters styled by using CSS.

If you look carefully at this picture you will see its a 3D text. Here is the view of these characters without styling.I have selected them,see how they appear..

Now what do you think ? Would you like to make your blog’s title slightly similar to this title? So then follow below steps simply in order to beautify your blogger header without damaging to loading time of your blog.

Steps 1: Sign in to your Blogger account.
Steps 2: Now go to Template and then back-up your template. It is the most primary work you should do before editing HTML codes inside your template. In case you got anything wrong, downloaded template is the only one assistance for recovering bugs. You cannot undo steps which you did.
Steps 3: Then click on “Edit HTML” button and after hit on “Proceed” button (If necessary).
Steps 4: Find below HTML tag in your template.

]]></b:skin>

Steps 5: After you found above code, paste below code right before it.

.Header h1,.Header h1 a {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
color:#33CB72;
font-weight:bold;
font-size:63px;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);
}

#33CB72 :- Specify the font color of title.You can change it to your desired color.
63px : - You know what is it. For newbies here, it assigns the size of title.(Font-size)

Steps 6: Now view your blog clicking on "Preview template" button.

If you don’t see the code working properly on your blog, don’t worry. Click on “Edit template” button and find below codes on your template.

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

This code too…

.Header h1 a {
color: $(header.text.color);
}

Steps 7: Remove above both pieces of codes in your template.
Steps 8: Last Click on 'Save Template' button.

Now view your blog and you should see your blog's title in the header section is appearing beautifully.Wow...

.......................................................................................................................................
Ask me. Need Help ?
.......................................................................................................................................

Friends I covered this tutorial as much easier for you. I don’t think you have got anything wrong on your template. If you have, let me know what are they.I am here to help you always.

I would like to know what’re the reasons to use web designing languages as a blogger ?Do you use them in your Blog ?If you use,for what you use them ?

Add PrintFriendly Print & PDF Button

Blogger tricks Edit Template HTML and CSS Posts

There are many ways to promote our blogs among people.But some bloggers just share links on social medias and their local friends. Bloggers should be creative to widen his/her site's popularity. These days electronic devices have become one part of every human.Printers are one of them that are used regularly and mostly to get print-outs. There are different types of printers such as Dot-matrix printers,ink-jet printers and laser printers.Most of people get information,videos,audios and images through Internet.You can display a "Print This Page" option to your site.Then users can print any web page using Print option in their computers.But If you want to display a special print option with some features,You have to help from a third-party site.Some websites provide printing button with awesome features. Printfriendly is one website which provides Print buttons and PDF file creating buttons for your site and web browsers. PrintFriendly buttons give some features than default print option.Three of them are listed in below.

Print Preview: Optimizes and displays content for print.
Edit Before Printing: Remove images, text, and print only what you want.
Print or Save as PDF: Print now, or save for later as a PDF.

How to add PrintFriendly Button to Blogger

You can add PrintFriendly print and PDF button to your blogger blog easily.By adding this option on your blog,readers can print your site's pages or create PDF files.

1: Go to PrintFriendly.com/button webpage.
2: Select on Blogger/BlogSpot option in first step.
3: Now choose a button style which you want to display on your site.Then customize your PrintFriendly button's performances from "Features" section.