SOHO Network Management

Sunday, May 22, 2011

How to Show if your server is Online or Offline?

One way to try to find out if a server is online is to try and open a socket connection to the server. If the connection fails, one can assume that the server is down (although the problem can be somewhere else too).

Check out this function and read all the user comments:

http://www.php.net/manual/en/function.fsockopen.php

Here's a very simple demonstration of php code:

<?php if (fsockopen('www.yourserver.com', 80)){
echo('The server in online');
} else{
echo('The server in offline'); } ?>

The first parameter is the IP address of the server you want to check (in this case, www.yourserver.com, it could also be something like 111.222.333.444). The 80 is the port number (for HTTP), which can sometimes be different (21 for FTP etc.).

Monday, May 2, 2011

Change newer older post link blogger

Changing Older Post and Newer Post with Next and Previous

Before

After

Follow the steps below:

Log in to blogger with your ID
Click Layout
Click Edit HTML tab
Click “Download Full Template”, please back up first your template (important)
Please check the small box beside Expand Widget Template

Wait for a while until the process finished. Find the following code on your template:

<span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

Look at the code in red printed.
Change the code <data:newerPageTitle/> with the word Next and the code <data:olderPageTitle/> with the word Previous

Click Save Template button
Finished.

Changing Older Post and Newer Post with Icon
To change Older Post and Newer Post with icon, the first step is preparing the icon which you want to use. For example the icons look like this:

Please upload the icons you have to a server that you usually use to place an image, and note the URL address. For example the icons’ URL address as follow:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800

Change the above code into like this:

<img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800' title='Next'/><img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800' title='previous'/><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800' title='home'/>

If you have had the code as above, the next step is to place it on your template code, here are the ways:

Log in to blogger with your ID
Click Layout
Click Edit HTML tab
Click “Download Full Template”, please back up your template first (important)
Please check the small box beside Expand Widget Templates

Your Ad Here

Wait for while until the process finished. Find this code on your template:

<span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

Look at the code in red printed
Change the code <data:newerPageTitle/>, <data:olderPageTitle/>, and <data:homeMsg/> with your icon code. E.g.

<span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfGeNxZD3cg4d1pOvqB6x28s9iAnFGYx6wueYWblVVk_9dgFGol1gAI1UztMb-e2EwFr9_7zML7AIlR7l6-sgTQ6g7yQ4peeaHdhKFR_u9_NgGY0T1InZrvijx43ADQEk1zM68PsHpQ0/?imgmax=800' title='Next'/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEighfFqF_FXvH2lVwop8r7bIV-AUx1MCCi0iPeRdUk4s6L0W3R00RNbdazJL6FpSqI1OTMnv8mvxck55NgAyKI86zf2z_2FPJkX71QSLlV5tpCNR5re7AxJVoL5zzwPLVG-XzyPDxiOHtQ/?imgmax=800' title='previous'/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEaynOq39Wazewf6an5_nAHcuctGJfX8QsyVK2nz7IZbTTDUe1AkH6dH3-4wVbb1HCVIzRZl0CDhZk1-r6HeyoxE344jNIlNO40e9X0tbXdrXMNRF0TCM7ZNaAnyy5W55jhQuQ_hcUeE/?imgmax=800' title='home'/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

Click Save Template button

The example of the result will be like this:

Sunday, May 1, 2011

Back to Top floating blogger widget

“Back To Top” floating image icon at the right side of your blog. You can see this button at right side of my blog. This hack is useful if the website or blog pages are too long. It always maintains the same position and if you click on it, it will take you to the very top of the page. This saves your visitors from an unnecessary hassle of scrolling up.

1. Login in to blogger dashboard

2. Go to Layout

3. Click on Add a Gadget

4. Select Html/Javascript

5. Copy n paste the below code in above opened editor

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghi3dc6GZH8dQR3xwnCIknr_IUGPPtMjyy09Qe0-Gs_IHFfCAGjlZvkyRcG3h8lSCOV-Q2XvjuAOKStIata_IuC74qcEHmhLCyZJl4y72wW1ZetP6cGgRbWAZz0srevWp_t5WEheZsLc/s42/Back-to-top.png" /></a>

Tip:

Add the gadget to the footer
You can change image url with your image.

Friday, April 29, 2011

Change blogger description font size

Go to your blogger Dashboard >>Design>>Edit HTML

Find the code

.Header .description {
font-size: 100%;
}.

Modify the font-size accordingly

Split bloggers header in 2 columns

How to split your template's header into two columns so that you can add your widgets along with your blog's logo. By default, blogger doesn't have any option to split header column into two parts.

Below is the how-to guide.

Go to your blogger Dashboard >>Design>>Edit HTML

Do not tick Expand Widget templates

Search for the following code in your template

`<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/> </b:section>`

Just below the above code, paste the following code

`<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>`

It should look like this

`<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Tweak My Blogger (Header)' type='Header'/> </b:section> <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>`

Now search your template for the following code

`]]></b:skin>`

Add the following code just above ]]></b:skin>

`#header {display:inline-block;_float:left;} #header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;} #header-right .widget {margin:0;} body#layout #header {width: 50%;} body#layout #header-right {width: 50%;}`

Now search your template for

`]]> </b:template-skin>`

and just above that, paste the following code

`#layout #header {width: 50%; float: left;} #layout #header-right {width: 50%; float: right;}`

Last step, SAVE TEMPLATE and then go to page elements to see that your header has been spitted into two columns.

Source and credit : http://www.theinfow.com/2011/03/split-header-into-two-columns-blogger.html

Customize blogger template

Hide post date time author in blogger

This blogger hack is really useful for the ones who want to keep their blog clean in fact very clean by removing all the post date, time and name of author. So if you too belong to the same category then this blogger hack is for you.

First thing first, go to 'layout' and then to 'Edit HTML'. Don't forget to check 'Expand widget templates'.

Hide Post date

To hide the post date, find the code below and delete it.

<data:post.dateHeader/>

Hide Post time

This blogger hack says, to hide post time find the code below and remove it, NOW!

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'

title='permanent link'><abbr class='published'

expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

</b:if>

</span>

Hide Post author

To hide the name of author, why don't you find code below and delete it.

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

</b:if>

</span>

Congratulations, now your post is time, date and author free.

Source and credit : http://thirdworldchaos.blogspot.com/2008/05/blogger-hack-hide-blog-post-date-time.html

Remove HOME link from blogger

Q.How to remove the HOME link at the bottom of blogpost in blogger?

Ans:

Step 1. Click "Edit html" under "design" tab.

Step 2. Check the box "Expand Widget Templates"

Step 3. Find the follwoing line in the html code and delete it.

Remove blogger attribution widget

How to Remove Attribution Widget on Blogger

How to remove attribution on Blogger?

How to remove copyright widget on Blogspot?

How to remove line at the bottom of blog?

If you're using a template by Blogger's Template Designer, most of them have an attribution widget at the bottom of the blog.

Take a look and it's something like this...

You're able to modify only the "Copyright" statement from the widget.

If you want to remove this Attribution widget at Design > Page Elements, you see that it can be edited...

blogger attribution widget

But unlike the other normal widgets, you won't be able to remove the Attribution widget because it doesn't have a "Remove" button.

If you insist on removing the widget, here are the steps to remove the attribution widget on Blogger. It's pretty easy and understandable.

1) First, go to Design > Edit HTML > Tick "Expand Widget Templates". Search for the word "attribution".

2) When you see the Attribution widget code (refer to image above), change the "true" on locked to "false".

3) Go back to Design > Page Elements.

4) Since the lock function is disabled (by changing the code to "false"), it's movable and can be removed as well. Click on "Edit" on the Attribution element.

5) And now with the "Remove" button available, you can finally remove the Attribution widget for good.

Done!

Source and credit : http://simple-blogger-tips.blogspot.com/2011/01/how-to-remove-attribution-widget-on.html

Your Ad Here

Alternative method :

1 Go to Design > Edit HTML.

2 Take a backup: Download a copy of your template: this is a backup - save it somewhere safe, in case things go wrong.

3 Click Expand Widgets, so you can see all the code

4 Find this section in the template:

<b:section class='foot' id='footer-3' showaddelement='no'><b:widget id='Attribution2' locked='true' title='' type='Attribution'><b:includable id='main'> <div class='widget-content' style='text-align: center;'> <b:if cond='data:attribution != ""'> <data:attribution/> </b:if> </div>
<b:include name='quickedit'/> </b:includable></b:widget></b:section>

4 Comment-out the code that displays the Attribution gadget, by putting it inside these characters  so it ends up looking like this

5 Preview the template change, to check that everything is ok. If not, fix the problem

6 Click Save Template

7 As the template tries to save, you will get a warning message:

Warning: Your new template does not include the following widgets:
Attribution
Would you like to keep these widgets on your blog or delete them?
Deleting widgets cannot be undone.

8 If you want to , add an an alternative attribution notice or delete and continue

Hide / Remove new blogger Navbar

To hide the Blogger Navbar :

Step 1 Log in to blogger

Step 2 On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

Step 3 Paste the bold CSS definition in the top of the template code:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}

/* Variable definitions
  ====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
   ...

Sunday, May 22, 2011

Monday, May 2, 2011

Sunday, May 1, 2011

Friday, April 29, 2011

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/></b:section>

<b:section id='header-right' showaddelement='yes'/><div style='clear: both;'/>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Tweak My Blogger (Header)' type='Header'/></b:section><b:section id='header-right' showaddelement='yes'/><div style='clear: both;'/>

]]></b:skin>

#header {display:inline-block;_float:left;}#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}#header-right .widget {margin:0;}body#layout #header {width: 50%;}body#layout #header-right {width: 50%;}

]]> </b:template-skin>

#layout #header {width: 50%; float: left;}#layout #header-right {width: 50%; float: right;}

`<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/> </b:section>`

`<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>`

`<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Tweak My Blogger (Header)' type='Header'/> </b:section> <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>`

`]]></b:skin>`

`#header {display:inline-block;_float:left;} #header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;} #header-right .widget {margin:0;} body#layout #header {width: 50%;} body#layout #header-right {width: 50%;}`

`]]> </b:template-skin>`

`#layout #header {width: 50%; float: left;} #layout #header-right {width: 50%; float: right;}`