Showing posts with label general. Show all posts
Showing posts with label general. Show all posts

Saturday, September 4, 2010

It's been a long time since I wrote my last post... So here I post some Pop-Up Script.



In this First Script I'll give some example that You can use it in Your Blog...



Pop-up Script To Open A Window When Your Page Loads 



 Just put the following script between Your <HEAD> and </HEAD> tag



<script language="javascript">

<!-- begin



function popup(Site)

{

window.open(Site,'PopupName','toolbar=no,statusbar=no,

location=no,scrollbars=yes,resizable=yes,width=275,height=200')

}



// end -->

</script>


Then add the following code into your <BODY> tag:



onLoad="popup('URL/to/popup.html')"


Your<BODY> tag should then look something like this:



<BODY bgcolor="#ffffff" text="#000000"

onLoad="popup('http://doit2us.blogspot.com/popup.html')">


Note: In this and all script examples that follow, change the attributes "toolbar", "statusbar", etc., to on (1) or off (0) as you prefer (or omit them), and set the width and height to the size you require.



That's all.. Happy Pop-Up...

Sunday, May 9, 2010

I nstead of Making A Recent Comment as we've discussed before, We can also make A Recent Post with Feed Widget.



First we must ensure that our Comment Feeds are enabled cause we will use the Feed Widget



To do that, Go to your Dashboard >> click Settings of your Blog >> click Site Feed. Then set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Please do not choose “None”. Save the Settings.  

 


Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.


 


Insert RSS Feed as Blog Posts as follows :

http://doit2us.blogspot.com/feeds/posts/default?alt=rss
 
Please replace http://doit2us.blogspot.com with yours. After finished click Continue



Next, We can set "how to display" our  recent comment. We can named our Recent Comments by insert the Title column, Setting how much last comment we want to show up (5 by default). We can also choose to displayed the dates and name of the authors or not, and open links in new window.

After finished with the setting, click to Save the Changes.



We still can set the position of your recent comments by drag and drop the widget to the relevant part of our template and then Save the Template. 



Tuesday, May 4, 2010

Meta Tag Definition



A meta tag is a tag (a coding statement) in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page's content.



Meta Tag Function



The information that we provide in a meta tag is used by search engines to index our web page, most often to help search engines categorize them correctly, so that if someone searching for the kind of information as in our web page, they will be able to find it easily.



There are several kinds of meta tags, but the most important for search engine indexing are the keywords meta tag and the description meta tag. The keywords meta tag lists the words or phrases that best describe the contents of the page. The description meta tag includes a brief one- or two-sentence description of the page. Both the keywords and the description are used by search engines in adding a page to their index. Some search engines also use the description to show the searcher a summary of the page's contents.

Meta tag (element) used in search engine optimization, where different methods are explored to provide a user's site with a higher ranking on search engines. In the mid to late 1990s, search engines were reliant on meta data to correctly classify a Web page and webmasters quickly learned the commercial significance of having the right meta element, as it frequently led to a high ranking in the search engines — and thus, high traffic to the website.



Meta elements have significantly less effect on search engine results pages today than they did in the 1990s and their utility has decreased dramatically as search engine robots have become more sophisticated. This is due in part to the nearly infinite re-occurrence (keyword stuffing) of meta elements and/or to attempts by unscrupulous website placement consultants to manipulate (spamdexing) or otherwise circumvent search engine ranking algorithms.


Although meta tag have significantly less effect on search engine results pages today, and most search engines also use the contents of a page as a way to determine how to index it, the creator of a Web page should be sure to include meta tags with appropriate keywords and description. Well-written meta tags still can help make the page rank higher in search results.





How To Do It?



The meta tag is placed near the top of the HTML in a Web page as part of the heading. All the information that we want to be conveyed on our web page, can be enter between the tags <head>...</head> 



The meta tags writing format is:

<meta name="name" content="content"/>
or      <meta content='content' name='name'/>   



Note: we can use " as well as  '

 

As we have mentioned before, although  there are several kinds of meta tags (you can "search" to have more information about the kind of meta tags), but the most important for search engine indexing are the keywords meta tag and the description meta tag.



To be more easily understood, the following is an example of meta tags which are applied in this blog.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>



    <head>



<meta content='New Blogger Tips For Us' name='Author'/>
<meta content='blog tips, tricks, help for all new bloggers on Web templates, Blog templates, designs, widgets, layout, JavaScript, HTML codes, SEO, Google AdSense, gadgets, diagnostic tools, and how to monetize Blogger or Blogspot blogs, learning by doing' name='description'/>
<meta content='blogspot, blog, tips, tricks, blogger tips and tricks, template, widget, layout, HTML codes, javascript, seo, SEO, google adsense, gadget, monetize, blogger' name='keywords'/>



    <b:include data='blog' name='all-head-content'/>

    <b:if cond='data:blog.pageType == &quot;index&quot;'>

    <title><data:blog.pageTitle/></title>

    <b:else/>

    <title><data:blog.pageName/> | <data:blog.pageTitle/></title>

    </bhttp://www.blogger.com/post-edit.g?blogID=8693675884300473333&postID=3139178726186289880:if>

    <b:skin><![CDATA[/*
If you want to do this trick.. then  Go to Your Dashboard >> Layout >> Edit HTML >> and add your meta tag code, just change the Red words with Your content tag. You can also add another meta (eg. 'generator').

If your home page consists of several languages, you can also define a language that you use the attribute "lang". For example, if the contents of your web documents written in French, you can use the attribute "lang" as follows:

<meta content='Your Content' name='Your Name' lang='fr'/>
Well.. that it's.. Happy SEO...!

Friday, April 30, 2010

Before we go any further to discuss this JavaScript - Small Tips II, I must remain you as in JavaScript I, that at least there are 2 think we must be consider to use the JavaScript apps , because to many JavaScript in your template will slowing down your web page to load. Besides that, for security reason, many user set their browser to disable JavaScripts. To resolve these problem, we must be wise to choose which the JavaScript that will be install into our template (choose the appropriate and useful JS apps) and use the "warning message" that we using JavaScript .



How To Make An Alert Message With JavaScript.



The functions of an alert message is to provide announcements, information or warning to the guests before they go to see or read the entire contents of our site.

There are a few display an alert message that we can create, an alert message box which only has a button 'OK', "OK" button and "cancel" to divert to other sites, and an alert message box with a dialog box.



Note: This tricks maybe annoying to some people, because this pop up box will STOP our browsing activity, we will not be able to do anything until we execute this pop up box (click OK or X).



An Alert Message Box With 'OK" Button.



We usually seen this message on "adult" or "serious" sites, the messages give warning to their visitor about the content of the sites and their restriction or limitation.

To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. And paste this code shown below.

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>
Just change the Red words with your message..!, this words will be displayed as a pop up alert box when the visitors view your site / blog. The Purple words will show up when our guests disable their Javascript on their browser.

Look at this example below..





I put this "alert message" page element right under my header. This alert message box just for an information cause both choices, click "OK" button or click "X" will bring our visitor directly into our site (continuing to open our site).





An Alert Message Box With Confirmation ( "OK" and "Cancel" ) Button



For any reasons, sometimes we need to give our guests a choice not to continuing or cancel to visiting our website / blog. If our guests prefer to cancel, then they will be redirect into another URL address.

So if we want to do this trick, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area or even below your header, and select HTML/JavaScript and Paste this code below.



<script type="text/javascript">

confirm('This site contains sadistic materials. Are you sure you want to continue?');

if (confirm('This site contains sadistic materials. Are you sure you want to continue?')) {

window.location = "http://doit2us.blogspot.com/";

}

else {

window.location = "http://www.google.com/";

}

</script>
Change the Red words with your message..!, the Blue URL is the URL destination address when our guests click the "OK" button, and the Purple URL is the URL destination address when our guests click the "cancel" button or click "X".

 





An Alert Message Box With Dialog Form



Besides give a warning or information to our guest, with this simple Javascript trick below, we can build a warning or information message + dialog form. In this example below, This trick is to give a warning to our guest, knowing the name, and give a welcome message. It,s a rather weird isn't it, but this just a sample, you can created better than this, I just want to share an Idea...



First Script

<script type="text/javascript">

alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')



var yourName = prompt("Please, write your name first...!", "Reader");

</script>



<noscript>Enable javascript in your browser to view an important message.</noscript>

<script type="text/javascript"></script>
The way what we done it, is the same with both  How To Make An Alert Message With JavaScript. above, I put the FirstScript page element below my header. Because this is a dialog box, of course we must have a follow up, to continuing the action, So I put a second script  in top of my post body as my welcome message.



Second Script

Thank you <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, please mention us in your post or link to this site. Enjoy your visit <script type="text/javascript">document.write(yourName)</script>
So this is what we got with those trick.

When first opened our site or blog, there will be a pop up box warning message just like the first trick,





after click "OK" or "X" button, there will be shown another pop up dialog box like this,





If the Guest write their name into the dialog box (eg. Mc4tur) and click "OK", then they will be brought to continuing opened our site with a welcome message in the place where we put the second script page element.



Well that's all, you can combined those tricks or make a modification (eg. put into the post). but please remember choose wisely because of the disadvantage of the JS tricks.

Tuesday, April 6, 2010

I am too late knowing a great news, because just today I know that 11 days ago I got an email from Blogger Team, whose contents are as follows:



We’re excited to announce that the Blogger Template Designer is now available on Blogger in draft, Blogger’s experimental playground.



The Blogger Template Designer makes it easy to customize the look and feel of your blog without knowing any HTML or CSS. Here are a few of the new features available in the Blogger Template Designer :



    * Beautiful new templates to start from

    * Custom blog layouts with one, two and three columns

    * Hundreds of background images

    * Customizable colors, fonts, and more...



What are you waiting for? Express yourself in style with the Blogger Template Designer. Learn more at www.blogger.com/templates.



The Blogger Team


With great enthusiasm I hurried to follow the link provided in the email ..



Wow .. If prior to the date 03-27-2010 Blogger only offers standard templates as we already know (rather boring) since last few days, the Blogger add facilities to enhance your display settings templates.



There are quite a lot of facilities added to the Blogger settings, ranging from the addition of templates with different variations, a variety of background images, to the layout settings, and other settings such as the division of the column footer into 2 or 3 columns.



Everything we can do with an easy step in a few clicks, yes .. exactly like the contents of an email from the blogger team, we can modify our templates without needing to know HTML or CSS code.



This could be a "big punch" to many "tutorial blogs" that so far has a busy traffic because of the many novice bloggers who are looking for information about the articles that contain how to modify the blogspot template (by modifying the template CSS and HTML code).

Blogger Team made millions of tutorials blog looks like a "foolish tutorial", killing mosquitoes with a shotgun.



Although not apply yet to my personal blog because of my limited time to explore, but this is really great news, additional facilities have been long-awaited by millions of users Blogspot.



I hope I could write my experience in using of these Blogger latest facilities as soon as possible

Friday, March 19, 2010

How To Make a JavaScript Externally



As I mentioned in How To Make Recent Comment II and How To Make a Related Posts Widgets in Blogger.. One of the problems with the JavaScript code in our template, is to make our web loading page  become slower relatively or even could not see if there is something wrong with Script Js itself or the browser used.



To overcome this problem, we can put this Script (JS) externally.

So when the visitors browse our Site or Blog, their browser will reading our template Script first and then Script external JS after.

With this method our visitors still can see our page with more faster, although maybe there is a problem with JavaScript or compatibility of Browser used. (This is why some site owner write "warning text" on their web page "This Site Will Look Perfect In X, Y and Z browser".)



To make an external JavaScript, the first step of course, we must have a server / web host to store our JS file. If you do not have and want to have a web storage for free please read "Using Google Group and Google Sites as Web Storage".



After we have a host sever then the next step is to make your script as a JS file. Just simply find your  JavaScript code, Cut it and Paste in your Notepad and save it as a JS file (.js), Store your JS file into your host server and put some "calling" code into your HTML template.



Please take look at How To Make a Blogger Related Post. cause I will use this article to make an explanation.



To make the Related Post JavaScript externally, Just Cut..! the Related Post JavaScript (the green code) and paste in your Notepad, then Save it as yourkodescript.js.  

Next ..Upload / store this file into your web host and remember the URL link.



Write this folowwing script exactly on the place where the Related Post JavaScript was before.     

<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>  
The final position will look like this,

]]></b:skin> 

The Display Setting Script

<script src='http://Yourwebhost.com/yourkodescript.js' type='text/javascript'/>

</head>
Note :  The rest of the step to make related post widget are still the same...





Inform About The Existence Of JavaScript In Our Template



Because afraid of there are malicious script contained in JavaScript files, especially external JavaScript. Many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view all of your JavaScript build widget.



To anticipated this situation, we can inform to our visitors about the existence of JavaScript in our template / widget and maybe giving an explanation or guarantee that there is no malicious script inside it or no harm or it's safe.



To do this, we can simply add a small script at the end of your JavaScript Code.

JavaScript

<noscript>You need to enable JavaScript to read this.</noscript>
Just like what I have done in How To Make Recent Comments. If the visitor disabled the JavaScripts browser, There will be warning text below my "recent comments title" that's says "You Need to enable JavaScript to read this"





You can edit the 'explanation text' as you want..  how about add "Guarantee 100% no harm"..!!



Please, Write your comments.. and maybe you want to share your secret JS tips..., will be nice...

Friday, March 12, 2010

This morning I had experience that made me surprised and rather worried.. When I want to open this New Blogger Tips  Blog, with intention to update it, I found this Blog could not be opened and get a warning that Blog has been removed.

I wonder why Blogger doing this to my Blog, because I am sure that I do not doing something that violetes Blogger TOS

My only worried is... if there is certain person or party who reported to Blogger that this New Blogger Tips Blog is doing something illegal or that can harms to them, (although I'm sure not doing it too). In such cases we will need plenty of time to deal with.

Because I'm certain not make violates to Blogger TOS or other parties, then my temporary conclusion is that "there is a little (technical) error on the part of Blogger" that would be easily solved with the verification process.

 

And this is what I did then..

I typed http://www.blogger.com/start in my browser, sign in with my account. I done it twice cause the first time there will be warn that Sorry your account has been disabled .

After click Sign in will be taken to the notification temporary disabled Google account page, which states that "We apologize for the inconvinience.. bla..bla..bla.. For the imediate assintance enter your mobile phone number and we will send you a verification code".

I prefer to chose Text Message Verification Option, because it's cheaper and faster.. This is the best part...Yup really fast response from Google. After chose my Country and type my phone number. As soon as Click "Send verification code to my mobile phone", Just in second (not more than 3 seconds) there are incoming Text Message from Google to my mobile phone.

The next step, I just put this verification code into Verification Page which appear after we pressed Send verification code to my mobile phone button (So sorry that I forgotten to take screenshoot to this last action.). and click Verify button.



That's it.. As simple and Quicly like that, I solve my "Blog Has Been Removed" just in second. Hope.. this works for you to...

Sunday, February 28, 2010

Spoiler is a facility installed in a post (articles, blogs, forums, or in the comments) that serves to hide pictures or text/writing. Visitors can click on the button that provided, if  they want to see the hiding picture or text. The spoiler works similar as a scroll bar.



The main function of the spoiler is a space-saving, especially if you have lots of large image display on your posts. and the most important is to save your web page loading time.



We can easily make a  spoiler into our post, just add this simple Script right on the place where you want to put your spoiler images or text.

<div style="margin-bottom: 2px;">Your Spoiler Title

<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>

<div style="border: 1px inset ; margi : 0px; padding: 6px;"><div style="display: none;">YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE</div></div></div>
Just copy and paste the Script above into your post, replace the Your Spoiler Title with your title, and your images or text into YOU CAN PUT YOUR SPOILER IMAGES OR TEXTS IN HERE .



Here is the display of the Script above





Your Spoiler Title



YOU CAN PUT YOUR SPOILER IMAGES OR TEXT IN HERE


You can also set the spoiler display as you like by changing the "Display Setting"



It's quite easy isn't it...??? Well... happy spoiler..









Add to: | blinklist | del.cio.us | digg | yahoo! | furl | rawsugar | shadows | netvouz



technorati tags:

del.icio.us tags:

icerocket tags:

keotag tags:
 


Disclaimer:We does not host any of the templates available on this blog. This blog merely indexes other sites contents.