Fellow visitors! In New Year add a super cool compact social subscription box widget below post’s of your Blogger blog. This widget is very trendy designed and will make sure to get maximum social fan and email subscriber with style. This widget got three social follow buttons (they change look with mouse hover with sliding effect) Facebook, Twitter and Google plus. Made with CSS, HTML, CSS3, Script, Google font, Font awesome, keyframes and hard work. Easy to configure and add to your site. Let’s see how it looks, how to add and configure:-
Superb Feedburner subscription+Social Follow widget below posts of Blogger
How to add This widget set up has two part, read on-
First, Log into your Blogger, select your blog,
Select 'Template', select 'Edit HTML'
Now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet </head>
Above </head> copy and paste part 1's codes
Second, Again search for
<div class='post-footer-line post-footer-line-1'>
You may find this line twice, select sound line, and copy and paste part 2's codes below that line
If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
And below </article> copy and paste Part 2's codes. and configure
How to configure
To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
After configure hit 'Save template' and check out your blogger blog.
Compatibility
This widget is compatible with all browser's latest version (old version's are supports too except IE),
All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
So any feedback don’t forget to mention. Goodluck and Happy new year…
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
#ks-social-icons { display: block; } #ks-social-icons img { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; border:#FFF 1px hidden;}
#ks-social-icons img:hover { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; border:#FFF 1px hidden; }/*crawlist.net CSS ends*/ </style> <div class="ks-metro"><div id="ks-social-icons"> <!--crawlist.net widget Starts--><div class="ks-fbbox"> <a href="http://www.facebook.com/your profile" target="_blank" rel="nofollow" title="Join us on Facebook"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cIceYoqqvLx_UGzuGLGS835de8xvNMv6-nRz3oEWVBjzvurzx0or_4-Le3YSp5JsQZHxPxoOto36oWdgDDKN1IEuy_fQZ4vFOV4mQAvJ9oklVdF_5NwxuUMmUBbJD_y_whRne8ZZatCV/s1600/1.png" width="150" /></a></div> <div class="ks-gpbox"> <a href="http://plus.google.com/your profile" target="_blank" rel="nofollow" title="Join us on Google Plus"><img height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNvB5Y8vxU2B3w9Put_GqNGnH8RM-FXnkp9sfSLoRCCa9Q6Yk0ZB2oN7kKrl0aK0bNOYr1j4nuHsI_ejH-GjMmkwbdbJrvt6btjanestLgVNXugT29uYM3CKIWzj2eueON3JaB6tNa6lJ/s1600/2.png" width="136" /></a></div> <div class="ks-ttbox"> <a href="http://www.twitter.com/your profile" target="_blank" rel="nofollow" title="Join us on Twitter"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIR7ivLhFeeQiEy5hyphenhyphen2CiYOg3u9NcyAJnOfkwQM20FQgbjFSex67BWb2CsWkXqj0idaI0BcxUs9yjSSo0j_aw7trD4GBi-1xyztbRvzZA062RH6n5LLy7FQwRlppgUlkYFY_sn-Y1l3Hp/s1600/3.png" width="136" /></a></div> <div class="ks-febox"> <a href="http://feedburner.com/your profile" target="_blank" rel="nofollow" title="Never miss a post"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed2QOkmMW4do2Pb3T_TWFaq2Mu7CEfnNw6hd1SCmeKn3vjDFdDNekIFMXYXDLEkNxGm0fb1-J75NpGsfGka8lmRP8Fj4adb2-w-0dLhQAtV-FabYHaMNeYzNTGeWgBS2JXvv8n5xdUW9s/s1600/4.png" width="136" /></a></div> <div class="ks-lnbox"> <a href="http://www.linkedin.com/your profile" target="_blank" rel="nofollow" title="Join us on Linkedin"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5UqrxkgpvOyg5QiWzug8N5x9OA7uUkoE45D-OYxKf4MtKeSCXIIIaKiH7aEXE4rPCeTGH24GNHHvDxnkan-HYNFGu28yZGfx63leDEonkBpH7z_P48Ruqy-AlCbx8TDijnZFULhTVb0L/s1600/5.png" width="150" /></a></div> <div class="ks-ptbox"> <a href="http://www.pinterest.com/your profile" target="_blank" rel="nofollow" title="Join us on Pinterest"><img height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiew4l0v9xc8f6MMH4AS-rXIFGRHInB5i6I89og7JRv1vadNa3S7QXAfeXJPv8KyOHq1aY_TbnF0S4Ca_uqaEQbZrDy_NKKbd0p9w5_oKc-V-pTYRfpxDBgkfk4X239rIILJU8YhtsLNac/s1600/6.png" width="150" /></a></div><!--crawlist.net widget ends--></div>
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 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.
Feedburner email subscription box is a must have widget for both Blogger and wordpress users. But the default subscription widget is pretty simple and non attractive, that’s what I did published custom attractive and eye catchy subscription box before (like- Cool Feedburner email subscription box, Total social subscription box widget, 4 stylish Feedburner subscription widget) And here I am publishing another one The Unique subscription box here. This widget is both attractive and eye catchy, it made with Pure CSS3 ribbon, retina ready background, flat pressable submit button and so so. It also smaller sized and will be fit with any kind of website I guess. Let’s see how it looks like and how to add it in your Blogger and wordpress blogs.
Ribbon: Feedburner Email Subscription box for Blogger/Wordpress
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box,
For new dashboard click on 'Text' add it to sidebar and paste following codes and configure
How to configure First log into your Feedburner account, get your Feedburner Id and replace FeedId pink colored (example- http://feeds.feedburner.com/your website’s feed id) Then save widget. Visit your site to see this widget working.
Widget compatibility
This widget tested with many templates and it compatible with all of them. Some template will not show this widget properly, in that case you have to fix widget’s margin code.
This widget works fine on All major web browser (latest versions)
So what you think about this widget do not forget to mention by comment, I would love to hear. And stay subscribed for more widget update in future. Goodluck
Email marketing is an important option for both entrepreneurBlogger and Internet marketers. For email marketing's essential tools is email sending services. Awber, Mailchimp, Madmimi, Get response are very popular. In these email sending services Mailchimp is very good choice for no matter you are beginner or pro and of course it's free and have ability to send beautiful customized newsletters. For sending newsletter you will need to have a list what can be done by sign up form. Problem is there Mailchimp Optin/email subscription/newsletter sign up forms are very simple and looks a bit of awkward with our themes/templates, Right? So reveling you from these boring-ness with sign up form here I publishing a homemade professional looking mailchimp sign up/subscription form. It's easy to configure and flat designed and it will easily match with any blogsites/websites. Let's see how it looks like and how to add it to your Blogger blog and wordpress sites and how to configure.
Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box,
For new dashboard click on 'Text' add it to sidebar
And paste following codes and configure
How to configure Configuring this form won't take a while, read on-
First log in to your mailchimp account,
Select 'List' from side menu,
Inside 'List' on your email subscriber list's very right part after 'stats'
Click on dropdown menu, select, 'Sign up forms' from there.
Then Select 'Embedded forms'.
When you are into 'Embedded forms'
From Classic sign up forms page's botton contains sign up forms HTMLcode,
Copy all code and paste them on any txt file/word file (notepad)
And select the following link what shown as image and replace the link with my default link (pink colored).
Save your widget/gadget and take a look at your site, How it looking on your site, how it working or any trouble please leave with comment. More cool Mailchimp subscription form will release soon stay subscribed, Happy Email marketing :)
Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:
In 'place link' place your links and add your post title in ‘place hover text’
In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwist use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 200px width and 125px height
You can delete a slide content by deleting <li> to </li>
You can add more slide by coping <li> to </li>
You can also change the default image size by changing value of height and width (red marked)
How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...
You may be seen these floating ‘Twitter follow badge widget’ on many blogsites, which widget appears left or right side of blogs and floats. These badge widgets helps you to get twitter audience faster and easily. For your consideration here I present to you 10 different styles of ‘Twitter follow badge widget’. These widgets come up with lightly coded with CSS3, easy customizable and 10 different styles to choose. Let’s see how they looks like, how to add it on your Blogger blog, how to configure.
1. Twitter house badge (On mouse hover, twitter bird appears)
Sometime into Blogger posts, we require to show some images in row. After a mass Image upload, all images shows together without any order and visual effects. That’s why an image gallery widget we should use in those posts. These widgets present images cleanly alongside with effects and increase beauty of posts too. Here such kind of image gallery I presenting to you created with HTML and CSS enhanced with CSS3 animation "transform" property (adds a smooth hover effect to images whereby the image enlarges) and shadow appears. Light weighted, high-end designed and presents images in a stylish way. Let’s see how it looks like, how to add and configure on your Blogger blog.
CSS3 Images Gallery for Blogger
Preview-
How to install & apply: This gallery set up has few steps, read on-
Step 1: CSS Embedding
Log into your Blogger, select your blog
Go to ‘Template’ tab and select’ Edit HTML’
Search for ]]>< into code snippet (using CTRL+F or CMD+F)
Configuration: In .ks-galleri img CSS class you will find default gallery images Height and Width, Change the value with your suitable Height and Width, Small resolution will be better; And ‘Save template’
Step 2: Gallery set up
Go open a “New post” or an existing post,
Upload some images what you intend to put into gallery
After upload is done, Switch ‘HTML’ view from post editor (Compose/HTML)
You will see all uploaded images source codes,
Locate the very first uploaded image’s code and paste this line,
<div class="ks-galleri">
And locate the very last uploaded image’s code and paste this word,
</div>
Configuration: You may delete Blogger system’s default image HTML rules, Shown in image below, if you don’t remove these code, default configuration of gallery won’t work nicely.
Get back to ‘Compose’ part, and publish the post
So how your images gallery working on your blog and any problem facing with gallery don’t forget to mention, new tutorials and widget will be release soon stay subscribed, Goodluck
.png)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
