Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

How to Add A Stylish Cloud Label Widget In Blogger

Cloud Label is one of official blogger'd=s widget actually they are then only blogging platform providing the widget. Anyway their widget comes with no styling and sometime can give you blog n odd look. Therefore in this post you are going to learn 'How to Add A Stylish Cloud Label Widget' in your blogger blog, This widget helps to grouping your blog content in perfect standard way and also notifying you visitor which post is related to which. On the hand too it also helps to manage your blog bounce rate. Let's go forward and learn how to add this widget to you blog today.

N/B: Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step 1: The First thing you need to do is to login into your Blogger account and go to >> Layout >> Add Label Widget From the Layout and put the settings just like show in the picture below.

Step 2: In the template, search for the ]]></b:skin> tag  and just above it paste the following Coding.
.cloud-label-widget-content {
text-align: left
}
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #ebebeb;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #ebebeb;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}
Note that the CSS code only works for Cloud Label Widget and not for list label widget.
Share:

How to Add Simple And Elegant Social Sharing Widget In Blogger

Social sharing widgets are an essential part of blog especially when you are considering to do much of promotional work through social media. They are shortcuts to sharing the whole post. In this tutorial today you are going to learn 'How To Add an Elegant Social Sharing Widget In Blogger' and it's simple to use. This widget will help you and your visitors to share your blog content easily all over the internet via various social media sites they own. Okay, let's roll on further and see how we can add this widget/plugin to you blog. Keep in mind this widget will appear below your article or just above the author profile.

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step-1: The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}

Step-2: In the template html section, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div> depending with you template design.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>

          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
         </div>
               
      <div style='clear:both'/>
</b:if> 
N/B If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in blue from the above code.

Step-3:  ( Adding Fontawesome ) The widget works on fontawesome icons, therefore I would suggest to install fontawesome in your blog as follows.

In the template, search for the </head> tag  and just above it paste the following HTML Coding.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
I hope this article has been useful to you. Please sharing and suggest friend to come by for tutorials. In case of extra support please use the comment box below.
Share:

How to Secure your Blogger Blog from Hackers

Blogging industry is very famous these days & is gaining more momentum from passage if time. On the other hand, hacking is also growing day by day. In past, hacker's main target was social accounts, computers & bank accounts but things have changed significantly. Now, hacker's new focus is on forums, websites & blogs & they are hacking various blogs & websites for variety of reasons. Due to this, almost every webmaster is concerned that he/ she might be the next victim of hackers. This is the main reason of keeping your web presence secure & secure. If you have any blog that is hosted on Blogger, then you might be thinking about how to secure Blogger blog from hackers. In order to protect your blogger's blog from the reach of hackers, continue reading our blog.

Possibility of being Hijacked

The possibility of being hijacked is true as plenty of people have faced this worst situation. But it is not possible for everyone to hijack a blogger's blog. It might possible that even in your family & relative knows your password & can guess your password. So in your family, friend & relatives, anyone can hack your blog. Even if you have enables second 2nd stage verification, there is always a possibility of your blog being hijacked. There are many other ways which are used to hijack a Blogger's blog. But following tips will guide you how to secure blogger blog from hackers.

1. Strong Password - Key of All Solution

The primary and most important step is password. You should be very conscious while setting password. In this article i would like to tell you some vital step of setting password . The password should not contain your contacts, name, pet name, phone number, car number plate, family or celebrity name etc. It should be make by the help of small letter alphabets , capital letter alphabets, signs, symbols and some numbers. Furthermore, try your best 2 set a strong password which should not be less than 8 characters. Set some  unmemorable code which can not be judged easily by others. But the code should be memorise hardly otherwise you will forget the password. Do not write the password anywhere as it is a confidential keys. After set up the password, try not to open your Google or any other account from public computers or cafe as its violates the security rules but if emergency occur, open a separate browser and then open the private window.

2. Malicious Script

You have to exercise proper care while using themes. There are free low quality themes which are make with the intention to intrude security & hijack the blog using the themes. If you want to use free themes, then use themes available at famous websites.
I have seen bloggers that they use cracked/ null themes. Please stay away from them as almost 98 % cracked/ null themes have malicious codes. Instead of being hijacked, it is better to buy a original blogger theme from a trusted source.


3. Log in and Log out carefully

Always log in and log out carefully as this worst habit may hack your website. The blogger should always keep remember the signing in and signing out procedure. If you are not habitual of this you might suffer a huge loss of damaging your websites or accounts. People log in to their account and while typing password they are using naked buttons and the people along with them may judge the keys and catch the password. So when you are entering password, be careful about your surroundings. The blogger most oftenly forget to sign out to their accounts and because of this any person who are using your computer may access to your account easily. So make sure that you have sign out before leaving.

4. 2nd Step Verification

In order to protect your blog from hacker's attack, you must implement 2nd step verification right now. It is a wonderful & fantastic service from Google to keep secure all Google account. Under this verification method, you have to provide your mobile number to be associated with Google account. This can be done easily from account setting. After adding your mobile number, you can go to security setting & there, you will find 2nd step verification option. On enabling this, Google will send out SMS confirmation to your mobile number which you can use to enable & confirm 2nd step verification.
Now whenever you sign in to your blogger account/ Google account, 2nd step verification comes to play its part & on its own, sends a verification code to the registered mobile number via SMS. You need to put this verification code to access your account. If you enter it wrong, or someone else successfully enters your correct user name & password can not go further as he/ she may not have the verification code with him/ her. But for some people, it is quite irritating that he/ she has to enter verification code each & every time he logins to his account. In 2nd step verification, there is also an option to set Don't Ask for Codes Again on This Device. So, you will not have to follow the long process to get into your account. However, if you login from a new computer or clear cache, then you have to provide the SMS verification code to access your account.

5. All Recovery Methods

It is also very crucial that you should use all the methods of recovery. So, in the case your blog is hijacked, you can use any method to access your account & change the password. You should add all your mobile numbers in your account setting for 2nd step verification. There is also an option for adding alternate mobile number if your primary mobile number is off due to any reason. Apart from that add all your email addresses with your Google account so that you may be able to recover your account with email method. The last method to recover your account is to set security question. This is the mostly ignored thing & people do not give due attention to this. Believe me, it is the best option & unmatchable.

Dear friends, i am hopeful that you have liked article How to Secure Blogger Blog from Hackers. Google has many options which you may use to protect your blog from.being hijacked. It is up to you whether you use these options or not. Remember that your blog's posts are your efforts & you should not give anyone, a single chance to destroy these efforts. Still, you are unclear about any point or want to share something new, drop your comment below as we are listening!

Original source:sorabloggingtips
Share:

How To Choose Perfect Niche For Your Blog

Blogger is the best place to build a successful blog and earn handsome money online. The best thing from making money is that you do not need to go anywhere. Simply sit in your room & do your working in a professional way. In my 7 years of blogging experience, I have seen various examples where newbie blogger may not be a successful blogger due to the lack of knowledge about the blogging industry. Just like schools, blogging is the step by step classes which you should attempt in order to become a pro. The three major classes in blogging industry are creation of blog, search engine optimization & earning/ monetizing from the blog.

The most important thing in blogging is selecting the right niche. In simple term, niche can be said category or the type of your blog. In order to choose the right niche for your blog, it is mandatory to read out the following paragraphs. Due to wrong selection, many bloggers get tired & lose patience. Even some people give up very early and leave blogging field altogether.

Numerous Types Of Blog's niche

Before going to discuss anything, here are the some examples of niches which are best for blogging.

1. Blogging Niche

As the name suggests, this niche is about creating blog about blogs, blogging tips, making money from blog, blog SEO etc. Example is like this blog has been made in Blogging niche.

2. Cooking Niche

If you are expert in cooking, then you can start your blogging career in this niche. Even if you are not an expert but has extra knowledge about cooking which you want to share with other people, then this niche is perfect for you.

3. Technology Niche

If you are good about computers, laptops, hardware, software, games, apps, electronics. Then you can go to start blog over this niche.

4. Health Niche

This is the most important niche & requires a wide knowledge of the subject matter. The topics under this category are unlimited, so you have to be very well knowledgeable about the topic for which you are writing.

5. Education, News, Entertainment & Business Blog

This is niche is variable & doesn't concentrate on single topic. The topics under this category are unlimited and requires attention about daily topics which are happening all over the world , so you have to be very well knowledgeable about the topic for which you are writing.

Do You Have Something In You?

It is a confirmed thing that everyone in this world has some unique quality. So, it is your own quality to identify the unique quality & build over it. So, it is the case with blogging industry also. You need to look at your skills and then identify the niche at which you can work. As we mentioned various types of niche above, now it’s your turn which niche best suits you. Keep in mind that you should have or two levels upper knowledge about the niche in which you are starting your blog, so that people could take advantage from your blog.

Can You Write Forever?

Please keep in mind that if you have detailed knowledge of the niche, then only choose it. You have to write various topics under that niche on a regular basis. So you should be packed up with your plans about what you will write in future days. A good blogger is one who has plans & strategy about how a particular niche will be covered with underline topics. He/ she makes a schedule about its posts on a weekly or monthly basis so that everything remain in control & his/ her reader will be aware of what is going to be discussed in the coming days. So, they come back again & again to check the latest stuff over the blog.

Are Your Niche Is In Demand In Search Engines

After getting information & selection of a niche, you need to do little bit more exercise. You need to do research about the topics in the niche which are often searched by people. If you write quality content & no one wants to search for it, then your efforts of creating quality content is in vein. So be realistic & make an excel file and populate it with the topics that you need to include in your blog. There are many ways to do so, simply type one or two words of your topic in Google and you will be presented with so many related topics. Alternatively, you may take help from Google Keyword Planner to find out the trend in the niche & to make strategy accordingly.

Niche Worth/ Monetary Factor

If your main concern from blog is to earn money, then please keep in mind that some niches give handsome money while some other gives little money. So before going to start our blog project, we must analyse the worth of the niche. There are many different ways in which we can determine the worth of the niche.

The first & most common method is to identify your competitors. Here i m talking about the top notch competitors which are enjoying the major traffic in the same niche in which you are starting your blog. So you can learn from their blogs immensely.

You may also look at the advertisement being displayed on the competitor's blog. If they are running ads from BuySellAds, then you have wonderful thing in your hand. You can click Advertise here link & then you will be able to see full stats about the blog traffic. You may also look out major posts over your competitor's blog to identify the keywords bringing the major traffic. Then you may use Google Keyword Planner & search over each keyword one at a time. You will see Suggested Bid column, here is the story unfolds as if the price is high, then it means that niche is profitable.

If your selected niche fulfills the yardstick we set above, then you should start your blog immediately. Start your work with passion, confidence & for gaining the success. Be up-to-date with latest happening in your niche so that you could be the first to cover the latest. Be the news breaker to overrun others!
Share:

12 Things To Learn Before You Start Blogging

Blogging may sound simple on the outside but running a successful blog requires time, knowledge, discipline, and the willingness to make mistakes, and learn from them. You see, when I started blog despite of all measures I had taken, I kept failing and failing until that time came when I got everything right. So with all that experiences I would like to share with you these 12 critical things to consider before you start blogging so that you don’t get caught off guard like I was in the beginning.

1. Reason?  Why You Want to Start Blogging.

There are thousands of bloggers out there blogging out of their own reasons. In fact you can blog for whatever reason, but you need to know the purpose of your blog after'all, because that is going to determine your actions. For personal blog, setting up a Blogger account might be an option. However, on the hand Wordpress is much power platform for those who want to make money blogging.

2. Your Blog’s Niche

Another obvious reason is selecting a blog niche. It's best to pick a niche or a topic you are an expert on, or at least to have enough passion for it to make up for your lack of knowledge. Also, if you are trying to monetize your blog, you’re going to want to use Google Trends for keyword research, which will allow you to find out how your niche is performing.

3. Time, Money, and Effort

Time, money and effort, you must be wondering why all these. Well if you are thinking on how to start a blog, you should know that you will spend countless hours -That's time consumption, nothing comes easy when sharpening your writing skills, promoting your blog on social media, and making sure you remain consistent. Furthermore it will cost you money, too, because you will have to pay for your marketing campaign, domain name, and hosting at the very least unless if you prefer going with free choice of sub-domain which somehow has an odd look to me. Blogspot provides free sub-domain while wordpess also have free domain much can be done with premium style.

4. Content- A Prominent Key

Writing prominent content requires a set of acquired skill from academic level unless you are super good without it. It’s not that easy to figure out how to write great blog content, but you should definitely start by producing content that is informative and which provides something of real value to the reader. Somehow make your content to have conversational tone not like lecturing your visitors. That will encourage them to be your regular audience, post consistently.  Also take advantage of Headline Analyzer and Plagtracker to make sure that your posts are outstanding and well-formed from a headline to conclusion.

5. Copyright Laws

Infringement can be a worst case scenario, don't even think of just copying and pasting someone's work you find out there. Author of those content take much time producing them there it worth's no stealing and before you start blogging, learn how to protect your own content, and what to do in case someone steals your work. On the other hand, while it’s OK to be inspired by someone else’s work, make sure you just don't get consumed in every detail about the content. Try and make your differnt in some sort. Also, learn when and how you can use photos you find online. Simply taking an image and crediting the author may not be enough. you can edit you own photos or use TheStocks.im which offers plenty of royalty-free stock photos for you to choose from.

6. Blog’s Design-Simple and Sleek

Most users will respond to blogs which are built around a simple and elegant design. Also, you need to make sure that your blog features responsive design, which is optimized for display on mobile devices. In both cases, navigation should be as easy as possible.

7. The Basics of HTML and SEO

Not every blogger has knowledge in HTML and SEO. This is because you can get pretty much everything done on your blog without having to know the basic HTML or CSS techniques, However learning both will allow you customize themes and plugins to your own disire, as well as changing the looks of your posts. Simple Guide to HMTL Tool will teach you all you need to know. As for SEO, you will be able to drive more visitors to your blog, because your blog will be more visible in the search engines also this beginner's guide to SEO might help. You can download the PDF of it too.

8. Image Editing

I wouldn't prefer you to freely download photos from the web or paying someone else to do it for you, instead you can learn the basics of image editing, so that you can enhance your texts with eye-popping visual content like photos, infographics, and GIFs. I would rather recommend you to creating your own original designs with Canva.

9. Using of Social Media 

Social promotion is all you need for your blog. You need to let people know about your work, and the best way to do it, is through social media. Placing ads on Facebook, Instagram and Twitter is the key to generating traffic.

10. Personal Branding 

All of the knowledge and skills above can help you establish a unique visual identity for your blog. But you shouldn’t stop there, because it is important for all of your social media accounts to reflect that same identity if possible. People respond to brands, and you need to respond to their needs. Make sure to create accounts on most widely used social media platforms, so that you are in control of brand and its name.

11. Build Connections Linking

One of the things that can launch your blog into the stratosphere is the people you know, fellow bloggers. Now, we are not suggesting that you should start sending emails every day, and then end up spamming them. But, you can share some of their stuff you liked on Twitter or Facebook, and let them know about it. Reach out to influencers and start a collaboration.

12. Learning Never Stops

You will never have any time to rest on your laurels. New blogging platforms are being introduced every day, search engines alter the way they rank websites, SEO requirements change, and so on. Everything is changing constantly, and you need to stay on top of all that if you want to succeed.


To wrap with this article today blogging is a lot more complex than people think. It requires you to be a jack of all trades, such as writing, design, marketing, coding, and master of most, the coming of this blog was inspired by blogpress and you wonder how to start you own blog and needing some extra tips, the comment below will be very useful
Share:

Random Post Widget With Thumbnails For Blogger

Random Posts Widgets are great tools for enhancing post performance. This widget will keep displaying different posts every time the blog is updated, refreshed or even when visiting anothe post time to time. As for sure this will increase your traffic as visitor will be seeing different topics at a time and therefor wanting to read the post. 


  • Installation: Log into your blogger account>>>go to layout>>>click on it and pop up shows>>>choose HTLM/Javascript.


Copy the code below and page in the widget the click save and you are ready to go.

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}
#random-posts img:hover {
    opacity: 0.6;
}
ul#random-posts {
    list-style-type: none;
    padding: 0px;
}
#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}
#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3IrZs9hiPZQG3vARskqstGDcdxZCW02HP3z_v-K0girSEOXT6uMZn9TZ-X_5G-7Zb5RlYG43Pvq6CtyPvxG4k7RrASzrCW1mksWsKZjz0Cn4_SGwK_Fn7t589JFJ59SLdn4pvy56ZfM/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Random Posts Option

  • Thumbnail dimensions: to change the size of the thumbnail in pixels, replace the 75px value
  • Summary length: you can set the length of the summary(characters) by changing the 100px value form var randompost_chars=100;
  • Post info: post date and comment count options change 'yes' from var randomposts_details='yes'; to 'no';
  • Font size for post titles and summary: modify the font size for the pot snippet change the value 11px to your choice value.
Share:

How to Create a Floating "Sticky" Sidebar Widget in Blogger


Sidebar widgets that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. In this article, I will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for.

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali & Revised by Levynson Otunga
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>
Now after finding the code as mentioned above, just replace it completely with the following coding.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>
Remember: The ID of your widget should be unique. For example, if you are using id='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.

This article was published at mybloggerlab and revised by blogakona

Keep in Mind you can also get get some come stuff from mybloggerlab too.
Share:

ENOUGH WITH NON-RESPONSIVE SITES ALREADY!

Still waiting for a sign from above to compel you to take the necessary steps to tweak that old site of yours so it can finally be classified as “Responsive” and “Mobile friendly”?

Well, this might be it…

It’s 2017… Your Site Should Be Optimized For Mobile!

Since Mobile usage keeps growing and growing and growing, Google has implemented a series of measures that will rank sites differently depending on their Mobile-preparedness.

The multinational conglomerate and leader in search has removed its ‘Mobile-Friendly’ label from its results, something first introduced in 2014. Why the shift toward removal, you might ask?

Aside from their goal of simplifying mobile search and helping users better find the content they’re seeking, this change is in large part due to the fact that 85% of most websites are already mobile-friendly!

It may seem counterintuitive, but it’s not. Its removal suggests mobile-optimized sites are no longer a suggestion from Google but now more of an expected and assumed reality.

In fact, this new direction by Google should come as little surprise to some, especially those who recall the news in 2016 when the company announced they would be adopting “Mobile-first” indexing over Desktop-oriented indexing.

Their algorithms will now primarily use the mobile version of a site’s content to rank pages from that particular site. So if you’re not mobile-friendly yet, this is your call-to-action!

Those changes were implemented last November, but you probably haven’t felt them yet. Indeed, Google took baby steps in the months thereafter before transitioning and rolling out the widespread change.

But having not quite felt—or noticed—a difference in your Google Pagerank ranking doesn’t necessarily mean that you should continue sitting on your… couch.

Is your site Mobile-friendly? Check it with Google’s official tool!
If you already have a mobile version of your site set up OR a responsive one, here’s Google’s official “Mobile-Friendly” site checker and testing tool we highly recommend you give a whirl. It’s quite nifty!

And if you’ve made changes to your site, don’t forget to inform Google by going to Google Search Console to Fetch your URLs, so the search engine will reevaluate it.

Intrusive ads are so in the past! Be flexible with mobile in 2017

Your can’t-miss-it offer that USED to convert like crazy is now the shred of what it used to be!

It could be because its one-time, hard-to-skip design is now a problem and is no longer the conversion catching magnet and asset it once was.

If you’re wondering why, it’s because back in January, Google announced penalties for sites that incorporated intrusive interstitials and pops that made content less accessible on mobile devices.

Since mobile use is now higher in the US (51%) than desktop (42%), Google decided to implement measures to help users find the best answers to their questions more quickly, regardless of the device they’re using.

You know those pops that seemed next to impossible to skip without doing whatever…? Well, now if they appear, you will surely receive a penalty from Google. Which means a drop in the results, and less traffic for you.

Thing is, penalties could be manual, which means they might give you a warning via email before it’s applied, or they can also be automatic. You may very could see a drop in conversions without knowing why. That’s when you know you’ve been ghosted!

Google’s take on “intrusive”

If you’re wondering what Google considers intrusive, here are some examples from the master of search themselves:


All pops and interstitials that are difficult to minimize or close, that take up the entire screen or blur the content will be penalized. With some exceptions…

Those who display age verification or cookie usage won’t be penalized, as well as login dialogs on sites where content is not publicly indexable.

Smaller banners that use less screen space won’t be penalized either. So don’t burn your house down just yet! Reducing the size of your pops might mean a slight decrease in conversions, but it will allow you to stay in the Google game, and the true value there is immeasurable.

Remember that when you make you’re contemplating intrusive vs. non-intrusive…

You’re getting traffic, but is it quality traffic?

Google found that almost 70% of users who encountered an intrusive ad left the site, never to return. And if these users appear to spend more time on your site with interstitials opposed to traditional pops … it might just be to find that sneaky “X”!

In that same test, Google examined the number of users who downloaded the Google+ app after seeing it advertised in an intrusive manner as well as a non-intrusive design.

They reported no change in downloads with a more subtle version of its ad.

But the kicker is that the traffic on the website increased by 17 percent with a less intrusive design.

Content and Consent

To improve your position on Google and to make sure that users keep coming back to your site, content is key. And it will unlock many possibilities for conversions.

It’s all about permission and consent…

Instead of losing customers by irritating them, you’re attracting them by respecting their boundaries!

In addition to your mobile-friendly design, this is a surefire way to get people to come back again and again!

Learn more from incomecrack
Share:

HOW TO CHOOSE A GREAT WORDPRESS THEME

WordPress — it’s the leading free content management system beloved by so many.

It allows us to create beautiful websites and blogs of all varieties and niches without breaking the bank. But when it comes to theme selection… there’s just so many choices!

In WordPress, your theme sets the tone (and overall look and feel) of your site within seconds of that first user impression.

That’s why it’s essential to pick a theme that’s right for you, your site, and one that delivers.

Here are some things to consider to help you pick that perfect WordPress theme!

Is the theme regularly updated?

This first question — whether the theme you’re looking at provides regular updates — is actually a must-ask question and a good indicator of a theme’s quality.

The date of the last update is visible on the theme’s presentation page whether you’re browsing the official WordPress Theme Directory or browsing Themeforest.

Don’t make the mistake of selecting a theme that hasn’t been updated in years because you’ll have absolutely no way of fixing problems if you encounter a bug, or if one of the features no longer work.

A good rule of thumb: a theme that’s been updated in the last 6 or so months is generally regarded as a safe bet and safe choice.

And this brings us to the number one question for any Webmaster just starting to get his or her feet wet in the WordPress scene…

FREE vs. PREMIUM?!

The million dollar question is:

  • do you go with a free WordPress theme, or a paid one?

Really, it all comes down to where you’re at with your marketing and what your budget is.

Will a free theme suffice for the average Webmaster just starting out?

Sure, you bet! There’s some pretty decent themes out there at no cost.

But here are some of the common issues you run into with free WordPress themes:

  • Themes frequently end up abandoned.
  • Support can be non-existent.
  • Theme creators may be nowhere to be found.
  • And the coding can be quite amateur-ish and crummy.

For the obvious reasons above, that’s why many Webmasters find themselves going the premium theme route.

Sure, it may cost you some money, but as the old saying goes:  you get what you pay for.

Other questions to ask:

What’s its rating?

Whether you’re going for a free or a premium theme, the theme’s overall user rating is another good indicator of how a theme holds up.

Obviously, the more ratings a theme has, the better you’ll be able to gauge how good or bad it is.

Just as you can find when a theme has last been updated on Themeforest or in the WordPress Theme Directory—you can find a theme’s rating on these same two pages.

Shooting for themes rated 5 stars never hurt nobody.

But don’t judge a theme too quickly if that theme you’re gravitating towards only has a 3 star rating after a few user reviews.

Remember, people who are disappointed are two-times more likely to rate a theme than the people who really enjoyed it.

So see what the general consensus is and use your best judgment and go from there.

If you want to avoid being inconvenienced or burned — stick with highly rated themes with many user reviews.

Does the theme provide support?

OK, maybe you’re a WordPress Jedi and you know you could rewrite the entire theme’s source code with your eyes closed if you really wanted to—but that doesn’t change anything we’re about to say.

Theme support is paramount.

And good theme support… on the other hand… is essential.

The difference between lackluster and awesome support means all the difference in time you could be saving, especially when it comes to working on other projects.

To the less seasoned WordPresser—reliable support is a lifesaver.  Support can help ensure you’re getting the most out of that WP theme.

With that said, it’s no secret the premium themes (aka the ones that cost money) are the ones that have the best support track record.  But that’s not to say all free ones fail in this department.

Believe it or not, some authors put their blood, sweat, and tears into a theme before releasing it. In many ways, it becomes their baby.

If you’re lucky enough to find a free WordPress theme with this kind of integrity and history behind it — it’s usually smooth sailing from there.

Authors who fall into this category usually have a tremendous track record when it comes to providing above and beyond dedicated support.

So while doing your theme research, check out if a theme lists any information about its author, and if it does, see if this person has went to great efforts answering other people’s questions.

You can also get a good idea of the average response / answer time by checking out the associated themes’ support pages via the Support forums and “Support” tab on a theme’s presentation page.

Is the theme Responsive?

OK, we know, this one might seem like a no brainer in the age of smartphones and tablets — but a theme’s Responsiveness should still be an essential deciding factor before pulling the trigger.

In fact, it’s very easy to find out.

To ensure a WordPress theme is responsive and a contender for your needs, simply preview it through ResponsiveTest.net (it’s a very nifty tool).

Don’t just trust the theme’s description —  put it to the test!

Recommendation>> TOP WORDPRESS THEMES FOR ADULT BLOGS.

Is the theme easily customizable?

And last but not least…

How customizable is the WordPress theme you’re considering?

  • Do you need a theme that you can modify a bit and tailor to your needs?
  • Or does a one-size fits all approach work just fine for you?

Sure, themes may be really well designed these days, but that doesn’t mean you won’t want to tweak a thing or two at some point in the near future.

Indeed, customizing a few things – even just things of subtle nature  – is what makes your site or blog stand out from all the rest.

If you are an experienced WordPress Webmaster, you may want to look for a theme with a simple and comprehensible StyleSheet to save time on theme customization. Indeed, sometimes theme creators deliberately protect their design by making their StyleSheet clunky without notes, filled with unnecessary code, so it isn’t easy for the average user to modify. You’ll find this especially true with the free themes.

If you are unfamiliar with WordPress, you may want to search for themes with customization features already included and integrated. This way, you’ll be able to work on the theme and add your brand signature without having to struggle with the code (but it’s always good to start familiarizing yourself with the code sooner rather than later because it will open up more opportunities in the long run!).

The Search is ON for the Perfect Theme!

Depending on the exact type of theme you’re on the hunt for, you may need to ask yourself some additional questions and check a few more things off your checklist before making up your mind.

(e.g., if you know for a fact you’ll be using your site to sell something — like sex toys, for instance — you would want your WordPress themed site to be able to handle the task and perhaps suited for plugins such as WooCommerce — which has been self-described as the best eCommerce platform for WP).

But regardless of the type of site you plan on running, the questions we highlighted above are ones worth asking when it comes to theme selection.

Read more from incomecrak
Share:

#AddThis: The Beginner’s Guide to On-Page SEO


You want people to find your website, right?

Well, that means making sure that when someone searches Google or another search engine for what you’ve got on your site, they’ll find it. This will only happen if the content on your website is properly optimized.

Sounds pretty straightforward, but there is a lot you can do on your site to get search engines prioritizing your content above others with similar keywords.

Download the AddThis Beginner’s Guide to On-Page SEO.


Share:

How to add Adsense to WordPress Blog


Google Adsense is one of the easiest ways to make money online from your website. In this article, I explain how to add Google Adsense Banners into your WordPress  Blog sidebar and content.

As you’ve probably noticed, I’m using Google Adsense in my blog to make some money online. Google Adsense is one of the biggest (and probably easiest) alternatives to make money online when you have a website or a blog.

Why Adsense?
Simple. As you’re starting to make a website or a blog, you’ll definitively want to make some money from it. This way you can at least make a few cents and pay the hosting or other expenses.

Thus, Adsense is the alternative from Google which allows you to put contextual ads into your site depending on what you’re writing.

The best thing is that Adsense is really easy to setup, and you just need to send your request with your website and wait until Google decides to enable your account.

However, one thing is to create an Adsense Ad and put it wherever you want on your blog, and another different thing is to put it on the right place. For instance, I recommend putting Adsense Ads on the following places:

  • Top Banner of your website (468×60 px)
  • Sidebar (Varies from 125×125 px up to 300×250 px)
  • Content (468×60 or 300×250)

So, to achieve this, there’s a manual way to do it by modifying your posts php file, or you can add it manually on every post. But I prefer doing it with a WordPress plugin, so let me show you how I do this.

How to add Google Adsense to WordPress

Step 1 – Create an Ad
First, go to your Adsense Dashboard and then into “My Ads” menu. Create a new Add from there:

Then customize your Ad depending on your website’s design. In my case, I selected a default style which already matches my website, but you can customize it if needed.

Also make sure you select the name of the Ad and select if you want text, pictures or both things displayed in your banner. Don’t worry too much. You can change this later.

Step 2 – Install the Quick Adsense Plugin
Now the plugin I’m going to use today is called Quick Adsense. Quick Adsense allows you to put multiple banners in your page, no matter if they’re from Google Adsense or any other Ad program (including Affiliates). So download it, enable it and access to the configuration panel.

From this point, you’ll be able to select how many Ads you want to show and the position of it. For example, I’m using an Ad at the top of the content with right alignment, and a secondary ad centered at the middle of the content.

Step 3 – Copy and Paste your codes
After you select your Ads (Google Adsense allows up to 3 ads in the same page) then you can copy and paste your Adsense Code to the selected Ads. You can also add a pixel margin between the Ad and the content, which by default is 10px.

And there you have it. After doing this, save the settings and open a post on your blog to see how it looks. If you’re not satisfied with the result, go back to the Quick Adsense panel settings and move everything until you feel it’s good enough (Remember not to be so intrusive with your readers).

Credit stream-seo
Share:

How To Fix "Microsoft Hosted Network Is Not Available" Error


Halo there my friends, are you in or perhaps in trouble solving Microsoft Hosted Network?. Well, worry not as in this tutorial am gonna show you how to fix 'Microsoft Hosted Network is Not Available' error, which appears when using Connectivity Hotspot application on your computer.

When Microsoft Hosted Network is Not Available appears you can not start the connectivity hotspot on your computer. What you should do is to go to Device Manager on your windows, then Find the Network Adapters, then look to the Microsoft Virtual WiFi Miniport Adapter, if there is a down arrow picture on the icon, it shows the driver software is out of date and you have to update it in a way, right-click Update driver Software then Search automatically for updated driver software.

Once the driver is Microsoft Virtual WiFi Miniport Adapter has been updated, start Connectivity Hotspot.

If the above methods still not work, please follow these steps ...

Open commandline cmd.exe as an administrator and enter next command:

netsh wlan set hostednetwork mode=allow ssid="MS Virtual WiFi" key="networkkey" keyUsage=persistent

press Enter and if you have entered is correct, then will confirm execution of the command and and the "Microsoft virtual WiFi miniport adapter" should appear in the Device Manager list (refresh list if you need).
Share:

#Wordpress: How To Automatically Insert Ads After First Paragraph

Hey folks, how are you doing today?...hope you're fine. Thanks for finding this topic as it is of much interest to you. Well you must have come across or seen some blogs with ads in the middle or whichever position in articles of each post, okay if you think of doing the same then hold on a continue reading this article. Putting ads code inside a post it's of a tricky job especially non-coders but still there are much simpler ways of doing even without coding classes you can still go on and do it yourself. i bet with this tutorial you can also call yourself a genius..well i i always do that...lol

Enough with talking, there is an easier way to insert ads after first paragraph automatically in wordpress  using a script that is put in the functions.php file. This method is much easier and more effective, because you do not need to touch the script adsense again during making articles.

The final result of this code is that it will be automatically be inserted by the script into the post after predetermined mark. In this tutorial, ads code will be inserted into each posts after first closing paragraph (html, paragraph), then the ads will appear in every post right after the first paragraph.

Below is a script behind the trick that must be inserted into your functions.php file to insert ads after first paragraph automatically in wordpress.

//Insert ads after first paragraph of single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
     function prefix_insert_post_ads( $content ) {

 $ad_code = '<div>Ads code goes here</div>';
 if ( is_single() && ! is_admin() ) {
  return prefix_insert_after_paragraph( $ad_code, 1, $content );
 }

 return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
 $closing_p = '</p>';
 $paragraphs = explode( $closing_p, $content );
 foreach ($paragraphs as $index => $paragraph) {
  if ( trim( $paragraph ) ) {
   $paragraphs[$index] .= $closing_p;
  }
  if ( $paragraph_id == $index + 1 ) {
   $paragraphs[$index] .= $insertion;
  }
 }

 return implode( '', $paragraphs );
}
Once you put the above code into functions, things you should do next is replace the red part with your ads code. You can also change the number of paragraphs by changing the orange part. Suppose I change the number of paragraph to 2, then the ad will appear after the second paragraph.

and that's how you do it, now you can insert ads after first paragraph automatically in wordpress with ease. Go ahead and call yourself a genius'@@@. If there are any questions please comment below, I will be happy to answer your questions.

Share:

How To Installing Responsive Slider Recent Post


Installing Responsive Slider Recent Post - Well this time I will share about how to install a recent post that has been responsive slider.

Immediately, the way it is applied.

1. Log in to your blog> Template> Edit HTML Then copy and paste the code below just before or

]]></b:skin></style>

/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
In the above CSS I used the font Oswald, please change and adjust to the theme of your blog.

2. Copy and paste the code below just above

</body>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]></script>
Replace URL-BLOG-URL with your blog url.

3. Copy and paste the code below wherever free.
<div id="featuredpost"></div>
4. . Finally save the template and view the results.

If you want to bring up the slider is just a recent post on the main page only, please wrap HTML code with a special conditional tag main page.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Learn more about the application of conditional tags You can see here 

Some function Conditional Tags In Widgets

And if anyone feels difficulties with its implementation, here I've been providing practical version. You can simply copy all the code below into the Layout> Add Gadget> HTML / JavaScript and paste all the code there Save
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Learn more about the application of conditional tags You can see here.
Some function Conditional Tags In Widgets 
And if anyone feels difficulties with its implementation, here I've been providing practical version.
You can simply copy all the code below into the Layout> Add Gadget> HTML / JavaScript and paste all the code there> Save
<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-YOUR-BLOG",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]></script>
For application, save right on the widget Posting Blog in the Layout.

If you want to bring up the slider is just a recent post on the main page only, please wrap the widget with a special conditional tag main page. Example

Example: Click Templates> Open edit HTML> If you are a slider widget code #HTML4

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable> </b:widget>
Add tags conditional on the widget to be like this:
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable> </b:widget>
Information :
  • MaxPost: The number of all the posts that will appear in the list
  • Imagesize: The maximum size of a picture (The larger the size the more clear the image pixel density will appear, but the more time it takes to load the page)
  • Interval: The time needed when the post moves (Example: 10000 means 10 seconds)
  • Autoplay: (True) Post will switch automatically, (False) Post will not switch automatically.

Any Problem? Comment below I will be glad to help.

Share:

Trending

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.