Showing posts with label Mobile Blogging. Show all posts
Showing posts with label Mobile Blogging. Show all posts

How To Earn Bigger From Google Play Store Apps Using Blogger Blog

earn money from appnext googleplay store 101helper

I have shared many ways of earning online with blogger blog but today I am sharing something unique and different which is good to earn bigger amounts. With this amazing network you can earn money for each cpi(cost per install) and it is only for blogger mobile sites not for desktop site. Also its not only for blogger but all mobile websites can be integrated with these ads.

These ads are powered by APPNEXT. With AppNext ads you can show ads of Google Play apps and you get paid for every download. This ad network is good for those who have a more good mobile site and get more visitors on mobile sites. With Appnext you have full control over your ads. You have following benefits:

1. Ads don't slow down your mobile site.
2. You can show apps ads from specific category e.g games, social networking, sports, videos and audio apps etc.
3. You can install page over ads as well as video and banner ads.
4. Appnext finds high rate ads automatically and display it on your site.
5. All ads work on IOS as well as Android platforms.

More over you can show ads of a specific app which is paying a high rate, you need to get that app from marketplace in Appnext.

So Appnext is really a good network for mobile sites and a good network to earn bigger.

Benefits Of Appnext:

Appnext ads types for websites

1. Page over, banner, video ads.
2. Easy implementation.
3. No minimum traffic required.
4. High rates per CPI(cost per install).
5. Full control over ads.

Want to see a live demo of Appnext Ads? Visit 101Helper from any IOS or Android device!

Payment Methods:

Wire transfer - $200.
Paypal - $20
Credit Card - Coming soon!

How To Earn Money From AppNext?

(1): CREATE AN APPNEXT ACCOUNT:

Step 1: Go to AppNext and click on Join Now

how to sign up at appnext

Step 2: Fill up the signup form and confirm it from your email.

how to sign up at appnext 101helper

Step 3: Login to your Appnext account, you will find two IDs from appnext one will be for IOS and other for Android, Copy and save them.

Note:  If you didn't get any ID then leave it.

(2). SUBMIT YOUR WEBSITE/BLOG TO APPNEXT:

Step 1: Login to your Appnext account.

Step 2: Click on Add New App in the menu on top.

how to earn bigger money from website

Step 3: Choose Website as your platform, enter its URL and click on Next.

earn money form blogger

Step 4: Type your Site or Blog name and upload its logo if you like.

appnext apps for cpi

Step 5: Select up-to three categories for IOS.

earn money from google ios, andoid apps

Step 6: Select up-to three categories for ANDROID.

how to earn money from blog, website

Step 7: Give a message to your advertisers in the next step or just process away by clicking on next.

how to earn money from blogger blogs.png

After submitting your site you will get submission completed dialog along with two IDs one with the name Android Placement ID and other with IOS Placement ID. Copy both of these IDs, you will need them at the time of implementation of ads.

(3). IMPLEMENTING APPNEXT ADS IN BLOGGER MOBILE SITE:

Step 1: Go to Integration Tools page.

Step 2: Choose type of ads which you want to implement in the menu on left side under Websites heading. I am choosing Interstitial JS Tag because it will give you more downloads rather than other types of ads.

how to add appnext ads in blogger mobile site

Step 3: Scroll down and copy the javascript code. Your code will be as shown below.

<script type="text/javascript">
 var Appnext = {
       android_id: 'Your Android Code Here',
       ios_id: 'Your IOS Code Here',
       cat: 'Category Name(If necessary) E.g Social Networking, Games, Casino',
       pbk: '',
       b_title: '',
       b_color: '',
       skip_url: '',
       skip_title: '',
       mute: '',
       timeout: '',
       times_to_show: '',
       times_to_show_reset: '',
       creative:'managed',
       subid: ''
     };
 (function(){
 var _s=document.createElement('script');
 _s.type='text/javascript';
 _s.async=true;
        _s.src='https://appnext.hs.llnwd.net/tools/tags/video/manage_script.js';
 (document.body)?document.body.appendChild(_s):document.head.appendChild(_s);
 })();
</script>

Step 4: Replace the Your Android Code Here and Your IOS Code Here with ID's you just provided with at the time of submission of your website. Place your ID's carefully don't place Android ID in IOS and IOS ID in Android place.

Step 5: Copy your final code and go to blogger layout and click on add a gadget > Html/Javascript.

Step 6: Paste the code and click on save.

Step 7: Go to template and search for your gadget by ID or by name you just given to it.

Step 8: Type mobile='only' after locked='false'.


Step 9: Click on save and you are done.

Make sure that you have enabled Custom mobile template for your mobile site otherwise you will not see any ads.

You can implement other ads in your mobile site too but video ads and banner ads may slow down your site which is not good for mobile users. Follow our mobile tutorials to get more help about implementing ads in your mobile site!

1. How To Show Ads Above Comments In Blogger Mobile Site

2. How To Show Ads In Mobile View In Blogger

3. How To Optimize Blogger Blog For Mobile Phones

That's it. I hope you liked this post and found it helpful. If not please let me know.

Thanks for visiting 101Helper. Do follow us on social media and keep visiting us.

Search Tags: Mobile blogging tutorials for blogger, how to earn money from appnext, appnext review for publishers, minimum payout, earn money from google appstore, mobile ad networks, high rates paying networks,cost per install networks, earn money from websites,blogs

Swiper Featured Posts Widget For Blogger Mobile Site

featured posts swiper widgets for blogger mobile site

This is a quick post about featured post swiper for blogger mobile site. So in this post I am going to share different types of mobile swipers and there features. I hope you will like them. Other bloggers and webmasters are requested to not copy and share this code without 101helper tag below each code, if found to be copied it will be against 101Helper's copyright violation and action will be taken!

Featured Posts Mobile Swiper Features:

1. It is free of cost.
2. 4 different designs.
3. Fully customizable.
4. Doesn't affect blog speed.
5. 100% optimized for all mobile screens.
6. Unlimited featured posts can be added.
7. Thumbnails ready.
8. Touch enabled for mobiles.

How To Add Featured Posts Swiper In Blogger Mobile Site?

Follow below steps to add featured posts swiper in blogger mobile site.

Step 1: Go to blogger dashboard and navigate to Template.

Step 2: Click on Edit Html.

how to edit html in blogger

Step 3: Search for <head> and just below it paste the following code.
<link href='https://rawgit.com/101Helper/mobile/master/swiper.css' rel='stylesheet'/>
<script src='https://rawgit.com/101Helper/mobile/master/swiper.js'/>

how to add javascript and css code in blogger

Step 4: Click on Save template.

Step 5: Go to Layout, click on add a gadget and open Html/Javascript.

Step 6: Copy code of desired swiper from below and paste it into Html/Javascript.

Mega Swiper Compatible With Desktop Site:

swiper featured post widget for blogger compatible with desktop site
<style>
.swiper-container.swiper-container-horizontal {background: #eee;padding: 10px 0px;}
.swiper-container{width:100%;height:280px;margin:20px auto;}.swiper-slide{height: 270px;padding: 5px;text-align:center;font-size:18px;background:#fff;width:250px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.swiper-container.swiper-container-horizontal img {width: 100%;height:176px;margin: 0;right: 0.5px;position: relative;}
.swiper-container.swiper-container-horizontal h3 {position: absolute;left: 2px;top: 190px;font-size: 17px;width: auto;padding: 5px;font-weight: normal;}
</style>
<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transform: translate3d(-562px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-prev" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-active" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-next" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
</div>
</div>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"/>
<script>
    var swiper = new Swiper('.swiper-container', {
        scrollbarHide: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
    </script>

Mega Swiper Non-Compatible With Desktop Site:

featured post widget for mobile minified version

Note: This swiper will show only in mobile not in desktop site.
<style>
@media only screen and (min-width: 800px) {
.swiper-container.swiper-container-horizontal{
display:none;
}
}
.swiper-container.swiper-container-horizontal {
background: #eee;
padding: 10px 0px;
}.swiper-container{width:100%;height:280px;margin:20px auto;}.swiper-slide{height: 270px;padding: 5px;text-align:center;font-size:18px;background:#fff;width:250px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.swiper-container.swiper-container-horizontal img {
    width: 100%;
height:160px;
    margin: 0;
    right: 0.5px;
position: relative;
}
.swiper-container.swiper-container-horizontal h3 {
    position: absolute;
    left: 2px;
    top: 190px;
    font-size: 17px;
    width: auto;
    padding: 5px;
    font-weight: normal;
}
</style>
<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transform: translate3d(-562px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-prev" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-active" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-next" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
</div>
</div>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"/>
<script>
    var swiper = new Swiper('.swiper-container', {
        scrollbarHide: true,
        slidesPerView: '2',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
</script>

Mini Swiper Non-Compatible With Desktop Site - Dark Theme:

featured posts swiper for mobile site dark theme

Note: This swiper will show only in mobile not in desktop site.

<style>
@media only screen and (min-width: 800px) {
.swiper-container.swiper-container-horizontal{
display:none;
}
}
.swiper-slide a,.swiper-container.swiper-container-horizontal h3 {color: #ddd;}
.swiper-container.swiper-container-horizontal {background: #222;padding: 10px 0px;}
.swiper-container{width:100%;height:200px;margin:20px auto;}.swiper-slide{height: 190px;padding: 5px;text-align:center;font-size:18px;width:250px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.swiper-container.swiper-container-horizontal img { width: 100%; height: 130px; margin: 0; right: 0.5px; position: relative; }
.swiper-container.swiper-container-horizontal h3 { position: absolute; left: 2px; top: 140px; font-size: 16px; width: auto; padding: 5px; font-weight: normal; }
</style>
<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transform: translate3d(-562px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-prev" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-active" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide swiper-slide-next" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>
</div>
</div>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"/>
<script>
    var swiper = new Swiper('.swiper-container', {
        scrollbarHide: true,
        slidesPerView: '2',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
    </script>

Freestyle Only Text/Links Without Thumbnails Swiper:

featured posts swiper for mobile with text only blogger

<style>
.swiper-container.swiper-container-horizontal {background: #eee;padding: 10px 0px;}
.swiper-container{width:100%;height:200px;margin:20px auto;}
.swiper-container.swiper-container-horizontal img { width: 100%; height: 130px; margin: 0; right: 0.5px; position: relative; }
.swiper-slide {
    height: 190px;
    padding: 5px;
    text-align: center;
    font-size: 18px;
    width: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1MK4CvHxRPXqo-fZyPKCG6elq6yxWKkg8SH4JIuReHz54rXTzjCJFQYadnEitJosfJh1eSXnHC6pPa4zIRSt4vAWIkQTfvYZMBPlNB5haZUznF1V2nheEUb9F5Y9DSg3xClGN06yr54/s1600/more.png) no-repeat #fff;
    background-position: 93% 94%;
}
.swiper-container.swiper-container-horizontal h3 {
    font-size: 16px;
    width: 180px;
    line-height: 1;
    text-align: left;
    position: absolute;
    color: #2288bb;
}
.swiper-container.swiper-container-horizontal p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    height: 112px;
    text-align: left;
    padding-top: 23px;
}
@media only screen and (min-width: 800px) {
.swiper-container.swiper-container-horizontal{
display:none;
}
}
</style>
<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transform: translate3d(-562px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-prev" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-active" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-next" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
</div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        scrollbarHide: true,
        slidesPerView: '2',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
    </script>

Step 7: Click on save and note the ID of your gadget or give it a title so that you could find it easily for next steps.

Step 8: Go to template and find the swiper gadget which you just added by its ID or by its Title.

Step 9: After finding the swiper gadget in your template, you will see a line of code like this:

<b:widget id='HTML1' locked='false' title='Swiper' type='HTML' visible='true'>

You need to add mobile='yes' after locked='false' like this:

<b:widget id='HTML1' locked='false' mobile='yes' title='Swiper' type='HTML' visible='true'>

swiper in blogger mobile site

Step 10: Click on save and you are done, now you just need to enable mobile custom template for your blog and swiper will start showing up in your phone.

Step 11: Go to template and click on settings icon below mobile template.

how to change mobile template in blogger

Step 12: Choose Custom template for your mobile template and click on save button.

how to enable custom template for blogger mobile site

That's it! you are done.

I hope you like this post, if yes then share it with others. Thanks for visiting 101Helper.

How To Customize Mobile Swiper?

Handle the codes carefully incase of any removal of a single code can result in stopping of the swiper!

1. Replace YOUR IMAGE LINK HERE with your image links

2. Replace YOUR POST LINK HERE with your post links

3. Replace YOUR TITLE HERE with your post title.

4. Replace YOUR POST TEXT HERE with your post text.

5. To add more slides add below piece of code above the highlighted area(yellow).

For Only Text Swiper.

<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>

For Image Swiper.

<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK HERE"><img src="YOUR IMAGE LINK HERE"/><h3>YOUR POST TITLE</h3></a></div>

NOTE: Never remove the bold area of the code!

Search Tags: carousel slider for blogger mobile site, multiple posts slider for blogspot mobile site,touch slider for blogger,jquery,javascript,css touch slider for blogger mobile view,gadgets for blogger mobile site,101Helper blogging tutorials

How To Show Ads Above Comments In Blogger Mobile Site

how to show ads in blogger mobile above comments 101helper

Placing ads in blogger mobile site is always difficult for every newbie because handling blogger template is not easy especially in case of mobile blogging it becomes more difficult so bloggers either avoid placing ads in blogger mobile site or add ads as a gadget or try to show infolinks ads in mobile site. Adding ads in gadget is not a problem but it may slow down your mobile site. But its important also to show ads on mobile site specially those bloggers which have majority of visitors on mobile site really need to show ads in mobile to get a maximum benefit from blog. So this tutorial is to show you how to place ads in blogger mobile site just above the comment box below every post. It will boost your blog revenue to a great extend. So lets start!

Steps To Follow To Show Ads In Blogger Mobile Site Above Comments:

Step 1: Go to blogger dashboard and navigate to template.

Step 2: Click on edit html and click inside the template code.


how to edit mobile tempate in blogger

Step 3: Search for below piece of code by pressing CTRL+F on your keyboard.

<b:if cond='data:post.allowComments'><h4><data:post.commentLabelFull/>:</h4>

Step 4: Copy below code and paste it just above the above code.

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
<b:if cond='data:blog.pageType == "item"'>
---YOUR AD CODE HERE---
</b:if>
</b:if>

how to show ads in blogger mobile above comments

Step 5: Replace "---YOUR AD CODE HERE---" with your ad code.

Step 6: Save your template and you are done.

Ad Not Displaying In Mobile?

Follow below steps if your ad is not showing in mobile:

Step 1: Go to template and click on setting icon below the mobile site preview.

how to edit mobile tempate in blogger

Step 2: Enable custom template for your mobile site as shown in below image.

how to apply custom template in blogger mobile site

Step 3: Click on save and you are done.

Search Tags: how to show ads in blogger,show ads in blogger mobile,display adsense ads in blogger mobile,how to show adsense on blogspot mobile site,101helper make money blogging,ads below footer,above comments blogger mobile site.

Slideout Menu For Blogger Mobile Site With Social buttons

Slideout Menu For Blogger Mobile Site With Social buttons

My recent post for mobile blogging was about a slide down menu which is really appreciated by visitors as it got more than 1000 views so I decided to create another menu for blogger mobile site. Slide down menu was too simple and it didn't have other features like social media buttons and search box so I decided to create a menu which have these features and an exiting look. As responsiveness is also very important for a menu so i made it responsive too. You can read its major features below. For a live demo you can visit 101Helper's mobile site. I am sure you'll like this menu. Don't forget to give your feedback by leaving a comment below.

Slideout Mobile Menu Features:

? Easy installation.
? Responsive design.
? Social media buttons ready.
? Fast(doesn't affect blog's loading speed).
? Low size.
? Responsive search box.
? Compatible with all smart phones.
? Scrollable tabs and floating on page scroll.
? It fits all screen sizes(ipad,iphone,tablets etc).
? It has space for Logo.


How To Add Slide Out Menu In Blogger?

Its very easy to install this menu in your blog. You just have to follow below steps. Note that we have to hide blog header in mobile site as this menu has a space for logo so you don't need blog header in mobile site any more so we will hide the header in mobile site too while installing this menu. Lets begin!

Step 1: Go to blogger dashboard and navigate to layout.

how to add a gadget in blogger blog

Step 2: Click on add a gadget below your blog's header in the layout.

`how to add slide out menu in blogger tutorial

Step 3: Click on Html/Javascript.

how to add gadgets and ads in blogger

Step 4: Copy the below code and paste it into Html/Javascript window.
<link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/docs/master/slideout-nav-public.css" />
<nav id="nava" role="navigation" class="sticky-nav" style="top: 0px;">
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" id="search-in" size="19" required />
<input name="m" type="hidden" value="1" />
<button type="submit"  class="_54k8 _56bs _56b_ _56bw _56bu"  id="u_0_1" data-sigil="touchable"><span class="_55sr">Go!</span></button>
<img id="hide-search" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29hUh20Ck91UX0UIe1OPevK8tmklumYReb_vCuEmP9V4sxUQKjAH-OcmEGnkljlPS_OvYfHB4qu2JttCaLME3Qcy8K2mGDjhLrPW5r-Tp7qxOFJhteuhI8G00v-RbjgjyPPhPKhNK9TE/s1600/rsz_close-icon.jpg" />
<div id="search-height"></div>
</form>
<div class="prl-container">
<div class="nav-wrapper clearfix">
<img id="show-search" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZrOFg6oHWdwAJhUJ-52gwktG1PitWte-6j3pqnncgseYRo0_kHWX9VHhrI489dTuvJiYiYiCYivYp79Cv5SDiheOlRrdVbPO7iN3dYMPSueTFXsHUhvERljFflotH57tSo4byeT7w-c/s1600/rsz_search-icon.png" />
<div style="float:left;">
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGErdp2OF0O-L3aEFCwVK17VkszyfZfhb5MFC4wCc8mPeLDiugz-oA-0ExGEeAJ5kAHFDC-NSTUme6QYLz5nVVXpo9Kiz4o2lz7Gn1a1dJQsdwiodN1iLRs8Zj8TBHnFydr4_DrMNg3k/s1600/rsz_mobile-menu-icon.png"/></a></div>
</div>
<div class="container">
<div class="left">
<a href="/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKpqwx30xpMCptQrOLGWeMaK0_JOkD-fkZPr1fItO0Aqz_Ac7Z8fgrzUuV4btOyn4hATSJGot5iFtYqAap2H1Ndi2UXyvqHZeLUopjnfaHVbiN1ICJRbI3R0hK-Nt9lIJVTBxTOc12Ss/s1600/rsz_1101helper.png" class="logo" alt="101Helper"/></a>
</div>
<div class="clear"></div></div></div></div></nav><div style="clear: both;"></div>

 <div id="offcanvas" class="prl-offcanvas">
<div class="prl-offcanvas-bar">
<div class="social-icons" style="padding-top: 5px;background: #fff;padding-left: 5px;">
<p>Follow us:</p>
<a href="https://www.fb.com/pages/101Helper/623626157780837"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHIjen3e7WuVfUaYrBIkPiErr6vILNdUB1qNbwhlO2sF28TTzuAps4oSx7KqdD4p9KS393XS4GkhSwquJM9J2c7iiPipBCNvVVE9SQYNBZjXo4mXd9kaXQIpYq7wwdsNGWZrpWrD_SBZk/s1600/facebook.png" /></a>
<a href="https://twitter.com/101helperblog"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHrBsJsFXTs-V7035kJk7VH9kTsIUXz5kDkWRz5SOsRNxbLtRk-GVghVtAmscN4nvmGgV73MUhTxJYKgG-wcPt7Nd5JzkoJaBeS7L_b-Qf1s_bVOwxfqXMo5EgQF66tZYG9Gp0Xz479M/s1600/Twitter-Logo.png" /></a>
<a href="https://www.pinterest.com/101helper"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GXdSZm39GnZQ8wiC9eT2N6wdN7gv53tyMzXwT82nn2jZe_sk9z_zh5cszl4JQbbxKV9BLFMvf91sIGtRnmTcGgIlRt7XNXQhil3wjbolyblIrhSnhaBFC3_IMBFfXstiXTPWBavWWu0/s1600/App-Pinterest-icon.png" /></a>
<a href="https://plus.google.com/+101helperBlogspot"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWY5aUJCGA9C3khuZ8GKDu_QCA5xIGsqWwJBbJjhoITep8Rs9OHqgnPUTwB1K6iM0AnH3rSuhmdEAnO6RM_UY7wFaCI_MzXDlNQgV-LWnkAD-z6FNRhSSV-qpbaDr2HVF6BnM3T-lk4WE/s1600/rsz_circle-google-plus-128.png" /></a>
</div>
<nav class="side-nav">
<ul id="nav-list" class="nav-list">
<li><a href="/?m=1">Home</a></li>
<li><a href="/search/label/Blogger%20Tips%20And%20Tricks?m=1">Blogger tips and tricks</a></li>
<li><a href="/search/label/Blogger%20Seo%28Search%20Engine%20Optimization?m=1">Blogger seo</a></li>
<li><a href="/search/label/Google%20Webmaster%20Tools%20tutorials?m=1">Google webmaster tools tutorials</a></li>
<li><a href="/search/label/Bing%20Webmaster%20Tools%20Tutorials?m=1">Bing webmaster tools tutorials</a></li>
<li><a href="/search/label/Blogger%20menus?m=1">Blogger menus</a></li>
<li><a href="/search/label/earn%20money%20blogging?m=1">Earn money blogging</a></li>
<li><a href="/search/label/Blogger%20Widgets%20And%20Gadgets?m=1">Blogger gadgets</a></li>
<li><a href="/search/label/Beginner%20to%20blogging?m=1">How to's/Blogging</a></li>
<li><a href="/search/label/Mobile%20Blogging?m=1">Mobile blogging</a></li>
<li><a href="/p/menusitemap.html?m=1">Sitemap</a></li>
<a class="abt" href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzdO63YW0aPYXR76acmhGxhZg4KCfVkA7GzbzBJbilHYRKv_Yrl50YojRpE8H9wxX5PpJPQEFWdYmGQEdq9TSM8R8vXH5helDz8R8iu1u_QDIiWjcOpanokvnWvkDdh2k8LQa1zdD4uaS/s1600/abt.png"/>101Helper</a>
</ul>
</nav>
</div></div>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script>
$(document).ready(function(){
    $("#hide-search").click(function(){
        $("#searchbox").hide();
    });
    $("#show-search").click(function(){
        $("#searchbox").show();
    });
});
</script>
<div id='menu-height'/></div>

Step 5: Replace the highlighted piece of code with your blogs info eg:
  • Replace green color links with your fan pages links.
  • Replace orange color link with your blog's logo image link.
  • Make changes in tabs e.g change links and text of your menu tabs - (Highlighted with yellow color).
Note: You can see a link in the menu highlighted with red color, don't try to remove it its against 101Helper Copyright Policy, if found your blog will be reported for copyright violation and action will be taken.

<a class="abt" href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzdO63YW0aPYXR76acmhGxhZg4KCfVkA7GzbzBJbilHYRKv_Yrl50YojRpE8H9wxX5PpJPQEFWdYmGQEdq9TSM8R8vXH5helDz8R8iu1u_QDIiWjcOpanokvnWvkDdh2k8LQa1zdD4uaS/s1600/abt.png"/>101Helper</a> // Copyright link ---- Don't remove this!

Step 6: Click on save button.

Step 7: Go to template and Edit html.

how to edit html in blogger

Step 8: Jump to header and type mobile='no' after locked='true' as shown in below image:

how to hide header in blogger

Step 9: Search for the id of your mobile menu gadget and find it in your template.

Check out: How to find ID of a gadget in blogger

Step 10: After finding your mobile menu gadget in your templae type mobile="only" after locked='true' as shown in below image.

how to show gadgets in blogger mobile site

Step 11: Now cut the mobile menu gadget and paste it below header as shown in below image. This is the most important step if you skip it or don't do it right your menu tabs will be irregular. You have to do it in two steps see below images for instance.

Step A: Jump to your menu gadget by its id and cut menu gadget code:


slide out menu in blogger

Step B: Jump to header and paste the copied code below it:

slide out menu in blogger 101helper

Step 11: Click on save template and you are done!



WATCH MORE BLOGGING VIDEOS!

Open your blog in your phone and check if your menu is working fine or not. If you have any question or confusion ask me in comments or contact me at fahimraza101@gmail.com. If you found this post helpful please recommend it on Google and share it with others. Thanks for visiting 101Helper. Keep visiting us. Follow and subscribe to stay updated.

Search tags: responsive menu css,jquery,slide out menu ios,android,slide out menu for website,blogger slide out menu, mobile site navigation 101helper,menus for blogger

How To Create A Post In Blogger Using Android Or IOS Blogger App

how to create a post in blogger

Blogger is the best platform for blogging because of its great features. Its easy interface and alot of features makes it better than others. Currently blogger has millions of users because of its best service. One of the greatest features of blogger is its smart phone app which is introduced to let users write posts from their smartphones anywhere anytime. Unfortunately blogger smartphone app is available only for Android and IOS so if you are using Microsoft phones or other phones which don't support Andoid apps then you can't use this app.

Features:

? Create, save, delete and publish  your post from your smartphone.

? Add images, links and bold or italic your text. More tools aren't available yet.

? View your blog as well as draft posts.

In this post i will tell you how to use Blogger app in your smartphone to create a post. First we have to download the blogger app so follow below steps to download your app.

Step 1: Open App Store or Play Store in your phone.

how to download blogger app in samsung or iphone

Step 2: Search for blogger app and install it.


Step 3: Open your app and sign in using your blogger account or if you are already logged in then choose your account.

how to use blogger app

Step 4: Choose your blog in which you want to write post as shown in below image:

how to use blogger app 101helper

Step 5: On the top of the app click on a "PENCIL" icon.

how to write post in blogger

Step 6: Type your post's title, type labels to see predictions of your existing labels, select location from where you are writing post or deny location by clicking on a close icon beside it and finally click on the post content to start writing your post.

how to create a post in blogger using android app

That's it. You have successfully learnt "how to write posts in blogger using blogger smartphone app".

You may have following questions:

�How to make some text bold or italic?

Well its very easy to bold or make some test italic. Just click on the "B" icon or "I" on top of the editor to bold or make text italic.

how to make text bold or italic in blogger

�How to add images in posts?

You can see a camera icon beside your post title, tap it to put images inside your post. You can directly take images or upload them from gallery.

How to add images in blogger app

You may see an error while uploading an image and in that case try another trick to put images in your post. Whats the trick? Well its simple collect images which you want to add in your post and upload them before writing content. Didn't get me? Follow below steps:

Step 1: Go to your gallery and select the images which you want to add in your post.

how to add images in blogger posts

Step 2: Click on share and choose blogger.

how to use blogger app android or ios


That's it. Now write your post and manage the uploaded images.

�How to add links in posts?

Just like bolding text or making text italic you can add a link in your post. Just select the text which is to be link. Now click on link icon beside italic text icon on the top of the app. For instance see below image.

how to add links in blogger post or blogger app

�How to save or delete a post or edit a post?

Saving a post is much easier than writing it. First write your post and click on Done.
Now click on save icon beside an arrow(publish button) on the top right side of the app.

how to save publish or delete a post in blogger

Similarly to delete a post click on three vertical dots beside the save button.

To edit a post select it and click on the Pencil icon to edit it.

I hope you like this post and you found it helpful. If it was helpful to you leave a feedback below and must share it with others. Follow and subscribe to get latest blogger tips, tricks and mobile blogging tutorials in your inbox.

Search tags: How To Create A Post In Blogger Using Android Or IOS Blogger App,blogger ios and androind app,how to add images in blogger app without errors,mobile blogging tutorials 101helper.blogspot

Kategori

Kategori