Showing posts with label footer. Show all posts
Showing posts with label footer. Show all posts
Tuesday, September 13, 2016
Add Author Box with Rotator Image Effects in Blogger Sidebar or Footer
Add Author Box with Rotator Image Effects in Blogger Sidebar or Footer
how to Add Author Box with Rotator Image
Effects in Blogger Sidebaror Footer.
This author box contains rotator image effect
that means when your mouse cursor come on
image then it will rotate. I have tried to bring
little variety I include colored border your can
easily change color of border and other things.
This widgets Have great css effect.
How can you Add Author Box in bloggers blog?
- Log in to your blogger account.
- Click on blog title in which you want to add This Author box.
- Go to layout and then click on Add a Gadget.
- Select "HTML/JavaScript" Widget.
- Copy the below code and paste in it then Hit save.
Live Demo
<style>.KHprofileBorder {margin:5px auto;padding:10px;width:auto;
border-radius:5px;border: 2px #3322dd
solid;min-height:125px;
width:275px;}
#KHprofile{border:2px solid #888;
margin:2px 5px 0px 5px; padding:2px;
}
#KHprofile:hover {border:2px solid #ccc;cursor:pointer;
}
.KHprofileopacity {opacity: 0.5;margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition:
all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out; -ms-transition:
all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-ms-transform: rotate(7deg); transform: rotate(8deg);
sizingMethod=auto expand);
zoom: 1; }
.KHprofileopacity:hover {opacity: 1;
margin-left: 0px;-moz-transform:
rotate(0deg); -o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
sizingMethod=auto expand);
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px #000;} </style>
<div class="KHprofileBorder">
<img class="KHprofileopacity" id="KHprofile" height=65
src="http://3.bp.blogspot.com/-61Gvbm5glB8/
UPpeVQAMZ1I/AAAAAAAAADM/oAOmgWv2GLI/s1600
/429379_242610719163393_2098735386_n.jpg "
width=50 align="left"/>Im
<a rel="me" href=https://plus.google.com
/u/0/116054827022382240041/
title="Shakeel Asghar" target="_blank"> Shakeel Asghar
</a>from Lahore Pakistan. Founder of
<a href="http://kutebkhana.blogspot.com/">KutebKhana</a>
I love to blogging and
sharing tips and tricks with my readers.
I
am a Part time blogger.
Design Blogger template,
Web Developing and Designing.>>><a style="color:red;
"href="http://kutebkhana.blogspot.com/p/blog-
page.html " target="_blank">Read More »</a>
</div></div>
Customization!
- Change 116054827022382240041
with your G+ ID and write your own information.
- Change http://kutebkhana.blogspot.com/p/blog-page.html
link with your About Us Page.
- Change http://3.bp.blogspot.com/-61Gvbm5glB8
/UPpeVQAMZ1I/AAAAAAAAADM/oAOmgWv2GLI/s1600
/429379_242610719163393_2098735386_n.jpg
with your Image link. - If you want to change height and width of
width then simply change for
height
125px For width 275px.
Enjoy You Are Done!
Go to link download
Thursday, September 8, 2016
How Can You Add A New Widget Container Below Header Above footer In Blogger
How Can You Add A New Widget Container Below Header Above footer In Blogger
After shearing how to add keyboard keys effect in blogger blog Now today I am shearing with you that how can you add a new widget container in your blogger template below header and above footer. Many of time you imagine when we install a new template in blogger he have not widget container in below header and above footer but don’t worry! Here is the solution. You can easily add Widget container manually in your blogger templates. just follow the below simple steps.
How Can You Add A New Widget Container?
- Log in to your blogger account.
- Click on blog title in which you want to add This.
- Go to Template and then click on "Edit HTML" Check Expand Widget Box..
- Now Find bellows code Using Ctrl+F Function.
Note: For applying new widget below header.
</div><!-- end header-wrapper -->
- Copy the below code and paste After/Below above code.
<!-- New widgets container Start -->
<b:section class=NewContainer id=NewContainer/>
<!-- New widgets container End -->
Note: For applying new widget above footer.
</div> <!-- end content-wrapper -->
- Copy the below code and paste After/Below above code.
<!-- New widgets container Start -->
<b:section class=NewContainer id=NewContainer/>
<!-- New widgets container End -->
- Now save your template and check in layout for new widget container! You are done…..
If you have any question about it please write a comment.
Go to link download
Wednesday, August 24, 2016
How To Add Google Followers Box In Blogger Sidebar Or footer
How To Add Google Followers Box In Blogger Sidebar Or footer
But This useful widget increases your Google+ followers and connects your viewers through social media.
CSS3 keyboard like text effect in blogger
How to add Google+ Follower Box in BlogSpot?
- Log in to your blogger account.
- Click on blog title in which you want to add This Google+ followers Box.
- Go to layout and then click on Add a Gadget.
- A Pop-up box will Appear, click on Google+ Follower. See in the screen Shot Below
- After Adding click on save. You Are Done!
Hope you enjoy adding this new Google+ Follower box. Thanks and happy blogging.
Add A New Widget Container Below Header
Go to link download
Subscribe to:
Posts (Atom)