Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts
Friday, February 7, 2014
Labels:
Blogging
,
CSS
Read More
40+ Free Attractive User Profile Widget for About Page Design with HTML and CSS code
I am sure that, Many people who have websites or blogs and they want to add Profile Widget for Websites in profile page but don't get proper design with ready code. If you are one of them than this post is useful for you.
Now a days all websites needs a profile page for their website with information about each member, and this profile page or about us page is important for SEO , Usually User profile pages display features like an avatar, social media account links, small bio-data, follow button, through this you can give a chance to your visitors to connect with you at social level, it also helps to get more traffic to your website or blog.
Here i am providing a collection of creative and attractive profile designs which are coded in HTML and CSS many of them are Profile Widgets if you have little knowledge of html then you can easily use in your about us page which showcase your profile.
In this collection we will give you creative examples of User Profile designs with Code. this Profile Designs are coded in HTML and CSS so easily you can modify as per your choice.
This is an UI of Profile widget with HTML and CSS code. In this Design when you take moves over the profile image it shows small description about your self and social links about your self. This design has Sliding animation using CSS. This Profile box is developed in CSS3 is used.
Now a days all websites needs a profile page for their website with information about each member, and this profile page or about us page is important for SEO , Usually User profile pages display features like an avatar, social media account links, small bio-data, follow button, through this you can give a chance to your visitors to connect with you at social level, it also helps to get more traffic to your website or blog.
Here i am providing a collection of creative and attractive profile designs which are coded in HTML and CSS many of them are Profile Widgets if you have little knowledge of html then you can easily use in your about us page which showcase your profile.
In this collection we will give you creative examples of User Profile designs with Code. this Profile Designs are coded in HTML and CSS so easily you can modify as per your choice.
Ribbon Style User Profile Design
This is simple design with ribbons in background. background color of this profile design is Black. There is an image of Author at left side and details of authors are at right side. you can see layout of this profile design in below Image.Metro Style User Profile Design with Flip Effect
Jquery Hover effect and CSS are used in this Profile Design. The concept of this profile design is like Business Card, so there are two parts Front and Back. In front side Name and photo of Author with Circle Border with his/her designation. When you take mouse hover it displays Back part of the ecard with flip effect. In back part you can write your small bio data with your social profile links.
Responsive Profile page (About Page)
This is full Page About Us page Design this design is fully responsive with transparent background. Author's Photo an Designation are In header part of about page. this profile page is mostly based on content about you self this. In bottom part of the page there are 4 icons.
Profile Page with Contact Form Design
This design will fulfils your 2 requirement Contact Form as well as Author's profile Box. In First row there are 5 social icons like Twitter, Facebook, google plus, Linkedin, Instagram, after that there is contact form so it is something different form other Profile Pages.
you can find code for this Contact Form with Profile Box Code.
CV or Profile Page in HTML and CSS
this is the perfect layout to show your profile on your web site or blog this design is Responsive and Developed in HTML and CSS. In Header Part User name and City after that your Profile Photo and short description about your self. There is a Skills box where you can define you skill levels using progress bar. In this Design you can show your experience which makes it Proper CV page. this CV Profile Page is developed in HTML and CSS.
Vertical Profile Widget for Twitter
this is profile widget for twitter lover. in this widget you can put Photo and cover background like twitter profiles there is a one drop down menu for Add friend, Follow and Message in Upper left corner and In Upper right Corner "Following" button. You can write 2 lines about your self in this widget and there is 4 social sharing menu at bottom of Profile.
Flat Mini Profile Widget
This profile widget has simple and flat design. it has vertical social sharing icon at Left side of the photo, when you hover on image small description about your self. This Flat Profile widget is made up with pure CSS3, HTML and transitions on hover and a couple of social network icons.
Full Profile Display Layout
This design is perfect for social site lover it displays all your social profiles status in one box. You can display profile image and many more. When you hover on Author's Photo it shows three buttons first is search button which displays the search result of Author's Name, Second is About Me button which displays Small description of Author and last button is Location which shows Author's current location on google map. There on more manu at Upper-Left Corner of the box Which has three items for sharing.
Profile box with all contact icons. In this profile design on Left hand side all Contact icons like Contact Number, Chat icon, Image icon and Social Following icon and On Right hand side Author's Profile Image and at bottom of the image there is Location icon.
Panda Profile Widget
Panda profile widget is inspired from Dribbble this widget has simple design there is one profile picture with user Name and Designation and one statement which describes yourself. There is social icons at bottom of the page.
User Profile Header
This profile widget can be placed in header section of your page this widget has Horizontal Layout with social icons and Your Designation with Specialization. This Profile header has a start-up animation.
Flat Profile Design with Html and CSS
Here is the flat design for Profile widget. In this Widget you can put you Profile Image and social network links. you can write small description about yourself Below the Images.
Profile and Contact Card Widget with CV Link
This is an extra ordinary design this profile widget is simple but it has eye catching design. it looks amazing. this widget is developed in pure CSS and HTML. You can describe details like Name, Email Address, Mobile Number, Current Location, Twitter Id and CV Download link.
CSS UI Profile Design with sliding Effect
Profile Design adopted from Google Plus
Here is Profile design which is adopted from Google+ profile Design There is menu with links like About, Photos, Likes, YouTube and Reviews. You can set image as background of your profile.
Profile Card with Corner Navigation icons
Sticky Note style Profile Box
Personal Profile with Flip Card
Corner Profile Widget
Tabbed Profile Widget with Animation
Twitter Card Widget
Purple Widget in Minimal Style
Dribbble Inspired Profile Module.
This profile design has border navigation icons and Social status counts.
Profile Widget in Popup window
CSS Profile Card With Flip Effect
Full Page Profile Widget
Minimal Profile Box
This profile design has small layout so you can adjust this profile box any where in your About Page. there is follow button which can be any social network follow button. This design is small but yet perfect for About page.
About Page with Recent Works
This About page has large scale layout so it is suitable for Single person about page. this About me page has sidebar at left hand side with Author's image and other links for navigation.In Profile Widget You can display your last activity or work with images.
Twitter Profile Widget for Websites
This profile widget has Twitter counter for Tweets, Following and Followers. When you take mouse hover on Profile Box, it displays menu with Edit, Like, Profile and Settings icons.
Twitter Like User Profile Design
Many Twitter lovers wants to display their Twitter Profiles in Websites or Blogs or In About Us page. So this widget is perfect for them. It also helps to display your recent tweets.
Twitter Like User Profile Design code in html and css
Twitter Like User Profile Design code in html and css
Profile Box Widget with Social Counters
Profile Box Design with Follow Button
This is small box design in which Author's Photo with follow button and other links with counters like Profile, Activity, Timeline, Files and Favorites.
this profile design has only name of Author and social links, but yet attractive It has random background colors.
this is a simple Profile design with Profile pic and background cover and social icons at Bottom of Box with Hover Highlighting Effect.
Simple Twitter Profile Box with Articles and Follower Counter
this is simple profile box with articles and followers counter. This design has an author's photo and Twitter follow button.
Metro style Profile Widget with Html and CSS
this design is metro style Profile widget with Author'e photo and 3 social links.
this profile widget has just one Follow Me Button. you can display images of your last three works and twitter counters.
CSS for Twitter Card
Monday, December 30, 2013
Labels:
Blogging
,
Jquery
This post is useful for bloggers as well as web developers for bloggers it is widget and for Developers it is jQuery tutorial. In previous articles we had discuss How to call jquery function from code behind in asp.net with C# and How to Call C# server side Method from java script in Asp.net with C# using Jquery Ajax and JSON. For Bloggers I have collection of blogger templates. you should explore this collection may be you can find one blogger template which suites your blog. Here is the post 10+ Free Responsive and Latest Blogger Templates that gives your blog a fresh new look, Download Free Responsive Blogger Templates of 2013., you can also visit designpicker.blogspot.in for more templates.
In this post We will discuss how to develop scroll to top widget for your blog it is really very easy. Here we develop this widget in Two part. In First Part we code in Jqurey and in second part we design this widget using CSS.
HTML Div tag wchich is actually displayed to scroll top
In above code I have put one condition if window scrolled more than 100 than make "scrooltop" div visible with animation using fedIn([time in milliseconds]),fedOut([time in milliseconds]). when you click on "scrooltop" then
Now we will move to the second part of the widget development. In this part we will design the div using CSS you can develop this part as per your website or web blog. Here you can put image or any other styles which suites your blog but here i have used simple style which is suitable for all blogs of websites.
Read More
How to Develop Scroll to Top widget or Jump to Top Widget Using jquery for Blogs or Websites
This post is useful for bloggers as well as web developers for bloggers it is widget and for Developers it is jQuery tutorial. In previous articles we had discuss How to call jquery function from code behind in asp.net with C# and How to Call C# server side Method from java script in Asp.net with C# using Jquery Ajax and JSON. For Bloggers I have collection of blogger templates. you should explore this collection may be you can find one blogger template which suites your blog. Here is the post 10+ Free Responsive and Latest Blogger Templates that gives your blog a fresh new look, Download Free Responsive Blogger Templates of 2013., you can also visit designpicker.blogspot.in for more templates.
In this post We will discuss how to develop scroll to top widget for your blog it is really very easy. Here we develop this widget in Two part. In First Part we code in Jqurey and in second part we design this widget using CSS.
Here is the jquery Code for scroll to Top Widget.
<script type="text/javascript">
$(document).ready(function () {
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#scrooltop").fadeIn(500);
} else {
$("#scrooltop").fadeOut(500);
}
});
// scroll body to 0px on click
$("#scrooltop").click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>HTML Div tag wchich is actually displayed to scroll top
<div id="scrooltop"></div>
In above code I have put one condition if window scrolled more than 100 than make "scrooltop" div visible with animation using fedIn([time in milliseconds]),fedOut([time in milliseconds]). when you click on "scrooltop" then
.animate({scroollTop: [Integer Value]},[Time duration in milliseconds]
}, 800); This Function will scroll your whole page to specified point in our case it is 0.Now we will move to the second part of the widget development. In this part we will design the div using CSS you can develop this part as per your website or web blog. Here you can put image or any other styles which suites your blog but here i have used simple style which is suitable for all blogs of websites.
Here is the CSS code for Scroll To Top Widget.
<style type="text/css">
#scrooltop {
background: #4E4E4E;
text-align: center;
position: fixed;
bottom: 10px;
display:none;
right: 10px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 1000px;
padding: 5px;
transition: all .3s ease-out;
}
#scrooltop:before {
content: "";
position: absolute;
bottom: 18px;
right: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 16px 12px;
border-color: transparent transparent #fff transparent;
line-height: 0;
}
#scrooltop:after {
content: "";
position: absolute;
bottom: 18px;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 14px 11px;
border-color: transparent transparent #4E4E4E transparent;
line-height: 0;
transition: all .3s ease-out;
}
</style>Friday, October 11, 2013
Labels:
Blogger Template
,
Blogging
In Previous article Download Free Responsive Blogger Templates of 2013. i have provided large collection of Responsive Blogger Templates and other post like Social Sharing Buttons for Blogs and Websites designed using CSS/HTML, How to Add a Facebook Like Box to your Blog, Social share menu for blog or website using CSS and HTMLwhich are also useful for blogger.
Here in this post I have to collect a few more fresh and responsive blogger template which may gives your blog a fresh new look for anyone to use freely. this designs are really very good and important thing is that they are free available.
Read More
10+ Free Responsive and Latest Blogger Templates that gives your blog a fresh new look
In Previous article Download Free Responsive Blogger Templates of 2013. i have provided large collection of Responsive Blogger Templates and other post like Social Sharing Buttons for Blogs and Websites designed using CSS/HTML, How to Add a Facebook Like Box to your Blog, Social share menu for blog or website using CSS and HTML
Here in this post I have to collect a few more fresh and responsive blogger template which may gives your blog a fresh new look for anyone to use freely. this designs are really very good and important thing is that they are free available.
VeeCard is Free Responsive Blogger Template
Features of Name Blogger Template :-
Vee Card is a simple, responsive blogger templates that has righ sidebar,2 column layout , professional magazine look, navigation menu on hover, no footer.
Vee Card is a simple, responsive blogger templates that has righ sidebar,2 column layout , professional magazine look, navigation menu on hover, no footer.
Madkassar Free Gallery Blogger Template
Features of Metroism Blogger Template :-
Metroism Free Metro Style Blogger Template
Free Responsive Blogger Template Clippy
Keilir Free Responsive Blogger Template -
Sight Free Responsive Blogger Template
Zikazev Blue Free Responsive Blogger Template
Features of Zikazev Blue Blogger Template :
2 column layout, Right Sidebar, 3 column footer, hierarchical drop down navigation menu, clear Design and SEO optimized, Recent post widget at bottom of every post and Social share menu.
2 column layout, Right Sidebar, 3 column footer, hierarchical drop down navigation menu, clear Design and SEO optimized, Recent post widget at bottom of every post and Social share menu.
Geekiesmn Free Premium Responsive Blogger Template of 2013
Simple Corporate Responsive Blogger Template
Thursday, September 12, 2013
Labels:
Blogger Template
,
Blogging
Read More
Download Free Responsive Blogger Templates of 2013.
There are many platforms are available for Blog but Blogger is the right choice because it is very easy to use blogging platform. lots of free blogger templates are available. But it is really confusing task to choose right template for your blog.
In this post, I have collected a list Latest Blogger templates which have really best designs. I hope you like this collection. This Free Responsive Blogger Templates collection is available with Download Link. I have also provided the Demo Blog links to get idea how this templates looks,
I hope you will interest and leave a comment on this post. All Blogspot templates of this collection are really beautiful and looks awesome. Many templates below were converted from Word Press Themes to Free Responsive Blogger Templates and most of templates are suitable for Magazine Blogs, Personal Blogs, Movie Blogs and Game Blogs.
In this post, I have collected a list Latest Blogger templates which have really best designs. I hope you like this collection. This Free Responsive Blogger Templates collection is available with Download Link. I have also provided the Demo Blog links to get idea how this templates looks,
I hope you will interest and leave a comment on this post. All Blogspot templates of this collection are really beautiful and looks awesome. Many templates below were converted from Word Press Themes to Free Responsive Blogger Templates and most of templates are suitable for Magazine Blogs, Personal Blogs, Movie Blogs and Game Blogs.
10+ Free Responsive and Latest Blogger Templates are now available for Free
Sight Free Responsive Blogger Template
Features of sight free Responsive blogger template, Clean, Featured Content Slider, Fixed Width, Dropdown Menu, Social Widget.
Zikazev Blue Free Responsive Blogger Template
Features of Zikazev Blue Blogger Template : 2 column layout, Right Sidebar, 3 column footer, hierarchical dropdown navigation menu, clear Design and SEO optimized, Recent post widget at bottom of every post and Social share menu.
Geekiesmn Free Premium Responsive Blogger Template of 2013
Features of Geekiesmn Blogger Template: Responsive Design, Comment Smiley, Custom 404, Show Post With Labels, Advance Admin Panel, , Numbered Page Navigation Menu, Social Share Button, Threaded Comment Style.
Smartify
Smartify is a new gallery style and a portfolio type blogger template.
This template is a 2 column,grid style theme with right sidebar,3 column footer and a crystal clear gray colour background.
This is a professional theme it is coded cleanly and is SEO optimized.
Metrofy Blogger Templates
It is metro style blogger templates with new metro styled post navigation widget and a cool drop down menu and has 2 column layout with light and dark brown background.This theme is seo optimized and is fast loading.
FlatMag
FlatMag Responsive Blogger Template With elegant green color scheme,has 3 column layout and 4 column footer and also have space for advertisement.
Fizz
Fizz Free Blogger Responsive Template in Which Fully Responsive, 2 Column, 4 Column footer, Black, Blue, Elegant, Featured Section.
Mode HD Free Premium Blogger Template
Mode HD is a free premium blogger template that is available for free to download.
This templates is simple. Category of this template is photography, portfolio and gallery type.
It is designed with high quality for blogger blogs.This theme has many other cool features see the live preview of this theme.
Elice
Elice template designed to provide optimal viewing experience across wide range of devices from Desktop to mobile phones. Design Features are 2 columns Layout, 4 column Footer, Ready Banner Space, Ready SEO and Good Typography Post Thumbnails.
My Extra News Responsive Blogger Template
Features of this template Responsive design, Ready Ad Code, Social Buttons, Search box, 2 column layout, 3 column.
Moonlight Blogger template
Moonlight Blogger template has slide show (slider) in home page. Show your featured content in an easy to use slider.
Features of the template Hierarchical Menu, Ready Ad Space, Ready for SEO, Related Posts at bottom of every post, Social Buttons,
JPStation Responsive Blogger Template
Features of the template, Responsive design, Ready for Banner Ad, SEO Based.
New Mashable
Features of New Mashable Blogger Template 3 column footer, Grid Post Layout, Floating Menu, Seo Friendly and
More Features: Custom Popular Post Widget, Adsense Ready, Social Sharing Buttons, Threaded Comment Style and much more.
Timline Magazine Blogger Template
Features of Timline Magazine Blogger Template are Timeline Style, SEO-Friendly, Related Posts, Portfolio and Personal Blog, More Features : Magazine Style, white and blue color Scheme, threaded commenting system, three Columns footer, Timeline Style Template, 2 column template and much more
Johny DemoSite
Features of Johny DemoSite Responsive Blogger Template are SEO Friendly and Ready for Advertisement.
Geeks Gadget
Features of Geeks Gadget Blogger Template are Floating Header Bar, Featured Advertisement Spots, SEO-Friendly, Social Sharing Buttons, Fixed Wrapper
Dazzling Premium Responsive Blogger Template
Dazzling Designer is a Premium Responsive Theme especially created for Designing Niche web blogs and websites.Features of Dazzling Designer Blogger Template are Floating Sticky Header, Floating Sticky Drop Down Menu, Capsule Sticky Search Bar, 2 Column Post Display on Home/Static Pages, CSS3 Custom Labels, Thumbnail Related Posts, and Ads Ready.
Creative Gallery Blogger Template
Features of Creative Gallery Blogger Template are Big Size Navigation Menu, Big Thumbnail Related Posts, SEO-Friendly and Portfolio Theme
Boldy Blogger Template
Template Features : 1 Sidebar, 2 Column, 4 Column footer, Adapted from WordPress, Blue, Elegant, Fixed width, Gradients, Magazine, Premium, Right Sidebar, Slider and Top Navigation Bar.
Azsimple Blogger Template
Features of Azsimple template are 1 Sidebar, 2 Columns, 3 Column Footer, Adapted from Wordpress, Black, Blue, Elegant, Featured Section, Fixed width, Fresh, Grey, Header Banner, Magazine, Right Sidebar, Slider, Top Navigation Bar
Vasiliki Free Responsive Blogger Template
Vasiliki is a free blogger template with 2 columns, responsive design, left sidebar, gallery-styled.
Download Vasiliki blogger template for free in MADLogics.
WebMag Blogger Templates
Features of the WebMag Blogger Template are Featured Slider, Featured Posts, Mega Sticky Navigation Bar, Social Sharing buttons, SEO-Friendly, Related Posts, Magazine Style, orange color scheme, threaded commenting system, 2 column template, 2 column sidebar and much more.
YAMINTH Blogger Template
Features of YAMINTH template are 1 Sidebar, 2 Columns, 3 Column Footer, Adapted from Wordpress, Header Banner, Magazine, Orange, Right Sidebar, Top Navigation Bar.
Divinity Blogger Template
Features of Divinity Blogger Templateare Two Drop Down Menu, Lazy Page Loading Plugin, Professional Look, Social Sharing Buttons.
Note:
Note:
Remove Lazy Load Plugin
If you want to remove lazy load plugin from this theme then remove following from your blog. <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'/><div id='mbl-loader'>This Loading Effect is Powered By<a href='http://www.mybloggerlab.com'>MyBloggerLab</a></div></div></b:if>
Siren Responsive Blogger Template
Siren Blogger Template has 3 Column Gallery Style Blogger Template With 1 Right Sidebar, Auto Blog post Summarizing And "read More" Button. clean And Quality Solid Design, Very Simple Top Menu.
Simple and Bright Blogger Template
Simple and Bright is a free Premium template. Features of Simple and Bright Blogger Template: a professional white color scheme, 2 columns, search box, social sharing menu.
Subscribe to:
Comments
(
Atom
)