Don't Miss

Latest Posts
Browsing Category "Widgets"

Create a Social Media Fans Counter Widget in Blogger

- 190 Comments
Recently we shared Flat Style Tabbed Social Media Widget for Blogger and today we're here with another amazing widget Social Media Fans Counter Widget for blogger. From the day Blogolect Blog was created we tried our best on sharing and developing blogger widgets and we'll continue these efforts. Today we're going to share a social media fans counter widget, this widget displays Facebook, Twitter and RSS buttons in a clean list style with your fans count. This is a clean and simple widget to show to subscribers on your blog and make your visitors get more interested in your blog. So let's begin

Recommended for You:
Social Media Fans Counter Widget

How to Create a Social Media Fans Counter Widget in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box

<div class="sidebarContainer" id="sidebarSubscribe">
            <a target="_blank" href="http://feeds.feedburner.com/blogolect" class="subscribeSidebarBox" id="subscribeRSS">
                <span class="icon"></span>
                <span class="title">Subscribe to Our RSS feed</span>
                <span class="count">2000+</span>
            </a>
          
            <a target="_blank" href="http://www.twitter.com/blogolect" class="subscribeSidebarBox" id="followTwitter">
                <span class="icon"></span>
                <span class="title">Follow Blogolect on Twitter</span>
                <span class="count">1000+</span>
            </a>
          
            <a target="_blank" href="http://www.facebook.com/blogolect.official" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">Like Us On Facebook</span>
                <span class="count">800+</span>
            </a>  </div>

<style>
#sidebarSubscribe {
    padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 60px;
    margin-bottom: 8px;
    position: relative;
    width: 265px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 3px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6SpYoSUYGqUXhVOtablCTneEwIQL8bSIQZGdJPKPaBfh-5kFODo8OgK5VKAT5TWFcHEoIH8hjE8lhuwi86j4QHeDYHLNdv7ILiTThUnB2cFIrVLnYQQajB-W-9IY09-r1jOFllUumizNn/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    left: 10px;
    top: 10px;
    width: 55px;
}
#sidebarSubscribe .title {
    font-size: 12px;
    left: 70px;
    top: 8px;
}
#sidebarSubscribe .count {
    font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
    left: 70px;
    top: 23px;
}
#subscribeRSS .icon {
    background-position: 0 -50px;
}
#followTwitter .icon {
    background-position: -100px -50px;
}
#likeFacebook .icon {
    background-position: -200px -50px;
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
    background-color: #FDFDFD;
}

a, a:active {
   text-decoration: none;
}

</style>

Customization:
  • Replace http://feeds.feedburner.com/blogolect with your RSS feed URL and 2000+ with your RSS Subscribers
  • Replace http://www.twitter.com/blogolect with your twitter account URL and 1000+ with your Twitter Followers
  • Replace http://www.facebook.com/blogolect.official with your Facebook URL and 800+ with your Facebook Likes

Click Save button and you're done!

From Editors Desk

We hope this article may have helped you in learning How to Create a Social Media Fans Counter Widget in Blogger. Share this article with your friends and don't forget to subscribe us.

Flat Style Tabbed Social Media Widget for Blogger

- 33 Comments
Are you fed up with those old style Social Media subscription styles? Are you Looking for something new? So to fulfill all your needs, today we're going to share a simple and attractive Flat Style Tabbed Social Media Widget for Blogger that we just customized. As you know that Flat Style is the hottest style nowadays. The widget we're going to share today is a Tabbed Widget with Social Media tabs in a simple Flat design and it'll definitely attract your visitors. This widget consists of four different tabs Facebook, Twitter, Google Plus and Pinterest. So, add this widget to your blog and impress your visitors.

Recommended For You:
Flat Style Tabbed Social Media Widget for Blogger

How to Add Flat Tabbed Social Media Widget to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box

<style>
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #00B366;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        background: #007D47 ;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: #007D47;
        border-bottom-color: #007D47;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #007D47;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
</style>


<script src="http://yourjavascript.com/1125723322/blogolect-tabber.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#tab1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOB9ushssRciBD06z3hpjksEDeubKPTbCfFvLu4vOhUGeGzxULPT_YCZ3CYO2ZCKXXB92xsqo9FKGjQCMSxMoL_vVH4uX1GQNiuHTYL-McayPQbeoaL2LxjF8mvl0DS__E0NFDdv2fEh/s1600/blogolect-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab2">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOsWPyAunaU7qdQo-7jNubiEat2W-k-jLTDv3nJVMxZGXy1RN5q5C0n-eTZe3UXrdpJIM6tdMO4Xn4vhMyJoZjXzGzn2y-a0NJkj_li2gj_c_Nzh6zzJSyF2i7L-POPGunwXEFaTLJrKd/s1600/blogolect-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab3">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizzHLMHYbcNyol6sHGpT9Fmp8b553x2JBGsjBSuIbTLJB5ojUaYtxjb-SJAbHRoJx2bTTWq-mzpIW4UuQ-h4Cc4Irb25qXMhuqTegM8RIkPnBGnUL7FkB-8XvFOcp7Cb10zuqGlU0_VE00/s1600/blogolect-googleplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#tab4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPZJyo0Fx0mgfOhEnW5baCSgWP56OdVOHVgyuw_ZU27BaBvUI7hOW_VWSdc8Q1FJ7BJ7Y6cXRrIvD_C7dAcC4-6q8Bhvws9CTrNROY8bX2yOJrbKG1hTuOUKYLZ3oI_HieXeIstjLsiApy/s1600/blogolect-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="tab1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogolect.official&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
    </div>
    <div id="tab2">
        <div id="twitter-box"></div>
        <a href="https://twitter.com/blogolect" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @blogolect</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </div>
    <div id="tab3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/+zohaibliaqat" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="tab4">
        <a href="http://pinterest.com/blogolect">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
    <div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"><a href="http://www.blogolect.com/2015/02/flat-style-tabbed-social-media-widget.html" rel="dofollow" target="_blank">Get this Widget</a></span>
    </div>
</div>

Customization:
  • Replace blogolect.official with your Facebook Page Username
  • Replace both blogolect with your Twitter Username
  • Replace +zohaibliaqat with your Google Plus Username
  • Replace blogolect with your Pinterest Username

Click Save button and you're done!

From Editors Desk

We hope this article may have helped you in learning How to Add a Flat Style Tabbed Social Media Widget for Blogger. Share this article with your friends and don't forget to subscribe us.

Add a Social Media Subscription Widget to Blogger

- 20 Comments
Social Media plays an important role in building a successful blog. It helps us to easily interact with our visitors/readers and also drives massive traffic to our blog. Read my previous article on 8 Effective Ways to Generate Massive Traffic from Facebook. I'm telling you with my personal experience that having a social media subscription widget in the sidebar of a blog can help you to increase your subscribers and followers. The more subscribers you have, the more traffic you'll receive because your subscribers will get notified about your new posts and they'll definitely visit your blog to check what's new. We have shared a lot of Social Media subscription widgets and today we're going to share another simple and professional looking social media widget for blogger.
Add a Social Media Subscription Widget to Blogger
Recommended for You:

Add a Social Media Subscription Widget to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box.

<style type="text/css">
.bgt-social { width: 290px; }
.bgt-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.bgt-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.bgt-social ul li:first-child { border-top: 0 none; }
.bgt-social ul li:last-child { border-bottom: 0 none; }
.bgt-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.bgt-social ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.bgt-social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm9Et3Mog5YHZFl7i255ymeXHc-KjAKeDFtjr6RuLkPc1fhb2w540-SCgs6jwtQG1HT7PSjcq7MAAx7-E-rKqm_L_rjiKvxpPPa2RjlmwLgTEVJYrjtrTuLtDcs1sD5z4m4j2wHlYenfQ/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.bgt-social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGMTq40dHDW0_KpORAkYkgsgV2RnWow4gmx-rIJ9aBLxN9NNBfuCp2t3sQToq2WuIlHRrB7zculJik_g0WFVEsoIQR2DqFONJYMix83GSxvkoP8jAQOI5cf2wj-0G83mYzhHkgT0OGGE/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.bgt-social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkfKlcE8mCov_6Q_uxJXd2H2uCIyERoskN4IkfEvz1OotcDnUMDyDzrURVuhwkEHBJjnuskgHtbXuDn2-NBO3jAsXwBc4xrTHN1JGZee4LTkiGqd16nTEA0mC2wz0y_4-5Mbbs0IgXoM/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.bgt-social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXvnL73viWbMkBuYimBNdBfd3vcHyQ023H14oOGduXzX_7MeMtZL9ZIPl0G81Qu2fhnGB6lLU3r70m7sZlZkerP3LuctSxq8JJZMYs2Xk7r0BIJ_VJuZbkmSE4GFlUrDpjeCjlrdZ66U/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.bgt-social ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugZsg0el-QiBImXFwLYvf4scmn5xmHXJ5zfEI70l68SaKlxJV2hJYdTKaKQ5hZQ4KjK91VdHqu9W2KUxPf3eM39EGPcriMyhyphenhyphenFOn9n92TqqFOMfKIoJx9tzkLywcE_xEoOFZRQW_NrwU/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.bgt-social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm96E4qvy67Zr9bWAgXKczIOu_rKQNqXnD37dX9FN2FHee3yQIdaBQ9S7f3fsXQanX70R4m0qLau8JrOb9JCxqTovGS3DtcsIc7I0r3BUnQSppi3bpisxE1yqnEd-T42RtKbDq87wl5uo/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="bgt-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/blogolect">Subscribe to RSS</a></li>
<li><a class="twitter" href="https://twitter.com/blogolect">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogolect.official">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/+zohaibliaqat" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/USERNAME">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/USERNAME">Watch me on YouTube</a></li>
</ul>
</div>

  • Replace the text in green with your Usernames

Click Save button
And that's it!

From Editors Desk

We hope this article may have helped you in learning How to Add a Social Media Subscription Widget to Blogger. Share this article with your friends and don't forget to subscribe us.

How to Add Slidorion Featured Posts Slider to Blogger Blog

- 19 Comments
In this tutorial we're going to share an article on How to Add Slidorion Featured Posts Slider to Blogger Blog.
An Image Slider is used to show most popular or featured posts on a blog. Mostly bloggers use image sliders for attracting their visitors to specific posts, because visitors are likely to get more attracted to sliders. Today we're going to share Slidorion Featured Posts slider for blogger. Slidorion slider is a combination of an image slider and accordion. It displays an image with its title and description. The right side consists of an accordion like slides menu and the images on the left side. The slides are linked to respective tabs with a large array of eye catching effects. In this tutorial we'll show you that How to Add Slidorion Featured Posts Slider to Blogger Blog.

How to Add Slidorion Featured Posts Slider to Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area, press Ctrl+F to search and search for the </head> tag. Now copy the below code and paste it just above/before the </head> tag

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[

/*!
 * Slidorion, An Image Slider and Accordion Combined
 * Intructions: http://www.slidorion.com
 * Created by Ben Holland - http://www.benholland.me
 * Version: 1.2.0
 * Copyright 2013 Ben Holland <hi@benhlland.me>
 */
!function($){"use strict";$.fn.extend({slidorion:function(options){var defaults={autoPlay:!0,controlNav:!1,controlNavClass:"slidorion-nav",easing:"",effect:"random",first:1,interval:5e3,hoverPause:!1,speed:1e3},opts=$.extend(defaults,options),firstSlide=window.location.hash.match(/slidorion/i)?location.hash.split("/")[1]-1:null;return this.each(function(){var current=firstSlide||opts.first-1,effect=(opts.first,opts.effect),interval=opts.interval,controlNav=opts.controlNav,controlNavClass=opts.controlNavClass,zPos=1,intervalPause=!1,active=!1,prevEffect="",obj=$(this),autoPlaying=null,$slider=$(".slider",obj),$accordion=$(".accordion",obj),$slides=$slider.find(".slide"),$linkHeaders=$accordion.find(".header"),$linkContent=$accordion.find(".content"),effects=["fade","slideLeft","slideUp","slideRight","slideDown","overLeft","overRight","overUp","overDown"],slideEffects=["slideLeft","slideUp","slideRight","slideDown"],overEffects=["overLeft","overRight","overUp","overDown"],animationOptions={queue:!0,duration:opts.speed,easing:opts.easingOption},sliderCount=$slides.length,accordionCount=$linkHeaders.length,randomEffectMap={random:effects,slideRandom:slideEffects,overRandom:overEffects},init=function(){sliderCount===accordionCount?(opts.autoPlay===!0&&(autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)),opts.hoverPause===!0&&opts.autoPlay===!0&&obj.hover(function(){intervalPause=!0,stopAuto()},function(){intervalPause=!1,restartAuto()}),resetLayers(),$slides.eq(current).css("z-index",zPos),zPos++,$linkContent.hide(),$linkHeaders.eq(current).addClass("active").next().show(),controlNav&&(obj.append('<div class="'+controlNavClass+" "+controlNavClass+'-left"></div><div class="'+controlNavClass+" "+controlNavClass+'-right"></div>'),$("."+controlNavClass+"-left").click(leftNavigation),$("."+controlNavClass+"-right").click(rightNavigation)),$linkHeaders.click(sectionClicked)):console.log("The number of slider images does not match the number of accordion sections.")},getRandomEffect=function(effect,arr){return effect=arr[~~(Math.random()*arr.length)],effect==prevEffect?getRandomEffect(effect,arr):effect},animation=function(current,section,effect){if(!active){active=!0,opts.autoPlay===!0&&opts.intervalPause===!1&&restartAuto();var $current=$slides.eq(current),$new=$slides.eq(section),currentWidth=$current.outerWidth(),currentHeight=$current.outerHeight();randomEffectMap[effect]&&(effect=getRandomEffect(effect,randomEffectMap[effect]));var changeSlideCSS=function($el,settings){var defs={left:"0",top:"0",zIndex:zPos};$el.css($.extend(defs,settings))},animateSlides=function($el,settings){if($el instanceof Array)return $.each($el,function(){animateSlides($(this),settings)}),void 0;var defs={left:"0",top:"0"};$el.animate($.extend(defs,settings),animationOptions)};switch(prevEffect=effect,effect){case"fade":$new.css({"z-index":zPos,top:"0",left:"0",display:"none"}).fadeIn(opts.speed);break;case"slideLeft":changeSlideCSS($new,{left:currentWidth,top:0}),animateSlides([$current,$new],{left:"-="+currentWidth});break;case"slideRight":changeSlideCSS($new,{left:"-"+currentWidth+"px",top:0}),animateSlides([$current,$new],{left:"+="+currentWidth});break;case"slideUp":changeSlideCSS($new,{top:currentHeight,left:0}),animateSlides([$current,$new],{top:"-="+currentHeight});break;case"slideDown":changeSlideCSS($new,{top:"-"+currentHeight+"px",left:0}),animateSlides([$current,$new],{top:"+="+currentHeight});break;case"overLeft":changeSlideCSS($new,{left:currentWidth}),animateSlides($new,{left:"-="+currentWidth});break;case"overRight":changeSlideCSS($new,{left:"-"+currentWidth+"px"}),animateSlides($new,{left:"+="+currentWidth+"px"});break;case"overUp":changeSlideCSS($new,{top:currentHeight}),animateSlides($new,{top:"-="+currentHeight});break;case"overDown":changeSlideCSS($new,{top:"-"+currentHeight+"px"}),animateSlides($new,{top:"+="+currentHeight});break;case"none":$new.css({"z-index":zPos})}setTimeout(function(){active=!1,resetZpos($new)},opts.speed)}},sectionClicked=function(){if(!active){var section=$(this).index()/2;return section===current?!1:($linkHeaders.removeClass("active").next(".content").slideUp(),$linkHeaders.eq(section).addClass("active").next(".content").slideDown(),animation(current,section,effect),zPos++,current=section,!1)}},playSlider=function(current){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},stopAuto=function(){clearInterval(obj.data("interval"))},restartAuto=function(){clearInterval(obj.data("interval")),autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)},leftNavigation=function(){$linkHeaders.eq(getNextSlide(current-2)).trigger("click",sectionClicked)},rightNavigation=function(){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},getNextSlide=function(tempSection){return tempSection++,tempSection===sliderCount?0:0>tempSection?accordionCount-1:tempSection},resetZpos=function($el){zPos>3*sliderCount&&(zPos=2,$slides.css("z-index","1"),$el.css("z-index",zPos),zPos++)},resetLayers=function(){for(var i=sliderCount-1;i>0;i--)$slides.eq(i).css("z-index",zPos),zPos++};init()})}})}(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

    $('#slidorion').slidorion({
        autoPlay: true,
        effect: 'fade',
        hoverPause: true,
        interval: 3000,
        speed: 800,
        controlNav: false,
        controlNavClass: 'nav'
    });
  
});

//]]>
</script>
  
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700);

.slidorion {
    position: relative;
    width: 640px;            /* Set to slidorion width. Is equal to .slider + .accordion width */
    height: 350px;            /* Set to slidorion height. Is equal to .slider and .accordion height */
    background: #CBCBCB;
    padding: 10px;
    border: 1px solid #BBB;
    -webkit-box-shadow: 0 0 34px #bbb;
    -moz-box-shadow: 0 0 34px #bbb;
    box-shadow: 0 0 34px #bbb;
    line-height: 20px;
}

.slider {
    width: 62.5%;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;        /* Hides the animations */
}

.slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.accordion {
    width: 37.5%;
    height: 100%;
    font-family: Verdana;
    background: #eee;
    box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
    position: relative;
    z-index:999;
    overflow: hidden;
    float: left;
}

.accordion .header {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: #ededed;
    background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
    border-top: 1px solid #ccc;
}

.accordion .header:first-child {
    border-top: none;
}

.accordion .header:hover {
    background: #EDEDED;
    cursor: pointer;
}

.accordion .header.active {
    border-bottom: none;
    background: #676767 !important;
    color: #FFF;
}

.accordion .content {
    height: 208px;            /* This height needs to be changed as it depends on the accordion height and number of tabs */
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    margin: 0;
    padding: 16px;
    border: none;
    background: #d6d6d6;
    background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
    background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
    overflow:auto;
}

.accordion .content p {
    margin-bottom: 10px;
}

.slidorion .slidorion-nav {
    position: absolute;
    top: 200px;
    width: 16px;
    height: 27px;
    z-index: 9999;
    background: url('../img/arrows.png') 0 0 no-repeat;
    cursor: pointer;
}

.slidorion .slidorion-nav-left {
    left: 30px;
}

.slidorion .slidorion-nav-right {
    right: 310px;
    background-position: -16px 0;
}
</style>

Click Save Template button. Now its time to add the HTML, go to Layout >> Add a Gadget >> Scroll down and select HTML/JavaScript gadget from the list. Now copy the below HTML code and paste it in the empty widget box.
Note: You can add it anywhere you want

<div id="slidorion" class="slidorion">

    <div class="slider">
        <!-- slide images -->
        <div class="slide"><a href="SLIDE-1-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-gQlrQA5hV-SsImEJatyQ_KOwqOyRx7brsbR_4rso-9StvpSObmYK7amTn0TQ2AvrsIZwqGCx_EBgjwzWpF7yyK0chcDLnvqy5bRgdVnplYOaKFUcaHFssssuIA2n_7GCvjX3UH-555R/s1600/slide-1.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-2-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSIUs2c55DZ3trvuYlLc-1cTwK5mJx-v7YENK5b_rPlfTglrw8DGql9frZDZfrcFGf1NgOOaq4n33eeWM82x0cS2s7-LeZmzgYLJJ0vNbbGrLc5iUamOC5GxXPo_UHLaGH_cY2bGcvjR-/s1600/slide-2.jpg" /></a></div>
        <div class="slide"><a href="SLIDE-3-LINK-HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDffF8NFd5GuML29-oUJoBGfLsYJx4F690cqgDo1sADwF4Sk2eS4dhZcYDVWR5bMEFdFjpxMi6AyNtigHs_zYa9LiY9GsdEoSXnbdqgdQwiHlLMi1CgBAXXgSd2VoSfWUiBoI7OwJt0ZM/s1600/slide-3.jpg" /></a></div>
        <!-- slide images end -->
    </div>

    <div class="accordion">
   
        <!-- slide 1 content -->
        <div class="header">Slide Title 1</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 1 content end -->
       
        <!-- slide 2 content -->
        <div class="header">Slide Title 2</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 2 content end -->
       
        <!-- slide 3 content -->
        <div class="header">Slide Title 3</div>
        <div class="content">
            <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.  </p>
        </div>
        <!-- slide 3 content end -->
       
    </div>
   
</div>

Customization:
  • Replace the text it Red with the Slide Links
  • Replace the text in green with your slider image URL's
  • Replace the text in yellow with slide titles
  • Replace the bolded text with slides description

Finally click Save button and you're done!

From Editors Desk

We hope this article may have helped you in Adding a Slidorion Posts Slider to your Blogger Blog. Share this article with your friends and don't forget to subscribe us!

How to Add Alexa Rank Checker Widget to Blogger

- 110 Comments
Alexa is a traffic data and global ranking provider. It provides the ranking data for millions of websites. Alexa collects traffic data on daily basis from millions of websites using Alexa toolbar and other sources. In simple terms, Alexa ranks a website on the basis of its traffic, compared with all other websites on the internet. According to Alexa website, it provides traffic data, global ranking and other information on 30 million websites and as of 2015, Alexa.com is visited by over 6.5 million people monthly. If you want to add an Alexa Rank Check widget to your website. Don't worry, it's just simple, in this tutorial, we're going to share that How to Add Alexa Rank Checker Widget to your website.

How to Add Alexa Rank Checker to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box.

<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input name="url" maxlength="255" size="35" type="url" placeholder="Enter an URL..."/>
<input value="Check Alexa Rank" type="submit"/>
</form>

Click Save button
And that's it!

From Editors Desk

We hope this article may have helped you in learning How to Add Alexa Rank Widget Checker to Blogger. Share this article with your friends and don't forget to subscribe us.

How to Create an Animated CSS3 Drop Down Menu in Blogger

- 26 Comments
A Navigation Bar or Drop Down Menu is one of the most essential elements of a blog. A drop down menu makes your blog user-friendly, allowing your visitors to easily navigate your blog by simply choosing their desired category from the menu. Apart of all these advantages it also gives your website a new unique and professional look. Almost all the website either its a top website or a newly created are using Drop Down Menus. Recently we shared an article on How to Create a Drop Down Menu in Blogger. The design of that menu was simple and the one we're going to share today has a stylish and professional look with eye catching CSS transitions. Lets begin:
How to Create an Animated CSS3 Drop Down Menu in Blogger

How to Create an Animated CSS3 Drop Down Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area, press Ctrl+F to search and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before the ]]></b:skin> tag

a, #navigation li .sub-nav-wrapper .sub-nav li {
 transition: all 0.7s;
 -moz-transition: all 0.7s;
 -webkit-transition: all 0.7s;
}
#navigation li .sub-nav-wrapper {
 pointer-events: none;
 opacity: 0;
 filter: alpha(opacity=0);
 top: 0;

 transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
 pointer-events: auto;
 opacity: 1;
 filter: alpha(opacity=100);
 top: 30px;
}
#navigation {
 position: relative;
 text-align:center;
 margin:0 auto;
 background-color:#fff;
 border-bottom: 2px solid #009999;
}
#navigation li {
 position: relative;
 list-style: none;
 display: inline-block;
 padding: 5px 20px;
}
#navigation li a {
 padding: 5px;
 display: block;

 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: 700;
 color: #3b3b3b;
 text-align: left;
 text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
 color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
 display: block;
 position: absolute;
 z-index: 30;
 margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
 width: 150px;
 margin-top: 6px;
 background: #fff;
 border-top: 1px solid #fff;
 padding:0;
 box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
 display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
 list-style: none;
 display: block;
 margin: 0;
 padding: 0;
 text-align: left;
 border-bottom: 1px solid #009999;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
 border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
 display: block;
 padding: 11px 20px;
 font-size: 12px;
 font-weight: 600;
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
 background: #009999;
 border-bottom: 1px solid #009999;
 color: #3b3b3b;
 text-decoration: none;
}

CSS done, its time for HTML. Search for the <body> tag. Copy the below HTML code and Paste it Just below/after the <body> tag.
Note: You can add HTML wherever you want.

<ul id="navigation">

    <li>
        <a href="index.html" class="main">Home</a>
    </li>
   
    <li>
        <a href="#" class="main">Blogger</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Tips</a></li>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Traffic Tips</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Logo</a></li>
 <li><a href="#">Banner</a></li>
            <li><a href="#">Wordpress</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Tutorials</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Logo</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">About</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Website</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our Mission</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Contact</a>
    </li>
   
</ul>

  • Replace the Categories with your own and replace # with their links

Finally click Save Template button and you're done!

We hope this article may have helped you in learning How to Create an Animated CSS3 Drop Down Menu in Blogger. Share this article with your friends and don't forget to subscribe us!

Create a Sliding Google Plus Followers Box in Blogger

- 10 Comments
Google Plus is one of the biggest social networks. Just like Facebook it allows people to create a profile, community and page. Google Plus is also a great way to drive massive traffic to your blog and sharing your posts on Google Plus increases your blog chances to appear in search results. Google gives more attention to the content shared on Google Plus. If you've created your Google Plus profile and you want to increase your followers, so in this tutorial we are going to share a sliding Google plus followers box. This box slides from the right side on hover with the followers box, it'll attract your visitors and they'll definitely follow you.
Create a Sliding Google Plus Followers Box in Blogger

Create a Sliding Google Plus Followers Box in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSYKQkPyhRQYd_ulRJjXy0CgyDiDFEwJbVeXgBKoqFY9f97PlSfgB1Bz-OMTnuE72K8Hvwu-Egv3uu3tR81JEqxgFAUVlomGxWdcRilYx0bLM9mXYHnR2cyehHSrPPLL3RPT0hRg-ASt-/s1600/blogolect.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 2px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+zohaibliaqat" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>

  • Replace https://plus.google.com/+zohaibliaqat with your Google Plus Profile URL

Click Save button and you're done!

We hope this article may have helped you in Creating a Sliding Google Plus Followers Box in Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Create a Drop Down Menu in Blogger

- 15 Comments
A navigation menu/drop down menu makes your blog/website user-friendly by allowing your visitors to easily navigate your blog posts by just selecting categories from the menu. A navigation menu plays an important role in your blog development, either its a top website like Mashable or a newly created blog, a drop down menu is an essential element of every website. It makes your blog user-friendly, easy to navigate and also adds a new and unique look to your design and makes it look professional. After reading all these advantages if you want to add a Drop Down menu to your Blog/Website, then in this tutorial we'll show you that how to create a Drop Down Menu in blogger. The credit goes to MBT. The design we're going to share today is simple, clean and will surely attract your visitors.
How to Create a Drop Down Menu in Blogger

How to Create a Drop Down Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

body {
margin: 0px;
}
#menu{
background: #3EA9AC;
color: #fff;
height: 40px;
text-transform:uppercase;
border-bottom: 2px solid #3EA9AC;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 1px solid #3EA9AC;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:'Open Sans',Helvetica,Arial,sans-serif;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:'Open Sans',Helvetica,Arial,sans-serif;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #3EA9AC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:'Open Sans',Helvetica,Arial,sans-serif;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Now again Search for the <body> tag and just below it add the following code

    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Blogolect</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down 1<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    <li><a href='#'>Tab No 4</a></li>
    <li><a href='#'>Tab No 5</a></li>
    <li><a href='#'>Tab No 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Drop Down 2<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
        </nav>

  • Replace Blogolect with your Blog name
  • Replace # with the Links and rename the categories

Finally click Save Template button and you're done!

From Editors Desk

We hope this article may have helped you in creating a drop down menu for your blog. Share this article with your friends and don't forget to subscribe us!