Kejutan Internet: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Display Date & Time in Title Bar

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.

How to Add Scoop.it bookmark button to website & Blogger

HTML Social Media

Social bookmarking is a very popular word phrase especially among webmasters. Nowadays webmasters and bloggers are waiting for next Page rank (PR) update. But it’s looking like Google wouldn't update the PR in this year. So this is a really good chance for web site owners who are penalized by Google because of using black-hat SEO methods to increase the Backlinks such as buying site links to recover. In the duty of building quality backlinks, we cannot neglect the social bookmarking sites. Backlink building strategy is essential for every webmaster who wants to rank in higher positions of SERPs (Search Engine Result Pages). In this term, Social bookmarking sites play an important role in building quality dozens of backlinks in one submit. For instance, If your blog post is informative and useful, it may receive hundred of DOFOLLOW backlinks from one submit. Other bloggers and webmasters will link your post. Others who don’t have a website or blog will bookmark and share it among people in Facebook, Google plus, Twitter, LinkedIn etc.

Scoop.it is a popular post sharing and bookmarking website. Registered users can scoop web pages, blog posts and share them on Facebook, Twitter and LinkedIn. Scoop.it is a 5 PR website. So your post would be ranked in Google in no time. Conversely Google bot will crawl your blog quickly and rank newly published posts in search pages. So accommodation your readers to scoop the blog posts by adding a scoop. it bookmark button is a really good method to boost targeted traffic and build backlinks directly to posts. So it will increase the balance of the outbound link juice and definitely rank in the top pages of SERPs quickly.

So lets see how to add official Scoop. it bookmark button for web pages easily.

Add Scoop.it button to website & Blogger

Paste one of below three types of button codes in the web page’s source code editor.

Button with no count

Scoop.it

<a href="http://www.scoop.it" class="scoopit-button" scit-position="none" scit-url="URL to be Scooped" >Scoop.it</a><script type="text/javascript" src="http://www.scoop.it/button/scit.js"></script>

Button with Vertical count

Scoop.it

<a href="http://www.scoop.it" class="scoopit-button" scit-position="vertical" scit-url="URL to be Scooped" >Scoop.it</a><script type="text/javascript" src="http://www.scoop.it/button/scit.js"></script>

Button with Horizontal count

Scoop.it

<a href="http://www.scoop.it" class="scoopit-button" scit-position="horizontal" scit-url="URL to be Scooped" >Scoop.it</a><script type="text/javascript" src="http://www.scoop.it/button/scit.js"></script>

You can manually add a specific post page URL to be scooped. Just replace the URL of post page to be scooped with URL to be Scooped.
If you don not want to add specific URL to be scooped and need to add the URL of current opened page, remove the highlighted code from above button codes.

Add Scoop.it bookmark button to Blogger

Just like adding YouTube recent uploads widget,you can add Scoop.it button on Post/Static pages or HTML/JavaScript page element.To add the button manually to post pages, switch to HTML mode and place the HTML and JavaScript code where button appears. To add Scoop.it button automatically to post pages,follow below steps respectively.

1: Sign in to your Blogger account.

2: Go to Template >> Back up your current template >> Click the Edit HTML button.

3: Now find below code in your blogger template.

<data:post.body/>

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

4: If you want to add the Scoop.it button below of post title, Place below HTML code just above of one of above codes.If you want to display the Scoop.it button bottom of post page, Place below piece of HTML code just below of one of above codes that you encounter.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
Code of Scoop.it button
</b:if>
</b:if>

Remove above red color HTML code,if you want to show Scoop.it button in Homepage of your blog. (Useful when you want to add Scoop.it button below of post title)
Remove above green color HTML code, If you want to show the Scoop.it button in static pages.
Replace Code of Scoop.it button with the code of Scoop.it bookmarking button.

5: Save your Template.

Read Also :-

Would you like this tutorial ? So give some seconds to share this tutorial among your friends on Facebook,Google plus,Twitter.

How to Add Facebook Recommend Button

HTML Social Media

Among many Facebook plugins, Facebook recommendation button and like button are the most popular plugins in these days. Actually like button and recommend buttons are very similar. In an average day, there are approximately 2.7 billion unique Likes on Facebook, meaning over 955 billion in an average year! The Facebook recommend button is a social networking feature, allowing users to express their appreciation of the content. When a user clicks the recommend button, the content appears in the News Feeds of that user's friends. So it has been proved that recommend button is a powerful tool to boost social media traffic. That’s why Marshable the inspiring blog, was becoming the most popular blog than Techcrunch.

Before this post, I have written some posts about Facebook plugins. Also you would like to know how to add other social plugins on your website. So here are some posts:

Add Facebook recommend button

Now lets see how to add Facebook recommend button. There are three types of recommend button. I will display those buttons.

Standard Recommend Button

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js&xfbml=1"></script><fb:like href="URL of Website" send="false" layout="standard" width="100" show_faces="false" action="recommend" font="verdana"></fb:like>

Vertical count Recommend Button

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js&xfbml=1"></script><fb:like href="URL of Website" send="false" layout="button_count" width="100" show_faces="false" action="recommend" font="verdana"></fb:like>

Box count Recommend Button

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js&xfbml=1"></script><fb:like href="URL of Website" send="false" layout="box_count" width="100" show_faces="false" action="recommend" font="verdana"></fb:like>

Customization

Change URL of Website with your website's URL or post address.
By changing the 100 value,you can adjust the button's width.
If you'd prefer to show the faces of people who recommended,replace true instead of false.
Now you can change the font-family of the "Recommend" text.If you're main traffic is from china,you can translate the "Recommend" text to Chinese language.Some font-families that can be used are below.Just replace one of them instead of verdana.

arial
lucida+grande
segoe+ui
tahoma
trebuchet+ms
cambria
helvetica
comic+sans+ms
arial+black
century+gothic

Add Facebook Recommend Button to Blogger

You can add Facebook like button on a post/static page or side bar in blogger. Follow below to add Facebook recommend button on sidebar of your blogger blog.

1: Sign in to your Blogger account.

2: Go to Dashboard >> Layout >> Add >> HTML/JavaScript.

3: Then paste one of above button type code and make above changes.

4: Save your HTML/JavaScript.

Add Facebook Recommend Button to WordPress

1: Log in to your WordPress Account/Dashboard.

2: Go to WP-Admin panel >> Appearance >> Widgets.

3: Drop a Text widget to the side bar and paste the code of desired Facebook recommend button.

4: Save your Text widget.

How to use Blink texts to attract visitors

HTML

This tutorial is little bit critical one.Because some browsers don't support for this HTML tag.Anyway if you're a Firefox user you can see the demos of this tutorial.Before four or five months ago i posted a nice tutorial,How to add marquee text for website and Blog.Most of major browsers support for marquee element. But blink tag is not supported by some browsers like Google chrome and Safari yet.By using blink tag,the texts will not be hidden in other browsers,if they don't support.They will be displayed without animation.Now lets look how we can use blink HTML element in web pages.

Sorry, If you're seeing the Examples of this Tutorial without blinking,You have to view this Page with Mozilla Firefox...

Basic code of blink tag is quite simple. Like <p> element,you just need to add your text between those codes.See code in below.

<blink>My Text Here </blink>

Example:- My Text Here

There is not special things to do for styling the blink text.Like you use <span> tag or CSS for other elements,you can use them for making attractive blinking texts.

<blink style="font-size:20px;color:red;">This is My red color Text !!!</blink>

Example:- This is My red colored Text !!!

Creating Blinking Hypertext

You might like this step of tutorial.Adding blinking links or anchor texts is as easy as adding inline CSS codes for special parts of web page.

<blink><a style="font-size:20px;color:#ad7456;" href="Link-to-Go" target="_blank">My Link Text Here</a> </blink>

Here i added <a> tag between <blink> and </blink> elements.Replace above colored text with yours.I added CSS code inside the <a> attribute.Thereby only text between <a> and </a> elements will be styled.

Blinking a button

Also we can use 'blink' element for animating the text on the buttons.Look at the code below.

<blink><button style="width:100px;height:100px;" >View</button> </blink>

Example:-

I think that this information is sufficient for understanding the <blink> element and why it is using and how to use it.You can use other elements,tags with "blink" tag and beautify your site.Unfortunately some visitors who use unsupported browsers for "blink" tag can't see the blinking stuff.

Would you like this tutorial? So do share this "Using Blink texts for attracting Visitors" tutorial with your socialized friends.

Easy way to create open in new tab Links

Edit Template HTML Posts

Real website is built by adding more links. As the meaning of HTML(Hyper Text Markup Language), Quality of a website is showing as the amount of total links(Hyper texts) in a web page.We can categorize the links as two types mainly.They are Inbound links and Outbound links.We can target the links to main window(Same window),New window,New tab or Pop up window.I this tutorial you will learn how to make links opening in new tabs.

I have seen that many blog sites and websites have links as opening in new window.As i think everyone with me do not like to every links to open in a new tab or new window.If you would like to open a link in a new window,you can right click on the link and choose the 'Open in new window' option from the tool up menu.I recommend you to don't establish every links opening in new tab.People don't like it.But there are some occasions to make links to open in new tab like when adding affiliate links,links for other websites,example web pages...etc. Anyway you should know that how to establish correct targets for links.It will make your site more user friendly.

.........................................................................................................................................
How to create 'open in New tab Links' on Blog and website
.........................................................................................................................................

Now I explain you how to add these links in your blog posts.You can follow this method to add links in static pages and "HTML/JavaScript" page elements alike.

1.Go to create a new post or edit a post.
2.When you want to add a link opening in a new tab,there is two methods.You can see both two methods.

First method is the select on word which is linking.now click on 'link' like bellow.

Now you will see a pop up window.Then tick on "Open this link in a new window" like below.

Then click on "OK" button.This method can be used only in blog posts or pages.But,you can't use this method in 'HTML/JavaScript' gadget or Template editor.Second method is the most important. You can use this method in your website too.We should learn this method. Because this method is very useful and important.

Your general link is looking like below.

<a href='Your_Link_Address'>Linking_Word(s)</a>

Now we add new attribute to 'a' tag( meaning of a is the 'anchor'),called 'target'. Value of it is "_blank".it implies to open the link in a new tab.

target='_blank'

After adding this attribute to the main 'a' tag,it will be like this,

<a href='Your_Link_Address' target="_blank">Linking_Word(s)</a>

Also you can add this attribute for image links too.it will be like this.

<a href='Your_Link_Address' target="_blank"><img src='Img_Address'/></a>

Example: Widgets

I think that you understand how to make links opening in a new tab easily.You are free to ask any question in our commenting area.Stay blessed pals :-D

How To Add Text Box in Blog post

HTML HTML and CSS Posts

Image credit:-www.quicksprout.com

What is a Text box

Text boxes are also known Text areas in which you can add characters,codes and shrink them to a specific area. Text boxes are really important in some occasions such as presenting large HTML,CSS,JavaScript codes to users and displaying quotes or long paragraphs that you want to show in small area.

How to add Text box in blogger

You can display text box in your blog's post pages,static pages also in side bar ( HTML/JavaScript page element) easily.You just need to do is adding piece of HTML code to code editng area.So now i will explain how to add simple text area to blog.You can search more attractive text boxes on this blog and find out what's the best one for my blog.

Whenever you're editing your post or page,click on "HTML" button like below.Then add below codes where text box appears.

1. Editable Text box

User can edit the text or codes in this type of text boxes.

<textarea rows="3" cols="10"> Your Text Here </textarea>

E:g

2. Read only text box

Using this type of text boxes, Users can't edit the text or codes in the text box. Try to edit the code in below the text box. Can you?...

<textarea rows="5" cols="20" name="Privacy Policy" readonly="readonly"> Your text here </textarea>

E:g

YOU CAN'T CHANGE THIS TEXT.........

3. Link Text box

You can add any codes in the text box like below.

<textarea rows="5" cols="20" name="Link To Blog" readonly="readonly"> Your HyperLink Code Here </textarea>

E:g

<<span class="GINGER_SOFATWARE_correct" grcontextid="html:0" ginger_sofatware_markguid="f932429a-2ef6-4d52-9c53-f76b959cca46" ginger_sofatware_uiphraseguid="3e038d8e-65e8-41ef-91ca-bc61b5b355cf">html</span>><<span class="GINGER_SOFATWARE_correct" grcontextid="head:0" ginger_sofatware_markguid="001726b3-d437-4c45-a425-07062d2bff57" ginger_sofatware_uiphraseguid="338775bd-4ee8-4127-9bd4-2123518a679a">head</span>><<span class="GINGER_SOFATWARE_correct" grcontextid="title:0" ginger_sofatware_markguid="f0579de7-210a-424d-859b-72c50013238e" ginger_sofatware_uiphraseguid="5bb6136e-90bb-41bc-b665-485f830d7927">title</span>>www.bestlodge.blogspot.com</title></<span class="GINGER_SOFATWARE_correct" grcontextid="head:0" ginger_sofatware_markguid="75045fed-c2b6-4d90-a731-25955250ac32" ginger_sofatware_uiphraseguid="1da3ab2a-f354-4ff0-9bee-b9e2871cdcd8">head</span>><<span class="GINGER_SOFATWARE_correct" grcontextid="body:0" ginger_sofatware_markguid="204c6d81-6d83-4d03-bec7-eb970fff75be" ginger_sofatware_uiphraseguid="574c1d13-940e-47e8-ac15-773de6dbb114">body</span>>Hi,<font color="#589FEA" size=3><<span class="GINGER_SOFATWARE_correct" grcontextid="b:0" ginger_sofatware_markguid="0beb4100-37d1-47e3-9814-18e3dfea8a45" ginger_sofatware_uiphraseguid="4593734d-e1c9-4a22-ab6c-4d022f88db47">b</span>>Friends<b/></font> Welcome you Back................<<span class="GINGER_SOFATWARE_correct" grcontextid="p:0" ginger_sofatware_markguid="661d5c24-b985-4c59-9132-ea466d1ac0da" ginger_sofatware_uiphraseguid="36a97fe9-236b-4302-8f56-25a0922dd7ed">p</span>><<span class="GINGER_SOFATWARE_correct" grcontextid="i:1" ginger_sofatware_markguid="63bed30c-af43-42a4-bfb2-ca0c29b2904f" ginger_sofatware_uiphraseguid="36a97fe9-236b-4302-8f56-25a0922dd7ed">i</span>>connected with this site to get more <span class="GINGER_SOFATWARE_correct" grcontextid="knowlege:2" ginger_sofatware_markguid="426b59a8-4cbf-4e1b-9e43-1c1535d07cb1" ginger_sofatware_uiphraseguid="36a97fe9-236b-4302-8f56-25a0922dd7ed">knowlege</span> <span class="GINGER_SOFATWARE_correct" grcontextid="arround:3" ginger_sofatware_markguid="20e7e618-3d64-4bd6-98ef-0ac7e6ea5b51" ginger_sofatware_uiphraseguid="36a97fe9-236b-4302-8f56-25a0922dd7ed">arround</span> the world......</<span class="GINGER_SOFATWARE_correct" grcontextid="i:0" ginger_sofatware_markguid="462558c8-5d82-4977-8155-5d8fac26540b" ginger_sofatware_uiphraseguid="00dd0fb6-3857-42d1-83eb-4291dd428682">i</span>></<span class="GINGER_SOFATWARE_correct" grcontextid="body:0" ginger_sofatware_markguid="c070c24e-1c5d-4b03-85c0-344e076b2719" ginger_sofatware_uiphraseguid="2bfe6a0a-46af-4019-a25b-7e8e336f5f83">body</span>></<span class="GINGER_SOFATWARE_correct" grcontextid="html:0" ginger_sofatware_markguid="ede2ac14-2f7c-471e-8a9d-24444f8172c3" ginger_sofatware_uiphraseguid="f906e822-7d44-4d04-8716-dbedca7922ed">html</span>>

Change the number of rows and columns as you want

.................................................................................................................................
Need Help ?
.................................................................................................................................

If you have any question adding text box on your blogger blog,Feel free to ask me anything via comment.

CSS3		Javascript
HTML5		Photoshop
PHP		CorelDraw