Monday, September 07, 2015

How to know facebook tag code and write magic status

Now days facebook magic status has becoming very popular. Whenever a website become very popular and want to secure more then, that particular site using own code and no one can understand easily. Mostly admin of the facebook fan page use this mathod to tag other page together with their status and gets more audience or fan. I love to write status in my facebook wall and page in the same way. Many of my facebook friend and blog reader asked me several time how to do such a mysterious job. Today I am going to tell you how to make your this types of unique status. Actually this magic code is a Facebook script which is only read by Facebook. To create this script you must know your facebook tag code.

How to know facebook tag code :

You know that, any facebook profile and page has their own individual tag code. There are 2 ways to find a tag code of a page :

=> This way only works if you're trying to find the tag code of your own page.

• Click on Edit page.
• Next, click Update Info.
• Look at the address bar. It will have your page link in it. If you look closely, it will say: 'id=' and then a number after this. For example, Our fan page's link is : https://www.facebook.com/pages/edit/?id=1389241341336233&sk=basic

• Here, the number after 'id=' 1389241341336233 is your tag code !

=> This way is used when you want to find the tag code of another page.

• In the address bar replace graph in the place of www.

• This page would look like :
graph.facebook.com/nepalionlinejuction

• Press enter. A load of writing will come up.

• Search through the writing until you find : 'id='YourTagNumber

• Now after 'id= 1389241341336233 is your tag code.

How to create magic status :

Just substitute that number into this form: @[YourTagNumber:0]

And there, that's your tag code sorted. However, if you need to give something else your code; put it in this form : @+[YourTagNumber:0]

For example:-
• copy this code given below :

I liked this page : @+[427036347319427:0]

• Paste in your facebook status.

• Now delete +

• press enter or publish post.

• See magic.

If you write status on your facebook profile/page timeline as :

I liked this page - @[1389241341336233:] Your post will be actomatically converted as : I liked this page - Nepali Online Juction Dot TK

Sunday, September 06, 2015

Very useful HTML Code Knowledge For Web Beginners

Text Formatting

Headings :

Defines an important heading in your text. You can use <h1> to <h6> with the highest number resulting in the smallest font size.

code : <h1>Your important heading property</h1>

Aligned Heading :

Aligns your heading using a little bit of CSS. You can use “left”, “right”, or “justify” in place of “center” below:

code : <h1 style="text-align:center;">Your aligned heading property</h1>

Paragraphs :

You can keep your text property as paragraph according to your need and you can also separate them using <p> and </p> tag.

code : <p> Write Your paragraph text property here that you desired to keep in one paragraph </p>

Aligned Paragraph :

You can use “left”, “right”, or “justify” in place of “center” below. It will make your content nice looks.

code : <p style="text-align:center">Write here your paragraph text property to make aligned at appropriate place or replace as you wish </p>

Line Breaks :

You can use line breaks instead of paragraphs. However, there is vast different between paragraph and line brake. Paragraph can be use when you finished a theme carried text property but when you want to create a new line without starting a new paragraph at the end of your sentence, it will be very useful for you.

code : <br> Your Paragraph property<br/>

Bold Text :

Makes the weight of your font bold to highlight something important thing to say.

code : <b>Your bold text</b>

Strong Text :

Same look as bold text, but is semantic. Instead of it being simply a style, strong text shows : how the text should be read or understood.

code : <strong>Your strong text</strong>

Italic :

Text makes your text italicized.

code : <i>Your italic text</i>

Emphasized Text :

Same look as Italic text in HTML but is semantic. Specifies that the text should be emphasized when read.

code : <em>Your emphasized text</em>

Underlined Text :

Underlines your text to attract about something.

code : <u>Your underlined text</u>

Strike-through :

Places a line through your text to strike it out.

code : <s>Your text here</s>

Font Family

You can change your defult font to any web safe font or Google web font.

code : <span style="font-family: Arial, Helvetica, sans-serif;">Your new font</span>

Font Size :

You can changes the size of the font using a little CSS. You can use px, em, or a percentage as your wish.

code : <span style="font-size:16px;">Write your text properties to fix the font size.</span>

Font Color :

Changes the color of your font to any colour you desired.

code : <span style="font-color:#030303;">Your new font color</span>

Highlighted Text :

Make highlights the text with a background color using a little CSS:

code : <span style="background-color:#C2F2CA">Your highlighted text</span>

• Block Quotes :
Useful when quoting someone or when you need a particular part of your text to stand out.

code : <blockquote>"Your quoted text here"</blockquote>

Links

Basic Text Link :

Use to add a link to specific text or a word. Replace the http://www.yourlink.com with your own link:

code : <a href="http://www.yourlink.com">Your linked text</a>

Open Link in New Tab :

Used to open the link in a new window or tab instead of in the same web page:

code : <a href="http://www.yourlink.com" target="_blank">Your linked text</a>

Link to an Email Address :

Opens the user’s email program to quickly send an email to the address supplied. Replace the email address with your own:

code : <a href="mailto:you@youremailaddress.com">Your email address or link</a>

Link to an Email Address with subject line :

Useful if you want the email to have a specific subject when a user clicks your link. Use %20 in place of any spaces and replace the text with your own subject line:

code : <a href="mailto:you@youremailaddress.com?subject=Your%20Email%20Subject">Your email address or link</a>

Anchored (“Jump”) Link :

For jumping to a particular part of a page with the click of a link. This happens in two parts. First, include the code below wherever you want the user to end up when they click the link, for example, at the top of the post. Name it something unique:

code : <a name="backtotop"></a>

Then, add the anchor to your link that the user will click on to jump to that section:

code : <a href="#backtotop">Back to top</a>

Images

Basic Image :

Include an image in your post. Replace the image URL with your own URL. You will need to have this image uploaded somewhere online. Describing your image helps with SEO:

code : <img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/>

Image Link :

For adding a link to a certain image. Replace the image URL and link with your own:

<a href="http://www.yoursite.com"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

or, You have another option :

your image link opens in new window :
code : <a href="http://www.yourlink.com" target="_blank"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>

• Image width and height :

You can change the width and height of the image if you need to, however it’s usually best to resize your image prior to adding it to your site. You can specify the width and height below for browser compatibility. Change the width and height values to those of your actual image:

code : <img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" width="450" height="600"/>

Align Image to desired palace into paragraph :

If you want to place your image to the left or right of a paragraph, use the following code, replacing “left” with “right” if you like:

code : <img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image" align="left"/>

Backgrounds :

The following should be completed in your site’s main CSS file, or a dedicated CSS section of your website/blog editor. If you don’t have a CSS section or file, you can place these codes in between <style> and </style> tags in the <head> section of your website’s HTML, although it is recommended to have an external CSS file.

Page background color :

Change the overall background of your website or blog with this code. Replace the color hex code with your own.

code : body {background-color:#c3c3c3;}

Repeating Background Image :

For smaller backgrounds that you want tiled, or larger backgrounds that were made to be repeating, use this code and replace the image URL with your own. You will need to upload the image online first:

code : body {background-image:url(http://www.yourwebsite.com/background-image.jpg);background-repeat: repeat ;}

* Change the above red “repeat” if you want the image to only repeat vertically: repeat-y

* Change the above red “repeat” if you want the image to only repeat horizontally: repeat-x

Non-repeating background image :

For background images that you want displayed only once (not repeated or tiled). Replace the image URL with your own.

code : body {background-image:url(http://www.yourwebsite.com/background-image.jpg);
background-repeat:no-repeat;}

Top Centered Non-Repeating Background Image :

Center your background image on the page, at the top. Replace the image URL with your own.

code : body {
background-image:url (http://www.yoursite.com/background-image.jpg);
background-repeat:no-repeat;
background-position: top center;
}

Top Centered Vertical Repeating Background Image :

Center your background image on the page, at the top. It will repeat vertically down the page. Replace the image URL with your own.

code : body {
background-image:url(http://www.yourwebsite.com/background-image.jpg);
background-repeat:repeat-y;
background-position: top center;
}

Lists Ordered List :

This will create a numbered list. Replace list elements with your own:

code : <ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Unordered List With Bullets :

This will create a list with bullets instead of numbers. Replace list elements with your own:

code : <ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Unordered List With Different Bullet Types :

You can change the bullet type of any unordered list to circle, square, or disc (default):

code : <ul>
<li style="list-style-type:square">List item 1</li>
</ul>

Unordered List with Custom Image Bullet :

If you want to use your own bullet image instead of the default ones, you can do that as well with a little CSS. Perhaps a star or a heart or check mark? You will need to create a small enough image and upload it somewhere online:

code : <ul style="list-style-image:url ('http://yourimageurl.com/yourbullet.jpg')">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Special HTML Characters

Copyright symbol]

&copy;

Less Than Symbol [<]

&lt;

Greater Than Symbol [>]

&gt;

Ampersand [&]

&amp;

Trademark Symbol [™]

&trade;

Non-breaking Space

&nbsp;

Quotation Mark [”...."]

&quot;

Registered Trademark [®]

&reg;

Heart [♥]

&hearts;

Euro sign [€]

&euro;

Left Arrow [←]

&larr;

Right Arrow [→]

&rarr;

Up Arrow [↑]

&uarr;

Down Arrow [↓]

&darr;

Spade [♠]

&spades;

Club [♣]

&clubs;

Diamond [♦]

&diams;

How to make attractive download botton with own image

Many new blogger asked me various question related with this post :

a) How to add link into blogger image ?
b) How to link url into blogger photo ?
c) How to make my download botton with my own image ?
d) How to know html code of my image that was published as draft post into my blogger.
e) How to put download link into image ?

Questions are different but solution are same. Now read this trick :

Blogger is free and user friendly bloging service. Most of the blog user uses it's service because it links easily to all other Google tools such as AdSense and Analytics, and generally makes blog a bit easy and SEO friendly. Some people host their blog domain to another hosting service and moves into blogger DSN and some of them uses it's sub-domain (.blogspot.com) without hosting. But one of the negetive side of blogger is that it do not provide any web space for store file except image and video. We have to upload file somewhere into the internet and we can use it as direct link together with post.

If you are using music blog and want to let download or sell music from your blog, or if you want to sell ebooks from your blog, you must be careful about how to make download botton most attractive. If you use download link together with common phrase such as : Download, it will makes your blog dirty looks and irates your visitor, too. As a result your business will be lost. To avoid this problem you can use your own attractive image as download botton. First you have to link your link into image with the help of your image HTML/JavaSprit code :

How to make your own attractive image as download botton ?

Upload your Download botton image into blogger post. After successfuly uploading image see html code of your image. I strongly recommend you to save your image as draft post. It will be very good for you if your code unfortunately happen to delete or wrong use.

• Go to Blogger Home >> Log in your Google account >> Post >> Create new post >> Image >> Save to draft.

• Edit your saved post >> Switch post editor to html and you will see image code as given below :

<div class="separator" style="clear: both; text-align: center;"> <a href="http://lh3.googleusercontent.com/-akcp3GltdUg/VbeVSLmabLI/AAAAAAAACSs/vlBOuStKaow/s1600/download%2525252Bmp3%2525252Bbutton.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="http://lh3.googleusercontent.com/-akcp3GltdUg/VbeVSLmabLI/AAAAAAAACSs/vlBOuStKaow/s640/download%2525252Bmp3%2525252Bbutton.gif"> </a> </div>

Each code of the imge is made up of two different URL : Image Source and Image Body. You can see the code of above image. It is made up of two different image url :

- First image source url : http://lh3.googleusercontent.com/-akcp3GltdUg/VbeVSLmabLI/AAAAAAAACSs/vlBOuStKaow/s1600/download%2525252Bmp3%2525252Bbutton.gif

- Second image body : http://lh3.googleusercontent.com/-akcp3GltdUg/VbeVSLmabLI/AAAAAAAACSs/vlBOuStKaow/s640/download%2525252Bmp3%2525252Bbutton.gif

Replace first URL with your direct download link URL. Now your Download botton is ready. You can publish your download URL linked download botton now.

Here is an example of mp3 download botton, that I am using .

"Click on given download botton and download Nepali Folk song : Banaima Phoola Basayo..."

How to fix Broken Links and Avoid 404 Errors for Better SEO Result

​​In our lives there has been numerous number of occasions when we’ve got entered a unsuitable deal with on our web browser or mistypes an U...