Sunday, September 28, 2014

How to bounce an object with animated effect in css3

 Hi friends, hope you are doing well. I am busy with my work so I can't post here regularly. Today I will teach you how to make an animated effect to an object, text or an image that bounces from left side of the page. In this tutorial I have used CSS3 styles to make animated effect to an image. In my latest project I came across a requirement where the logo (black and white) of the website must bounce from leftside and it stops at some point. There the image should be turned into it's original color. For this I have used JQuery. But I'm not giving you the whole code for the above requirement. Here I want to discuss only about the animated effect to bounce an object. Since I have used CSS3 it will be more effective than JQuery.

Demo:

Tricks Town 

 Look at the below code.
CSS3 code for animation effect:
<style>
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

</style>

How to use this in HTML?
Look below HTML demo code that shows how to use the CSS classes in HTML.
HTML:
<a href="http://www.trickstown.com/" title="Home Page" target="_blank">
                            <img src="http://2.bp.blogspot.com/-ZYPmsFLx1jo/Uu5OGSOoHzI/AAAAAAAAF1U/2CJN_nFHkwI/s1600/trickstown.png" alt="Tricks Town" class="animated bounceInLeft" />
</a>
Use  class="animated bounceInLeft" in your HTML where ever you need the animation effect.

Ask your queries if any.

Demo:

Tricks Town

0 comments:

Saturday, July 5, 2014

CSS3 social sharing buttons with fading effect and tooltip on hover

css3_social_sharing_buttons0I have discussed about making a sticky menu bar at bottom of blogger footer. I have given you how to put social sharing buttons in that menu bar. In today’s tutorial I will show you how to make social sharing widget that will show fading effect with tooltips when mouse over.
These social sharing buttons are very good looking and suits all blogger themes. You can use these buttons for your blogger blog to share your blog posts directly on social sites. Social sharing helps you very much for your SEO. Users can directly share your content links on social sites and it will gain you more readers to your blog.

How these social buttons look like?

Look at the below images for how this widget looks.
Normally when you apply this widget to your blog it looks like the following image.
 css3_social_sharing_buttons After applying this widget when you over the mouse on the widget then it looks like the following image.
css3_social_sharing_buttons1
Do you like this widget? Then why don’t you add it to your blog? Grab the code below and follow the steps to install this widget on your blog.
  1. Go to blogger >Template
  2. Back up your template before editing (important)
  3. Go to Edit HTML.
 Now search for ]]></b:skin>. Just above ]]></b:skin> paste the below code.

    /* SOCIAL ICONS - GENERAL */
    .trickstownsocial { list-style:none; margin:30px auto; width:464px; }
    .trickstownsocial li { display:inline; float:left; background-repeat:no-repeat; }
    .trickstownsocial li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    .trickstownsocial li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
    -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    li.trickstowndelicious { background-image:url("http://1.bp.blogspot.com/-r9GCcESrmZE/UOPjzHUPBxI/AAAAAAAAE1U/8DLNnBB33MM/s1600/delicious.png"); }
    li.trickstowndigg { background-image:url("http://1.bp.blogspot.com/-5mspUW5F9TI/UOPj2HzwLxI/AAAAAAAAE1c/NuYIs3IeTSg/s1600/digg.png"); }
    li.trickstownfacebook { background-image:url("http://3.bp.blogspot.com/-NBREMcgJgPo/UOPj5tyYweI/AAAAAAAAE1k/Wb5bnpg84NU/s1600/facebook.png"); }
    li.trickstownflickr { background-image:url("http://4.bp.blogspot.com/-2bb6UmTsZJc/UOPj8wPU1tI/AAAAAAAAE1s/6IizY3fn_5A/s1600/flickr.png"); }
    li.trickstownlinkedin { background-image:url("http://4.bp.blogspot.com/-eALRey2GJ8w/UOPkHJFN_mI/AAAAAAAAE10/5zuacjH0XFw/s1600/linkedin.png"); }
    li.trickstownreddit { background-image:url("http://4.bp.blogspot.com/-89qB-dj1b44/UOPkOHHNrCI/AAAAAAAAE18/TCrPRsZz-60/s1600/reddit.png"); }
    li.trickstownrss { background-image:url("http://4.bp.blogspot.com/-bjJPfIVepFY/UOPkR6KuPII/AAAAAAAAE2E/RlmaB0c9RTc/s1600/rss.png"); }
    li.trickstowntwitter { background-image:url("http://3.bp.blogspot.com/-1Rxjxyu0rK0/UOPkUyltCSI/AAAAAAAAE2M/L3MtfMQ4jak/s1600/twitter.png"); }

    /* SOCIAL ICONS - CSS3 */
    #trickstownshare:hover li { opacity:0.2; }

    #trickstownshare li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #trickstownshare li a strong { opacity:0;
    -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
    -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

    #trickstownshare li:hover { opacity:1; }
    #trickstownshare li:hover a strong { opacity:1; top:-10px; }
Search for <b:if cond='data:blog.pageType == &quot;item&quot;'> and paste the below code between   <b:if cond='data:blog.pageType == &quot;item&quot;'> and     </b:if>

     <!-- trickstownsocial Media Buttons - CSS3 -->
            <ul class="trickstownsocial" id="trickstownshare">
                <li class="trickstowndelicious">
                    <a href="http://www.delicious.com/"><strong>Delicious</strong></a>
                </li>
                <li class="trickstowndigg">
                    <a href="http://digg.com/"><strong>Digg</strong></a>
                </li>
                <li class="trickstownfacebook">
                    <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
                </li>
                <li class="trickstownflickr">
                    <a href="http://www.flickr.com/"><strong>Flickr</strong></a>
                </li>
                <li class="trickstownlinkedin">
                    <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
                </li>
                <li class="trickstownreddit">
                    <a href="http://www.reddit.com/"><strong>Reddit</strong></a>
                </li>
                <li class="trickstownrss">
                    <a href="http://feeds2.feedburner.com/"><strong>RSS</strong></a>
                </li>
                <li class="trickstowntwitter">
                    <a href="http://twitter.com/"><strong>Twitter</strong></a>
                </li>
            </ul>
            <!-- /trickstownsocial Media Buttons - CSS3 -->



0 comments:

Saturday, June 7, 2014

How to send activation link to email on user registration in PHP (Email verification)

During user registration in order to verify the email address of the user, a confirmation email is sent to the provided email address with activation link and when user clicks the link provided in the mail, his account gets activated. If you are looking for such PHP code. Then read this tutorial carefully.

This is a basic code to implement email verification using PHP and MySQL. In this code I have shown how to get a link to user email. The link actually contains an id which is stored in the database for each user. Here we use PHP mail() function to send an email to the user after registration.
You may also read:

PHP contact form using mail function using JQuery toggle. 

Beautiful contact form in PHP. 

Here is the MySQL query to create users table with five columns id, name, email, password and status. We are using the first column "id" in activation link and status contains whether the user has been activated or not.
Dump the below sql code into your MySql database.
CREATE TABLE IF NOT EXISTS `users` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(70) NOT NULL,
  `status` int(11) NOT NULL DEFAULT '0',
   PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Follow the below given steps.
Step 1. Look How to connect MySql database using PHP and copy the full PHP code from the block and save the file as db.php.

Step 2. Copy the below code and save it as register.php
<form action="" method="post" >
    <label>Name</label>
    <input type="text" name="name" >
    <label>Email</label>
    <input type="text" name="email">
    <label>Password</label>
    <input type="password" name="pwd" id="pwd">
    <input type="submit" name="submit" value="Register">
</form>
<?php
        require_once("db.php");
          if(isset($_POST['submit']))
          {
              $email = $_POST['remail'];
              $check = mysql_query("SELECT email FROM users where email='$email'");
              $num_rows = mysql_num_rows($check);
              if($num_rows > 0)
              {
                  echo "<script>alert('Email Already in Use. Please Choose another Email')</script>";
              }
              else
              {
                  $name = $_POST['name'];
                  $email = $_POST['email'];
                  $pwd = $_POST['pwd'];
                                   
                  $insert = mysql_query("INSERT INTO users(name,email,password) VALUES('$name','$email','$pwd')");
                $id = mysql_insert_id($conn);    //gets the last inserted id       
                $message = "<html>
                <head></head>
                <body>
                <p>Hello ".$name.",</p>
                <p>Your content here</p>
                <p><a href=\"http://DOMAIN-NAME/activate.php?actid=".$id."\">http://DOMAIN-NAME/activate.php?actid=".$id."</a></p>
                </body>
                </html>";
                $from = "your-mail-id"; //Ex: name@domain.com
                $headers ='Reply-To: '. $from . "\r\n" ;
                $headers.='From: '.$from. "\r\n";
                $headers .='X-Mailer: PHP/' . phpversion();
                   $headers .= "MIME-Version: 1.0\r\n";
                $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
                  mail($email, "Activate your account", $message, $headers);
                                   
              }
          }
?>

Step 3. Copy the below code and save it as activate.php
  <?php
            require_once("db.php");
              $activationid = $_GET['actid'];
              $check = mysql_query("SELECT status FROM users where id='$actid'",$api->db);
              $num_rows = mysql_num_rows($check);
            if($num_rows > 0)
              {
                $row = mysql_fetch_array($check);
                $status = $row['status'];
                $query = mysql_query("UPDATE users SET status = 1 where id = $actid",$api->db) or die(mysql_error());
              }
            else { echo "<script>alert(Activation link is not valid.')</script>"; }
      ?>
how to implement email verification system using PHP.
How to send activation link to email PHP
Email verification using PHP
Email verification script
User registration email check verify validate with PHP

0 comments:

Monday, May 26, 2014

How facebook fan page can make you money?



Facebook is most popular social site that helps you to keep in touch with your friends. Facebook has 1,110,000,000 monthly active members. There are 50,000,000 pages on facebook. The average time spent by the members is almost 20 minutes per a visit. So now we have to know the ways to make money with the time that you spend on facebook everyday. You may be using your facebook for fun but you don't know the secret that it can give you pocket money. This is the best way to make money online.

Also Read: How to earn with blogging?


In todays tutorial I want to discuss about making money with facebook pages. Well if you are a student with good following on facebook then it can turn you to earn money. But still it's not so easy as I always say that Hard work pays and No pain, no gain. Follow this in your life and it will surely change your career. And this is the best way where you can start your business without investment.

Read about: How to earn with affiliate marketing?


Keep this point in your mind "Don't look at facebook just only for fun." Because it can make you turn into a businessman. You just need your skills to attract people towards your page.

Just think as a businessman, every business needs advertisement to develop their brand. So here also. Get huge number of likes to your facebook page and I bet you the advisors will approach you for advertising their business or products on your page. This is how you can make money from pages. You can charge the advertisers for publishing their ads on your page. It's a great way to make money.

Here are 3 easy ways to earn money online.


Please comment below if you have anything to share or ask your query. Thank you.

0 comments:

Saturday, May 24, 2014

How Can Students Earn More Money.

students earn money clickmyblog3.blogspot.in

How many of you want to earn money while you study? Isn’t it great to earn money when you study? And it is also hard to earn money.

Everyone looks for short ways to earn money but hard work always pays. You might be heard about many youngsters earning millions a day. Why can’t you be one of them? Think it well, I am sure you will be earning millions if you are dedicated to your work. Nothing is impossible in this world if you try.This might be looking like an ad. It is true, everything lies behind your thoughts. Set your goals to earn money. Don’t waste your time and don’t let your studies go away. Study well and if you have enough time for other activities then just follow this article, you can earn money.

The main problem for students to earn money is “lack of investment”. Read this article on how to earn money without investment in my earlier post. This article is specially for students because students are quick learners and they only have different ideas out of their minds. Students instead of wasting their time on facebook and other sites chatting with friends and doing other activities they need to spend their time in exploring their creativities. You can start earning money through your blogs.

Some people might not having an idea of websites and blogs. They think what the owner of blog can get out of his/her blogs. But bloggers earn money from ads posted on their sites. Adsense is one of the tool used to earn money by bloggers online by placing ads on their sites.

Learn how to earn your blogs, freelancing and some other ways.

Creating apps:

If you have the knowledge of programming then just have a look on creating apps for mobiles. You can make android applications for smart phones for now to earn money from them. Create mobile smart phone apps for android and iOS rather than symbian and blackberry because they have lost their popularity with the evolution of android and iOS. You need to have a good programming knowledge to make apps for mobiles. You can also learn most of the things from the web itself. The only thing that is needed to learn new things is your interest to learn something new. There are some websites that will provide you the information on how to develop apps. You can learn these things from Lynda.com and O'Reilly Media.  You can get everything related to your app development from these websites.

After learning programming you can step into developing an app. The most common thing that comes into mind while starting is what to create. You have to grab an idea to start a project. For this you can search for new ideas on the web or you have think it by yourself. It is better to start with a unique idea. However it is not needed that your idea not should be unique when create a new app for the first time. Because you will experience the working of things. You can think for unique idea once you have created your first app. Don’t think about the popular apps and games that you see. Your app or game doesn’t needed to be a popular one. Because there are several people earning money with simple ideas. And at last I want to say you that your idea might be popular or not but in both cases you will learn something which would be a step towards your successful path.

Isn’t it a good idea to create an app for mobile phones?

Freelance projects:

If you don’t have programming knowledge then look for the projects that best suits for you. There are many freelancing websites you can get them on web. They hire many freelancers to work for them. Freelancing is a best job to find. You can pick up freelance projects to make pocketful of money. Freelancing websites provide all types of works. The only thing that is needed to get a job as a freelancer is show up your skills and confidence in your work. This is the only qualification to work as a freelancer. And now, finding freelance work is hard sometimes, when you don’t have skills to show up on your profile. But you can even try as a freelancer on some websites like Fiverr, Elance etc. You can show your skills and your talents to the world with these sites and get good opportunities in freelancing to start your career.

Learn web development:

With the rapid growth in the Information Technology it is better to learn web development. With the existence of websites and due to the changes in the technology now and upcoming future it is predicted to be growing in the usage of web products. Computers will stay forever in coming future due to the demands of Information Technology industries. So I recommend you to get in touch with web development.

As I discussed in the first point(Creating apps) you can learn web development from online resources. You can use Lynda.com and O'Reilly Media to learn web development or you can search for the things on google. After learning web development you can utilize your skills for thousands of ways in building a great career.

First we need to know how web development helps us in building our career. Just search google how facebook was started. You know how famous facebook is. You also need to know how it was started. Facebook was created by Mark Zuckerberg. He has started this website when he was a student. You can know more about him on searching google. But here you need know how his simple site turned his luck. Today there is no person without an account on facebook who have enough knowledge of internet.

This is only a simple example on how to earn money with web development. Just try it and I am sure that you will earn much. Even Larry Page started a website from scratch and now it is a major and popular search engine called google. Remember that once google was not a perfect search engine and now it earns a lot.

Write Articles on blogs:

I have already discussed on a topic called introduction to blogging. You can get a free blog on blogger or wordpress. If you can afford some amount of money then you can choose premium blogs by hosting your blog on paid hosting sites. As a student you cannot spend money on hosting so I’d recommend you to use free blogging sites.

  1. If you are good at writing, then you should go for writing articles on blogs. You can write your articles on your own blog by creating a blog. To earn from your blog you have to setup ads on your site and they will earn you money. But this will take a longer time to earn. Because you have to gain many viewers to earn more. Getting too many visits to your blog takes much time. So you should take certain steps to get more visits to your site.
  2. If you can’t do the above thing then you can also write your articles to either big article directories, such as EzineArticles, or for blogs that will pay for writing contents. You can search for different blogs which will pay for writing content.

0 comments:

Can Blogging make money/Can I earn from blog?

how_to_earn_money_from_blogs As I was busy with my college life after long back I came back to you with a new post that will explain you about How to make money off your blogs.

We know that today many people are blogging for the sake of enjoyment and some to earn money. Because blogging has opened the doors to earn money by writing content. They earn money by placing ads on their sites. However it’s not so easy to earn through blogs and also not impossible if you have the will to do.

Why it’s so hard to earn from blogs and How can you make it possible to earn easily?

Yes! It’s hard to earn money from blogs when you expect overnight results. You have to stick to blogging if you want to earn from them. No one gets money in a single day/night. Some people might think that we can grow our income very soon through blogging but it’s not so easy. But not so hard if you are a hard worker. Here I have few points to discuss why earning is hard through blogging? Later in the bottom section I will discuss about the possibilities of earning from blogs.

High Competition:

There is a very high competition on web to sustain. If you want to be one of the high earners on blogging, you need to be more effective in your writing skills. You can see there are many bloggers on the web which creates a competition among them. So you need to have the skills that can beat up your competitor. But here you have to remember that you some times you may need the help of your competitor. I will explain this in my future posts.

Work Hard:

Working hard always helps you achieve greater in all aspects, so blogs. Hard working in blogging means you have to stick to your blog. To achieve greatest heights in blogging field you need to ensure that you update your blog frequently with quality content. The readers will increase only when you have the quality content. Quality in your content not only increase your readership but also it helps in achieving SEO. Your blog needs to have the good keywords to increase your page rank for SEO. However, SEO is different from what we are discussing here as this point sticks only to Hard Work that is spending your time and energy on blogging. Don’t expect more when you can’t do more. Because blogging takes hours of work before you see your success. The more work you do, the more money you can expect.

Make your niche to be perfect and clear and don’t divert from that. To get stick with your content blog about the content that you are passionate about.

Gain Followers:

Once you start your blog then start thinking about gaining readers. Gaining more readers or followers is also linked to the last point. Because you can have more chances to get more readership when your work hard to write the best content for your blog.

One more point that you have to remember is be positive. To get more followers you must get involved in blogging communities. Find blogs that are similar to yours and read them regularly. Send and receive emails with other bloggers and your readers. Readers will be happy if you respond to their queries. So keep responding to your readers. Leave comments on other blogs and say thanks to the authors. Participate in blogging communities and be active on all social networks.

Apply for ADSENSE:

After getting huge followers you can apply for google adsense. Google adsense is one of the most powerful ads that yield you high earning rates. But it has many trems and conditions. You need to be approved by the google to get started earning money with adsense.

0 comments:

Friday, May 23, 2014

Top 5 Affiliate Networks to Earn Money

Earn_money_with_affiliate_networks One of the best way to earn money online is affiliate marketing. It helps you in adding some extra money to earn. It also helps you in getting some quality traffic to your blogs when you add content that is related to your product or service that you are selling.
Here are few sites to earn from affiliates:

 

1. E-Junkie

E-junkie is an affiliate network that gives you the ability to buy, sell and automate the process of buying and selling items over the internet. It will provide the technical support and various features like shopping carts and buy options. E-Junkie uses paypal as its payment gateway. So this would be the best option for you if you like to start affiliate business online to start earning money.

2. Commission Junction

The other important affiliate network is the Commission Junction. Commission Junction is one of the leading affiliate networks in the world. This network has been running since 10 years. You can find best and quality products to sale on this network, so this is the best place to start your affiliate business career.

3. Clickbank

Clickbank is one more affiliate network to start your career online. The main goal of clickbank is to sell the digital products like e books, audio and video courses, softwares and much more. You can find more than 20000 products which have been categorized into different types of brands.You will have a good chance to earn up to 40-75% commission through this network.

4. Amazon

Many of them knows about amazon. You can promote and sell almost everything sold by the company. This site is best for those who have e-commerce websites. You can sell products by placing ads on your sites. They will place links or ads on your site just as google adsense. You can also choose those products which you would like to sell.

5. ShareASale

ShareASale is another popular affiliate network. This network allows you to choose more than 2600 affiliates. The products that are mainly sold by these affiliates are mostly related to fashion, sports, web development and IT services. The network is associated with many popular brands such as Keen Footwear, etc. It has been ranked as no.1 affiliate network in the US.
Please comment below and share if you like this article and support this blog.

0 comments:

Saturday, May 3, 2014

Get free likes for your social pages (Facebook Twitter Youtube Google+ Pinterest etc)



 Today every business is using social websites like facebook, twitter, google plus, youtube and many more other sites to promote their businesses. Online business marketing has became one of the most easiest ways to grow. Today we also use social networks to improve traffic to our websites. This is because most of the people are now using facebook, twitter and other websites to connect with their friends. Though twitter is mostly used by celebrities, there is also high demand for twitter by normal people too. Because today people are following these celebs to get latest updates directly from them.

Todays tutorial is about increasing page likes and followers to social networks. Many businesses are paying money to facebook to increase likes by putting ads. Facebook marketing is one of the most preferred marketing strategies today. Here is a website that is providing free likes and followers without paying them anything. Yes, AdLikers provides free likes for your social pages. You don't even have to pay a single penny. You just need to sign up with AdLikers.com and you will get points for that. These points will be further used to increase your followers/likes.

They provide free services for the following.


  • Facebook Likes
  • Google +1
  • Linkedin
  • Pinterest
  • Retweet
  • Soundcloud Followers
  • Stumbleupon
  • Traffic Exchange
  • Twitter Followers
  • Youtube Likes
  • Youtube Views
  • Youtube Subscribers
Go through this link click here and sign up

Search:
  coins, click, earn, facebook, like, google, +1, plus, one, exchange, clicks, twitter, google +1, like exchange, follow exchange, facebook fans, facebook likes, twitter followers, followers, follow, follow me, facebook like, google+1, google +1, google plus one, google plus 1, youtube video views, youtube video hits, youtube views, youtubeviews, more youtube views, youtube videos, website traffic, free website traffic, free followers, free twitter followers, free facebook fans, free facebook likes, free facebook page likes, free likes, free followers, free, website hits, website views, website visits, free website visits, free website views, free website hits, site hits, free site hits, site views, free site views, site visits, free site visits, followers exchange, like exchange, like for a like, like 4 like, follow for a follow, follow 4 follow Get FREE Facebook Page Likes for your Fan Page, YouTube Views, Twitter Followers, Retweets, Website Traffic, more. Increase your Social Presence with LikeVisits

0 comments:

Friday, May 2, 2014

Google maps API to show map after button click using text input value javascript with hide and show

Hi friends, in this tutorial I am going to discuss about Google maps API using javascript. I worked with a project in which a user will add his address and that address needs to be shown in a map. This looks like a complex task but is a very simple task. Google Maps provides an API code to display maps and we are going to use that code here.

How it works?

Google maps API gives the developers to add maps to their projects using the API code that is provided by Google Maps.

In present tutorial I have the code that shows a map after button click. Here we have a input textbox in which we need to give the address of our wish and click the button below the textbox. Then a map of the particular address is displayed at the bottom.

Here the button text changes after the button is clicked. First the button contains "show".
After click the text will be changed as "hide".
That means I have added show/hide to the map area to show/hid the map when the button click event changes.
You can look at the demo below.

Code to show/hide:

    var obj = document.getElementById(unique + "map_area");
    var subm = document.getElementById("subm");
    if (obj.style.display=="none"){
      obj.style.display='block';
      subm.value = 'Hide';
    } else if(obj.style.display=="block"){
      obj.style.display='none';
      subm.value = 'Show';
    }

Google maps API Code:

var map = null;
    var geocoder = null;
    function showAddress(address, unique) {
          if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById(unique + "map_area"));
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
Here is the entire code below. Just copy the below code and save it with any name in .html extension.
Full Code for google map with text box and button having show/hide funtionality.
<html>
  <head>
    <title>Google map TricksTown</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=3" type="text/javascript"></script>
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    function showAddress(address, unique) {
          if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById(unique + "map_area"));
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
    var obj = document.getElementById(unique + "map_area");
    var subm = document.getElementById("subm");
    if (obj.style.display=="none"){
      obj.style.display='block';
      subm.value = 'Hide';
    } else if(obj.style.display=="block"){
      obj.style.display='none';
      subm.value = 'Show';
    }
    }
    </script>
  </head>

  <body>
    <form action="" onsubmit="showAddress(this.address.value, this.unique.value); return false">
     <input type="hidden" name="unique" value="" />
     <input type="text" name="address" value="balajinagar" />
     <div class="view-map" title="View map"><input type="submit" id="subm" value="Show" /></div>
    </form>
    <div id="map_area" style="display:none; width: 615px; height: 200px"></div>

  </body>
</html>

Demo:



0 comments:

Saturday, March 29, 2014

5 best tips for writing good keywords to optimize for SEO

Content is the KING for SEO and keywords play an essential part of SEO. Keywords are nothing but the search terms that people use on various search engines to search the topics related to those keywords. We often spend too much time for optimizing our blog post for search engine. Using effective keywords is a successful part of blog optimization. Search engine crawlers crawl your content and keywords from your blog posts and they tells the search engine about your posts on your blogs. We commonly speak about search engine ranking and this ranking depends upon the content you use in your posts. To get good ranking on search engines, first you need to know How to build good content for search engines?

Here is a clear explanation for SEO below. Read every line without missing anything.

Choose Your Keywords :

When content is the "KING" let's say keywords as "QUEEN". Yes, that's true. As every SEO analyst says that content is the KING of SEO, now let's talk about the QUEEN :p sorry, keywords. Before writing any post you need to check for keywords using any keyword checker tool, and you have to choose strong keywords for your blog posts. I suggest you to use Google AdWords tool for keyword research. You have to look for the competition between those keywords and shortlist some of them. Here you need to select the keywords with less competition because they help you in getting good page rank in search results.

Use Keywords In Your Post Title :

I have already discussed about SEO Title Tag Best Practices.
After deciding the keywords for your blog, the next step is to use those keywords in your blog posts efficiently to make the most out of them. Start with the post title, use your keyword or keyword phrases in your post’s title. Remember post titles stays first to be crawled by search engines, hence use keyword or keyword phrases in your post titles so that they will tell the search engines what exactly the post is about.

You must read these posts also.

SEO Title Tag Best Practices

8 Tips to reduce load time of Blog/Website

5 Idiotic ways you can promote your blog

Improve Traffic by facebook fan page

Optimize your blog post titles for SEO

6 ways to optimize your website/blog for search engines

Use Keywords In Headings And Sub-Headings:

Headings and sub-headings play an important role for SEO. Don't neglect headings in your posts. Write headings in your posts whenever it is necessary. For example when we read something on a newspaper or a website we are mostly satisfied to read the content that is separated by paragraphs with neat sub headings between. We prefer reading the text with sub headings and small paragraphs rather than long paragraphs. Similarly the search engines also look for the same. Don't you think of writing an article with headings and sub headings so that they could attract search engines? Yes, that would be great. So we need to write great content with strong keywords making use of headings. This can be done by <h2> and <h3> tags for headings and sub headings. Don't forget to use keywords within these tags because it will add more benefits to attract search engines.

Use Keywords In Anchor Tag:

We know that anchor tags are used for links. But it is also much good to know that anchor tags will help you for SEO. Try using your keywords within the anchor tags. Search engines mostly prefer anchor tags than simple text. Hence try using your keywords with anchor tags to improve your blog ranking for search engines.

Use Keywords In ALT Tag:

Try using images with alt tags. Search engines don't have the capability of reading an image but it can read alt tags. So to describe the intention of an image we can use alt tags with keywords.

0 comments:

How to get website domains at cheaper rates?

Today every business needs a website to grow in this competitive world. So most of the businesses are getting online with websites. Not only for businesses but also to earn money online bloggers are establishing blogs and running them by writing content that is useful for the readers. I have seen most of them are searching for money earning methods online without any investment and mostly students want to start blogging. If you are a student looking to start a blog at less cost then this trick will help you very much.

You can read more about online money earning methods and blogging

What is a blog?

How to earn money online?

Can I earn from blog?

How Can Students Earn More Money?

Why every freelance worker wants to be a blogger?

5 Idiotic ways you can promote your blog

8 Tips to reduce load time of Blog/Website

Make your own Blank Template for Blogger

The simple way to get a domain at cheaper rates is just go to google and search for cheap domains. You will see the results something like the below image. Just click on the links which are displayed in the top that have offers as shown in the marked part of the below screenshot.
The domain hosting sites like GoDaddy and BigRock ads will be displayed in the results. This can be used to register your domains at cheaper rates. When you go for registering a domain directly from their website then you will not get these offers. Because when you search for domains on google the respective service providers give you the ad links for special offers that contain promo codes. So you can utilize this type of special offers to get domains at cheaper rates.

Thank you. I hope this post might have helped you a lot in choosing a plan to avail domains at cheaper rates. Please share your opinions in the comments below.

0 comments:

Friday, March 28, 2014

How to display preview of image before upload using JQuery

When our application needs to have an option for image uploads we use input tag in a form. The upload process is handled inside a PHP file which we can discuss in future. We have already discussed about hiding an image which is broken. File uploading is very easy but sometimes we even want to preview the image before it is uploaded.

For this purpose we can use JQuery code which will show the image before it is uploaded. Today I am going to discuss about the code which helps you preview the image before upload.
Here is the code for showing image before uploading.

JQuery:

$(document).ready(function(){
    $("#image").change(function(){
        var file = document.getElementById("image").files[0];
        var readImg = new FileReader();
        readImg.readAsDataURL(file);
        readImg.onload = function(e) {
        $('.imagepreview').attr('src',e.target.result).fadeIn();
            }
        })
})

This code uses the advantage of HTML5 attribute. FileReader reads the file, here the file is an image. It fetches the URL of the current image to show up when it is selected through file browser field.

The above code jquery code fetches the image and shows the preview. Below is the HTML code which refers the above jquery code.

HTML:

<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">

Since the above HTML code has no image in the source it displays a broken image, so in order to eliminate the broken image we can use the code for this link to avoid broken images or we can use the following CSS code instead of the code specified in the link. I recommend you to use the CSS code below.

CSS:

.imagepreview{width:500px;
display:none;}

Here are some helpful posts for bloggers and web designers.

Add Google Plus Follower Gadget For Blogger

How to add floating widget to blogger blog

Add awesome sticky footer menu to Blogger with simple HTML

How to trace details of an unknown person with mobile number

Why every freelance worker wants to be a blogger?

Which is the best way to optimize mobile site?

How facebook fan page can make you money?

Separate Contact page in Blogger

How to add Contact Form Widget to blogger Official Plugin

SEO Title Tag Best Practices

How to disable graph search on facebook/trick to remove facebook graph

How to find fake profile pictures on facebook?

Add Facebook Like Button below posts titles (Speed Loading)

How to delete Facebook account permanently?

How to use facebook on slow internet connections

How to delete Google Search History/Cache?

8 Tips to reduce load time of Blog/Website

Xenon Blogger Template Download

3 ways to make money online

5 Idiotic ways you can promote your blog

 

I have given you three blocks of code for image preview. Look below for the complete code after combining all the above blocks of code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview image before upload by TricksTown.com</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#image").change(function(){
        var file = document.getElementById("image").files[0];
        var readImg = new FileReader();
        readImg.readAsDataURL(file);
        readImg.onload = function(e) {
        $('.imagepreview').attr('src',e.target.result).fadeIn();
            }
        })
})
</script>
<style>
.imagepreview{width:500px;
display:none;}
</style>
</head>
<body>
<input name="image" type="file" class="image" id="image"><br/>
<img class="imagepreview" src="">
</body>
</html>

Copy the above code and paste it in your notepad. Save it with .html extension and check it.

Enjoy... :) Happy coding.

Thank you. If you have any doubts, please comment below. Spam comments will be removed.

0 comments:

Thursday, March 27, 2014

How to hide or fix a broken image using jquery

We commonly face a problem with broken images on websites. Our browsers will show a broken image when the link to an image doesn't work or when there is no image. Mostly this problem is faced when you make dynamic websites in which you work on putting a default image for posts. When a user/visitor come across your site having a broken image then he/she may lose interest on your website. So we need to put a small JQuery code so that the broken image disappears. In today's tutorial I want to show you the code for hiding the broken images.

You may like these

Get free likes for your facebook account.

Login script in PHP

Delete file using PHP

Delete Facebook account permanently

Disable graph search on Facebook

Pagination with PHP

Awesome stylish sliding professional contact form for your website

Use facebook on slow internet

How to delete google cache from search

How to scare your friends with simple code


Just look at the code below.
<script>
$(document).ready(function(){
$("img").error(function(){
        $(this).hide();
});   
})
</script>

Copy the above code and paste it above the closing </head> tag. That's it. You are done. is

Explanation:

 $(document).ready(function()) says the function to execute when the page loads.

$("img") finds the img tag.

error(function()) checks if the img tag has any error and executes the function to hide the broken image using $(this).hide();

Here this refers to the current one i.e., the img tag.

Thanks for reading this article. If you have any doubts please don't hesitate to comment below. 

0 comments:

Friday, March 21, 2014

3 ways to make money online

Many of you might have heard about making money online. You might have also seen many advertisements or websites that says they will make you earn huge amounts of money in 10 days or a month working part/full time. They say that all these things happens without any efforts and works done by you.

Be careful with these schemes.

Most of these schemes are fake.

Just think about these questions before you apply for those schemes.

How can you get money without doing any work?

Why most of these Scheme owners ask you to pay some amount?

Is that scheme legal?

Does the company really exist?

After thinking all these points in your mind, let make sure that it is true. If you are sure then go ahead.

What actually people think after reading AD's about these schemes?

This is the good idea to make money quicker.

I have came to the right point now, I will to become rich soon.

My dream is going to be true now.

Making money is everybody's dream. But think twice and act wise.

I'm not saying that all these schemes are fake. There are few legitimate schemes that offer you making money online.

3 ways you can make money online without all these schemes.

As we discussed above that there are fake scheme that fails you to get a good online money earning opportunity. You can earn money online in your own ways legally.

Start a unique website:

Today we have many services that are running online. We cannot figure out a business/service that is out of the web world. But if you think creatively you can get new ideas to start a unique website. Think differently and start a website with which you can start your own business online. You can earn through your websites if it is useful to the people. To be a successful person in making money through your website, first find out what people are looking for and how much you can struggle in helping them by offering your services through your website.


Start blogging to earn:

Blogging is great career for those who can spend their time on writing articles. Even a student can start a blog if he/she has great writing skills. Blogging is the best way to earn money online without any investment of money if you create your blog on a free platform like blogger. There are many ways to earn through blogs. But however you might have a question raising in your mind "Can I earn money from blogs?" Then read this article Can Blogging make money/Can I earn from blog?.
Even though blogging is one of the best platforms to earn handsome money and fame online, it is never so easy if you don't have a perfect planning to maintain your blog. If you are an expert in writing articles and want to start your blog soon then this is the right time to start it. Read this article to know why? Start Blogging in 2013 to Earn Money.

Affiliate Marketing:

The other way to earn money online is by Affiliate marketing. Many people who work online are mostly working with affiliate marketing. The term Affiliate Marketing means selling third party goods or services.
To start your affiliate business read Top 5 Affiliate Networks to Earn Money.
Thanks for reading this article.
If you have any doubts or any ideas to share then please comment below.

Share this article with your friends so that it will help them to get rid of Fake Schemes that say Earn money online.

0 comments:

Friday, March 7, 2014

PHP simple login script

Hi dear friends, we have discussed about deleting a file using PHP script in our previous tutorial. In this tutorial I am going to explain you about login script using PHP. Login is used in applications where a user needs to be authenticated to access an application. This tutorial will give you the basic login form. I have used MySql to connect to the database where the login details are stored.

I have three PHP files where the first file contains the login form, the second contains the process for login form and the third file is the one where you will be redirected after login is successful.

Now let us see these files and let me explain them in detail. Please follow these carefully.

login.php

As I said there are three files. Login.php is the first file that contains login form. Let us see the code for it.

login.php
<!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" lang="te-IN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login</title>
</head>
<body>

<?php  if(@$_REQUEST['msg']=='fail')
 {
 echo"<div style='color:red;'>User name or password invalid.</div>";
 }


?>
<style>
.login_field
{
border:2px solid rgb(168, 168, 168);
border-radius:8px;
box-shadow:1px 0px 9px rgb(110, 110, 110);
color:rgb(153, 153, 153);
font-size:14px;
height:20px;
padding:4px;
}
</style>
<h1>Login</h1>

<form action="login_a.php" method="post" style="clear:both;">
<table>
<tr><td>Email</td><td><input type="text" name="email" id="email" class="login_field"></td>
</tr></br>

<tr><td>Password</td><td><input type="password" name="pwd" id="pwd" class="login_field"></td>
</tr></br>

<tr>
<td><input type="submit" name="login" value="login" onClick="return validate()"></td>
</tr>
</table>
</form>
</body>
</html>
In the above code we have HTML form which is used to fill the email and password. It contains input fields of text and submit button. In the <form> tag you can see action.  It tells the form to perform an action. We have to supply a file name on which the action has to be performed.

Next you can see method  It tells the form whether to POST or GET. There are three form methods POST, GET and REQUEST. Method will send the form values to the file which performs an action.

Name attributes inside input tags are used to get the values in the text boxes.

$_REQUEST['msg']=='fail'  checks whether the get method has the value fail for msg and if it is true then it prints "User name or password invalid". The request method will be executed when the username or password is wrong.

Copy the above code and save it as login.php

Now lets have a look on the second file which performs the action for login.

login_a.php

<?php
session_start();
include "db.php";

 if(isset($_REQUEST['login']))
 {

 $email = $_POST['email'];
 $password = $_POST['pwd'];
 $check = mysql_query("select * from user where email='$email' and password= BINARY '$password'")or die(mysql_error());
 $ret = mysql_fetch_array($check);
 $count = mysql_num_rows($check);

 if($count==1)
{
$_SESSION['id']=$ret['id'];

header('location:index.php');
exit();

}
else
{
header('location:login.php?msg=fail');
exit();
}
 }

?>
The above code session_start(); is a function that starts a session for the login.
include "db.php"; will import the database file. For database connection file please read How to connect mysql database using PHP, copy the code from there and save it as db.php

isset($_REQUEST['login']) checks whether the form has the name login in the submit button. If yes it will fetch the values from the text boxes of the form.

 $check = mysql_query("select * from user where email='$email' and password= BINARY '$password'")or die(mysql_error()); //checks the email and password whether matching or not. and die(mysql_error()) returns a value if it finds any error in the syntax.

$ret = mysql_fetch_array($check); This line fetches the array from the database.

Here is the logic $count = mysql_num_rows($check); counts for the number of rows in the database matching for the current email and password.

We have unique email or usernames for login. So  if($count==1) checks whether the count is equals to 1.

If yes then it creates a session and redirects you to the next page else you will be taken back to the login page with an error message we discussed above.

Copy and save the second block of code as login_a.php

The next and last page after login is index.php

index.php

<?php
session_start();
 $id = $_SESSION['id'];
 if(empty($_SESSION['id']))
 {
 header('location:login.php');
 exit;
 }

?>

<!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" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="css/gallery.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
Welcome
</body>
</html>
As discussed above session_start(); starts a session for this page.

$id = $_SESSION['id']; // session stores id in it.

if(empty($_SESSION['id'])) checks if session expired. If yes the page will be redirected to login.php

Save this code as index.php

The sql for the login script is given below.

CREATE TABLE IF NOT EXISTS `user` (
 

`id` int(5) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
 

`email` varchar(30) NOT NULL,
  `password` varchar(15) NOT NULL,
 

PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1

AUTO_INCREMENT=2 ;

--
-- Dumping data for table `user`
--

INSERT INTO

`user` (`id`, `name`, `email`, `password`) VALUES
(1, '', 'admin@admin.com',

'pass');

Run the sql query in phpmyadmin and set the requires database configuration by copying the db.php from here and login to the application using admin@admin.com as email and pass as password.

Thank you very much. Please feel free to ask your queries below.

Note: Spamming comments will be removed.

0 comments:

Friday, February 21, 2014

How to delete a file using PHP


When I was working with a project with file uploads, I had a thought of deleting those files with php. unlink is used to delete a file from a folder. It takes the file path along with the file name as parameter. This funtion can be simply written as shown below.

unlink("path_to_img/file_name.extension");
For example if you want to delete a text file sample.txt  which inside the folder uploads then you need to use like this unlink("uploads/sample.txt);
You can use the same code to delete any file, just by changing the file extension.

Thank you very much. If you have any doubts just comment below. I'm always happy to help you.

Tags:

How to delete a file using PHP? How to delete a file from a folder using PHP? php code to delete a file

php code to unlink a file. from folder remove file using php .

remove files from folder using php

php script to remove files

php script to delet files

how can i remove file using php

how can i delete a file using php

php delete file

php file delete

php files delete using code

php deletion of a file

file deletion using php

delete an image using php

delete a photo using php

delete photo images with php

php code to delete photos

php photo deleting code

php function to delete photo

php  function to remove images

php function to remove images photos and files

How to delete a file using php

how to delete an image from folder using php

how can i delete photo usnig php


0 comments:

How to connect mysql database using PHP

 We have seen how to fetch youtube videos using simple javascript in our previous tutorial. Today's tutorial is about connecting our database using PHP. Since PHP is a dynamic scripting language and it uses mysql database in the back end to store the data. That means the php file has to be configured to connect the database. This can be done very easily with a simple php code. This tutorial will help you to connect to the database. The database connection needs four parameters to be passed into two functions. mysql_connect() and mysql_select_db() are the two functions to connect to the database.

mysql_connect() function requires three parameters and this function is used to connect to the database. and mysql_select_db() function is used to select the database.

Here is the simple code that you can simply copy and use to connect your database with php.

<?php
$dbhost                            = "localhost"; //host name (usually localhost)
$dbuser                            = "root"; //your database(mysql) user name
$dbpass                            = "database_password"; //your database (mysql) password
$dbname                            = "database_name"; //database name
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname) or die ("Error selecting the database");
?>
Now replace root with your database username database_password with your database password  database_name with your database username. That's it, you are done.

Please don't hesitate to ask your queries. Thank you

0 comments:

Thursday, February 13, 2014

How to fetch youtube video thumbnail title using javascript


 Hi friends, we have discussed about pagination tutorial using PHP and MySql in previous post. In this tutorial I came up with a script to fetch youtube videos on the client side using javascript. Sometimes we need to put video thumbnail and it's title to show as gallery. I worried about fetching videos into my website first. I googled for the code and found youtube API code. Using youtube API we can retrieve upto 50 videos. Youtube API code fetches last 50 videos uploaded by the user through feeds.
Now let me explain you about the javascript code to fetch youtube videos. It contains a small code that fetches the video thumbnails directly from youtube into your site. You just need to put video id into the code. Here in this tutorial I have included CSS styles to give a style to the video thumbnails.

Javascript code with HTML:

<div id="vidC">
<div id="vidThumb">
<script type="text/javascript">
//function to call youtube feeds
  function youtubeFeedCallback(data) {
    var s = '';
   
    s += '<img src="http://i1.ytimg.com/vi/YOUTUBE-VIDEO-ID/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
    s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
    document.write(s);//writes the above values in HTML
  }
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/YOUTUBE-VIDEO-ID?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback"></script>
</div>

 Copy the above code and replace YOUTUBE-VIDEO-ID  with the video ID from youtube.
Ex:
<script type="text/javascript">
//function to call youtube feeds
  function youtubeFeedCallback(data) {
    var s = '';
   
    s += '<img src="http://i1.ytimg.com/vi/mhzyi9nDHFI/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
    s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
    document.write(s);//writes the above values in HTML
  }
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/mhzyi9nDHFI?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback"></script>

If you want to include styles then just copy the below CSS code.
<style>
#vidC {
    width: 282px;
    height: 190px;
    padding: 5px;
    margin-right: 15px;
    background-color: #000000;
    box-shadow:2px 0px 10px #333333;
    margin-bottom: 20px;
    float: left;
}
#vidThumb img{
    width: 282px;
    height: 158px;
    padding: 0;
    border:none;
}
</style>
Put these both blocks of code in a file and save it in HTML. Now the code will fetch the youtube thumbnails along with their titles.
Thank you. Please comment below if you need any help regarding this tutorial.

0 comments: