Add social network share buttons to your blog.

Tuner: Farhad Posted on 1/15/2016 09:15:00 AM 32 comments

Today I will show you how how you add social share button after your blog post title. Before starting the tutorial, you should know about social share button.

What is social share button?

Social share button is a button by which you are able to share your content to social media. This use only one click for sharing content to social media. There are many social media currently in the world. So we add some popular social media for this share button. In this social media share button you will find Facebook, Twitter, Google+, LinkedIN and many other social networks share button.

Why you may add social share button?

This is the main question for this tutorial. Why you should add this button. Everyone want his site may popular. So, you also want this?

By sharing your content to social network, your site rank, site visitor, site worth and many important things will increase.

Now I am telling some reason for adding this button.

1। You will share your content by Only one click.

2। It decrease your time loss.

3। Looking beautiful.

4। All social network share button in one place.

5। Imporve site's beautifulness.

6। Your site will be more popular.

7। Search Engine Optimization (SEO) and many other benifits.

How to add?

At first login to your blogspot dashboard and switch the blog that you want to add social neywork share buttons.

Now move your mind and cursor to Template tab

Now click on Edit HTML button.

Now find bellow code in the box of edit template by Simply pressing ALT+F or blogspot default find option.

</div>

Now enter bellow code after your search result.(after above code)

Now save your template by hitting Save Template.

Visit your site any content and you will see the social sharing buttons after your content title.

Visit our new blog - Bangla Hub

Note: Don't edit this code, otherwise it may not work & Keep backup everytime before you edit your template.

Category: Blogspot, Web Development

Create Fancy Tables Using css.

Tuner: Farhad Posted on 10/21/2015 12:41:00 AM 1 comment

Use this code for create fancy table.
Create a file and paste this code. File name must contain .html format.

<!DOCTYPE html> <html> <head> <style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"><tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> <tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table></body> </html>

Output

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France

Category: Css, Web Development

Set the color of the borders by css

Tuner: Farhad Posted on 10/15/2015 06:53:00 PM 5 comments

Hello everybody, how are you? Today I have come with the tutorial about how can you add color in the css border. Some days Ago, I have write a tutorial about making css border. You can view it here.

Set the style of the border by css

In that tutorial we will learn to create deferent css border and in this tutorial we will learn how to set color in border. Okey, now create a file with name border-color.html and paste this code in the file and save the file.

See the code and you will see that, first we create deferent css class for deferent color and then we use it with paragraph- <p> tag.

Now see the output of this code.

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Category: Css, Web Development

Make your own php image resizer tools.

Tuner: Farhad Posted on 10/13/2015 11:35:00 PM 3 comments

Today I am going to share a new php script, by which you can resize your image without croping image. You may know that php is a strong programing language, by using it, you can solve your any problem. Now, Let's start our tutorial.

1st, Create 3 file and 2 folder for this.

3 files

resize.php - the main file of resize image.
index.php - for use resize.php
style.css - The file for design (css)

2 folders

uploads - The folder for your uploaded photo which will be resize
images - The folder for save your resized images.

Open your created resize.php file with any notepad like
notepad++ and paste this code to the file.

<?php
class SimpleImage {
 
   var $image;
   var $image_type;
 
   function load($filename) {
 
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];<br />
      if( $this->image_type == IMAGETYPE_JPEG ) {<br />
 <br />
         $this->image = imagecreatefromjpeg($filename);<br />
      } elseif( $this->image_type == IMAGETYPE_GIF ) {<br />
 <br />
         $this->image = imagecreatefromgif($filename);<br />
      } elseif( $this->image_type == IMAGETYPE_PNG ) {<br />
 <br />
         $this->image = imagecreatefrompng($filename);<br />
      }<br />
   }<br />
   function save($filename, $image_type=IMAGETYPE_PNG, $compression=75, $permissions=null) {<br />
 <br />
      if( $image_type == IMAGETYPE_JPEG ) {<br />
         imagejpeg($this->image,$filename,$compression);<br />
      } elseif( $image_type == IMAGETYPE_GIF ) {<br />
 <br />
         imagegif($this->image,$filename);<br />
      } elseif( $image_type == IMAGETYPE_PNG ) {<br />
 <br />
         imagepng($this->image,$filename);<br />
      }<br />
      if( $permissions != null) {<br />
 <br />
         chmod($filename,$permissions);<br />
      }<br />
      <br />
      <br />
  <br />
   }<br />
   function output($image_type=IMAGETYPE_JPEG) {<br />
 <br />
      if( $image_type == IMAGETYPE_JPEG ) {<br />
         imagejpeg($this->image);<br />
      } elseif( $image_type == IMAGETYPE_GIF ) {<br />
 <br />
         imagegif($this->image);<br />
      } elseif( $image_type == IMAGETYPE_PNG ) {<br />
 <br />
         imagepng($this->image);<br />
      }<br />
   }<br />
   function getWidth() {<br />
 <br />
      return imagesx($this->image);<br />
   }<br />
   function getHeight() {<br />
 <br />
      return imagesy($this->image);<br />
   }<br />
   function resizeToHeight($height) {<br />
 <br />
      $ratio = $height / $this->getHeight();<br />
      $width = $this->getWidth() * $ratio;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function resizeToWidth($width) {<br />
      $ratio = $width / $this->getWidth();<br />
      $height = $this->getheight() * $ratio;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function scale($scale) {<br />
      $width = $this->getWidth() * $scale/100;<br />
      $height = $this->getheight() * $scale/100;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function resize($width,$height) {<br />
      $new_image = imagecreatetruecolor($width, $height);<br />
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());<br />
      $this->image = $new_image;<br />
   }      <br />
 <br />
}<br />
?>

Save this file by CTRL+S.

Now Open your index.php and paste this code and save the file.

<html><br />
    <head><br />
    <link rel="stylesheet" type="text/css" href="style.css"><br />
        <script type='text/javascript'>
            var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
            function Validate(oForm) {
                var arrInputs = oForm.getElementsByTagName("input");
                for (var i = 0; i < arrInputs.length; i++) {
                    var oInput = arrInputs[i];
                    if (oInput.type == "file") {
                        var sFileName = oInput.value;
                        if (sFileName.length > 0) {
                            var blnValid = false;
                            for (var j = 0; j < _validFileExtensions.length; j++) {
                                var sCurExtension = _validFileExtensions[j];
                                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                                    blnValid = true;
                                    break;
                                }
                            }
                            
                            if (!blnValid) {
                                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                                return false;
                            }
                        }
                    }
                }
              
                return true;
            }
            
            function chk()
            {
                var sds = document.getElementById('dum');
                if(sds == null){alert("You are not allowed to remove the copyright tag");
                document.getElementById("search").style.visibility="hidden";
                }
            }
            window.onload=chk;
        </script>
    </head>
    <body>
            <div class='resp_code' align='center' id='search'>
                <form name=fform enctype="multipart/form-data" method=POST action="index.php" class='frms noborders' onsubmit='return Validate(this);'>
                    <h3>Upload your Image <= 500 KB below:</h3>
                    <input type=file name="userfile" size=40 accept="image/*" required="required"><br /> 
                          <label>Width:</label>  <input name="max_width_box" type="text" id="max_width_box" value="300" size="4" style='width:15%;'>  
                                    
                          <label>Height:</label>  <input name="max_height_box" type="text" id="max_height_box" value="300" size="4" style='width:15%;'><br>
                        <input type="submit" name="submit" value="Upload image" />
                        <span id='dumdiv' align='center' style='font-size: 10px;color: #dadada;'>
                        <a id='dum' style='padding-right:0px; text-decoration:none;color: green;text-align:center;' href='https://www.ftwebbd.blogspot.com'>© Ft Web BD</a>
                      </span>
                        <input type="hidden" name="max_file_size" value="500000">
                </form>           
<?php
error_reporting(0);
  if(isset($_POST[max_file_size]))
  {  
  $uploaddir = 'uploads/';
  $filename=$_FILES['userfile']['name'];
  $uploadfile = $uploaddir.basename($_FILES['userfile']['tmp_name']);
  if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile))
  {
  $x=basename($_FILES['userfile']['tmp_name']);
  $aa = 'uploads/'.$x;
  $t=basename($_FILES['userfile']['type']); 
   include('image-resize.php');  
   $widthim = $_POST['max_width_box'];
   $heightim = $_POST['max_height_box'];
   $tmp_name = $x.".".$t;
   $image = new SimpleImage();
   $image->load($aa);
   $image->resize($widthim,$heightim);
   $image->save("images/$x");
   echo "<img src='images/$x'/>";
  }
  else
  {      
  ?>
   <script language=javascript> 
   alert("Upload ONLY IMAGES <= 500 KB");
   </script>
   <?php
  }
  }
  ?>
            </div>    </body>
</html>

Our job tutorial complete. But is the script looking ugly? No problem, Paste this css code in your created style.css

body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 color: #333333;
 font-size: 12px;
}

.upload_message_success {
 padding:4px;
 background-color:#009900;
 border:1px solid #006600;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}

.upload_message_error {
 padding:4px;
 background-color:#CE0000;
 border:1px solid #990000;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}
.frms
{
margin:0 auto;
padding:10px;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
-o-border-radius:.3em;
font-family:Tahoma, Geneva, sans-serif;
color:#333;
font-size:.9em;
line-height:1.2em;
}
.frms label {font-size: 1em;
}
.frms input[type="text"],[type="file"]
{
width:99%;
background:#fff;
border:#ddd 1px solid;
border-radius:.35em;
-moz-border-radius:.35em;
-webkit-border-radius:.35em;
-o-border-radius:.35em;
padding:0 .5%;
margin-top:5px;
margin-bottom:15px;
height:35px;
}
.frms input:hover,textarea:hover,select:hover
{
box-shadow:#dae1e5 0px 0px 5px;
-moz-box-shadow:#dae1e5 0px 0px 5px;
-webkit-box-shadow:#dae1e5 0px 0px 5px;
-o-box-shadow:#dae1e5 0px 0px 5px;
}
.frms input:focus,textarea:focus,select:focus
{
-webkit-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
-moz-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
border:#9d9983 1px solid;
}

.resp_code
{
margin:5px 10px 10px 300px;
padding:10px 20px 10px 20px;
font:normal 1em/1.3em Tahoma, Geneva, sans-serif;
color:#333;
background:#f8f8f8;
border:#ddd 1px solid;
border-radius:.25em;
overflow:auto;width:50%;
}
.frms input[type="submit"]
{
 padding:7px 14px;
 font-weight:bold;
 color:#fff;
 cursor:pointer;
 border-radius:.3em;
 -moz-border-radius:.2em;
 -webkit-border-radius:.2em;
 -o-border-radius:.2em;
 margin:10px 0;
 border:none;
}
.frms input[type="submit"]
{
 background:#75ab22;
 border-bottom:#629826 3px solid;
 text-shadow:#396e12 1px 1px 0px;
}
@media screen and (max-width: 480px)
{
.resp_code
{width:auto !important;margin:0px !important;
}
}

It is optional, Now my tutorial is complete.

Note: Remove breaking tag from the code, otherwise it returns a false result.

If you found a little bite of help then don't forget to share this post and promote us.
Thanks for reading and staying with us.

Category: PHP, Web Development

How to create captcha image by php

Tuner: Farhad Posted on 10/12/2015 01:05:00 PM 11 comments

Hello guys, how are you? May god keep better you at this moment. However, We see the captcha varification in many website.

You can create it using php very easily. I have added the php code which will create a captcha image. Let's view the code

Save this code with name "captcha.php". Now run this code in your server. What's you seeing. A box with some text. Now it's time to create the form for use this captcha system.

Create a new file name "index.php" or any name. Paste this code to the file.

Now create another file name "validate.php". This file will use to check the code entered in the form if right or wrong.

Now run the index.php file or other which you create to save the form code.

Now hits bellow share button to share this post with your friends.

Category: PHP, Web Development

[CSS] Set the style of the borders

Tuner: Farhad Posted on 10/08/2015 12:13:00 PM 4 comments

You can add deferent borders in text. Just follow the tutorial. paste this code to your html file and see your output.

Output

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

Category: Css, Web Development

Check your website speed

Tuner: Farhad Posted on 10/07/2015 12:44:00 PM 2 comments

Hi, buddy.
I just tested http://ftwebbd.blogspot.com with the Full
Page Test in Pingdom Tools.

This specific test was done on October 7 at 12:18:45 from Dallas, Texas, USA. The web page took 449 mili second to
load, used 46 requests, and weighed in at 738.9 kB.

The Google Page Speed performance grade for this web page is 89/100 (excellent).

There’s a ton of more information you can check out here: http://fpt.pingdom.com#!/cqg2Nl/http://
ftwebbd.blogspot.com

I think it shows that the web page is fast as lightning. Cheers!

I think you will not believe this messege so I added the screenshot. I have checked this from my mobile phone.

This is my website's (Ft Web BD) page speed checker email. There are too many tools in internet to check your website speed. We know that, website speed is a good factor for google ranks and any other rank. So check your website speed everyday and work to increase speed if it's slow. Check this tutorial to increase your website speed.

8 Tips for Improving Your Site Speed

Today I am going to share you a tools that is the best tool for speed check. This is Pingdom. It's very simple to use. Go to pingdom and paste your website link in the box and hit Test. Now you you see your website speed. You can share it to your Twitter, Facebook and Email. Now enjoy.

Category: Web Development

10 special use and tricks of .htaccess

Tuner: Farhad Posted on 10/04/2015 01:23:00 PM Leave a comment

.htccess or hyper-text access to the configuration file is a powerful tool. It's specialty is anybody can edit it easily and use. Today we will see the use of this powerful tool.

Stop Hotlink

Is there anybody who consume your bandwidth by using your uploaded image? Then you can add this code to
.htaccess file.

Options +FollowSymlinks
#Protect against hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?domainname.com/ [nc]
RewriteRule .*.(gif|jpg|png)$ http://yourdomainname.com/img/stop_stealing_bandwidth.gif[nc]

Protect your site from bad bot
some hacking tools when use bot to crowling, scaning your site then you can stop them by adding this code to your .htaccess file.

#Block bad bots
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL
[NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage
[NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer
[NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit
[NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]
Order Allow,Deny
Allow from all
Deny from env=bad_bot

Block specific IP
when you see that a specific ip used to hack or spaming to your website then you can block that ip by add this code to .htaccess file.

allow from all
deny from 145.186.14.102
deny from 124.15

here replace your targeted ip by 145.186.14.102 and then it will be blocked.

Redirect to 401, 403, 404, 503 etc error page.
You can redirect your visitor to this error page when they input the url which doesn't exist in your website.

ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

Here we store our error page in the error directory. you should replace this with your own directory.

Protect any specific file
you need to protect your configuration file for your security.

#Protect the your-file-name-with-extension File
order allow,deny
deny from all

Here replace your file name with your-file-name-with-extension.(must include extension)

Protect any file or directory with password.
To protect file with password you can use this code

password-protect a file
AuthType Basic
AuthName "Prompt"
AuthUserFile /home/path/.htpasswd
Require valid-user
# password-protect a directory
resides
AuthType basic
AuthName "This directory is protected"
AuthUserFile /home/path/.htpasswd
AuthGroupFile /dev/null
Require valid-user

Make your site super fast by compressing content to gzip.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css
application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Remove extension from link

If your site have a page named page.php
and it will load by http://yoursite.com/page.php. but you can remove this .php
extension by adding this code to your .htaccess and then it will http://yoursite.com/page

RewriteRule ^(([^/]+/)*[^.]+)$ /$1.php [L]

You can also remove .html by this code. simply remove .php and add .html

Remove category from url
Say, your site have a category called downloads. Then you can access this directory by /category/downloads. But now, you want to remove this category tag from url. You can do it by adding this code to .htaccess file.

RewriteRule ^category/(.+)$ http://www.YourSite.com/$1 [R=301,L]

Change wordpress default feeds to feedburner.

#Redirect wordpress content feeds to
feedburner
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !
FeedBurner [NC]
RewriteCond %{HTTP_USER_AGENT} !
FeedValidator [NC]
RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://feeds.feedburner.com/yourfeedhere [R=302,NC,L]

Category: Tips and Tricks, Web Development

Highlight admin comment in blogspot differently.

Tuner: Farhad Posted on 10/02/2015 11:40:00 PM 18 comments

Hey guys, how are you? Hope you are fine and pray to God to stay fine whole life. Today I have come to share a blogspot tricks that will help you to highlight admin comment differently. This will help your user to find admin comment easily.

How can you add this to your blog?

First login your blogger account and switch your blog from blog list. Now go to Template and backup your template for security. Now click EDIT HTML.

In a word follow this Blogger → Template → EDIT HTML.

Now search </body> by Ctrl+F from your keyboard and paste bellow code before of </body> tag.

Now save your template and view your blog's admin comment or your comment(as you are the admin). If face any problem then drop them in comment box.

Category: Blogspot, Css, Web Development

Make HTML CSS photo gallery

Tuner: Farhad Posted on 10/02/2015 08:07:00 AM 1 comment

Css and HTML is very important if you want to make photo gallery. Today, I will show you how you can make a photo gallery using html and css.
First, make style(css) for our photo gallery.

Now it's time to use html to create gallery using html.

You can add javascript to welcome user. Now our full photo gallery code is

Then your photo gallery will look like this

Category: Css, html, Web Development

How to create a tooltip using CSS without jQuery.

Tuner: Farhad Posted on 10/01/2015 06:02:00 PM Leave a comment

Tooltip is a great way to show your user more information by simply hovering over an image or text. They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site.

Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.

Let’s start creating some simple markup for the link. We need to give it a title which will be the tooltip content, and assign it a class.

The next step is to create some styles for
our tooltip class.

We are now displaying our tooltip inline with our link using relative position. Next we want to create a rounded box to form the body of the tooltip, and position it so that it floats above the link:

We are using the :hover selector which selects an element, in this case our link, on mouseover and the :after selector, which inserts content after the selected element. We have specified a black background with 80% opacity and for browsers that do not support RGBA colors we have provided a dark grey background. Slightly rounded corners are created by using the border-radius attribute and we have set the text color to white.

Lastly, we have positioned the tooltip box from the left of the link and added a little padding. As well as the styling and positioning, we have set the content property:

This property allows us to insert the content we want which can be a string, a media file or an attribute of the element. In this case we are using the title attribute of
the link. Now when you hover over your link a tooltip should be appear above it with the text you set as your link title. We have one problem though, the title information is being shown twice: once in the tooltip and once by the browser. To fix this we need to make a slight change to our HTML:

What we’ve done here is wrap the link text in a span tag with its own title attribute. Now the browser will display the title set in the span tag when the link is hovered over.

To finish we will add an arrow to the bottom of the tooltip, to give it that little extra touch of style. We do this by using the :before selector and some border styles:

We are using a few border hacks here to create the effect of an arrow. setting the border colors on the left and right to transparent and controlling the border widths. We’ve also positioned the arrow so it sits on the bottom of the tooltip box. And there you have it, a simple tooltip with the title tag of the element hovered over. You could also use this for image alt tags, or even just put your own text into the CSS to pop up where you want.

Category: Css, Web Development

Html Fraction tutorial

Tuner: Farhad Posted on 9/29/2015 09:45:00 PM Leave a comment

If you want to write fraction than you can write it easily but in html you have to set this for use. I have added the code bellow. If the client does not support CSS it will be rendered as plain text, still readable as a fraction.

Preview:
^tanA_tanB

The middle <span> serves only for the clients who do not render CSS - the text is still readable as something/something - and that's why you should place a space between the
integer and the fraction. You may want to change the font-size, because the resulting element may be a little taller than the other characters in the line, or you may want to use a relative position to shift it a little to the bottom. But the general idea, as presented here, may be enough for the basic use.

Category: html, Web Development

PHP email sending script

Tuner: Farhad Posted on 9/29/2015 08:40:00 AM Leave a comment

Php mail sender script

→ send email what you need.

Php have a function to send email and it is mail()
The strocture is mail(to,subject,messege,from);
Okey, now I start my tutorial. First create a html file and save file with this code.

Create a php file named mail.php and save your file with this code.

Now run your html file and send unlimited email.

Category: PHP, Web Development

Stop Copy paste from your website

Tuner: Farhad Posted on 9/29/2015 07:51:00 AM Leave a comment

Nowadays, some people copy content of our site. The copier, the copy of the computer, right-click (hacker's case is different). So there is no worry, because I will show you today how Right button to your site will be disabled. I think your right button to copy and paste the shortcut to the purchase is disabled. In fact I would disable shortcut to the code will no longer have to fear. It's very easy to work.

Tutorial steps
Wordpress:
Login to your wordpress site। Then go Apearence→Editor. Now open your themesheader.php file। Now update your header file with adding this code before closing head tag. After saving successfull, back to your site and test copy paste.

Blogspot/Blogger:
Login to your blogget site। Then go Template→Edit HTML(Don't forget to backup your template). Now update your template with adding this code before closing head tag. After saving successfull, back to your site and test copy paste.

If you face any problem, then feel free to contact with me.

Category: Tips and Tricks, Web Development

HTML Tables Tutorial

Tuner: Farhad Posted on 9/28/2015 06:50:00 PM Leave a comment

You have seen table in any website mainly sports websites. You can create a table easily by html. There are many tags to show data on table. The primary 3 tags are

table

tr - (table row)

td - (table data)

You can create a table by using these 3 tags(grid system).

A simple Table

Preview

HTML	JS	SQL
CSS	PHP	MySQL

I have used two rows and three column. You can create what your need.

Table header
th tag are used to create table header.
Table with header

Preview

Markup	Programming	Database
HTML	JS	SQL
CSS	PHP	MySQL

See that, there are no border in our table so that it looks ugly. Don't worry. Because there some table attribute to create table beautiful. You can add this code to add border in table.

Table with border

Preview

Markup	Programming	Database
HTML	JS	SQL
CSS	PHP	MySQL

Category: html, Web Development

Html superscript, subscript and delete tutorial

Tuner: Farhad Posted on 9/28/2015 07:58:00 AM 2 comments

HTML → Superscript

Result:
This text is ^{superscripted!}

HTML → Subscript

Result:
This text is _subscripted!
HTML → Delete
You can use del tag to delete any word or line.

Result:
This text is
~~deleted~~

Category: html, Web Development

Create CSS dropdown menu

Tuner: Farhad Posted on 9/28/2015 06:53:00 AM Leave a comment

If you don't know how to create a menu then you can follow this tutorial. Paste the code in a html file. Ex: menu.html

<!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>
<meta http-equiv="Content-Type"
charset=utf-8" />
<title>My Beautiful css menu</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Desktops</a></li>
<li><a href="#">Laptops &
Notebooks</a></li>
<li><a href="#">Components</a>
<ul>
<li><a href="#"> Mice and Trackballs</a></li>
<li><a href="#"> Monitors</a></li>
<li><a href="#"> Printers</a></li>
<li><a href="#"> Scanners</a></li>
<li><a href="#"> Web Cameras</a>
<ul>
<li><a href="#"> Mice and Trackballs</a></li>
<li><a href="#"> Monitors</a></li>
<li><a href="#"> Printers</a></li>
<li><a href="#"> Scanners</a></li>
<li><a href="#"> Web Cameras</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Software</a></li>
</ul>
</div>
</body>
</html>

Now, save the file.

Save the bellow code with name menu.css

.menu {
    background: none repeat scroll 0 0 #1A1A1A;
    display: block;
    height: 40px;
    margin: 0 auto;
    width: 960px;
}
.menu ul{
padding:0;
margin:0;
}
.menu ul li{
float:left;
list-style:none;
position:relative;
width:150px;
}
.menu ul li a{
font-size:14px;
padding:12px 10px;
text-decoration:none;
display:block;
color:#0FF;
background:#000;
}
.menu ul li a:hover{
color:#F00;
background:#666;
}
.menu ul li ul{
top:39px;
width:150px;
left:0;
padding:0;
margin:0;
position:absolute;
display:block;
visibility:hidden;
}
.menu ul li:hover ul{
display:block;
visibility:visible;
}
.menu ul li:hover ul li ul{
display:block;
left:150px;
position:absolute;
width:150px;
top: 0;
padding:0;
margin:0;
visibility:hidden;
}
.menu ul li ul li:hover ul{
display:block;
visibility:visible;
}

And save this file and run your menu.html file.

Category: Css, Web Development

How to protect a php file with password by php

Tuner: Farhad Posted on 9/25/2015 12:18:00 PM Leave a comment

Hello everybody, How are you? EID MUBARAK to all. Today I am going to show you how can you protect a php file by php. If you want the file will only show for you or by entering password, then you can follow the tutorial.

For this work, You must know the basic php. Paste this code in your php file

<?php
$view = header(location: #allcode);
$passMain = yourpasswordhere;
echo "<form method='post' action='#allcode'><input type='password' name='pass'/><input type='submit' value='View file'/></form>";
if($pass==$passMain)
{
echo "$view";
}
else
{
echo "Your password is not correct";
}
?>
<div id="allcode">Your file's all code here</div>

Now save your file and run. Here the $passMain variable contains your main password which will unlock the file. So, change the password with your own.
Good bye and again EID MUBARAK

Category: PHP, Web Development

Random number tutorial in php

Tuner: Farhad Posted on 9/24/2015 07:37:00 AM Leave a comment

There are many use of random number. In php, there are a function to create random number and it is rand();
ex:
<?php
echo rand();
?>
It will output a number and refresh the page it will output deferent number.

You can create many random number by using bellow code:

<?php
echo rand(). "\n";
echo rand(). "\n";
echo rand(). "\n";
echo rand(). "\n";
?>

It will output deferent 4 random number.

If we want to get a number between a range then what can we do? Example, if we want get a number between 15 and 30 then we can use this code
<?php
echo rand(15, 30);
?>

Now We can use this in our project by adding some condition.
Ex:

<?php
$rand = rand(1, 3);
if ($rand == 1){
echo "Generated number is 1";
}else if ($rand == 2){
echo "Generated number is 2";
}else {
echo 'Generated number is 3';
}
?>

Good by and wish you EID MUBARAK.

Category: PHP, Web Development

Remove "Powered by Blogger" from your blogspot blog

Tuner: Farhad Posted on 9/22/2015 08:23:00 PM 297 comments

Hi guys, How are you? Today I am going to share how you can remove Powered by Blogger attribute. Some days ago, I have shared about how to remove it from blogspot blog's mobile version, today I am sharing about main version.

Step 1:

Step 2:
Follow this: Dashboard→Template→ backup your template for restore your template if there occurred any problem.

Step 3:
Now hit Edit Html button and mark "Expand Widget Templates"

Step 4:
Press Ctrl+F in your keyboard and find "attribution" and you will see showaddelement='no' and locked='true' near the attribution.

Step 5:
Now replace showaddelement='no' with showaddelement='yes' and locked='true' with locked='false'

Step 6:
Save your template

Step 7:
Click on layout and select attribution widget and remove this one.

Step 8:
Congratulations, you have successfully remove "Powered by Blogger" text from your blog.

Step 9:
Now hit share button and share with friends. Give your special comment about how the tutorial was.

Visit our new blog - Bangla Hub

Category: Blogspot, Web Development

Ft Web BD

Add social network share buttons to your blog.

What is social share button?

How to add?

Create Fancy Tables Using css.

Set the color of the borders by css

Make your own php image resizer tools.

3 files

2 folders

How to create captcha image by php

[CSS] Set the style of the borders

Check your website speed

10 special use and tricks of .htaccess

Highlight admin comment in blogspot differently.

Make HTML CSS photo gallery

How to create a tooltip using CSS without jQuery.

Html Fraction tutorial

PHP email sending script

Php mail sender script

Stop Copy paste from your website

HTML Tables Tutorial

Html superscript, subscript and delete tutorial

Create CSS dropdown menu

How to protect a php file with password by php

Random number tutorial in php

Remove "Powered by Blogger" from your blogspot blog

Popular Posts

Post Category

Blog Statistics