Icon styled social subscription widget is looks random and simple, on the another hand metro/windows style social media subscription widget looks cool and smart. Before I published 2 different styled metro social media profile widget, and with this post I exposing just another metro social subscription widget with different format, Contains Facebook, Twitter, Google plus, Pinterest, Linkedin and Feedburner slot with hover effect and tool-tip. This widget will fit to any kind of website no matter it Blog or portfolio website. Let's see how it looks like and how to use it in your Blogger blog and wordpress sites.
Metro Social Subscription Widget for Blogger/Wordpress
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box
New Dashboard: Click on 'Text' add it to sidebar and paste following codes.
How to configure
First collect your following social media profiles direct links and replace with default links. All links are red colored;
So, what you think about this widget and how it working on your Blog don't forget to mention :) And don't forget to subscribe and like Crawlist on Facebook for more cool widget's updates.
After presenting fade and spinning hover effect base social media profile widget few days ago now I presenting another simple but cool social media profile widget what I named Colorize. It uses two layer of social media icons and change there color with mouse hover. This widget offers 6 social media profiles (Facebook, Twitter, Google plus, Linked in, Youtube, dribbble) including feedburner feed slot. This widget is modern and sleek looking, easy to configure and use and looks fit in sidebar, header, footer. Let's see how it looks like and how to add it in your Blogger, wordpress sites.
Colorize Social Media widget for Blogger/Wordpress
Live preview-
Codes-
How to add this widget in Blogger
First log in to your Blogger, select your Blog,
Go to 'Layout' tab then click 'add a gadget'
Select 'html/javascript' from pop up menu.
Copy following codes and configure
How to add this widget in Wordpress
From dashboard hover mouse on appearance tab,
From appearance menu select 'widgets',
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box
New Dashboard: Click on 'Text' add it to sidebar and paste following codes.
How to configure
First get your following social media profile links and replace with default links. All links are Red colored.
And configuring Feedburner; just replace 'Feed id' with your website's feedburner id.
So let me know how it working on your Blogger, Wordpress. Any question about it you're free to ask.
Blogger has default social sharing button below posts. But these buttons are that much tiny that visitor most of the time skip sharing a post part after reading post also this default widget does not contains any social bookmarking site. But sharing your post in various social media site is very important now-days. It drive a large number of visitor to your blog also bookmarking your posts to various social bookmarking site gives you powerful backlinks. So here I developed a fancy and compact social sharing and bookmarking button widget for your Blogger site. This sharing widget contains Facebook, Twitter, Google plus, Pinterest sharing and Stumble upon, Digg, Delicious, Reddit social bookmarking truck style icon what made by Hongkiat and Me. It has a slow motion jump up effect on mouse hove and it's very fancy looking and very easy to add in Blogger, Made with HTML, CSS and CSS3 transition effects. Let's see how it looks like and how to add it in Blogger
Truck style social sharing and bookmarking button below posts in Blogger
Back up your template (Optional step)
Log in to your blogger, select your blog,
Select 'Template' tab option, click 'backup/restore' from upper right corner.
Download full template and save it on your pc's Harddrive
Installing (Mandatory Step)
From 'Template' tab, select 'Edit HTML' and find (using Ctrl+F or Cmd+F) this line-
You may find this code phrase twice, ignore first phrase, after second phrase paste these codes -
After pasting the code you are done. Save your template and take a peek in your Blogger blog.
Template Compatibility and Faq
This Truck style social sharing and bookmarking widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this.
If your template doesn't contains <div class='post-footer-line post-footer-line-1'> search </article> in stead of that line, and below </article> paste all codes.
Won't appear on Homepage
Last words, How it looking in your site and if you having any trouble with this widget don't forget to mention. stay subscribed more widget like this, they are about to come. Happy blogging and sharing :)
An attractive subscription box can increase your email subscribers rapidly. And there is a lot of developers out there, who makes beautiful Feedburner subscription box widget for you. And as a Blogger fan I try to develop some Blogger widget for everyone, and try to make those widget unique, attractive and smart looking. That's reason here I presenting to you 4 different colored Feedburner subscription box widget, these widget's color can be match to your Blogger template, also comes up with eye catchy frames and effect enriched subscribe button, made with HTML, CSS and CSS3. Choose what color you want and add to your Blogger blog.
Hot Orange Feedburner subscription box widget
Codes-
Deep Blue Feedburner subscription box widget
Codes-
Girly pink Feedburner subscription box widget
Codes:
Elegant Gray Feedburner subscription box widget
Codes-
How to add in Blogger:
Log in to your Blogger, select your Blog,
Go to 'Layout' option, Select 'Add a gadget',
From pop up window select 'Html/javascript'
And copy following code and paste in content box
How to configure:
In every widget's code there is a word FeedId (red colored) just get your Feedburner Id and replace FeedId with your Feedburner Id. Save gadget then save template. And see your stylish Feedburner subscription box in live action.
Any question, any recommendation about these widget don't forget to mention. New widget will be published soon do stay subscribed :)
Subscription box is very important for a Blogsite. It helps to quick collect your email subscriber and distribute your future content update to your subscribers. Most of bloggers generally use Feedburner to deliver Blogsite's content update. And feedburner's default email subscription form is really not enough to get email subscribers, right? That's why I developed a email subscription form into a sidebar widget and this widget is integrated with spinning social media profile widget. This compact subscription box widget has cool animated shape effect base widget frame, Animated effect feedburner subscription form, Circle icon base spinning social media profile slot (contains Facebook, Twitter, Google plus, Linkedin and Pinterest). And all effect start to work with simple mouse hover on widget areas. Done reading! let's see how it looks like and how to add it in Blogger.
Copy following code and paste into your content box. then configure;
Codes-
How to configure-
To configure Feedburner form, change 'FeedId' with your Feedburner Id/name (pink colored)
To configure spinning social media profiles first collect all following social media profile's direct links of your profile. And replace with default profile links (all profiles are red colored)
Compatibility-
This widget tested on a lot of template and all templates did accepted it.
All effects works perfectly on any latest updated web browser.
How this widget working on your Blogger blog don't forget to mention, new widget will be release soon so stay subscribed; Goodluck...
All in one subscription box widget is a widget what comes up with all Social subscription tools within a pack; here such a widget I am represent to you packed with Google plus badge on top, Facebook fanpage like box, Hot feed-burner
email subscription form, and other social media profile slot (contains
Twitter, Linkedin, Pinterest, Instragram, Youtube, Contact by email) all together. Made with HTML, CSS and CSS3 effects, this widget is alternative to mashable widget for Blogger. It may have huge amount of coding but this widget is easy to add and customize. Lets see how it looks like, how to add in Blogger and configure.
How to install-
This widget installation has three step, read on-
Step 1: Back up your template (Optional step)
Log in to your blogger, select your blog,
Select template option, click 'backup/restore' from upper right corner.
Download full template and save it on Hard-drive
Step 2: Embedding CSS into template
Go to 'Template' tab, form Template option select 'Edit HTML'
Now find (using Ctrl+F or Cmd+F) ]]></b:skin>
Now copy following codes and paste all above ]]></b:skin>
Codes for copy-
Step 3: Add the widget to Blog
Now after embedding CSS is completed go to 'Layout' tab,
Select 'add a gadget' from sidebar, select 'Html/javascript'
Form pop-up, in 'Html/javascript' content box paste following codes.
Codes for copy-
How to configure-
To configuring Google plus badge, change (plus.google.com/u/0/112348536843820788771) with your Google plus profile id (it Blue colored)
To configuring Facebook fanpage option change (https://www.facebook.com/your page) with your profile/page full like (it Pink colored)
To configuring Feedburner email subscription form change (Crawlist) with your Feed-burner profile Id (it green colored)
To configuring Social media profiles First collect your following social media profiles direct link and replace with default link. Example (http://twitter.com/you) with your twitter profile rest links are same. Change (you@mail.com) with your contact email address.(all social media profiles are red colored)
Compatibility-
Tested with many template all results are fine.
Old version Web browser is not compatible with this Widget (Transition effect will not work)
So what you think about this widget, or if you facing any problem to configuring it, any thing related to this Fancy all in one subscription box widget don't forget to mention via comment. Updated version will be release soon stay subscribed and check my latest widgets :)
There are a lots of widgets you can find what are very long/tall, uses a lot of place and those widget make visitors to hate your Blog (don't really like keep scrolling for other widgets) and you are not able to keep clean widget area plus can not even add as many widget you want in your limited sidebar. So what you can do about these problems. Yes there is a short suggestion for you, you can put your long/tall widget's inside a scroll box and let your visitor to browse every widget easily, save sidebar space and get cleaned up!
To putting a widget inside scroll box is very easy. All you have to do is embed some line of CSS into your template. So let's get started :-
How to put any widget inside scroll box in Blogger
Step 1: Embedding the code
Log in to your Blogger, select your Blog,
Go to 'Template' tab, select 'Edit Html'
Now find (using Ctrl+F or Cmd+F) ]]></b:skin>
And copy following code paste above ]]></b:skin> then move to configuring.
Step 2: Configuring
Now get your widget id to make this widget in scroll box to work. Every widget have a unique widget Id, For getting your widget Id - go to 'Template' tab select 'Edit HTML' and select 'Jump to widget' and you will see list of your current using gadget's Id (example-HTML1, HTML2, Blog1 etc) or alter way to find Widget Id is - First preview your Blog while you logged in, The widget you want to put inside scroll box, in lower right corner of that widget you'll see a small wrench, Hover mouse pointer on wrench icon and bottom of web browser a link you will see, the link's last word contains your widget Id (see below picture as example) And replace 'widget Id' with your widget Id, save template.And see this tutorial working live on your Blogger blog.
Current the scroll box height is 200px change the size if 200px is not small or big for you.
Putting widget like Blog archive, popular posts, link lists, label inside scroll box is very popular it make site more visitor friendly and clean looking. So make use of it. Happy blogging :)