Showing posts with label Script and Codes. Show all posts
Showing posts with label Script and Codes. Show all posts

How to add social icons widget on website or blog?

Add stylish social icons widget on your website or blog

Hello, bloggers and web developers! Here, I am going to share a cool social icon widget for your website and blog. This widget is responsive and cool in look. Pure CSS social icon widget for your website's footer and header. So, hope you will like it.

Know here: Responsive Recent Post Widget on Blogger/Blogspot

Add stylish social icons widget on your website or blog, Add stylish social icons widget on your website or blog. Blogspot social icon widget. Wordpress social share icon widget. Free website widgets.

Script code of social icon widget to links your social site pages

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.gvusion-socials-icons{margin:0 0 20px 0}
.gvusion-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}
.gvusion-socials-icons ul li:before{display:none}
.gvusion-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}
.gvusion-socials-icons ul li:hover{opacity:1;}
.secondary-sidebar .gvusion-socials-icons ul li{width:36px;height:36px}
.secondary-sidebar .gvusion-socials-icons ul li a{line-height:45px}
.secondary-sidebar .gvusion-socials-icons ul li a i{font-size:20px}
.gvusion-socials-icons ul li a{line-height:45px;display:block;color:#fff}
.gvusion-socials-icons ul li a:hover{color:#fff}
.gvusion-socials-icons ul li.home{background:#83868a}
.gvusion-socials-icons ul li.facebook{background:#516ca4}
.gvusion-socials-icons ul li.googleplus{background:#f20000}
.gvusion-socials-icons ul li.rss{background:#f29400}
.gvusion-socials-icons ul li.youtube{background:#f20000}
.gvusion-socials-icons ul li.dribbble{background:#dc71a6}
.gvusion-socials-icons ul li.deviantart{background:#4c5e51}
.gvusion-socials-icons ul li.pinterest{background:#f20000}
.gvusion-socials-icons ul li.instgram{background:#406f94}
.gvusion-socials-icons ul li.tumblr{background:#395875}
.gvusion-socials-icons ul li.linkedin{background:#1985bc}
.gvusion-socials-icons ul li.soundcloud{background:#f60}
</style>
<div class="gvusion-socials-icons mom-socials-widget">
<ul>
<li class="facebook"><a href="http://www.facebook.com/mypage" rel="dofollow" target="_blank" title="Follow us on Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="http://www.twitter.com/mypage" rel="dofollow" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="googleplus"><a href="https://plus.google.com/mypage" rel="dofollow" target="_blank" title="Follow us on Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="https://www.instagram.com/mypage" rel="dofollow" target="_blank" title="Follow us on instagram"><i class="fa fa-instagram "></i></a></li>
<li class="youtube"><a href="https://www.youtube.com/channel/mypage" rel="dofollow" target="_blank" title="Follow us on Youtube"><i class="fa fa-youtube "></i></a></li>
<li class="pinterest"><a href="https://www.pinterest.com/mypage" rel="dofollow" target="_blank" title="Follow us on Pinterest"><i class="fa fa-pinterest "></i></a></li>
</ul>
</div>
Also read: Add Social Profile Widget for Blogger

How to setup this social icon widget?

Follow these steps:
1. Replace all the yellow marked text with your own text or page name.
2. The paste this code anywhere you want to show this widget.

If any problem occur. Please comment below in comment box. That problem will be fixed.

Add Social Profile Widget for Blogger

Learn here to add social profile widget for blogger

Simple Profile Widget for Blogger and other Websites

Follow these steps to setup your Add Social Profile Widget for Blogger:

  • Log on www.blogger.com
  • Click on Layout
  • Click on Add a Gadget below the Blog Post
  • Select HTML/JAVASCRIPT
  • Change yellow marked line with your line.
  • Past the code this HTML CODE
  • Click on Save Button.
  • Done.

Edit Code of Add Social Profile Widget for Blogger

 <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-right: auto; margin-left: auto; text-align: center;">
            <tbody>
                <tr>
                    <td style="text-align: center;">
                        <img alt="VISHAL JAISWAL" src="YOUR PROFILE PHOTO URL" style="border-width: 2px; border-style: solid; width: 130px; height: 130px; margin: 2px auto;" title="VISHAL JAISWAL" /></td>
                </tr>
                <tr>
                    <td class="tr-caption" style="text-align: center;">
                        <span style="font-family:verdana,geneva,sans-serif;"><b>VISHAL JAISWAL</b></span></td>
                </tr>
            </tbody>
        </table>
        <p style="text-align: center;">
            <span style="font-family:georgia,serif;"><strong><a href="https://plus.google.com/117128702640940010343">google.com/+ErVKJaiswal</a> </strong></span></p>
        <div style="text-align: center;">
            <span style="font-family: inherit;"><a href="https://plus.google.com/117128702640940010343" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-orig-="" height="30" src="http://2.bp.blogspot.com/-kX9Nb5vsyP4/U1-zhWort_I/AAAAAAAABcA/5CoW_UV0vz8/s1600/Picture4.png" width="30" /></a><a href="https://www.facebook.com/pro.vishal.jaiswal" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-orig-="" height="30" src="http://1.bp.blogspot.com/-1wfab9Z-YdA/U1-zgj57ygI/AAAAAAAABb8/GyB9KCAz5K4/s1600/Picture2.png" width="30" /></a><a href="http://in.linkedin.com/in/vishalkumarjaiswal/" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-orig-="" height="30" src="http://1.bp.blogspot.com/-Sxh74WaK4K8/U1-zgq1GPwI/AAAAAAAABbw/-ieyMQaus94/s1600/Picture1.png" width="30" /></a><a href="http://www.youtube.com/user/vikinspire" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-orig-="" height="30" src="http://1.bp.blogspot.com/-vk-3nO3JgfM/VHbi50abxTI/AAAAAAAACcg/pkpJ9bZHogo/s1600/Youtube_icon.png" width="30" /></a></span></div>
Keywords: profile widget, social profile widget, simple profile widget, cool profile widget, stylish profile widget, free profile widget, profile widget for website, profile widget for Blogger, profile widget for wordpress, profile widget for drupal, profile widget for websites, Add Social Profile Widget for Blogger

Set Profile Widget for Blogger Below the Post

Set Profile Widget below the Blogger Post

Set Profile Widget for Blogger Below the Post
Hello friends, this is Vishal Jaiswal, here is stylish blogger profile widget below the post of your blog. This stylish, new, fast loading and SEO friendly profile widget.

SNAPSHOT OF PROFILE WIDGET

How to set profile widget in your blog:

<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:113px; height:112px; z-index:0">
            <img alt="" border="0" height="112" src="http://PROFILE IMAGE URL" title="" width="113" /></div>
        <div id="text2" style="position:absolute; overflow:hidden; left:120px; top:27px; width:483px; height:90px; z-index:1">
            <div class="wpmd">
                <div align="justify">
                    <font class="ws12" color="#000000" face="@Arial Unicode MS">Vishal Jaiswal (Author) is a professional blogger, he is completed his graduation from </font><font class="ws12" color="#000000" face="@Arial Unicode MS"><b>United College of Engineering and Research</b></font><font class="ws12" color="#000000" face="@Arial Unicode MS">. He is writing blogs from 5 years. He is interested in writing blogs and making websites.</font></div>
            </div>
        </div>
        <div id="text1" style="position:absolute; overflow:hidden; left:117px; top:1px; width:150px; height:27px; z-index:2">
            <div class="wpmd">
                <div>
                    <font class="ws14" color="#000000" face="@Arial Unicode MS"><b><u>About Author</u></b></font></div>
            </div>
        </div>
        <div id="text3" style="position: absolute; overflow: hidden; left: 411px; top: 92px; width: 196px; height: 17px; z-index: 3;">
            <div class="wpmd">
                <div>
                    <font class="ws9" color="#000000" face="@Arial Unicode MS">Profile Widget By : </font><font class="ws9" face="@Arial Unicode MS"><a href="http://www.vikinspire.blogspot.com" title="">Vikinspire</a></font></div>
            </div>
        </div>

Follow these steps to setup your Google Plus Follower widget to Blogger:

  • Log on www.blogger.com
  • Click on Layout
  • Click on Add a Gadget below the Blog Post
  • Select HTML/JAVASCRIPT
  • Change yellow marked line with your line.
  • Past the code this HTML CODE
  • Click on Save Button.
  • Done.

Keywords: profile widget, profile widget for blogger, profile widget for blog post, profile widget below blogger post, set profile widget below blogger post, how to set profile widget on blog, good looking profile widget, awesome profile widget, cool profile widget, stylish profile widget, best profile widget, SEO profile widget, free profile widget.

First Step to Create a Database for your Website

Learn here in details about Database creation for your website

Hello friends, with database management systems, you need to create your tables before you can enter data. Just as you can create a database programmatically, you can create your tables programmatically too. 

Database Table Program

The following is an example of creating a new table. Note that we are specifying the name of the table, the name of each column, and the data type of each column. More parameters can be added to this example if your requirements are more specific.
Copy to Clipboard
CREATE TABLE Individual
(IndividualId int,
FirstName Varchar(255),
LastName Varchar(255),
DateCreated dateTime
)

User Interface

Database management systems usually have a "Design View" for creating tables. Design view enables you to create the names of each column, specify the type of data that can go into each column, as well as specifying any other restrictions you'd like to enforce. Restricting the data type for each column is very important and helps maintain data integrity. For example, it can prevent us from accidentally entering an email address into a field for storing the current date.
More parameters can be added against each column if you require them. For example, you could specify a default value to be used (in case the field has been left blank by the user).

When you create a table via the user interface (or design view), depending on which database system you use, you should see something like this:
Once you've created your table in "design view", you can switch to "datasheet view" to see the resulting table. You should see something like this:
OK, so this is a blank table - it doesn't have any data yet. What we have is a table that contains the columns required before we can enter any data.
So, now that we have a blank table, let's look at how to add data.