Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, 31 July 2020

How to Create Float Image

This tutorial is about to create float image that will always show on your corner blog althought you drag side…


To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right. More property values include the following:

Sr.No.
Property Value & Description
1
none

Not floated
2
left

Floats to the left
3
right

Floats to the right
4
initial

Default value

Example

You can try to run the following code to use floating image in HTML. Here’s the usage of float right and float left CSS attribute

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Floating Image</title>
   </head>

<body>
   <h1>Float Right</h1>
   <p>The below image floats to the right.</p>
   <p>
      <img src="https://www.widecoder.com/green/images/logo.png" style="float:right" width="190" height="84" />
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
   </p>
   <h1>Float Left</h1>
      <p>The below image floats to the left.</p>
      <p>
         <img src="https://www.widecoder.com/green/images/logo.png" style="float:left" width="190" height="84" />
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
      </p>
   </body>
</html>

Thursday, 23 July 2020

Add Author Comment Differentiate Code for Blogger



"Add Code to Differentiate Author comments From others"

Here is simple code which you have to install in your template, which differentiate author comments from Visitors Comment in your blog comment section. You can change color what you want of background. Font Style and color. This modification is in two parts , that is CSS , Stylesheet. We first modify CSS part.

Sunday, 19 July 2020

How to add Retro Style Social Sharing Widget For Blogger



Blogger is a platform to make website and fully customize using CSS and HTML.This is another Social Sharing Widget for blogger.Name of this widget is Retro Style.I mentioned  in old posts Social media is very advance and maybe many traffic from there.Everyone want to get more traffic and promote website.Now using some simple steps and get this beautiful widget.Blogger Design is count in for SEO.This widget makes your blog more beautiful and attractive for visitors and readers.you can easily add in blog sidebar or any where you want.One thing is more Facebook,Twitter,Rss,Pinterest and Google plus buttons are including in widget.So it's up to you.Now Follow the following steps for add Retro Style Widget. 

You May Like To Read:

  • Touch Me Sharing Widget For Blogs/Blogger
  • Add Angry Birds Social Sharing Widget To Blogger
  • How To Add Subscribe Box To Blogger /Website
  • Cool Email Subscription Widget With Social Media Buttons For Blogger

Live Demo

How to add Retro Style Social Sharing Widget For Blogger

  • Go to Blogger dashboard 
  •  Layout >> Add a Gadget >> HTML/Javascript Box.
  •  Paste the following code in the HTML/Javascript Box.
<style>
/* www.bloggerwidget4u.blogspot.com */
.bubblewrap
list-style-type:none;
margin:0;
padding:0;

.bubblewrap li
display:inline;
width: 60px;
height:60px;

.bubblewrap li img
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

.bubblewrap li img:hover
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
</style>
<br />
<center>
<br />
<ul class="bubblewrap">
: 16px;"/><li><a href="http://www.plus.google.com/113035760861815543895"><img src="http://2.bp.blogspot.com/-LffgfsHnAj0/UPwQ23I0QAI/AAAAAAAAGas/-0InJDs-Cew/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/Mr.FarhanKayani"><img src="http://2.bp.blogspot.com/-7w_IO2RiuAE/UPwQ2SXEnYI/AAAAAAAAGak/6PxOch3eQ44/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.pinterest.com/#/"><img src="http://3.bp.blogspot.com/-1otZEseg04g/UPwUW46qq-I/AAAAAAAAGbk/ycvQIf9iKdI/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>


<li><a href="http://www.twitter/farhankayani143"><img src="http://2.bp.blogspot.com/-3x7cybjuGY0/UPwQ3_mdIKI/AAAAAAAAGa0/2S7L05Wssv4/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>


<li><a href="http://feeds2.feedburner.com/bloggerwidget4u"><img src="http://3.bp.blogspot.com/-4JDhfVVlW1U/UPwQ2iEcPtI/AAAAAAAAGao/kDO6rfj_-sg/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>

</ul>

  • And at the end After paste above codes,replace my account ID's to your account ID's

Change 113035760861815543895 to your Google plus ID.
Change Mr.FarhanKayani to your  fan page or your Facebook profile user name.its up to you.
Change# to your Pinterest Username.
Change farhankayani143 to your Twitter Username.
Change bloggerwidget4u to your Feedburner username.

  •  And click on Save.
  • After save view blog.
If you face any Problem leave a comment at the end of post.