BjQuery widget that I mention in previous post also had a google translate and alexa rank feature. You can add it easily with one line code. Google translate widget will show you 12 option of language you can translate to. Once you click one of it, you will automatically redirected to the translation page. Alexa rank widget will show the rank of any site you decide.
Google translate widget only had 1 style, while alexa rank had 3 style that you can choose.
Here is the script to add google translate tools to your site:
- Please make sure you already add BjQuery main script below the body tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- add script jb_g_translate(number button in 1 row, "your site's language");
for example:
<script>
jb_g_translate(6,"en");
</script>
- place it inside body tag, wherever you want it to appear.. :D
- save your template
How to add alexa rank widget? here is the steps:
- BjQuery main JS must exist in your body tag :D
- add script jb_alexa("your site (without http:// prefix", style(1,2,or 3));
Example:
<script>
jb_alexa("www.google.com",1);
</script>
- Place it where you want it to appear then save your template.
Have fun with BjQuery alexa and google translate widget :D
This post is one of the explanation of BjQuery feature. I'm sorry if the title make you confuse :D
Actually it called a link style features, that will change the mouse pointer when pointing a hyperlink.
This widget will make ALL links in your post totally blending with the text. So when you point a hyperlink, the mouse pointer won't change... :D
You can see the comparison below.
Normal link (before effect):
ONLINE TUTORIAL
After aplied link style:
ONLINE TUTORIAL
Follow this step to add link style effect to your site. Here's example for blogger blog:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the link style script:
Script format - jb_link_style("link color","underline","cursor type","c_content");
Example:
<script>
jb_link_style("black","true","true","c_content");
</script>
- save the template
Note:
- black = set the link color to black. You can change it with any color you want
- if underline is set to true, it will remove underline in hyperlink else (false), not remove underline
- if cursor type true, the hyperlik cursor will change to text. Otherwise (false), the cursor isn't change
OK, that's it. Stay tune for the next fun tutorial post.......
Actually it called a link style features, that will change the mouse pointer when pointing a hyperlink.
This widget will make ALL links in your post totally blending with the text. So when you point a hyperlink, the mouse pointer won't change... :D
You can see the comparison below.
Normal link (before effect):
ONLINE TUTORIAL
After aplied link style:
ONLINE TUTORIAL
Follow this step to add link style effect to your site. Here's example for blogger blog:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the link style script:
Script format - jb_link_style("link color","underline","cursor type","c_content");
Example:
<script>
jb_link_style("black","true","true","c_content");
</script>
- save the template
Note:
- black = set the link color to black. You can change it with any color you want
- if underline is set to true, it will remove underline in hyperlink else (false), not remove underline
- if cursor type true, the hyperlik cursor will change to text. Otherwise (false), the cursor isn't change
OK, that's it. Stay tune for the next fun tutorial post.......
Still about BjQuery, now I'll explain about how to use text to link features. This widget will automatically change the targeted word into a hyperlink. You can define many word to make it into hyperlink.
Very useful for you to build an internal link to your site. Besides text to link, there are some features that similar such as bold to link, underline to link, and italic to link. You can use it together with text to link.
- bold to link = change all BOLD word into a link
- italic to link = change all ITALIC word into a link
- underline to link = change all UNDERLINE word into a link
Well, here's the instruction manual. Assume that you use blogger:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the text to link script:
<script>
jb_bold_to_link("URL","c_content");//add this lineif you want to activate bold to link feature
jb_italic_to_link("URL","c_content");
jb_underline_to_link("URL","c_content");
jb_text_to_link("WORD","URL","c_content");
jb_text_to_link("WORD2","URL","c_content");
</script>
- save the template
Note:
- URL refer to the link you want to add.
For example if you set the URL into http://google.com, then the hyperlink become http://google.com
- WORD dan WORD2. Change it with the word you want to make it a link.
For example if you change the word to ADMIN. so if the word ADMIN exist on the post, it will automatically changed into ADMIN word with URL you specify :D You can add more word and specify the URL one by one.
Try it, very cool widget..
If you had any question you can comment below.... :D
Very useful for you to build an internal link to your site. Besides text to link, there are some features that similar such as bold to link, underline to link, and italic to link. You can use it together with text to link.
- bold to link = change all BOLD word into a link
- italic to link = change all ITALIC word into a link
- underline to link = change all UNDERLINE word into a link
Well, here's the instruction manual. Assume that you use blogger:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the text to link script:
<script>
jb_bold_to_link("URL","c_content");//add this lineif you want to activate bold to link feature
jb_italic_to_link("URL","c_content");
jb_underline_to_link("URL","c_content");
jb_text_to_link("WORD","URL","c_content");
jb_text_to_link("WORD2","URL","c_content");
</script>
- save the template
Note:
- URL refer to the link you want to add.
For example if you set the URL into http://google.com, then the hyperlink become http://google.com
- WORD dan WORD2. Change it with the word you want to make it a link.
For example if you change the word to ADMIN. so if the word ADMIN exist on the post, it will automatically changed into ADMIN word with URL you specify :D You can add more word and specify the URL one by one.
Try it, very cool widget..
If you had any question you can comment below.... :D
Yesterday I've post about what is BjQuery. Now, I will share the tutorial about how to use the first BjQuery features, strong keyword for SEO. In SEO world, <strong> usually use more often then bold <b> tag. The result is same, but many SEO experts suggest to use <strong> than <b>.
Main purpose
This strong keyword widget will automatically add your keyword with a <strong> tag.
Here is how to add it to your site. I explain it in blogger version:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the strong keyword script:
<script>
jb_strong_keyword("c_content");
</script>
- save the template
You're done :D
If you have any comment, please let me know.
Main purpose
This strong keyword widget will automatically add your keyword with a <strong> tag.
Here is how to add it to your site. I explain it in blogger version:
- Open edit HTML, then tick expand widget template
- add this script below the <body> tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
- Find <data:post.body/>. Cover it with a div, for example I named the div as c_content
<div id='c_content'>
<data:post.body/>
</div>
- Below that div, add the strong keyword script:
<script>
jb_strong_keyword("c_content");
</script>
- save the template
You're done :D
If you have any comment, please let me know.
BjQuery widget? sounds like javascript jquery, but actually this widget had a big difference with jquery :D I don't know why my friend named it like that. He is the creator of this widget, I'm here just to write a short review about his widget. You can contact him at zona widgets.
This widget only contain 1 javascript file that you can easily host it your own. The JS itself only less than 30 KB. For the light version (you can request from him) BjQuery only take less than 15KB.
BjQuery is suitable for many platform, but I will share the installation tutorial especially in blogger blog since I use blogger :D
BjQuery contain 19 cool features that you can use. Once you put the JS in your body tag, then you can easily call these 19 features just in one line method. Very short code and efficient.
Here is the 19 features:
1. Strong keyword - add <strong> tag to your targeted keyword for SEO
2. Text to link
3. Bold to link
4. Italic to link
5. Underline to link - include 3 above, change the selected word into a link
6. Link style - modify cursor pointer when mouseover a HREF (hyperlink)
7. Translate tools - add google translate to your site with 6 choice of languages
8. Random posts (for blogspot only) - add random post list of selected site
9. Latest posts (for blogspot only) - add a newest post from the site you set
10. Alexa rank - display alexa rank with some variation of style
11. Facebook comment - add facebook comment feature
12. Facebook like box - add facebook like box wherever you want it to appear
13. Follow twitter - add one-click follow button to your site
14. Share my website - add various of share button, make sharing your post easier. include: facebook, twitter, google plus one, add this widget. This is the combination of widget 15, 16, 17, and 18
15. Facebook like
16. Google plus one
17. AddThis
18. Share to twitter
19. Twitter share button, no count
Well, here is the basic use of the script:
- For blogspot user, open and expand your template in edit layout - edit HTML - tick expand widget template
- Find <body> tag, then paste this script right below the tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
If you had a performance issue with xtgem, you can upload it to your site.
The next step only required if you want to use widget 1, 2, 3, 4, 5 or 6:
- Find <data:post.body/>. Just type it in search box
- Add the <div> between it. For example I use <div id="c_content">
So, the final code will look like this:
<div id="c_content">
<data:post.body>
</div>
Wait for my next post about how to use the 19 features above.... :D
I have to split it because it will be shorter
Very cool widget right?
for more info about this script you can visit Bjquery
This widget only contain 1 javascript file that you can easily host it your own. The JS itself only less than 30 KB. For the light version (you can request from him) BjQuery only take less than 15KB.
BjQuery is suitable for many platform, but I will share the installation tutorial especially in blogger blog since I use blogger :D
BjQuery contain 19 cool features that you can use. Once you put the JS in your body tag, then you can easily call these 19 features just in one line method. Very short code and efficient.
Here is the 19 features:
1. Strong keyword - add <strong> tag to your targeted keyword for SEO
2. Text to link
3. Bold to link
4. Italic to link
5. Underline to link - include 3 above, change the selected word into a link
6. Link style - modify cursor pointer when mouseover a HREF (hyperlink)
7. Translate tools - add google translate to your site with 6 choice of languages
8. Random posts (for blogspot only) - add random post list of selected site
9. Latest posts (for blogspot only) - add a newest post from the site you set
10. Alexa rank - display alexa rank with some variation of style
11. Facebook comment - add facebook comment feature
12. Facebook like box - add facebook like box wherever you want it to appear
13. Follow twitter - add one-click follow button to your site
14. Share my website - add various of share button, make sharing your post easier. include: facebook, twitter, google plus one, add this widget. This is the combination of widget 15, 16, 17, and 18
15. Facebook like
16. Google plus one
17. AddThis
18. Share to twitter
19. Twitter share button, no count
Well, here is the basic use of the script:
- For blogspot user, open and expand your template in edit layout - edit HTML - tick expand widget template
- Find <body> tag, then paste this script right below the tag
<script src="http://bjquery.xtgem.com/v_1_19" type="text/javascript"></script>
If you had a performance issue with xtgem, you can upload it to your site.
The next step only required if you want to use widget 1, 2, 3, 4, 5 or 6:
- Find <data:post.body/>. Just type it in search box
- Add the <div> between it. For example I use <div id="c_content">
So, the final code will look like this:
<data:post.body>
</div>
Wait for my next post about how to use the 19 features above.... :D
I have to split it because it will be shorter
Very cool widget right?
for more info about this script you can visit Bjquery
Just a short tutorial today about iframe.... :D I hope this can give a solution to you. Well, This simple javascript is very useful to avoid your webpages open within iframe. By adding this iframe breaker javascript then each time someone open your webpage via iframe then this javascript will force open your page to the top location (address bar).
Here is a short tutorial how to put iframe breaker script into your template. It support for all platform
- Open your template then find <head> tag
- Add this javascript right below it
<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>
- save your template
OK now you can test it by open your webpage via <iframe src='http://yourweb.com'></iframe>
Then the moment the page load, the address bar will change to your URL, escaping your page to load within iframe. So far it's very effective script to prevent your page from iframe.
Perhaps you ask, is there any ANTI iframe breaker? script that prevent iframe breaker and force the webpage to stay in iframe.
FYI, I've tried several ways to make the script like this but it's totally not work. The last time I tried it end with my browser crash.
So I can say now is there's no ANTI iframe breaker script exist yet.
Or maybe you know, so don't hesitate to share your script here... :D
Here is a short tutorial how to put iframe breaker script into your template. It support for all platform
- Open your template then find <head> tag
- Add this javascript right below it
<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>
- save your template
OK now you can test it by open your webpage via <iframe src='http://yourweb.com'></iframe>
Then the moment the page load, the address bar will change to your URL, escaping your page to load within iframe. So far it's very effective script to prevent your page from iframe.
Perhaps you ask, is there any ANTI iframe breaker? script that prevent iframe breaker and force the webpage to stay in iframe.
FYI, I've tried several ways to make the script like this but it's totally not work. The last time I tried it end with my browser crash.
So I can say now is there's no ANTI iframe breaker script exist yet.
Or maybe you know, so don't hesitate to share your script here... :D
Closure compiler is one of my favourite javascript compressor tool. It can compress your large javascript and shrink the variables to minify your javascript size. But I had a problem (not a big problem really) closure compiler only work when you online. So now I want to share the offline version of closure compiler. It will compress your script in just one click.
First make sure you already installed java in your PC otherwise it won't work. Download the latest closure compiler then extract the zip file. You should see the main file, compile.jar.
Create a new *.bat file then paste this command to it.
java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
This *.bat file will work as a shortcut so you don't have to go to cmd then type that command anymore.
Next, put the source javascript file at the same folder and rename it to hello.js. After that, click that bat file then if no error, the file hello-compiled.js will appear. That is your compressed javascript.
Easy to use right? :D
First make sure you already installed java in your PC otherwise it won't work. Download the latest closure compiler then extract the zip file. You should see the main file, compile.jar.
Create a new *.bat file then paste this command to it.
java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
This *.bat file will work as a shortcut so you don't have to go to cmd then type that command anymore.
Next, put the source javascript file at the same folder and rename it to hello.js. After that, click that bat file then if no error, the file hello-compiled.js will appear. That is your compressed javascript.
Easy to use right? :D
Subscribe to:
Posts (Atom)