ONLINE DRIVERS MEDIA: website

Showing posts with label website. Show all posts

Saturday, April 30, 2016

How to Add Facebook Like box on Website or Blog

If you have a Facebook fan page or an official Facebook page of your blog or website, then you can place it in your site. Certainly this will ease your interaction with visitors or fans. Another issue you should keep in mind that it is also a part of SEO. Placing a like box may attract visitors to visit your site!

Earlier I wrote about how to create a pop out like box in your site. And also discussed how to create Facebook fan page. Remember: You must have a fan page to create a Facebook Like Box. If you dont know please read this first:

How to Create Facebook Fan Page

If youre ready then I can start. Read carefully.

To add a like box in your website or blog you have to place two codes in two different places. These are as below:

Code 1: Place this code on your page once, just after the opening <body> tag. If your site already has this code then you dont need to place it again.

<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, script, facebook-jssdk));</script>

Code 2: Place this code on your page wherever you want the plugin to appear on your page.

<div class="fb-like-box" data-href="http://www.facebook.com/markstips" data-width="240" data-height="350" data-show-faces="false" data-stream="false" data-header="false"></div>

You know, the second code is the main code. And the first one is just to help the second one. If your HTML has already the first code then you dont need to paste the code again.

Customization: The Red Parts of Code 2

Name: The word markstips should be replaced with your page name.
Width: Current width is 240. You can increase or decrease.
Height: Current height is 350. Change it if necessary.

Tips: Try to place the second at the footer of your page. It will be helpful to load the site faster. Not only this code, you should place any Java Code at the bottom. If more java codes are placed at the header it will dramatically affect your sites loading time.

Implementing the Code on Blogger:

Code 1: Template > Edit HTML > Proceed > Now find <body tag by pressing Ctrl + F > After few lines paste the code from code 1 above > Save. If you placed any code like it earlier then you dont need to paste again.

Code 2: Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the code from Code 2 above > Save.

Now view your blog or refresh it. You will be able to see this within few seconds. If the server is down, then the like box may delay to appear on your site. Until then, keep waiting.

Advice: If you dont think the like box not important for you, or if you think it consumes your site space then you can try this one: Pop Out Facebook Like Box.

If this code is not working properly, or if you face any problem to implement the code, then try to make the code directly from Facebook Developers.

Tips for Blogger

Stay with Marks PC Solution to get more interesting IT topics!

How to Add StumbleUpon Button in Website or Blog

StumbleUpon is a very popular bookmarking site. If you stumble your blog or website or if the reader of your site do it, then definitely youll get a traffic boost. This site is very helpful to drive traffic on your blog.

But nobody like to stumble your page by copying link from your site and paste it into StumbleUpon.com. And this is not logical too.

So what should you do? You can place a html code in your page. So that you or someone else can easily stumble your posts. It is as easy as placing a html code. Lets try.

If your blog is powered by blogger then sign in to it. Then go to the design option. Then hit on layout button. Now youll find several Add a Gadget button. Hit a button where you wanna place the stumble upon button. (If your site is powered by WordPress or any other CMS then follow the steps that let you add the html code on your page.)
Then youll see a list of gadgets to be placed on your blog. Choose HTML/ Java Script.
Here youll find two boxes. One is for name and another is for content. Dont write any name of this gadget. Just copy and paste the below code in the content box.
Now save this window and then hit on Save Arrangement button.
Then click on View Blog button and see the result.

<su:badge layout="5"></su:badge> <script type="text/javascript">
(function() { var li = document.createElement(script);
li.type = text/javascript; li.async = true; li.src = window.location.
protocol + //platform.stumbleupon.com/1/widgets.js; var s
= document.getElementsByTagName(script)[0]; s.parentNode.
insertBefore(li, s); })(); </script>

This code will create a button like below:

Stay with Marks PC Solution to get more interesting IT topics!

Monetize your Blog or Website with YllixMedia!

Monetize your blog or website using Yllix Media

Undoubtedly AdSense is the best way to monetize a blog or website. But any time you may lose your AdSense Account. And many blogger even cant get AdSense Ads on their sites. There are many rules and regulations for AdSense sites. Read more here:

Guidelines before and after Getting AdSense!

If your AdSense account is disapproved or if you cant get approved by AdSense there are many different sites from which you can get Ads and thus monetize your site. Today Im gonna share such an Ad Site with you. Look at the banner below:

The name of this site is Yllix Media. If youre the owner of a blog or website you can register in this site and show ads in your site.

Lets start. First, click on the above banner and register by your email. You will receive a confirmation mail. Confirm it. Then follow the steps below:

1. Add your Site: After registering, your first task is to add your site. You will see a tab named Sites. Click on it and enter your Sites Title, Home page URL and choose your category. Then hit on Add site button. I suggest you to select a category from Non-Adult category.

2. Ad Tags: Here you will find different types of Ads. Choose Banner Ad. Select Non Adult from Rating, choose a proper format, select no from Display layer Ads. Now click on Get Ad
Tag. You will get an Ad Code. Place it in your site. You can use at most 3 Ads in a page.

Never use any other types of Ads other than Banner Ads.

3. Payment Method: There are 4 types of payment system. Paypal, Payza, Liberty Reserve and Bank Wire. Choose a method that suit you.

Thats all. Now go to the Ad Manager to show Ad Campaign and monitor which ads are clicked by visitors.

Stay with Marks PC Solution to get more interesting IT topics!

If you wanna add a Pop-Out Facebook Like Box in your website or blog, first you must have a Facebook Page. If you already have it then its OK. But if you dont have it, then create a Facebook Page with your FB account.

Many websites or blogs have a Facebook Like box in their pages. But adding a Facebook Like box may consume valuable space. As a result, many people are no longer willing to add it. Pop Out Facebook Like Box may be the solution of this problem.

Im gonna share a small script with you. By this script you can easily add pop out like box in your site. Just place the below code in the header of your page. I believe this simple code should work for all.

And if you use this code on blogger then follow the steps below:

First sign in in your blog and hit on the design button from the top right corner.
Then choose the layout option.
Here youll find several buttons to add a gadget.
You can choose anyone it doesnt matter. Click on Add a Gadget.
Now youll see a list of gadgets. Choose HTML/ JavaScript.
Then copy and paste the below code in the content box > Save > Save arrangement.
Now visit your blog and see the result.

<script
type="text/javascript"
src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"
fbpage=markstips></script>

NB: Replace the red part of the code with your Facebook page name.

Customization: You cant directly customize this code.
Because this code is just a script. The original code is located in the server. If you wanna customize this code then you must upload the original code in your own server. You can download the code from the links below:

1. Code Script.
2. Image 1 and Image 2.

And if you use your own server then replace the script tag with you own server.
I mean- src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"

Stay with Marks PC Solution to get more interesting topics!

How to build a LAMP test website on Ubuntu

You can use a LAMP (Linux, Apache, MySQL, and PHP) test server on Ubuntu to develop a website on your computer before you upload it to a website host. To build a LAMP test website on your Ubuntu PC, you need to install LAMP and KompoZer, access your LAMP test website through root, edit your test website homepage, edit your test website new pages, and then test your website.

Installing LAMP and KompoZer
After installing LAMP and KompoZer, you can build and test a website in your LAMP test server on your Ubuntu PC. To install LAMP and KompoZer, do the following:

Install LAMP according to the instructions in How to Set Up a LAMP Test Server on Ununtu.
Click System, select Administration, click Synaptic Package Manager, and then enter your password to display the Synaptic Package Manager window.
In the Quick search field, type kompozer to display its package.
Select kompozer and then click Apply to install the free KompoZer web-authoring software. Alternatively, you can install Bluefish. However, KompoZer is easier to use.

Accessing Your LAMP Test Website Through Root
Accessing your LAMP test website as a root user lets you add and edit HTML files to expand and modify your test website. To access your LAMP test website, do the following:

Open Ubuntu, click Applications, select Accessories, and then click Terminal to display its window and a "~$" (tilde dollar-sign) prompt.
At the flashing cursor immediately after the "~$" prompt, Type sudo nautilus to run Nautilus and display a root - File Browser window.
Click File System, double-click var, and then double-click www to open it. As shown below, your www folder (your LAMP test website) should initially contain two files: index.html and testing.php.

Initial LAMP Test Website

Note: For information about the testing.php file, see How to Set Up a LAMP Test Server on Ununtu.

Editing Your LAMP Test Website Homepage
Edit you LAMP test website home page according your requirements. For example, your homepage should include hyperlinks to other pages in your test website. This simple example has only a homepage and two other pages.

Access your test website through your root browser according to the section above.
Right-click index.html, select Open with, and then click KompoZer to open it and display your initial homepage.
Type over the first line ("It Works!") with This is Your Test Website Homepage!
Type over the second line with Here is a link to New Page One. Select (highlight) New Page One, click Link to display a Link Properties window, type http://localhost/newpageone.html into the Link Location field, and then click OK to add the hyperlink and close the window.
Add a new line and type Here is a link to New Page Two Select (highlight) New Page Two, click Link to display a Link Properties window, type http://localhost/newpagetwo.html into the Link Location field, and then click OK to add the hyperlink and close the window.
Click File, and then click Save to save your new homepage in your LAMP test website.
Click File; click Save As to display the Save Page As window; in the Name field, type newpageone.html; and then click Save to create your New Page One in your test website.
Click File; click Save As to display the Save Page As window; in the Name field, type newpagetwo.html; and then click Save to create your New Page Two in your test website.
Minimize the KompoZer window to redisplay the root www - File Browser. As shown below, your www folder (your LAMP test website) should now contain four files: index.html, newpageone.html, newpagetwo.html, and testing.php.
Edit your test website new pages according to the section below.

Two New Pages on LAMP Test Website

Editing Your LAMP Test Website New Pages
Edit you LAMP test website new pages according your requirements. In each page, you should include links to Home and other pages in your test website. This simple example has only a homepage and two other pages.

Redisplay the KompoZer window. Click File, click Open File to display the Open HTML File window, select newpageone.html, and then click Open to display the page in a new KompoZer tab.
Type over the first line ("This is Your Test Website Homepage!") with New Page One!
In the second line, type over New Page One with Home. Select (highlight) Home, click Link to display a Link Properties window, type http://localhost/index.html into the Link Location field, and then click OK to edit the hyperlink and close the window.
Click File, click Open File to display the Open HTML File window, select newpagetwo.html, and then click Open to display the page in a new KompoZer tab.
Type over the first line ("This is Your Test Website Homepage!") with New Page Two!
In the second line, type over New Page One with Home. Select (highlight) Home, click Link to display a Link Properties window, type http://localhost/index.html into the Link Location field, and then click OK to edit the hyperlink and close the window.
In the third line, type over New Page Two with New Page One. Select (highlight) New Page One, click Link to display a Link Properties window, type http://localhost/newpageone.html into the Link Location field, and then click OK to edit the hyperlink and close the window.

Testing Your LAMP Test Website
Each time you finish editing any page on your LAMP test website, you should test that page by opening your test website in a web browser, such as Mozilla Firefox. In this simple example, you edited three pages. Therefore, you should test all three pages as follows:

Open your web browser, type http://localhost in its address line, and then press Enter to display your LAMP test website homepage.
Click on the New Page One hyperlink to display your new page one, and then click on the Home hyperlink to display your home page.
Click on the New Page Two hyperlink to display your new page two, and then click on the Home hyperlink to display your home page.
Click on the New Page One hyperlink to display your new page one, and then click on the New Page Two hyperlink to display your new page two.
Click on the New Page One hyperlink to display your new page one, and then click on the New Page Two hyperlink to display your new page two.

Note: If any hyperlinks are not working, edit your homepage and new pages according to the sections above.

Create an Official Facebook Page for Website Person or Place

Facebook Fan Page is a very common way to communicate with public. Almost all major organizations, websites, places or brands have their own Facebook page. You can also create a Facebook page for your business, blog or website. This is very easy and free of cost!

To create a Facebook page go to the link below. Before that make sure youre signed in to your Facebook account.

Create a Page

There are six types:

Local Business or Place
Company, Organization or Institution
Brand or Product
Artist, Band or Public Figure
Entertainment
Cause or Community

Select any of the types which is suitable for you. Then choose your page category and give it a name. Agree with the terms and conditions and hit on Get Started.

Now do the followings:

Set a profile picture
Give a description of it
Set a Facebook address
Enable Ads or Skip it

Now your page is almost ready. Invite your friends to like it. Try to build audience. You will find several options to build audience and to invite friends to like it.

Keep posting for the audience. Post only necessary contents. So that people find it useful. It will help to grow the page quickly. Never abuse it.

Like us on Facebook

Stay with Marks PC Solution to get more interesting IT topics!

Create a Banner of Your Website or Blog for Free !!

This post is very nice and useful for blogger as well as for the person who has a website. This post will guide you to create a banner ad for your site. The steps are very simple and easy. Just follow the instructions below.

First go to this My Banner Maker.
Now youll see different types of banner size.
Choose a size that is suitable for you. I prefer prefer Full Banner (468x 60).
The next is Background. You can choose the color or upload your own image.
Now move to the Text. Enter your sites name and choose the font and size.
Then choose Border and Effect. Dont choose anything that looks odd.
Next is Save. Here you can enter your sites URL and choose what type of banner you need actually.
Now hit on Save The Banner button and choose Continue on Free.
Here youll find a code. Copy and paste the code where you wanna place your banner.

If everything is OK then your banner will look like image above this post.

Stay with Marks PC Solution to get more interesting IT topics!

How to Create Backlinks for Blog or Website

Not getting ideas about what to write. Because last few days I wrote about all the topics I got within last 7 days! No problem. Today we can discuss about creating backlinks - an essential part of SEO.

What is back link actually? Its just your sites link on other sites. Your links maybe on other sites comment, post, link list etc. When other sites have your link on them search engines consider your site as important one.

The sites with higher backlinks get the priority while showing in the search result. But search engines policy change very often. Couple of months ago Google decides to rank the sites best on their contents. That means they said they will consider the quality of the contents of a site.

Whatever the case is you should try to build up links on higher PR sites. And at the same time your content must be good, unique and interesting too.

Now I will talk about few easy ways for creating backlinks. Yeah its simple. But time consuming.

Commenting: You can comment on other sites like blog, website, forum etc with your sites link. Make sure your comment is relevant, useful and attractive.
Creating Accounts: Many websites let their users create an account with their own URL. So when you create web accounts make sure to include your URL there if youve that opportunity.
Posting: There are many websites, blogs and forums where you can write. While writing on other sites try to relate your topic with your sites contents. And try to create link. If your post is popular you will get a good number of visitors as bonus!
Submission: Submit your site in different free submission site. If your sites link is found in those sites it will be considered as backlinks.

These are the main ways to create links or backlinks. There are many other ways. But they are nothing but the variations of the above methods.

Hope you know how to create anchor text. But who dont know follow the system below:

Your Text: Marks PC Solution
Your Link: http://munnamark.blogspot.com
You should write: <a href=http://munnamark.blogspot.com>Marks PC Solution</a>

Above system is for the blog or websites. This is called HTML anchor text. But if youd like to create anchor text for the forum then follow this system:

Your Text: Marks PC Solution
Your Link: http://munnamark.blogspot.com
You should write: [url=http://munnamark.blogspot.com]Marks PC Solution[/url]

This is known as BB code anchor text.

If you can successfully create anchor text you will only see Marks PC Solution. When someone click on it he will be directed to the URL of Marks PC Solution.

Finally, you should know that, backlink is not only important for search engines but also important to drive traffic in your site!

Stay with Marks PC Solution to get more interesting IT topics!

How to Add Twitter Tweet Follow Button on Blog or Website

Social sharing options are great tools to spread your web contents throughout the world. There are many powerful social sites like Facebook, Google, Twitter etc. These sites have their own social sharing buttons. Today I will talk about Twitter Buttons.

In this post youre getting two buttons. The first one is Tweet button which you can use for sharing on Twitter. And the 2nd one is Twitter Follow button. But if you want you can use the two buttons in a single gadget! View the demo below:

Tweet

Follow @markspcsolution

Look at the codes below. There are two codes. The first one is tweet button. And the second one is Follow button. If you wanna use both the two then copy and paste these codes into your HTML. You can place them separately or combined as your wish.

<a class=twitter-share-button data-size=large data-url=http://munnamark.blogspot.com/ data-via=markspcsolution href=https://twitter.com/share>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<a href="https://twitter.com/markspcsolution" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @markspcsolution</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Installing Codes on Blogger:

Blogger > Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the above code(s) > Save > View your blog.

Remember: Notice the red parts of the codes. Replace the URL and twitter username which are marked in the code.

For other websites, you need to copy and paste the above codes in appropriate place. But try to keep this code at the bottom for fast loading of your page.

You can also customize your buttons directly from twitter.

Tips: Always try to place java codes at the end of your site. It will help to load your page faster.

Stay with Marks PC Solution to get more interesting IT topics!

How to Add Flag Counter in Blog or Website

If youve a blog or website then you may need a flag counter to know where do your sites visitors come from? Or how many countries has your blog reached so far?

Today Im gonna share a html code with you. This code will show the total page views of your site with total number of countries, unique visitors per country with flag label. All you need to do is just place an html gadget in your page. Or if youre new, then follow the simple steps below:

If your site is powered by blogger then sign in to your account. Then go to the layout option from the design. Then click on Add a Gadget where you wanna place this flag counter. Or if youre on WordPress or any other CMS system then follow the steps that let you add an HTML code on your site.
Then select HTML/ JavaScript.
Now copy and paste the following HTML code in the box and click save.
Then click on Save Arrangement.
Now visit your site and see the result.

<a href="http://info.flagcounter.com/10OP"><img src="http://s04.flagcounter.com/count/10OP/bg_FFFFFF/
txt_000000/border_CCCCCC/columns_6/maxflags_30/
viewers_Visitor+Counter+by+Flag/labels_1/pageviews_
1/flags_1/" alt="free counters" border="0" /></a>

Customization: You can customize the above code as below.

Number of Column: Notice the red colored (columns_6) text of the code. You can use 2, 3, 5 or more. This number determines how many columns will be displayed for showing flag. Maximum 8 columns can be displayed.
Maximum Flag: Then see the green colored part (maxflags_30). It means what will be the maximum number of flag. You can choose 20, 30, 40 etc. You can choose more than 100. But I prefer below 30. Because choosing more than 30 flag will increase the loading time of your page.
Flag Label: Now move to the purple colored part (labels_1). Labels_1 means it will show the label after the flag image. For example: US, UK, BD, PK etc. But showing label increase the size of the flag counter. If you wanna hide the label then replace the text as labels_0.

If you wanna directly make your own code then visit here.

Stay with Marks PC Solution to get more interesting IT topics!

Bing Translator for Blog Website

Microsoft Translator for Blogs/ Websites

Search engine Bing has a nice translator widget for your blog or website. With this translator, your reader can translate the site in their own languages. Thus your site will get more language coverage. Currently Bing translator supports only 42 languages. See the demo below:

This is how your translator will look like. When someone clicks on the Translate button, translation option will appear. After clicking the down arrow, a drop down list of language will open.

Translator Code

To enable translation for your site, youve to add the following code in your HTML.

<div id=MicrosoftTranslatorWidget class=Dark style=color:white;background-color:#555555></div><script type=text/javascript>setTimeout(function(){{var s=document.createElement(script);s.type=text/javascript;s.charset=UTF-8;s.src=((location && location.href && location.href.indexOf(https) == 0)?https://ssl.microsofttranslator.com:http://www.microsofttranslator.com)+/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=en;var p=document.getElementsByTagName(head)[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>

Copy and paste the above code in your sites HTML where you want this widget appear. This code works with almost any platform.

Customize the Code

You can also customize this code. Look at the green texts.

The first one is Dark. Dark looks fine when your sites background is light. But if your site is dark, then use Light instead of dark.

The next one is Manual. That means someone needs to translate the page manually using the widget. But if you use the word Automatic, then your page will be automatically translated depending on the browser language!

The last one is en. That means your site is in English - en. If your sites language is something else then youve to use the code of that language. For example, ar for Arabic, da for Danish, fr for French. Visit Translator Widget to see the codes for other languages.

You can also change the background color of the widget using the color attribute.

Implementing the Code in Blogger Blog

To use this code with blogger, follow the steps below:

Now go to the Layout option from the left pane.

Choose Add a Gadget from anywhere (I prefer right sidebar).

Select HTML/ JavaScript option.

Now copy and paste the Translator Code in the Content box.

Save the gadget and view your site.

Now when someone will translate your site, it will be translated within a second. And original text will also be displayed if you move your mouse over the text. To back to the original text, you have to cross the translator widget.

ONLINE DRIVERS MEDIA

Saturday, April 30, 2016

How to Add Facebook Like box on Website or Blog

Stay with Marks PC Solution to get more interesting IT topics!

Saturday, April 23, 2016

How to Add StumbleUpon Button in Website or Blog

Stay with Marks PC Solution to get more interesting IT topics!

Friday, April 22, 2016

Monetize your Blog or Website with YllixMedia!

Guidelines before and after Getting AdSense!

Stay with Marks PC Solution to get more interesting IT topics!

How to Add a Pop Out Facebook Like Box in Blog or Website

Stay with Marks PC Solution to get more interesting topics!

Tuesday, April 19, 2016

How to build a LAMP test website on Ubuntu

Friday, March 25, 2016

Create an Official Facebook Page for Website Person or Place

Stay with Marks PC Solution to get more interesting IT topics!

Friday, February 12, 2016

Create a Banner of Your Website or Blog for Free !!

Stay with Marks PC Solution to get more interesting IT topics!

Saturday, February 6, 2016

How to Create Backlinks for Blog or Website

Stay with Marks PC Solution to get more interesting IT topics!

Friday, January 29, 2016

How to Add Twitter Tweet Follow Button on Blog or Website

Stay with Marks PC Solution to get more interesting IT topics!

Thursday, January 14, 2016

How to Add Flag Counter in Blog or Website

Monday, January 4, 2016

Bing Translator for Blog Website

Stay with Marks PC Solution to get more interesting IT topics!