How To Write And Post Your Blog Directly From Microsoft Office

Write your post from MS Word on blog directly, You just have to install MS Word ( Microsoft Office ) no any additional software is required for that. You can write post from MS Word in following, Blogger, Wordpress, TypePad, Windows Live Spaces, Sharepoint, or any other you want. Get the advantages of Image effects, Charts, SmartArt, and more.

How To Associate Your Blog Account With MS Word ?

• Open Microsoft Word
• Select File or Office Button, Click on New, Select Blog Post then Create.
• Microsoft Office should then prompt you to register your blog, This information including username and password for your blogging account are necessary for Microsoft Word to post to your blog account.
• Checkmark the XML-RPC box.
• Click Picture Options button if you want to link to an image service rather than inserting images, You can designate a picture provider such as Flickr, where you have curated your images in an account.
• Click Ok when you are ready for Microsoft Office to attempt an initial sign-in to your account. If registration is failed you may need to go back and try the previous steps again.

You may need to also associate Microsoft Word with your Blogger account. You may need to enable settings depending in your blog platform, which should be similar to this example for Wordpress at the time of this writing: Go to Admin or Dashboard - Settings - Writing - Remote Publishing. Fill out any relevant information,

How to Add Animated Multi Drop Down Menu In Blogger

Drop Down Menu has major importance in website or blogger, A page can show its categories in one drop down menu easily beside searching all categories separately. Many users want to make their blog more beautiful, stylish and interactive for visitors. So i am giving you the tutorial that how to add Animated Multi Drop Down Menu In Blogger easily.

Features :

• Easy to use and optimized with CSS3
• Speedy loading, No wait or compromise speed of Blog.
• Compatible with all types of cell phones, and Ipad.
• Awesome stunning Multi Drop Down Menu with cool effects.
• Also optimized with stunning animated Jquery jumping drop down effect.
• Editing code is very easy as ABC

How To Add In Blogger ?

• Login to Blogger
• Open Layout on the left sidebar of Blogger
• Click on Add Widget and Select Html/Javascript
• Paste the given code in it and Save

CSS Code

 <style>#menu, #menu ul {    margin: 0;    padding: 0;    list-style: none;}#menu {    width: 960px;    margin: 60px auto;    border: 1px solid #222;    background-color: #111;    background-image: linear-gradient(#444, #111);    border-radius: 6px;    box-shadow: 0 1px 1px #777;}#menu:before,#menu:after {    content: "";    display: table;}
#menu:after {    clear: both;}
#menu {    zoom:1;}#menu li {    float: left;    border-right: 1px solid #222;    box-shadow: 1px 0 0 #444;    position: relative;}
#menu a {    float: left;    padding: 12px 30px;    color: #999;    text-transform: uppercase;    font: bold 12px Arial, Helvetica;    text-decoration: none;    text-shadow: 0 1px 0 #000;}
#menu li:hover > a {    color: #fafafa;}
*html #menu li a:hover { /* IE6 only */    color: #fafafa;}#menu ul {    margin: 20px 0 0 0;    _margin: 0; /*IE6 only*/    opacity: 0;    visibility: hidden;    position: absolute;    top: 38px;    left: 0;    z-index: 1;       background: #444;       background: linear-gradient(#444, #111);    box-shadow: 0 -1px 0 rgba(255,255,255,.3);       border-radius: 3px;    transition: all .2s ease-in-out; }
#menu li:hover > ul {    opacity: 1;    visibility: visible;    margin: 0;}
#menu ul ul {    top: 0;    left: 150px;    margin: 0 0 0 20px;    _margin: 0; /*IE6 only*/    box-shadow: -1px 0 0 rgba(255,255,255,.3);       }
#menu ul li {    float: none;    display: block;    border: 0;    _line-height: 0; /*IE6 only*/    box-shadow: 0 1px 0 #111, 0 2px 0 #666;}
#menu ul li:last-child {      box-shadow: none;   }
#menu ul a {       padding: 10px;    width: 130px;    _height: 10px; /*IE6 only*/    display: block;    white-space: nowrap;    float: none;    text-transform: none;}
#menu ul a:hover {    background-color: #0186ba;    background-image: linear-gradient(#04acec, #0186ba);}#menu ul li:first-child > a {    border-radius: 3px 3px 0 0;}
#menu ul li:first-child > a:after {    content: '';    position: absolute;    left: 40px;    top: -6px;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-bottom: 6px solid #444;}
#menu ul ul li:first-child a:after {    left: -6px;    top: 50%;    margin-top: -6px;    border-left: 0;       border-bottom: 6px solid transparent;    border-top: 6px solid transparent;    border-right: 6px solid #3b3b3b;}
#menu ul li:first-child a:hover:after {    border-bottom-color: #04acec; }
#menu ul ul li:first-child a:hover:after {    border-right-color: #0299d3;     border-bottom-color: transparent;    }
#menu ul li:last-child > a {    border-radius: 0 0 3px 3px;}#menu-trigger { /* Hide it initially */    display: none;}
@media screen and (max-width: 600px) {
    #menu-wrap {        position: relative;    }
    #menu-wrap * {        box-sizing: border-box;    }
    #menu-trigger {        display: block; /* Show it now */        height: 40px;        line-height: 40px;        cursor: pointer;               padding: 0 0 0 35px;        border: 1px solid #222;        color: #fafafa;        font-weight: bold;        background-color: #111;                /* Multiple backgrounds here, the first is base64 encoded */        background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);        border-radius: 6px;        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;    }
    #menu {        margin: 0; padding: 10px;        position: absolute;        top: 40px;        width: 100%;        z-index: 1;        display: none;        box-shadow: none;           }
    #menu:after {        content: '';        position: absolute;        left: 25px;        top: -8px;        border-left: 8px solid transparent;        border-right: 8px solid transparent;        border-bottom: 8px solid #444;    }   
    #menu ul {        position: static;        visibility: visible;        opacity: 1;        margin: 0;        background: none;        box-shadow: none;                   }
    #menu ul ul {        margin: 0 0 0 20px !important;        box-shadow: none;           }
    #menu li {        position: static;        display: block;        float: none;        border: 0;        margin: 5px;        box-shadow: none;               }
    #menu ul li{        margin-left: 20px;        box-shadow: none;           }
    #menu a{        display: block;        float: none;        padding: 0;        color: #999;    }
    #menu a:hover{        color: #fafafa;    }   
    #menu ul a{        padding: 0;        width: auto;           }
    #menu ul a:hover{        background: none;       }
    #menu ul li:first-child a:after,    #menu ul ul li:first-child a:after {        border: 0;    }       
}
@media screen and (min-width: 600px) {    #menu {        display: block !important;    }} /* iPad */.no-transition {    transition: none;    opacity: 1;    visibility: visible;    display: none;          }
#menu li:hover > .no-transition {    display: block;}</style>
<br /><ul id="menu"><li><a href="Home URL-Here">Home</a></li><li>
<a href="/">Categories</a>
<ul><li><a href="URL-Here">CSS</a><ul><li><a href="URL-Here">Item 11</a></li><li><a href="URL-Here">Item 12</a></li><li><a href="URL-Here">Item 13</a></li><li><a href="URL-Here">Item 14</a></li></ul></li><li><a href="URL-Here">Graphic design</a>
<ul><li><a href="URL-Here">Item 21</a></li><li><a href="URL-Here">Item 22</a></li><li><a href="URL-Here">Item 23</a></li><li><a href="URL-Here">Item 24</a></li></ul></li><li><a href="URL-Here">Development tools</a><ul><li><a href="URL-Here">Item 31</a></li><li><a href="URL-Here">Item 32</a></li><li><a href="URL-Here">Item 33</a></li><li><a href="URL-Here">Item 34</a></li></ul></li><li><a href="URL-Here">Web design</a><ul><li><a href="URL-Here">Item 41</a></li><li><a href="URL-Here">Item 42</a></li><li><a href="URL-Here">Item 43</a></li><li><a href="URL-Here">Item 44</a></li></ul></li></ul></li><li><a href="URL-Here">Work</a> <ul><li><a href="URL-Here">Work1</a></li><li><a href="URL-Here">Work2</a></li><li><a href="URL-Here">Work3</a></li><li><a href="URL-Here">Work4</a></li></ul></li><li><a href="URL-Here">About</a></li><li><a href="URL-Here">Contact</a></li><li><a href="http://funisonline.blogspot.com/">Fun Is Online</a>                                                    </li></ul></div><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">    $(function() {  if ($.browser.msie && $.browser.version.substr(0,1)<7)  {    $('li').has('ul').mouseover(function(){        $(this).children('ul').css('visibility','visible');        }).mouseout(function(){        $(this).children('ul').css('visibility','hidden');        })  }}); /* Mobile */$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');       $("#menu-trigger").on("click", function(){    $("#menu").slideToggle();});
// iPadvar isiPad = navigator.userAgent.match(/iPad/i) != null;if (isiPad) $('#menu ul').addClass('no-transition');</script>

Customization :

• Replace the text highlighted with pink color " URL Here " with your own URL link.
• Beside the " URL Here " text highlighted with red color ( Such as Categories, About ) to your desire name for the link.
• Now place the widget anywhere you want.

How To Add Chat Emotions In Blogger Comments

Due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. Recently, one of our user asked us that how to add chat emotions in Blogger comments ? Today in this post, i will show you how to add chat emotions in blogger comments.

Why To Add Chat Emotions In Blogger ?

Action speaks louder than words. Similarly, chat emotions are a way to show your mood. Whenever a user leaves a comment on your site, you don't have any idea about how he is feeling. However, if the same comment has a Angry, Happy, or confused emotion image then you can easily understand that mood of the commenter. This is the reason why, a lot of commenting systems are adding emotions to there platform. And the same thing can be added to Blogger custom commenting system as well.

How To Add Chat Emotions In Blogger ?

First of all, Sign in to Blogger and then select your Blog.

After that, you need to click on Template from the left side bar and click on Edit HTML

Now, Press Ctrl+F and then you'll have search bar and then search for </ body> tag using that search bar. Once you found the </body> tag, then paste the following code above it.

"<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><script type='text/javascript'>//bloggersmileys.init();</script> "

That's it, after adding the above link emotions can be used in comments. However, if you want to display emotions short codes to help users to use them efficiently in their comments, then continue following the tutorial.

Again in the Template, search for <div class='post-footer-line post-footer-line-3'> then look for </b:includable> tag and just above it paste the following script.

"<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.netoopsblog.com' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Emoticions</div>
 </b:if> "

After that, you need to add the CSS coding of Smileys in order to make them look as appealing as Whatsapp, Facebook or any other popular social platform. Search for ]]></b:skin> tag and paste the following code it.

".post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;
} "

Afterwards, simply hit the Save Template button and start using those awesome smileys on your blog.

How To Disable Text Selection In Blogger

Sometime we need to copy text content from blog sites for personal use. But not all of blog site user copy text for personal use - a lot of content thief, content scraper copy our website/blog sites content for use them on their commercial project or use somebody's text content directly on their website.

To copy text content from a website firstly we have to select text. This text selection can be turn off. As major Blogging platform known as WordPress and Blogger. WordPress far advance satisfaction by using variety of plugins. Such as Wp Content Protect plugin disable text selection from WordPress blogs and in Blogger there is also a solution available to disable text selection. Let's see how to set it up and how it works.

How To Disable Text Selection In Blogger For Preventing Copy Paste :

• First Log in to your Blogger, select your Blog.
• Go to 'Layout' tab, Click "Add a Gadget"
• From pop up menu select "Html/Javascript"
• And in content box paste following script code.

<!--start of prevent copy paste by funisonline.blogspot.com-->
<script
scr='demo-to-prevent-copy-paste-on-blogger-files/googleapis.js'>
</script><br /><script type='text/javascript'>
if(type of document.onselectstart!='undefined') { document.onselectstart=new Function ('return false' ); } else { document.onmousedown=new Function ('return false');
document.onmouseup=new Function ('return true') }
</script>
<!--end of prevent copy paste by funisonline.blogspot.com-->

After pasting the code save it.

And view your Blogger blog the text selection with mouse option is gone. This method all text element will be block out if you need some advance system where some part of blogs will be enabled for copying texts then follow the up coming tutorial.

How To Use Google Fonts In Blogger Post

Your Blogger template's default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font providers offers web fonts what can be easily integrate to your site. Google web font is one of the best web font provider. In Google font's collection more than 650+ font with various styles you can find.

Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let's add Google font in your Blogger, this process is easy and difficulty is beginner.

How To Use/Install Google Font In Blogger Post :

Step 1 :

• Go to Google web font (Click Here)
• See demo of font family by Word, Sentence, Paragraph
• Use Filter (Left Side) for find more specific font style.
• After choosing a font style click on "Quick Use"
• Then you will direct to another page where you can find that font's set up codes.

Step 2 :

• Embedding CSS import (Easier)                           Or
• Embedding Link Standard (Easy)

Embedding CSS Import :

• On your chosen font's page you will see a option named "Add this code to your website"
• Select '@import' tab, and copy the given line
• Now, Login to your Blogger and select your blog
• Go to, Template and click on Edit HTML
• Search for ]]>< into code snippet (Using Ctrl+F or Cmd+F)
• And before ]]>< paste that copied line
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option
• Come back to Blogger's Template > Edit HTML, Again search for .post-body into code snippet
• Into post body's brackets paste that (font-family) line
• Save Template and check out your blog for live action.

Embedding Link Standard :

• On your chosen Font's page you will see a option "Add this code to your website"
• Below a <link> code you will see, copy it
• Now log in to your Blogger account, select your blog
• Go to Template > Edit HTML
• And search for </head> into code snippet (Using Ctrl+F)
• Above </head> paste that link code
• And modify the <link> code, Just add a slash (/) in the very last side of the <link> tag
• The modified version looks like this <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='Stylesheet' type='text/css'/>
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option.
• Come back to Blogger's Template>Edit HTML , Again search for .post-body into code snippet
• Into post body's bracket paste that (font-family) line 
• Save Template and check out your blog for live action

Additionally :
If you think font line height is not quite right than you expected. In that case add this code into .post-body bracket (line-height:1.5;)

And if you feel the font size is not suiting your site. So change font size with adding this code into .post-body bracket. change 16px to any px you want (font-size:16px;)

Then Save Template, you are done !