Metro Social Subscription Widget for Blogger/Wordpress
Metro Social Subscription Widget for Blogger/Wordpress
Preview-
Codes-
<style>/*crawlist.net CSS starts*/
.ks-metro {
height:300px;
width:286px;
border:#fff 1px hidden;
margin:auto;
}
.ks-fbbox {
float:left;
height:150px;
width:150px;
border:#33C hidden 1px;
}
.ks-ttbox {
float:right;
height:70px;
width:136px;
border:#90F hidden1px;
}
.ks-gpbox {
float:right;
height:78px;
width:136px;
border:#F03 hidden 1px;
}
.ks-febox {
float:right;
height:147px;
width:136px;
border:#F96 hidden 1px;
}
.ks-lnbox {
float:left;
height:70px;
width:150px;
border:#00F hidden 1px;
}
.ks-ptbox {
float:left;
height:75px;
width:150px;
border:#F03 hidden 1px;
}
#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.
Ribbon: Feedburner Email Subscription box for Blogger/Wordpress
Ribbon: Feedburner Email Subscription box for Blogger/Wordpress
Preview-
Live demo-
Codes for copy-
<style>/*crawlist.net CSS starts*/
.ks-ooo {position:relative; z-index:0;}
.ks-ooo > div {margin-bottom:40px;}
.ks-ooo > div:last-of-type {margin-bottom:0;}
.ks-ooo .ribbon {
margin:auto;
position:relative;
width:300px;
height:40px;
behavior:url(PIE.htc);
}
.ks-ooo .ribbon > span {
display:block;
position:relative;
height:100%;
behavior:url(PIE.htc);
-pie-watch-ancestors:1;
}
.ks-ooo .ribbon > span:before, .ks-ooo .ribbon > span:after {
content:'';
position:absolute;
z-index:-1;
border-style:solid;
border-width:14px;
border-color:transparent;
}
.ks-ooo.ie8 .ribbon > span:before, .ie8 .ribbon > span:after {
display:none;
}
.ks-ooo .ribbon > span:before {
left:-14px;
}
.ks-ooo .ribbon > span:after {
right:-14px;
}
.ks-ooo .ribbon:before {
content:'';
position:absolute;
z-index:-2;
left:-31px;
border-style:solid;
border-width:20px;
border-right-width:25px;
}
.ks-ooo .ribbon:after {
content:'';
position:absolute;
z-index:-2;
right:-31px;
border-style:solid;
border-width:20px;
border-left-width:25px;
}
.ks-ooo .oo1 > span {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ks-ooo .oo1 > span:before, .ks-ooo .oo1 > span:after {
bottom:-14px;
}
.ks-ooo .oo1:before {
top:14px;
}
.ks-ooo .oo1:after {
top:14px;
}
.ks-ooo .o1o, .ks-ooo.ie8 .o1o > span {
background-color:#42a5d4;
background-image:-webkit-gradient(linear, left top, left bottom, from(#42a5d4), to(#24769d)); /* Saf4+, Chrome */
background-image:-webkit-linear-gradient(top, #42a5d4, #24769d); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #42a5d4, #24769d); /* FF3.6 */
background-image: -ms-linear-gradient(top, #42a5d4, #24769d); /* IE10 */
background-image: -o-linear-gradient(top, #42a5d4, #24769d); /* Opera 11.10+ */
background-image: linear-gradient(top, #42a5d4, #24769d);
-pie-background: linear-gradient(top, #42a5d4, #24769d); /* IE6-IE9 */
}
.ks-ooo .o1o > span:before {
border-right-color:#174c66;
}
.ks-ooo .o1o > span:after {
border-left-color:#174c66;
}
.ks-ooo .o1o:before {
border-color:#24769d #24769d #24769d transparent;
}
.ks-ooo .o1o:after {
border-color:#24769d transparent #24769d #24769d;
}
.ks-boxsa {height:135px; width:270px; border:#ccc solid 1px; margin:auto; border-radius:0px 0px 5px 5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE4jbiHjpc8NpaoabXNwMNGT2ieqaKtKuqdJkP2vytvwd4z5giBcFeBr40w5R9-6diCS5rpfrF1r5bTjgluPtvBsn55bCDVBO8yWwazE11enPslFDEoW0DJuD7jTvr2MUuN9GPyPgjSvo/s1600/paper.png);margin-left:14px;
}
.ks-box {height:150px; width:300px;}
.ks-box h4{font-size:16px; text-align:center;
color:#fff;
line-height:40px;
font: Georgia;
font-weight:200;
font-style:italic;
}
#ks-inject { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCEinBtcs5e_OHXzI4MWiKsWaI35dEl3pvzrbI7bRAvPrT1VHzsmHTpELlEg5GqBE27IBPo3SbfDiu8DIY0s0EfUFBzAjsSd5ylT80Y5habNSd7MLHpLBrhbrlap6FqzAQgYNzFZSosY/s1600/email.png') #fff no-repeat 10px center; padding-left: 35px;
border: 1px solid #ccc;
font-size: 15px;
line-height:2;
height:37px;
width:198px;
border-radius: 3.5px;
-moz-border-radius: 3.5px;
-webkit-border-radius: 3.5px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd;
margin-top:13.5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
#ks-inject:focus { border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
#ks-buofo {
position: relative;
vertical-align: top;
width: 165px;
height: 40px;
padding: 0;
font-size: 24px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
border-bottom: 2px solid #2a8bcc;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #2a8bcc;
box-shadow: inset 0 -2px #2a8bcc;
margin-top:10.5px;
border-radius: 1.5px;
-moz-border-radius: 1.5px;
-webkit-border-radius: 1.5px;
}
#ks-buofo:hover {opacity:0.7;}
#ks-buofo:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.ks-boxsa h6{font: "Segoe UI"; font-size:14px; font-weight:100; margin-top:7px; color:#333; font-style:italic;
}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net widget starts-->
<div class="ks-box">
<div class="ks-ooo">
<div class="ribbon oo1 o1o"><span><h4>Subscribe for Newsletter</h4></span></div>
<div class="ks-boxsa" align="center">
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedId', 'popupwindow', 'scrollbars=yes,width=550,height=500');return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='ks-inject' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' type='text' value='Enter your email'/>
<input id='ks-buofo' title='' type='submit' value='Submit'/>
</form>
<h6 align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWfYVatzsUnjHJB-0HFguORePV-3lVS4zyRoxjOkcvuCSEEKzkas0ENbjY5t3S4BJPfgkIUKfgHwGmP7YwwJYOvz2VDg24C7hIE3FxeQd137O5ep1IcVbQmslXfGYgBlNr3pp6IqgM_A/s1600/lock.png" height="12px" width="10px"/> 100% Privacy Guaranty</h6>
</div></div></div>
<!--crawlist.net widget ends-->
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,
- 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)
Add animated underline links of your Blogger blog
Add animated underline links of your Blogger blog
Live Demo: (click here)
Codes for Copy:
<style>/*crawlist.net CSS starts*/
.post-body a, a:visited {
text-decoration: none;
position: relative;
color: #3498DB;
}
.post-body a:after, a:visited:after {
content: '';
height: 2px;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
background: #19B5FE;
transition: 0.2s;
margin-top:2px
}
.post-body a:hover:after, a:visited:hover:after {
width: 100%;
}
.post-body a.block, a:visited.block {
display: block;
padding: 0.5em;
}
.post-body a.block:hover, a:visited.block:hover {
background: #fff;
}/*crawlist.net CSS ends*/
</style>
How to add:
- Login to Blogger, select your blog,
- Go to ‘Layout’ tab, select ‘add a gadget’
- Select ‘HTML/JavaScript’ from pop up page
- Copy and paste all given codes in there,
- And save the gadget, later template
FAQ and Caution:
- This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.
- You can change the links and underlines color, together or separately; just find and replace the color code with your demand.
- This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.
How to Auto tweet and Auto post to Facebook your Blogger blog’s post
How to Auto tweet and Auto post to Facebook your Blogger’s post
Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.
Below walk through steps are written; just read on:-
- Open an account at Twitter Feed, confirm your email, and visit dashboard.
- Click on ‘Create new feed’, you will direct to setup page
- In setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed. Your Blogger site too, default source URL looks like-
http://www.crawlist.net/feeds/posts/default
So place at ‘add your source URL’ input area you’ll be placing your site’s default feed
http://your blogger site.blogspot.com/feeds/posts/default
Alternatively you can use Feedburner URL too
http://feeds.feedburner.com/your site feed id
- Click to toggle ‘Advanced Settings’
Set up ‘And post up to new update’ (1-5) at a time.
Set up ‘How link will be shown’, Just Title, Just description or both.
Set up ‘Shorten link through’ service
- Available Services is ‘Twitter’, ‘Facebook’, ‘LinkedIn’, ‘LinkedIn Company Page’, ‘App.Net’. Authenticate those services with your following profiles.
- Job is done, check your status at dashboard anytime.
Add 6 stylish list/bullet to Blogger posts
Arrow style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Minus style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Check style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Plus style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Carrow style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Star style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
How to add:
- Log in to your Blogger, select your blog
- Go to ‘Template’ tab, select ‘Edit HTML’
- Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)
- Before ]]>< copy paste any of style you want to use
- Save template, and see the changes by visiting blog or new post editing
Caution and FAQ:
- Most of Template have default list/bullet style designed into template codes; and those code stays in
.post-body ul {} and .post-body ul li {}
So you your template already have these lines; mark them and delete them. And set my given codes.
- You can’t use two or more style. But if you know little bit of coding then change the CSS class,
.post-body ul {} and .post-body ul li {}
to
.1 ul {} and .1 ul li {}
And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)
So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....
7 best CMS/script for building Social networking website
- Build a Social networking website in a short time
- It can be use for personal or commercial purpose
- Customizable, so you can modify any part of site as you want
- Some of these CMS are open source (completely free and you can modify/upgrade the source code) and some of paid.
7 best CMS/script for building Social networking website
Dolphin is the world's most advanced community CMS. It is Open source, independent, downloadable, scalable, customizable, full-featured, free software for building social networks, dating sites and web-communities. Loaded with video chat, recorder, video player, forums, groups, events, video messenger, mailbox, desktop app, video sharing, photo sharing, iPhone app and much more. Premium upgrade available.
Jcow is flexible Social Networking software written in PHP. It can help you to: Build a social network for your interests and passions, Build a member community for your existing website, Build a social networking site like Facebook, Twitter. Paid version got more customizable option.
Buddypress is a Wordpress CMS's plugin. After installing Wordpress you will be able to install this plugin and start a minimal social networking site on your Wordpress. Build a social network for your company, school, sports team, or niche community. BuddyPress lets users sign-up and start creating profiles, posting messages, making connections, creating and interacting in groups, and much more. BuddyPress boasts an ever growing array of new features developed by an awesome plugin development community. There are more than 330 BuddyPress plugins available, and the list is growing every day, multi language supports, updates regularly.
Oxwall is unbelievably flexible and easy to use PHP/MySQL, Community CMS/platform. Oxwall is used for a wide range of projects starting from family sites and custom social networks to collaboration tools and enterprise community solutions.
Beatz is an online social networking community script that allows you to start your own favorite artist band website. Beatz is an online community script for sharing, discussing and learning about new artists and your favorites.
Elgg empowers individuals, groups and institutions to create their own fully-featured social environment. Elgg is an open source social engine which powers all kinds of social environments - from education and business to martial arts and rugby. If you are looking for a professional social intranet or want to run a site for your organization.
Etano can be used to start up a dating site, a social networking site, a classifieds site or any other type of site involving groups of people, companies and products.
CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.
CMS are the great choice to make a site specially social networking sites, what got more sensitive functions. So choose what CMS you want to use, go to their site download the script, upload and install that, configure and start your social networking site without tension. Don’t forget to mention what you’ll be use.
Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger
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
Live Preview-(Click Here)
Codes-
<!-- Begin MailChimp Signup Form -->
<!-- crawlist.net form starts -->
<div id="optin">
<h4>Subscribe for Newsletter</h4>
<p>Join our mailing list, recieve new post update, learn pro tricks weekly</p>
<form action="http://blogspot.us3.list-manage.com/subscribe/post?u=0b55fc18f7e81c4baff2c9e57&id=857e43dd4c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
<h5><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWfYVatzsUnjHJB-0HFguORePV-3lVS4zyRoxjOkcvuCSEEKzkas0ENbjY5t3S4BJPfgkIUKfgHwGmP7YwwJYOvz2VDg24C7hIE3FxeQd137O5ep1IcVbQmslXfGYgBlNr3pp6IqgM_A/s1600/lock.png' alt='privacy' width="9" height="12"/> We'll never spam or sell your email, 100% privacy gurrenty</h5>
</div>
<!-- crawlist.net form ends -->
<!--End mc_embed_signup-->
<style>
#optin {
background: #f5f5f5;
border: 3px solid #ccc;
height:300px;
width:280px;
text-align: center;
padding:8px 8px;
}
#optin h4 {
font-family:"Segoe UI"; font-size:18px; font-weight:bold; margin-top:10px;}
#optin p {font-family:Georgia, "Times New Roman", Times, serif; }
#optin h5 {font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; margin-top:7px; padding-left:42px; padding-right:42px;}
#optin input {
background: #fff;
border: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
height:34px;
width:220px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd;
}
#optin input.name { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJuzW5TNG0IZtAb9gJO25jbT34wLEUE3KagAyzZtgWiGwGCa60LxH2NTVMI5n4yfTj4G_SRGRqbC__AudGLiGxKpOJnBhqoCelgRZWZ95hhjOLo2WCgDmpC8GGgn-ZJ5iUinXIr4bfX1I/s1600/name.png) no-repeat 10px center; padding-left: 35px }
#optin input.email { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCEinBtcs5e_OHXzI4MWiKsWaI35dEl3pvzrbI7bRAvPrT1VHzsmHTpELlEg5GqBE27IBPo3SbfDiu8DIY0s0EfUFBzAjsSd5ylT80Y5habNSd7MLHpLBrhbrlap6FqzAQgYNzFZSosY/s1600/email.png) no-repeat 10px center; padding-left: 35px }
#optin input[type="submit"] {
position: relative;
vertical-align: top;
width:180px;
height: 50px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1c40f;
border: 0;
border-bottom: 2px solid #e2b607;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #e2b607;
box-shadow: inset 0 -2px #e2b607;
}
#optin input[type="submit"]:hover{opacity:.7;}
#optin input[type="submit"]:active { top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none; }
</style>
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',
- Then from 'appearance' menu select 'widgets',
- 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).
60 best Free Web Directory for Building Backlinks
There are a lot of web directory I have found around the web, they offer's free and paid web directory service. Going through most of them here I sharing 60 best free web directory for building backlinks. Here some directories works instantly without any condition, some of 'em requires link exchange and some will review your site first (they will track your site's popularity and content quality, than will add you site to their directory). Read on the -
60 best Free Web Directory for Building Backlinks
1. Dmoz
2. So Much
3. Jayde
4. Scrub The Web
5. Yahoo directory
6. 1 Abc
7. Little directory
8. 1 Webs Directory
9. Amray
10. Directory Fire
11. Directory World
12. T Section
13. Direct My Link
14. Cipinet
15. 9 Sites
16. Gain Web
17. My Directory Live
18. Free Website Directory
19. Elite Sites Directory
20. Pro Link Directory
21. Nexus Directory
22. Business Seek
23. PIseries
24. Directory Volt
25. R Directory
26. Suggest Url
27. Search Sight
28. Synergy Directory
29. Wwwi
30. Directory bin
31. A list directory
32. Link nom
33. 10 Directory
34. Best Free Websites
35. Suggest Site
36. Link Pedia
37. Pedsters Planet
38. Inteligent D
39. Link Dir
40. Submission4u
41. Leading Link Directory
42. The Net Directory
43. Nipao
44. The Web Directory
45. Url Moz
46. Wikidweb
47. XY Link Directory
48. Answer Spots
49. SEO Free Links
50. Dmoz in
51. Sighber Cafe
52. Tech4on
53. A Million Sites
54. Digg Directory
55. Royal Link Up
56. Best million links
57. Vie Search
58. Dir4UK
59. PRweblink
60. PR3 Plus
Hoping this list will help you a lot. And if it does don't forget to mention. Happy link building!
Add Shareaholic Share button & bar to Blogger/below posts
- Shareaholic has much cooler icons (Eye catchy, trendy and stylish)
- Got all the basic sharing services
- Shows share counts
- Very customizable (Position, Icon size, Layout, Align, Headline)
- Analytic, Fast loading, Responsive, and optional monetization option
Adding Shareaholic Sharing widgets in Blogger blog is easy, for your consideration setup process of adding
Shareaholic widgets into Blogger blogs written below, read on-
Add Shareaholic Share button & bar to Blogger blog/below posts
- Go to Shareaholic, open an account
- Verify and login to your account
- Hit (Add Website) from Website Tools Dashboard page
- Insert your BlogSpot Domain name and site name
- Select platform ‘Blogger’, Content category, site Language, Hit continue
- Next page you’ll see ‘Apps’ option, Turn on ‘Floating Share Buttons’, Click on ‘Setting’ icon
- Now in ‘Layout’ fix Size, Counter, Align, Vertical offset, and services,
- Additionally click on ‘Display rules’, Hit Save Settings
- Now you’ll return to the Dashboard page, Get your mouse over ‘Location’ option
- Select ‘Share Buttons’, In share button page, in Location input type ‘Below post’
- Select your Theme, Headline, Position, Layout, Counter, Align and services
- After all configurations complete, select ‘Save settings’,
- You’ll redirect to Dashboard page, now click on ‘Get setup code’ and
- Log into your Blogger blog on the other tab, select your blog
- Go to ‘Template’ tab, and select ‘Edit HTML’
- Search for </head> (using CTRL+F or CMD+F) into code snippet
- Before </head> tag, paste ‘Get setup code’s codes
- Again, Get back to Shareaholic tab, from location configuration, click on ‘</> icon’
- And copy all codes from pop-up page
- And from Blogger’s tab (into code snippet) search for,
<div class='post-footer-line post-footer-line-1'>
- You may find this code phrase twice, ignore first phrase, after second phrase paste those codes,
- You may add these codes too, with default codes cause default codes widget will appear on homepage too, re-edit the default code with this codes, like this-
<b:if cond='data:blog.pageType == "item"'>
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='your id'></div>
</b:if>
- If you can’t find <div class='post-footer-line post-footer-line-1'> than search for </article>, and paste codes below </article>
Save Template finally, And check your blog out for live preview
Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..
Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..
12 best free Article Rewriter/Spinner you can use
Also for holding site's readers eyes and mind on your site content spinning article can be use for present a article more charming with rich vocabulary and thesaurus. And batch producing a lot of article in short time from already someone's published article, article rewriter can be a helpful easy way for you or your client.
There is lot of free article rewriter/spinner online web tool and offline desktop application you can find for spinning your articles for free. After testing most of these tools, I made a final list. Now from the best article rewriter list you choose one of them and get started without hesitation. Read on :-
12 best free Article Rewriter/Spinner you can use
1. Small Seo tool
2. Ant Spinner
Writing effective content for your site can now be simply done through the use of this article spinner. An article spinner tool can make rewrite articles easy and fast all for free. You can simply make content full of match keyword phrases that could also raise traffic in your website.
3. Caligonia
There are many articles on content spinners on the market; some of these articles are useless while others actually attempt to inform you of how powerful article rewriters are, but Caligonia is different It's a human controlled article spinner what prevents output articles to having controlled use of thesaurus and synonyms, what makes a article more human readable and useful.
4. Paraphrasing Tool
Use Paraphrasing Tool to paraphrase or rewrite full length essays and articles or to find new ways to express simple phrases, sentences or single words. Whether your goal is to remix textual content for a website, term paper, business document, email or tweet, Paraphrasing Tool will do the trick.
5. Ez rewriter
Free online article rewriter. Paste or type your text and rewrite words with synonyms.
6. Free article spinner
Free and paid article rewriter. Be a member of site and get your rewriter screen.
7. Article rewriter tool
Free article, sentence and paragraph rephrasing tool online
8. Plagiarisma
Plagiarisma is a free article spinner, online synonymizer, eassy rewriter, plagiarism and grammar checker
9. Article changer
It says world's best free article spinner tool what produce mostly human readable output.
10. Spin bot
Article spinning, text rewriting and creative content creation tool. Using it you'll quickly get human readership and search engine exposure
11. Content professor
Content professor is a free and paid article spinner, A smart, easy and guaranteed way to rewrite articles online
12. Word flood
It's a desktop app and free for use. Unique, powerful and super fast desktop app designed to help creative article marketers and professional content marketer’s
So these article rewrites are the best rewriting tools to work on for free. Use them and change your conventional article to shiny penny. Any tool you recommend or have a feedback about my list leave with comment. Happy article spinning :)
Add Swing effect on Images of Blogger blog
Add CSS3 Swing effect on Images of Blogger blog
Live demo-
Codes for copy-
Part 1: CSS
/*crawlist.net css starts*/
.ks-swing:hover{
-webkit-animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
animation:swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
}
@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); }
100% { transform: rotate(0); }
}
/*crawlist.net css ends*/
Part 2: HTML
<img class="ks-swing" src="Image Link"/>
How to add this effect on Blogger
Step 1:
- Log in to your Blogger, select your blog
- Go to ‘template’ tab
- Select ‘Edit HTML’
- Find into codes snippet (Using Ctrl+f or Cmd+f) ]]><
- Above ]]>< copy and paste Part 1’s codes
- Save template
Step 2:
- While you writing a post, After upload and insert complete for a image, Select ‘HTML’ view from (compost/html) upper side of post editor.
- You will see your uploaded images source code, Place
class="ks-swing"
in the <img tag. See the picture for more info about how to do it.
in the <img tag. See the picture for more info about how to do it.
- After placing the Class, back to ‘compose’ view
Your image swinging is done,
How to use this effect on web project
How to use this effect on web project
- Copy and paste the CSS part into your web project’s stylesheet.css
- And call your image with part 2’s HTML part where you want to show this effect
So what you think about this CSS3 tutorial for Blogger, don’t forget to mention. New tutorial will be release soon, stay connected. Chill…
6 best Captcha Plugins for Wordpress
- Preventing spam bots (The bots what leaves/posts spam links as a comment or message automatically)
- It does brute force protection (Login, account hacks)
- Preventing Harmful data collector bots (Those automated programs collecting certain types of sensitive information, like-email, password)
- Cookie base bots (Bots what examine cookies for their good, like-advertise serve)
- Prevents DDOS attacks (The bots what assist with massive downloading of content from multimedia websites, and make server down)
And if you use Wordpress you can get rid of these security problems with just installing a Captcha plugin. There are a lot’s of Captcha plugin you may find in wordpress plugin depositary. But I did some check and writing here 6 best Captcha plugin for wordpress based on there popularity, styling over all worth to have performance. So read on-
6 best Captcha Plugins for Wordpress
- Configure from Admin panel
- Valid HTML
- Section 508 and WAI Accessibility Validation.
- Allows Trackbacks and Pingbacks.
- Setting to hide the Captcha from logged in users and or admins
- Setting to show the Captcha on the forms for comments, registration, lost password, login, or all.
- 18+ language translation
The Captcha plugin allows you to implement a super security captcha form into web forms. It protects your website from spam by means of math logic, easily understood by human beings.
- Three basic maths actions - add, subtract and multiply.
- This captcha can be used for login, registration, password recovery, comments forms.
- There is also a premium version of the plugin, allowing compatibility with BuddyPress (Registration form, Comments form, "Create a Group" form and Contact Form 7
- 40+ language translation
reCAPTCHA is a free CAPTCHA service that protects your site against spam, malicious registrations and other forms of attacks where computers try to disguise themselves as a human.
- reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.
- In addition to protecting your site, reCAPTCHA also helps us digitize old books and newspapers, transcribe street numbers and solve hard AI problems
- Simple to setup, Automatic account generation
- Size, color, difficulty personalization.
- Popular All Browsers Support
- Integrated Form (with shortcode), Comment form, Login form, Lost password form
Secure & Monetize your site with Solve Media's free CAPTCHA replacement. CAPTCHA is a simple and popular method of securing forms from abuse.
- Set Solve Media CAPTCHA widget on a registration form, comments form, or any Contact-Form-7 v2.0 or newer.
- Solve Media CAPTCHA widget is compatible with other anti-spam solutions like Akismet
- The Solve Media CAPTCHA widget works with nearly 100% of all browsers capabilities
- Every time a visitor to your site solves a CAPTCHA TYPE-IN™ ad, they share the revenue with you.
- This plugin works effortlessly on comment, registration, and lost password forms, and is compatible with BuddyPress, Gravity Forms, and Contact Form 7
- CAPTCHA-related dropoff is five times higher on mobile than on desktop,
- The PlayThru spam blocker is optimized for touch, so it works beautifully on mobile device
- Really Simple CAPTCHA does not work alone and is intended to work with other plugins.
- It is originally created for Contact Form 7, however, you can use it with your own plugin.
- Also it is not strongly secure.
Subscribe to:
Posts (Atom)