Articles by "Blogger"
Showing posts with label Blogger. Show all posts

- 0
Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

Now a day, maximum people are adoption blogging platform to share their views, opinions and feelings. As you all know there are lots of blogging platform which are used to manage a blog of a website. Blogger and Wordpress are the two biggest blogging platform of the world. So i have decided to write a tutorial on mobile menu for bloggers as well as wordpress users

What is Mobile Menu?

Mobile menu is a native responsive menu that is designed to fit the interface of various mobile devices. There are Billions of users who are surfing the web using mobiles today. It is easy for them to browse through a mobile responsive sites. If your website or blog is responsive but the menu is not responsive then you may lose your visitor. In order to have a better user interface your website must have a mobile responsive menu. Because when a visitor first enter your blog through a do follow link, he/she used to click the menu for browsing various article section on your blog. This is why mobile responsive menus are more demanded today.

How to add Mobile responsive menu on blogs?

To design a beautiful mobile responsive menu for your blog or website follow the steps given below perfectly. I have created a new layout for mobile menu. You can see the screenshots in the below section after steps:
Also Read: Animated CSS JQuery Search Box For Blogger & Wordpress

Step 1: Add the HTML code

<div id='main'>
<div class='container'>
 <div  style='margin-top:150px;margin-bottom:30px;text-align:center;'>
 <img src='your-logo-url.png' style='width: 100px;margin-bottom:15px'>
 <h1>Material Design Responsive Menu For Bloggers</h1>
 <br/>
 <h2>Designed by Droidadda</h2>
 </div>
 <navbar class="fixed-top">
 <div class='nav-fostrap'>
 <ul>
 <li><a href=''>Home</a></li>
 <li><a href='javascript:void(0)'>Web Design<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>HTML</a></li>
 <li><a href=''>CSS</a></li>
 <li><a href=''>Javascript</a></li>
 <li><a href=''>JQuery</a></li>
 </ul>
 </li>
 <li><a href='javascript:void(0)' >Blogger<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>Widget</a></li>
 <li><a href=''>Tips</a></li>
 </ul>
 </li>
 <li><a href='javascript:void(0)' >SEO<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>Tools</a></li>
 <li><a href=''>Backlink</a></li>
 </ul>
 </li>
 <li><a href=''>Google Adsense</a></li>
 <li><a href=''>Advertising</a></li>
 <li><a href=''>Business</a></li>
 </ul>
 </div>
 <div class='navbar-fostrap'> <span></span> <span></span> <span></span> 
 </div>
 <a href='' class='title-on-mobile'>Fostrap</a>
 </div>
 </navbar> 
 </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>
</script>

Step 1: Add the CSS code

body {
  background: #F0F0F0;
  font-size: 15px;
  color: #666;
  font-family: 'Roboto', sans-serif;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
body {
 padding-top: 50px;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
navbar a { text-decoration: none !important; }
.nav-fostrap {
  display: block;
  margin-bottom: 15px 0;
  background: #3498db;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 120;
}
.nav-fostrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}
.nav-fostrap li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #def1f0;
}
.nav-fostrap li a {
  padding: 15px 20px;
  font-size: 14px;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}
.nav-fostrap li:hover ul.dropdown { display: block; }
.nav-fostrap li ul.dropdown {
  position: absolute;
  display: none;
  width: 200px;
  background: #2980b9;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0;
  z-index: 110;
}
.nav-fostrap li ul.dropdown li {
  display: block;
  list-style-type: none;
}
.nav-fostrap li ul.dropdown li a {
  padding: 15px 20px;
  font-size: 15px;
  color: #fff;
  display: block;
  font-weight: 400;
}
.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }

.nav-fostrap li:hover a {
  background: #2980b9;
  color: #fff !important;
}
.nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}
.title-on-mobile {
  display: none;
}
 @media only screen and (max-width:900px) {
.nav-fostrap {
  background: #fff;
  width: 200px;
  height: 100%;
  display: block;
  position: fixed;
  left: -200px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  z-index: 105;
}
.title-on-mobile {
  position: fixed;
  display: block;
    top: 10px;
    font-size: 20px;
    left: 100px;
    right: 100px;
    text-align: center;
    color: #FFF !important;
}
.nav-fostrap.visible {
  left: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  z-index: 90;
}
.nav-bg-fostrap {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #3498db;
  padding: 12px 0 0 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 100;
}
.navbar-fostrap {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
    z-index: 102;
}
.navbar-fostrap span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 20px;
}
.navbar-fostrap span:nth-child(2) { width: 20px; }
.navbar-fostrap span:nth-child(3) { width: 20px; }
.nav-fostrap ul { padding-top: 50px; }
.nav-fostrap li { display: block; }
.nav-fostrap li a {
  display: block;
  color: #505050;
  font-weight: 600;
}
.nav-fostrap li:first-child:hover a { border-radius: 0; }
.nav-fostrap li ul.dropdown { position: relative; }
.nav-fostrap li ul.dropdown li a {
  background: #2980b9 !important;
  border-bottom: none;
  color: #fff !important;
}
.nav-fostrap li:hover a {
  background: #3498db;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li:hover a {
  background: rgba(0,0,0,.1); !important;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}
.cover-bg {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
}
 @media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
left:0; 
z-index:120;
}

Step 1: Add the Javascript code

$(document).ready(function(){
  $('.navbar-fostrap').click(function(){
   $('.nav-fostrap').toggleClass('visible');
   $('body').toggleClass('cover-bg');
  });
 });
  • Save your theme/Template and see the result.
  • This way you can add this beautiful mobile responsive menu on your blog or website.

You can also see this:

See the Pen Fixed Navigation Menu Material Design by Sunmughan Swamy (@sunmughan) on CodePen

Also Read: Beautiful Animated Button With confirmation For Websites

Menu Screenshots

Desktop View


Mobile View



Final Words

This was the article on How To Add Mobile Responsive Menu To Blogger/Wordpress. I hope you'll like this article. If you need any extra help completing this guide, then you should tell me in comments. If installation fails, then the only thing that you need to do is to try and repeat the whole tutorial more than once.
Also Read: Animated CSS-JQuery Filter For Websites & Blogs

Google Search Tags:

CSS Menu, HTML Menu, Mobile Menu, HTML CSS Menu, HTML CSS Menu for Websites, Beautiful CSS Menu for blogs, Beautiful CSS Menu for Websites, Beautiful CSS Menu for Wordpress, Best Mobile Responsive menu for Blogger, Best Mobile Responsive menu for Wordpress, Best Mobile Responsive menu for BloggerWebsites, Best Mobile Responsive menu, Best Mobile menu for Blogger, Best Mobile menu for Wordpress, Best Mobile menu for Websites, Fully Responsive Mobile Menu for Blogger, Fully Responsive Mobile Menu for Wordpress, Fully Responsive Mobile Menu for Websites
Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends and show how they can learn amazing things on Droidadda. If any issues then feel free to comment below. Peace out.
Continue reading

- 0
Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

Hello friends, in this tutorial I will like to show you how you can create a really cool animated CSS Animated Search Box for your websites and blogs.

Many on you had heard about cool CSS widgets for websites and even you've tested them once. As far as i've concerned, lots of users are opted on Blogging today. Most of them are using Wordpress and Blogger for posting various articles on the internet. This is really good example of social media sharing.

To start off, you will need the following tools:

  • CSS3 for styling and animations
  • HTML for the structure
  • JavaScript and jQuery as the manager of our demonstration.

How To Add Animated Search Box on your Blog?

Follow the steps mentioned below properly to add this beautiful search box widget to your blog. Both Wordpress and Blogger users can add this widget on their blog as well as other users such as Joomla,Drupal and other sources.

    Part 1 : HTML

    First of all, we have a container, div, with “search-wrapper” class. This will hold and center our search box.

    The first children element of our primary container is called .input-holder. This one has a fixed width in our main container .search-wrapper. The .input-holder contains the text input and the search button.

    Remember:

    • The text input is positioned absolute and stretched on the full length of his “parent”
    • The search button has the CSS float property with the value of right, in order to keep it on the right side of our container while animating it.
    The second children element of our div is called .close ,and it acts as a container for the close icon, created using the CSS pseudo classes ::before and ::after.
    <div class="search-wrapper">
<div class="input-holder">
<input class="search-input" placeholder="Type to search" type="text" />
        <button class="search-icon" onclick="searchToggle(this, event);"></button>
    </div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>

    Part 2 : CSS

    Note: In order to have a light code structure and easy to read article, I will not add the vendors prefixes for any CSS property. You can easily find the complete source on the DEMO page, or in the DOWNLOAD link.

    Since our demonstration is about animating with CSS, I will insist on explaining the CSS animation/ transition techniques, and not on the casual CSS properties. Now, let’s take a close look at the way I centered the main wrapper, .search-wrapper, and talk about that :
    .search-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
}
.search-wrapper.active {}

    First of all, to center an element in the middle of the document, you’ll need to use position:absolute , and set the top and left side to 50%. You have the result of that in bullet 1 in the picture below.

    Next, you will see that the top-left side of the element is positioned in the middle of the document, but that’s not exactly what we want. So by using CSS3 property transform:translate(x,y) , where “x” and “y” are -50%, you will be able to subtract 50% of your current element’s width and height from the current position. See bullet 2!

    Note: Before having CSS transform at our disposal, we used to calculate that offset with JavaScript, and you know how annoying that was, right, developers?

    Bullet Position

    Now let’s see . input-holder :
    .search-wrapper .input-holder {    
    height: 70px;
    width:70px;
    overflow: hidden;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    width:450px;
    border-radius: 50px;
    background: rgba(0,0,0,0.5);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

    The .input-holder has 2 different transitions, one using the ease-in-out predefined timing function (that applies when you close the search box), and the second one using cubic-bezier timing function (that applies when you expand it).

    .input-holder has 2 values for width, one for the closed state, and another for the expanded state. Same thing with the border-radius and background properties.

    Moving forward with .input-holder, we have the text input (.search-input) and the search button (.search-icon):
    .search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    transform: translate(0, 60px);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: #FFF;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    transform: rotate(45deg);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
    position: absolute; 
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #FE5F55;
}
.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    right:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    transform: rotate(-180deg);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    right:-50px;
    transform: rotate(45deg);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FE5F55;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}

    As mentioned above in the HTML part of this tutorial, the .search-input has position:absolute, stretched at 100%. This means that it takes the value of his parent.

    For the animation, we have 2 states:

    When the .input-holder closes, we apply a few CSS3 properties on .search-input : transform:translate (0,60px), this moves the search input on y axis (bottom) with 60 pixels opacity:0 (self explanatory) transition-delay: 3s, this allows delaying the transition with 3 milliseconds, to have a more interactive animation
    the last thing we need to do is to apply a transition that has a cubic-bezier timing function with a 3 milliseconds duration, transition:all.3s cubic-bezier (0.000,0.105,0.035,1.570)
    When the .input-holder opens, we switch the opacity from 0 to 1 and transform from translate (0,60px) to translate (0,10px). As for the transition property, it’s inherited from the previous state.
    The .search-icon and .close use the same methods for the transition as described earlier, with a few differences, such as using the transition property in conjunction with transform:rotate (x deg). This allows us to rotate our element around its own center.

    In the HTML part of our tutorial, I’ve mentioned how some of the icons are created with CSS pseudo classes, ::before and ::after. When using before and after pseudo classes, you have the possibility of inserting content before or after the content of the selected element. You can create a lot of cool stuff, such as icons, but we’ll share more info about this in future articles.

    To close this section, I want to let you know that I’ve used a lot of transitions to achieve the desired animations, and a lot of cubic-bezier. If you want to get the best animations using transitions, my advice would be to check out some cubic-bezier documentation and tutorials.

    Part 3: JavaScript

    Before doing anything else, you will need to include jQuery for this to work. Notice that our main wrapper, .search-wrapper has a .active class attached in the CSS. We’ll use this class for toggling between the states of the main wrapper child.

    The searchToggle() function adds or removes the .active class from .search-wrapper in a toggle like fashion.
    <script type="text/javascript">
function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') &&
        $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
        }
}</script>

    You can also download the code for this search box widget. Just tap on the download button below to proceed.

    Final Words

    So this was the article on Animated CSS JQuery Search Box For Blogger & Wordpress. I'm sure it will clear all your consequences about this article on your mind. Now you have known all the facts about Animated CSS-JQuery Filter clearly. I hope you love this article.

    Share this article with your friends and do let them know about this amazing article and I hope they will love it and love to install it on their device. Thank you for visiting Droidadda and keep visiting for more tips and tricks like this and I will meet you in the next article. Till then stay peace.
    Continue reading

    - 0
    Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

    Hey Fellas, My name is Sunmughan Swamy & i'm back again with an amazing article for bloggers and HTML Webpage users. Today i would like to share an article on new below post subscription box for bloggers. 

    I have recieved requests from many bloggers to post on a newly designed Email Subscription Box for Bloggers. So atlast i got a new one from a blogger template. I have collected all the required codes (CSS & HTML) and experimented a while to test it out whether its working or not. and Finally i got it working and is ready to serve you 😊
    So, What are you waiting for? Lets read the article now :p

      How To Add Subscription Box ?

      I will provide you all the necessary steps to add this subscription box in your blogger template to display it below your blog post.

      Follow the below steps to add this on your blogger template:-
      • Step 1: Open Blogger and  login to your account.
      • Step 2: On the Dashboard Click on Theme.
      • Step 3: On the Theme click on Edit HTML.
      • Step 4: Now search for this code <data:post.body/> and paste the below code just above the code you searched.
      <div class="subscribe-widget" id="subwid" style="display: block;">
<div class="form-promo">
<i class="fa fa-envelope"></i>
<h3>Wanna get our awesome news?</h3>
<h4>Sign up and get the best viral stories straight into your inbox!</h4>
</div>
<div class="tl-rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburnerUserName', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email-field" name="email" placeholder="Enter your email address..." type="text">
<input name="uri" type="hidden" value="feedburnerUserName">
<input name="loc" type="hidden" value="en_US">
<input class="email-button" type="submit" value="Subscribe Now">
</form>
</div>
<div class="form-policy"><p><span>*</span>we won't spam you</p></div>
</div>
      • Step 5: Now search for this code ]]></b:skin< and paste the below code just above it.
      .subscribe-widget{background:#222;color:#fff;position:relative;overflow:hidden;border:1px solid #eee;text-align:center;margin:25px 0;padding:25px 0;}
.form-promo i{font-size:50px;margin-bottom:25px;}
.form-promo h3{text-transform:uppercase;margin:0;}
.form-promo h4{font-weight:400;font-size:17px;margin:0 0 15px;}
.form-policy p{font-size:12px;margin:10px 0 0;}
.form-policy p span{color:red;padding-right:5px;}
input.email-field{font:normal normal 14px 'Prompt', sans-serif;display:inline-block;width:50%;color:#ccc;background:none!important;border:1px solid #f5f5f5!important;text-indent:20px;outline:none!important;height:50px;padding:10px 0!important;}
 input.email-button{font:normal normal 14px 'Prompt', sans-serif;font-weight:500;height:50px;cursor:pointer;border:1px solid #ffcc33;background:#ffcc33;outline:none;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;padding:0 15px;}
 input.email-button:hover{background:#333;color:#fff;}
      • Step 6: Now search for this line @media only screen and (max-width:767px) { and paste the below code after this code begins.
      .subscribe-widget{padding:25px;}
      • Step 7: Now search for this line @media only screen and (max-width:479px) { and paste the below code after this code begins.
      .form-promo h3{font-size:14px;}
      • Step 8: Now save your "Template". Congratulations! you have successfully added this subscription box below your blog post ♥

      Final Words

      This was the article on Animated Delete Button with Confirmation. I hope you'll like this article. If you need any extra help completing this guide, then you should tell me in comments.
      Also Read: Pure CSS Colourful Progress Bar Line for Blogs&Forums
      Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends and show how they can customize their Webpage. If any issues then feel free to comment below. Peace out.
      Continue reading

      - 0
      Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

      Want To Become a Successful Blogger?

      Today blogging is a passion adopted by many users on social media platform to share their articles, views, opinions among others. It is one of the most used posting form now a day. 
      So, whether you’re just starting out or have been blogging for years it doesn't matter, now you can easily learn how to become a professional bloggers & how to turn your passion for blogging into extra revenue or possibly a rewarding career which can help you out improvising your skills in blogging.




        This is not an overnight way to get-rich, but rather a book on practical guide for creating and marketing through a blog with the potential for generating a six-figure income or more.

        E-book Contents

        This book contains the following concepts mention in details below:-
        1-Skills needed by a Professional Blogger
        • 1.1- Learn Web Designing:
        • 1.2- What is Web Designing?
        1. a. Adobe PhotoShop CS5 (Must)
        2. b. CSS and HTML:
        3. c. Adobe Dream Weaver CS5:
        2- Three Learning Stages for Bloggers
        • 2.1- Should you follow Pro Bloggers?
        • 2.2- Blogging Learning Stages:
        1. a. Stage#1:
        2. b. Stage#2:
        3. c. Stage#3:
        3- Why Your Blog Makes no Money?
        • 3.1- Internet Users Turning Into Content:
        • 3.2- Three Fundamental Tips to Succeed As Blogger
        1. a. Patience and Dedication
        2. b. Learn and Keep exploring Skills
        3. c. Avoid the unavoidable:
        • 3.3- Conclusion
        4- Become SIX FIGURE Blogger 4.1- What is Blogging?
        • 4.2- Why are you relating Blogging to Web Development?
        • 4.3- What is web development?
        1. a. Difference between Static and Dynamic Pages
        • 4.4- Learning Chart:
        • Services Offered
        • Other Publications

        Buy Now

        What are you waiting for? This is your opportunity to become a professional blogger is quick time. Buy this book now and learn from beginning in a step by step tutorial and methods on how to become a Professional Blogger.

        Price :12.49 USD or 805.11 INR

        Donate now and drop your email in comment. I'll send you the link on that moment
        DetailsDescription
        EBookProfessional Blogging SecretsOK
        AuthorSunmughan SwamyOK
        Published on23/07/2017OK
        Pages16OK
        LanguageEnglish
        FormatPdf
        CategoryBlogging

        Final Words

        This was an article on Ebook - Proressional.Blogging Secrets. If you like this then please Share this link with your other friends and Enjoy the taste of Ebook.
        Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. If any issues then feel free to comment below. Peace out.
        Continue reading

        - 0
        Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

        Happy news for blogger users MYEXTRANEWS Blogger Template is released now. It features all the new SEO Friendly Blogger template, lots of customization to make your blog amazing and give a creative look. If you are newbie and want to get good result in search ranking so you should use this template according to SEO experts your blog speed keeps much importance for page rank so intend every SEO tactics I made this blogger template. Check the below qualities and features of this awesome template. 

        You can try this template in your blog once and feel the difference. Its a well finished beautiful template for blogger users.

        Template Features

        FeaturesAvailability
        ResponsiveTrueCEK
        Google Testing Tool ValidatorTrueCEK
        Mobile FriendlyTrueCEK
        Google Material IconsTrueCEK
        Dynamic HeadingTrue
        Valid Schema.orgTrue
        Personal BlogTrue
        Masonry Grid StyleTrue
        Auto Read More with ThumbnailTrue
        Footer LinkTrue
        Related Posts with ThumbTrue
        Search BoxTrue
        Social Share ButtonTrue
        Back to Top ButtonTrue
        ShortcodesTrue
        Custom Contact Form WidgetTrue
        Unlimited SitemapTrue
        Unlimited Page NavigationPremium Only
        Recommneded Post SidebarPremium Only
        Fixed Minor BugPremium Only
        3 Theme StylePremium Only

        Downloads

        You can download this template from the below link along with its Mod and Data. To download the files please select the desired link given below:


        Get your own free Web Hosting now. Its absolutely free ! Sign up now and get access to cpanel and file managers. This hosting suppots one click Wordpress install and web tools installation. So what are you waiting for ?? Click the link below and sign up today !!


        Final Words

        Please don’t try to remove Credit link, otherwise it would be Crash. This blogger template is not for sale, if you want to remove the credit link so subscribe with your 10 friends on Droidadda subscribe box and contact me at my email address it’s a FREE offer. You can also customize this blogger template like colors, styling and much more. Share this awesome blogger template with your other friends and Enjoy the taste of Droidadda service.
        Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends. If any issues then feel free to comment below. Peace out.
        Continue reading

        - 0
        Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.
        Hello Guys, today after a long time am back here with a much useful article for Bloggers. Sorry for my absence, i am too busy with my projects now. So now coming to the point, i've decided to share an inportant graphical user interface loding bar codings for all bloggers. You may have seen this bar in Youtube many times. But this is better then youtube loading bas because of its multicolour transparency.
        Lets read it out in details.. 😉

        What is Progress bar?

        A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format. Below are some examples of Progress bar images: 

        Circular Progress Bar

        Flat Horizontal Progress Bar


        Only visible to Desktop users

        How To Add Progress Bar in Your Blogs?

        Step 1: Login to Blogger using your Google Account.
        Step 2: Click on Theme
        Step 3: Click on Edit HTML
        Step 4: Now search this </head> and paste the below code above it.

        Step 5: Now Copy the below Javascript code and paste it above </body>

        Step 6: Now copy the below code and paste it below </nav>

        Step 7: Save your Theme now and see the changes!

        Final Words

        So this was the article on Youtube like colourful Progress Bar For Blogs and Websites. I hope you love this article. Share this article with your friends and do let them know about this amazing blogging tips and I hope they will love it and love to install it on their Blogs.
        Thank you for visiting Droidadda and keep visiting for more tips and tricks like this and I will meet you in the next article. Till then stay peace.
        Continue reading

        - 0
        Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.

        Hello friends, once again i'm here to share an amazing article with you all. Today we'll discuss about blogging. By speaking up blogging an imagination comes in our mind telling us that blogging means sharing our point of views with others through responsive articles. But do you know,"What is Blog?"

          Most of you didn't really knew it though they are blogging daily. So today i'm here to tell you what is blogging or what actually is a blog?

          What is a Blog?

          A blog (web or weblog) is a website or probably called the platform where collection of posts or articles are contained in a sequence or random manner. Here all the recent articles are appeared on top according to their creation time. i.e, the post that has benn posted most recently will be appeared first among other & similarly so on.
          A blog generally consist of  blog posts and comments section. Now a days there are millions of bloggers around the world who are blogging daily and share their opinions, views, tricks, etc, among the world.

          Types f Blogging Platform

          There are several types of blogging platforms. But the two most popular blogging platforms are mentioned below.

          Blogger
          Blogger is Google’s free tool for creating blogs. It can be found on the web at Blogger. Previous versions of Blogger were heavily branded with the Blogger logo, but the latest version is flexible and unbranded so you can use it to create and promote blogs without a budget.

          Blogger is the most widely used blogging platform today. Over Millions of users are using bloggers platform to share their blogs.

          The main advantage to using Blogger is that Blogger is completely free, including hosting and analytics. If you choose to display ads, you share in the profits.

          Wordpress
          Wordpress is a powerful blogging tool created for blogging purpose in 2003. Till now it has served  millions of users a platform to share their words with their blogging tool. It is of two types "Free" & "Paid".

          In the free version users are restricted from doing manual changes on their blogs. They can't do anything additional to their blogs. They are only available in Paid version of Wordpress.

          Thats why Blogger if more popular among beginners as compared to Wordpress because of the free lifetime subscription of blogging tools.

          Variations of the term blog:
          • Blogging: The act of writing a post for a blog
          • Blogger: A person who writes content for a blog
          • Blogosphere: The online community of blogs and bloggers

          The World Before Blogging

          There was a time when the Internet was just an informational tool. In the early life of the World Wide Web some 20 years ago, websites were simple and provided a one-sided conversation. As time went on, the Internet became more interactive with the introduction of transaction-based websites and online shopping, but the online world remained one-sided.

          That all changed with the evolution of Web 2.0 (the social web) wherein user-generated content became an integral part of the online world. Today, users expect websites to provide a two-way conversation and web logs (or blogs) were born.

          The Birth of Blogs

          The earliest blogs started in the late 1990s as online diaries. Individuals posted information on a daily basis about their lives and opinions.
          The daily posts were listed in reverse date order, so readers viewed the most recent post first and scrolled through previous posts. The format provided an ongoing inner monologue from the writer.


          As blogs evolved, interactive features were added to create a two-way conversation. Readers took advantage of features that allowed them to leave comments on blog posts or link to posts on other blogs and websites to further the dialogue.

          Blogs Today

          As the Internet has become more social, blogs have gained in popularity. Today, there are over 100 million blogs with more entering the blogosphere every day. Blogs have become more than online diaries. In fact, blogging has become an important part of the online and offline worlds with popular bloggers impacting the worlds of politics, business, and society with their words.

          The Future of Blogs

          It seems inevitable that blogging will become even more powerful in the future with more people and businesses recognizing the power of bloggers as online influencers. Anyone can start a blog thanks to the simple (and often free) tools readily available online. The question will likely become not, "Why should I start a blog?" but rather, "Why shouldn't I start a blog?"


          Final Words

          I hope you love this helpful article on "What is Blogging?". For more queries and sharing your opinion feel free to hit your comments below.
          Thank you for visiting Droidadda and keep visiting for more tips and tricks like this and I will meet you in the next article and as always peace out. If you like this article please share it among your friends &let them know about this topic.
          Source: Google
          Continue reading
          Subscribe to: Posts (Atom)