Sometimes, we have to show some extra message in our post which are important and linked with the post and cannot put that in the webpage like some important announcement and breaking news etc. In these cases, it can better option to use a Floating Message Box which will appear in front of the webpage . Today, I am going to discuss the code which will create a floating message box using jquery . You can use this code everywhere you want . Read More
1. The CMS you choose should be really good at whatever the main function of your website is.
What do you want your website to do? Is it going to be primarily a static website, like an online brochure? Or is it going to be a fully-functioning ecommerce site? Or maybe it’s going to be really media-heavy with tons of videos, photos, and audio files. Or is a blog going to be the primary focus?
Read More
I am neither the first nor the last one that will be writing about placing twitter follower counter in webpage. Though there already exist many widgets anyone can easily use and customize; see here and here; But those widgets have limited options in terms of color, layout and moreover they have their info attched (somewhere) in widget which does not feels good. Here’s my attempt on how to get follower count in twitter using PHP.
Wibiya enables blogs to integrate the most exciting services, applications and widgets of their choice into their blog through customized web-based toolbars.
You can add the toolbar to wordpress, blogger, typepad, drupal, joomla, ning, vBulletin, and even in your custom website as well.
Benefits
- Increase page views and time on site
- Increase content sharing with the social tools available
- Enrich your content and increase communication
Here is a list of Applications available in wibiya toobar (there are more applications than the list below):
- Search (add search box in the toolbar)
- Google Translation (translate your page with google translation)
- Latest posts (view latest posts from the toolbar)
- Random posts (view random posts)
- Live notifications (broadcast alerts, messages, news and more to all your visitors)
- Real time users (display real time stats of your website including number of online users, popular pages and a dynamic geolocaion user map)
- Navigation links (create a custom navigation menu or button that make it easier for your visitors to reach different pages)
- Subscribe (add rss subscription button)
- Sharing tools (facebook, twitter, email, digg, stumbleupon, yahoo! buzz, myspace and more)
- Facebook community (create your own website community with facebook connect in just one click)
- Twitter dashboard (post tweets from website, latest tweets, twitter search, and more)
- Facebook fan page (bring your fan page to your website and grow the number of fans)
- Photo gallery (display your flickr photogallery in your website)
- Youtube channel (display your youtube video gallery in your website)
You can view the demo of the toolbar in the wibiya homepage itself.
Use wibiya toolbar, make your site more popular, interactive and cool. ;)
Cheers,
Scenario:
You are browsing the web. You liked a url and wanted to share it, probably on twitter.
The old lengthy way:
You will open twitter.com, login with you username and password. Open url shortner like bit.ly and shorten the url you want to share. Then post your tweet with some text and shortened url.
The new and quick way:
You can do the same very easily and quickly. I hope you are using Firefox. So, there is a firefox addon Shorten url which will shorten the url and display the result in location bar. It supports more than 100 URL shorteners.
You can always remain logged in in twitter with the firefox addon Echofon. Echofon adds a tiny status bar icon that notifies you when your friends post tweets. You can also view updates in a timeline and post your own tweets.
So, it’s just simple. Shorten any url with Shorten url ff addon. And share it adding some text with Echofon ff addon.
Enjoy tweeting!
Jquery; magic in web programming, have allowed us to use different features with the simple knowledge to use them. I was searching for basic code to refresh the specific DIV using jquery and found this article and like to share with my viewers.
There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow"); }, 20000); </script>
Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.
Step 2:
and now you need to put the div in the body section of your page
<div id="loaddiv"> </div>
Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.
echo"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";
Now your page is ready .
Click here to see the demo.
In my recent project, i had to put video clips and mp3′s, the media file at the webpage and was searching for codes to play media files. I found this simple code that could play media files . you can simply download the zip file from the jwplayer and use it.
Step 1:
Copy and paste the following codes in the head section of your webpage.
<!-- body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; } a { color: #360; } h3 { padding-top: 20px; } ol { margin:5px 0 15px 16px; padding:0; list-style- type:square; } -->
Step 2:
Now download the following files and store it in the same folder which contains the main code.
player-viral.swf
swfobject.js
preview.jpg
Step 3
Now copy the following codes in the body section of your page
<object id="player" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="315" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="name" value="player" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value="file=axa.flv&image=preview.jpg" /><param name="src" value="player-viral.swf" /><embed id="player" type="application/x-shockwave-flash" width="400" height="315" src="player-viral.swf" flashvars="file=axa.flv&image=preview.jpg" allowscriptaccess="always" allowfullscreen="true" name="player"></embed></object>
here above file “video.flv” is the media file that is going to be played and file “preview.jpg” is the image that will first appear in the screen.
now your site is ready to play the media file.
click here for demo
Suppose, you are migrating you wordpress installation from one server to the other. In this case, you might have a different database server, database username and password. You might also have a different domain name as well. A general scenario will be migrating you wordpress installation from your localhost (local installation on your computer) to any online server.
In this case, you need to consider few things to make the site working. You need to make changes in wp-config.php (present in root directory of wordpress installation) and some update in wp-options table of your database.
Changes in wp-config.php
I suppose that my database name is wordpress, database username is root, password is pass and database server name is localhost.
/** The name of the database for WordPress */ define('DB_NAME', 'wordpress'); /** MySQL database username */ define('DB_USER', 'root'); /** MySQL database password */ define('DB_PASSWORD', 'pass'); /** MySQL hostname */ define('DB_HOST', 'localhost');
Changes in database (wp-options table)
1) In wp-options table, search for siteurl and home in option_name column.
SELECT * FROM `wp_options` where `option_name` = 'siteurl' OR `option_name` = 'home';
2) Then edit the option_value column for the two rows with your current site url. I have supposed your current url as http://example.com. You can put your own url.
UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'home' ; UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'siteurl' ;
My last article was about inserting twitter updates in personal webpage. Now this time I am writing on how to use google map in webpage. Google offers an API which we can use to pull information from google maps for our own use. Even easier, they offer a little JavaScript widget which automatically uses this API and returns simple HTML of google maps and we can use this simple html where we need to show the location’s through google map.
Here are some simple steps for this.
Step 1:
First go to http://maps.google.com/ and search the map which you want to insert in your webpage.
Step 2:
Then click to the ”Link” bottom seen on the upper right side of the page like shown below.
Step 3:
And now you will see the following page on your screen .If you are fine with the size( height and width), zoom of the map , then copy the html code and paste it in the page where you want to insert the map.
If you want to customize the map then click on the “Customize and preview embedded map”. and you will see the following window.
Next change the size of the map and zoom as you want, copy the html code and paste it in the your page. Its very simple and easy.
click here to see the example.
Twitter; now-a-days, is the most familiar term in the web. Different kinds of people use ‘twitter’ for different purpose. Some people use to stay connected with friends while other use it to share new ideas and innovations. It is so popular that the news which we cannot get on the television and radios can be seen in the twitter. We also may want to put our twitter updates on our webpage.
For this, Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little Javascript widget which automatically uses this API and returns simple HTML of your recent tweets.
Here are some simple steps for this.
First logon to your Twitter account and go to your homepage. Click the “Goodies” which is at the bottom of your twitter page like given below.
Then you will see the following page and click on the “Widgets”
After this you will see the following window. Click on the “My Website”. And then click on the “Profile Widget” to display your personal tweets.
After this you will see a window where you can Customize Your Profile Widget.You can add the username of the account which you want to show tweet in your webpage then set the preference ,appearance and dimension of the profile widget which will appear in page.
You can test the script by clicking the test settings.If you are fine with the testing result then click on the bottom ” Finish & Grab Code” and finally you will see the script,copy that script and paste it in the div of your page where you want to show your twitter updates .
Example:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter Page</title>
</head>
<body>
< -- script copied from the twitter --->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('rabishrestha').start();
</script>
</body>
</html>click here to try it yourself
Note: Make sure that your twitter account has public status. If you want to change your status on twitter account, click on the setting link and unchecked the bottom “protect my tweets”.
