All-Coder | Free Web Source: BLOGGER WIDGETS

Showing posts with label BLOGGER WIDGETS. Show all posts

Whatsapp Emojis For Blogger

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Hello Readers.. After Long Time I am posting a Little Needy For Blogger .. "Whatsapp Emojis For Blogger " Which Enables Whatsapp Emoji in Blogger Post,Comments,Widgets etc .

You Have seen This Emojis in Wordpress Yes ! this Emojis Work From Wordpress After Long Search And Work This Worked in blogs.

Example : http://shayari.hax9.com/2016/03/sharabi-shayari-status.html

How it Works ?

Emoji is unicoded,Which Works From Scripts Which Show over in Webs by certain Scripts

How To Install in Blogger ?

Go to Blogger
Then Templates ,Edit Template
Copy Below Code And Paste Below <head>

<script type="text/javascript">/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/codes.hax9.com\/emojis\/emoji.js?ver=4.4.2"}};!function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d"),f=String.fromCharCode;return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(f(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(f(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(f(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(f(55357,56835),0,0):e.fillText(f(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script><style type="text/css">img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-0.1em !important;background:none !important;padding:0 !important}</style>

This Works 100% AllCoder Certified

Thanks to WORDPRESS.ORG

BLOGGER BLOGGER WIDGETS

A Simple Related Post Widget For Blogger

jerry at 12:12:00 PM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

In the last tutorial, we have seen how to add the Related Posts widget that would show related posts with thumbnails from the same category, based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you would prefer the simple version of this related posts widget that will display only the posts titles.

If you want to add it, follow the next steps below:

How to add Related Posts Widget to Blogger

Step 1. Go to Template > hit the 'Edit HTML' button and click anywhere inside the code area.

Step 2. Press the CTRL + F keys and type the following tag inside the search box (hit Enter to find it):

</head>

Step 3. Just above the </head> tag, paste the following style:

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
#related-posts {
    margin: 15px 5px;
}

#related-posts h2 {
    font-size: 27px;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 0px 2px #888;
    margin-bottom: 0.75em;
}

#related-posts a {
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
}

#related-posts a:hover {
    text-decoration: none;
    color: #555;
}

#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 0px;
    text-decoration: none;
    color: #000000;
}

#related-posts ul {
    list-style-type: none;
    background: #f9f9f9;
    border-left: 5px solid #f2f2f2;
}

#related-posts li {
    padding: 10px;
    line-height: 1.4;
    border-bottom: 1px dotted #E2E2E2;
}

#related-posts li:hover {
    background: #F4F4F4;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://codes.hax9.com/allcoder/related.js' type='text/javascript'/>
</b:if>

Customization:

To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red. For the related post link color, replace the #888 value in green.
To change the background color, replace the #f9f9f9 hex color in red (you can use this Color code generator to pick your favorite color). For the background color on mouseover, change the #F4F4F4 value in red.

Step 4. Now find (CTRL + F) this line below (there will be two lines like this, you should stop at the second one):

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://allcoder.hax9.com/2015/09/related-post-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Note: To change the number of maximum related posts for each label, change the "5" parameter from max-results=5

Step 6. Save the Template and visit your blog > click on any of your posts to see this simple related posts widget in action. Enjoy!

BLOG TRAFFIC BLOGGER WIDGETS BLOGS FACEBOOK

New Awesome Heart Popup For Facebook Like

jerry at 3:49:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Hello i have Already Posted My Last Popup facebook Like Cool New Popup Facebook Window Only Once . Now i have New PopupFacebook For Fanpage With Heart Shape And Woked with Art this will Make Your Site Beautiful :) Just to Add this Code on your Site .

How To Add This?

Go to Blogger Dashboard
Add HTML/JavaScript Widget
Post This Below Code
Change the Username or ID of Facebook Page
Thanks to Me ;)

Smiple Popup

This Is Simple Code , Do not edit this Please respect My Work :)

<!doctype html>
<style type="text/css">
div.kod_dostu_t{position:fixed;text-align:center;z-index:6000;}div.kdostu_tt{top:0px;left:0px;width:100%;height:100%;background-color:transparent;}
</style>
<style type="text/css">
div.kod_dostu_t{_position:absolute;}div.kdostu_tt{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>
<div class="kod_dostu_t kdostu_tt" id="fadeceh">
<center>
<div style="margin-top:4%;width:494px;height:479px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7wGaHS2eEQ-mkAhT4AE1Y30Y1JPC5zGh8E3ucTt9m1BG-VQtirckL8Hovx6SZhFEeAhDC-SVjsiIZsG73DwxeCk4LR3kO9zcMPvEf58p_huhpBXH7fQ_ztYtTrvlZHGHEHBDj2oTF4lIE/s1600/heart+popup+faebook+like+png+new.png) no-repeat center;border:none;position:relative;">

<iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/officialhax9&send=false&layout=button_count&width=100&show_faces=true&action=like&colorscheme=light&font=segoe+ui&height=21&appId=426632847366994" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;position:absolute;bottom:150px;left:200px;" allowtransparency="true"></iframe>
<script language="javascript">
document.write( unescape( '%3C%61%20%63%6C%61%73%73%3D%22%6B%73%6A%67%68%66%62%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%61%6C%6C%2D%63%6F%64%65%72%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3E%2B%47%65%74%3C%2F%61%3E%3C%61%20%63%6C%61%73%73%3D%22%6B%73%6A%67%68%66%62%22%20%6F%6E%66%6F%63%75%73%3D%22%74%68%69%73%2E%62%6C%75%72%28%29%3B%22%20%68%72%65%66%3D%22%6A%61%76%61%73%63%72%69%70%74%3A%76%6F%69%64%28%30%29%3B%22%20%6F%6E%63%6C%69%63%6B%3D%22%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%27%66%61%64%65%63%65%68%27%29%2E%73%74%79%6C%65%2E%64%69%73%70%6C%61%79%3D%27%6E%6F%6E%65%27%3B%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%77%69%64%74%68%3A%31%32%30%70%78%3B%68%65%69%67%68%74%3A%32%34%70%78%3B%6C%69%6E%65%2D%68%65%69%67%68%74%3A%32%34%70%78%3B%66%6F%6E%74%2D%66%61%6D%69%6C%79%3A%54%61%68%6F%6D%61%2C%20%41%72%69%61%6C%2C%20%73%61%6E%73%2D%73%65%72%69%66%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%23%33%62%35%39%39%38%3B%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%66%6F%6E%74%2D%73%69%7A%65%3A%31%34%70%78%3B%63%6F%6C%6F%72%3A%23%66%66%66%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%62%6F%74%74%6F%6D%3A%35%70%78%3B%6C%65%66%74%3A%31%38%31%70%78%3B%62%6F%72%64%65%72%3A%34%70%78%20%6F%75%74%73%65%74%20%23%66%66%66%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%36%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%36%70%78%3B%22%3E%43%6C%6F%73%65%3C%2F%61%3E' ) );
</script>

<style>
.ksjghfb:hover{background-color:#4b69a8 !important;}
.ksjghfb:active{border:4px inset #fff !important;}
</style>


</div></center></div></!doctype>

If Any Problem Found ?, feel free to Comment I ll Help you Within 24 Hrs :)
Keep Blogging !

<!doctype html>
<style type="text/css">
div.kod_dostu_t{position:fixed;text-align:center;z-index:6000;}div.kdostu_tt{top:0px;left:0px;width:100%;height:100%;background-color:transparent;}
</style>
<style type="text/css">
div.kod_dostu_t{_position:absolute;}div.kdostu_tt{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>
<div class="kod_dostu_t kdostu_tt" id="fadeceh">
<center>
<div style="margin-top:4%;width:494px;height:479px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7wGaHS2eEQ-mkAhT4AE1Y30Y1JPC5zGh8E3ucTt9m1BG-VQtirckL8Hovx6SZhFEeAhDC-SVjsiIZsG73DwxeCk4LR3kO9zcMPvEf58p_huhpBXH7fQ_ztYtTrvlZHGHEHBDj2oTF4lIE/s1600/heart+popup+faebook+like+png+new.png) no-repeat center;border:none;position:relative;">

<iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/officialhax9&send=false&layout=button_count&width=100&show_faces=true&action=like&colorsc

eme=light&font=segoe+ui&height=21&appId=426632847366994" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;position:absolute;bottom:150px;left:200px;" allowtransparency="true"></iframe>
<script language="javascript">
document.write( unescape( '%3C%61%20%63%6C%61%73%73%3D%22%6B%73%6A%67%68%66%62%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%61%6C%6C%2D%63%6F%64%65%72%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3E%2B%47%65%74%3C%2F%61%3E%3C%61%20%63%6C%61%73%73%3D%22%6B%73%6A%67%68%66%62%22%20%6F%6E%66%6F%63%75%73%3D%22%74%68%69%73%2E%62%6C%75%72%28%29%3B%22%20%68%72%65%66%3D%22%6A%61%76%61%73%63%72%69%70%74%3A%76%6F%69%64%28%30%29%3B%22%20%6F%6E%63%6C%69%63%6B%3D%22%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%27%66%61%64%65%63%65%68%27%29%2E%73%74%79%6C%65%2E%64%69%73%70%6C%61%79%3D%27%6E%6F%6E%65%27%3B%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%77%69%64%74%68%3A%31%32%30%70%78%3B%68%65%69%67%68%74%3A%32%34%70%78%3B%6C%69%6E%65%2D%68%65%69%67%68%74%3A%32%34%70%78%3B%66%6F%6E%74%2D%66%61%6D%69%6C%79%3A%54%61%68%6F%6D%61%2C%20%41%72%69%61%6C%2C%20%73%61%6E%73%2D%73%65%72%69%66%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%23%33%62%35%39%39%38%3B%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%66%6F%6E%74%2D%73%69%7A%65%3A%31%34%70%78%3B%63%6F%6C%6F%72%3A%23%66%66%66%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%62%6F%74%74%6F%6D%3A%35%70%78%3B%6C%65%66%74%3A%31%38%31%70%78%3B%62%6F%72%64%65%72%3A%34%70%78%20%6F%75%74%73%65%74%20%23%66%66%66%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%36%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%36%70%78%3B%22%3E%43%6C%6F%73%65%3C%2F%61%3E' ) );
</script>

<style>
.ksjghfb:hover{background-color:#4b69a8 !important;}
.ksjghfb:active{border:4px inset #fff !important;}
</style>


</div></center></div></!doctype>

BLOGGER BLOGGER TRICKS BLOGGER WIDGETS GOOGLE CODE JQUERY

Mega Menu with Image or Thumbnails for Blogger

jerry at 6:25:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well.

The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit.

It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed.

Features

Multi-Level Menu Support

The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation.

Cross-browser Compatibility

Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed. The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option.

Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu.

Automatic Sub-Menu Display

With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic.

Menu Styling

AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates.

There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website?

Adding Mega Menu with Images/Thumbnails in Blogger

Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu.

CSS

Step 2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it:

]]></b:skin>

Once you find the tag, add the code below just above/before it:

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyKD-WrwyYRtByQP9WLiTK2TqgcoA_K9Bj2HRLn1aRsmE6p7AaNhKJvmXQYl7d8xjZonrpxd-nbRpYIAsSASJ1OqeNvxy3Wr_GrLLLTxhNFxcjjRkWUao4T__JeD6jBTbyoa2kZ5TI5Dc/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm-xQntgI2Li0Kn_I1LkPb4CrBrQkTVvKwTbqtZKWwa_6p8AuwiBQ10dv5jpJmVUd5M18ul3AOM57ZNCuV3lgD4FTeqLqwaLpYzpBvnNjm39lOYbkdO8g_29ZsByKKBIEw_JEXizJ2v4/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiir537y6NceeEV4Lb7HpVQEZ6wNs5mBrr-T29VgO3e22p9TJY2S4pRBWTTvFtunaZLXrBlPP3gQ1rdVfwHb1aynEb33JtNgwsvUKvaSDZNteX52vTeIUPq-d0TevhgHdtKRMsdSVLHGlU/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

JavaScript

Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the </head> tag (CTRL + F to find it). See the code below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://nine.hax9.com/js/allcoder/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#megamenuid').megaBloggerMenu({
postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAO0HZw-ScV28JLVf7tKv58t7xftNK3jKBiTX_rLn8lf7IaQ0cjTG0mtqyr76GV1mAv-Pie3Mfrq_M83SHtsGwGYx38kNiD7bqKSkBlj7bV3rWPnmnm5IcIX2J7tYDntcCkKn0BDig8/s1600/no_image_available.png'
});
});

$(function(){
$('.search-here').submit(function(e){
    if($('.search-box .search-field').val().length==0){
       $('.search-box .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
});
});
</script>

Note

- If jQuery plugin already exist, remove the line in red.
- To change the number of posts, change the 4 value from:

postsNumber : 4

- To add a different thumbnail when a post has no image, replace the url in blue from:

noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAO0HZw-ScV28JLVf7tKv58t7xftNK3jKBiTX_rLn8lf7IaQ0cjTG0mtqyr76GV1mAv-Pie3Mfrq_M83SHtsGwGYx38kNiD7bqKSkBlj7bV3rWPnmnm5IcIX2J7tYDntcCkKn0BDig8/s1600/no_image_available.png'

HTML

Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Among the three URLs, the Search Query has to be URL encoded using a specific tool.

Step 5. Search the following line using CTRL + F:

<div class='main-outer'>

Just above this line, add the following HTML code:

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>

Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor:

Step 6. Click on Save template for all the changes to take effect.

If you can't find the line from step 5, access the Layout tab, click on Add Gadget, and then choose HTML/JavaScript Gadget. Copy the HTML code and paste it inside the box... then press the Save button.

That's it!

Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention.

ADVERTISE BLOGGER WIDGETS BLOGS INFORMATION

New Page Scrolling Advertisement for Blogs and Website

jerry at 1:50:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

About

This is Free for your Website to add Your own Ads on the top of the blog or site,you will love it how it appears . New way to advertise in your site.stylish way to manage ads. you may Call it blogger Widget but it is Code, All coder

Screen Capture

Demo

See The Left Side on the top

Code

</p>
<script Language='Javascript'>


</Script>
</div>

How to Add in Blogger

How to Add website

Last Words

Use this Widget in blogger blogspot or website , make your own beutiful advertise with words

BLOGGER TRICKS BLOGGER WIDGETS New Blogger Tricks

Play Music on Blog

jerry at 12:46:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Change https://hscretions.googlecode.com/svn/Tonight%20(I%20m%20Lovin%20%20You).mp3 This URL to you MP3 URL to change songChange Tonight I m loving you This Name too

BLOGGER WIDGETS BLOGS

Add Lamp on Site Openning With Effective in Blogger or Any Site

jerry at 8:04:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

About

This is coolest Lamp Effective ever Created, this Will Work when you Open The Site. This Is Entry Opening Site Which Will give your site More Effects,with the Street light. Add to in your Site Lamp effects in Blogger. you may Call it blogger Widget but it is Code, All coder

Screen Capture

After Clicking....

Demo

DEMO

Code

<!DOCTYPE HTML><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><allcoder></allcoder><div class="tht-position tht-s-e"><a id="lambakapali"  onclick="document.getElementById('lambaacik').style.display='block';document.getElementById('lambakapali').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;"  title="Street Lamp"><img  style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8iuZJuY7VG9iGH1l70blkOfWdsXXu29ra7L6MfNAvMtvoid5e5VVP-YjiCQk0sBH6BtF6Mc7ZmclSRkKHjzmqOApBc8MdCEEgy5Z9Z7JE90SOf4oCr6RoXTAHQ4YyI4oowT705PE5Lm23/s1600/LampOff.png" border="0"></a><Script Language='Javascript'>

</Script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;
filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;
filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">Click on Lamp<br/>to View This site</a>

How to Add in Blogger

Last Words

Use this Widget in blogger blogspot , Your Blog Will Spark With Lamp, Street lamp

BLOGGER BLOGGER WIDGETS

Add floating social media sharing buttons below Blogger post titles

jerry at 3:41:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog/website and boost sharing stats is to add social sharing buttons.

In this tutorial we will see how to add a floating social media sharing bar below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.

Adding the below jQuery script will make the buttons float in a fixed position as soon as they reach "the top" of the page. By scrolling back, the buttons will return to their initial position.

The social sharing bar includes buttons for Facebook, Twitter, Google+, and Pinterest.

Adding the social media sharing buttons below every Blogger post title

Step 1. From the Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Click anywhere inside the code area and type the </head> tag inside the search box.

Step 3. Just above </head> add this script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

Step 4. Now before ]]></b:skin> add the following CSS styles:

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

To change the width of the bar, modify the 550px values in red. Note that this value also appears in the script which also needs to be modified.

Step 5. Finally, just below the second <div class='post-header'> (press CTRL + F and hit Enter twice to find the second one) add the following code:

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>

<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<li><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>

Customization:

If you want the buttons appear at the end of the post, paste this code before or after <div class='post-footer'>
If the bar overlaps with the post content, then change 35px to a higher value.

Step 6. Click on the Save template button... and that's it!

So these were the steps for adding the horizontal social buttons bar on Blogger. I highly recommend using this bar as it could really help you to get more social traffic for your blog.

BLOGGER WIDGETS

Simple Flat UI Email Subscription Box For Blogger

jerry at 8:00:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

As it is recommended by pros to build email list, bloggers are trying out different methods for it. We've also shared some of them which you might have read previously. One of the most popular reason for it is that we can easily make money with email list but having a great number of subscribers is important. Email subscribers can be increased by adding attractive subscription box on such areas where every visitor's eye must reach and offering something interesting is also great technique to get email subscribers. At this time, everyone is using sidebar subscribe box and you should implement that too. Just recently, we've made simple Flat UI email subscription box for blogger. Let's learn about it's features and also tutorial of inserting it in blogger blog.

Simple Flat UI Email Subscribe Box

This is just simple Flat UI email subscription or newsletter widget which will help you to gain more subscribers and monetize them. It's design is not much gorgeous but have simplicity and Flat UI style which attracts people to become your subscriber. First, it has unique header and descriptive message below header. After that, it contains two input fields which are name and email. Whenever someone comes to write his/her name or email, it gives a beautiful shadow effect which beauty the subscriber's name or email. At the end or bottom, it has big cute sign up button with Flat effect. This widget is made with pure HTML and CSS3.

How To Add This in Your Blog?

Go To Blogger >> Layout >> Add a Gadget
Choose HTML/JavaScript
Paste The Following Code in Content Box.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AllCoder', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="Allcoder" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />

</form>
</div>

<p id='credits'>Powered By : <a href='http://www.Allcoder.blogspot.com'>All Coder</a></p>

</div>

<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>

Replace ALLcoder With Your Feedburner Username.
Warning : Don't remove the credits.
Click Save!

So folks how is the Flat UI email subscription box? Hope you've liked it and also implemented it in your blog. Please try to do not remove the credit links in it as it is free version and if you want to remove link than you can purchase license of it from us. Share this widget with your friends and enjoy the new widget.

BLOGGER WIDGETS

How To Create Sitemap Page in Blogger

jerry at 10:37:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

The most recent widget which we shared in the "Widgets" category was Horizontal Social Sharing Widget and today we're back with another widget. If you've not seen before then have a look on it now. Sitemap page is not much necessary for blogs but from some sides it's better to have a sitemap page in menu. Sitemap page basically helps you to make the navigation easier and it also improves page rank of our blog due to make internal linking of our blog. Yeah! That's awesome thing to improve internal linking because in that page, you'll see all the published posts on your blog. Other than this, it also helps search engine's crawler to index the content and webpage easier. So, in this post we're going to share this sitemap page for blogger.

Sitemap Page - How It Works

Before we get started in doing tweaks with our blog for implementing that sitemap page, I would like to describe you that how it works actually or in other words, I'm going to explain it's feature in this passage. First of all, This is neat and clean sitemap page which is well coded specially for blogger blogs. It's color scheme is only blue which you can see in the demo page. This is automated sitemap page which automatically adds the latest posts in itself without touching it so it's even better for us that we don't need to touch it just after implementing in blog, it will do all the task itself. In this sitemap page, you can see that posts are categorized by labels which is better for readers that they can find the things in that page easily. This sitemap page is developed with JavaScript and CSS which actually takes the post links of our blog through Feeds of our blog. This is created by Abu Farhan so all the credits goes to them.

Create Sitemap Page in Blogger

Don't worry buddy! You might be thinking that it will be little tough to implement this kind of page in blogger but that's not true as you're thinking! Though, It's the most easiest task to insert this in our blogs. Just follow the simple steps given below.

Go To Blogger >> Dashboard >> Pages
Create New Page >> Blank Page
Insert Page Title of Yours Choice.
Go To HTML Tab

Copy The Code Below and Paste There in The HTML Tab.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<div id="toc">
<script src="https://hscreations.googlecode.com/svn/Sitemap.js" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Replace YOURBLOGDOMAIN With Your Blog Domain.
Click "Publish" Button.
That's it!

Final Words

That was the simple sitemap page for blogger which I liked to share today with you guys and I hope this little post is going to help those who're in need for this kind of sitemap page. If you're in a problem while implementing this in your blog then feel free to post a comment below and also share your views. Share this post with your friends if you're going to use this in your blog. Take a lot of care and keep calm we're going to be back with latest widgets soon!

BLOGGER WIDGETS BLOGS EFFECTS

Effective Cool Introduction Widget Code like Circus

jerry at 8:05:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Code of friendly landing page for you to encode this wonderful effect ready code, site visitors at the entrance to meet with the giant red curtain! Your visitors can open the curtain pulling the rope and even can close!
This is View Like Entry Code ...

>>DEMO<<

When You Will Open It Look Likes

When You Will Click On ROPE

How To Add This in to Blogger ?

Go To Blogger
Go to Layout> Add Widget
Select HTML/JavaScript
Paste This Code in That
Done Save it

Code :

<div class="all-coder-od od-25-ds" id="allcoder-2block">
</div>
<div class="all-coder-od od-24-ds" id="allcoder-1block">
</div>
<a href="javascript:void(0)" onfocus="this.blur();" class="all-coder-od od-26-ds" id="allcoder-3block"></a>
<allcoder></allcoder>
<style type="text/css">a.all-coder-od{position:fixed;z-index:999900;}div.all-coder-od{position:fixed;z-index:999900;}div.od-24-ds{top:0px;left:0px;width:50%;height:100%;background:#961e1d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZQ3ypBlZQncw32b8FB6qP3eiTWR3Ixv1PX1oKg5pXZsr13sy5xWMjfANW09Vrz852KKEwvwO_13uLIXKgEsRjlgvE0-s_Nc_ahUIck3t8Btu_cOczxXikx2B0YFvTR3uSbzmCzlXRUyy/s1600/koddostupowered.jpg) no-repeat top left;background-size:120% 100%;}
div.od-25-ds{top:0px;right:0px;width:50%;padding-left:35px;height:100%;background:#961e1d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZQ3ypBlZQncw32b8FB6qP3eiTWR3Ixv1PX1oKg5pXZsr13sy5xWMjfANW09Vrz852KKEwvwO_13uLIXKgEsRjlgvE0-s_Nc_ahUIck3t8Btu_cOczxXikx2B0YFvTR3uSbzmCzlXRUyy/s1600/koddostupowered.jpg) no-repeat top right;background-size:120% 100%;}a.od-26-ds{right:15px;top:-75px;width:118px;height:320px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1c9ELalnw49LlcISRooPQR7I9p-EC9xNG_Wq3yiHEoNyFlq7_uFv8xVGL9JlfPPHowskVfP8R2Z-6xoJgf3ghrF8YKpiusLdmh81JpuuYnABDWZx1Onap3laAzqMlZiwyflkfTKfZA0/s1600/rope+copy.png) no-repeat top left;}</style><style type="text/css">div.all-coder-od{_position:absolute;}a.all-coder-od{_position:absolute;}div.od-24-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.od-25-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}a.od-26-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var tdta=0;
$("#allcoder-3block").click(function(){
tdta=tdta+1;
if(tdta>=2){
var sbkgj = Math.floor((Math.random()*10)+1);
if(sbkgj>=7){
window.open('h'+'t'+'t'+'p'+':'+'/'+'/'+'w'+'w'+'w'+'.'+'a'+'ll-'+'coder'+'.'+'bl'+'ogs'+'pot'+'.'+'c'+'o'+'m/2'+'0'+'1'+'4'+'/'+'0'+'1/e'+'ffe'+'cti'+'ve-co'+'ol-i'+'nt'+'rodu'+'ctio'+'n-w'+'idge'+'t-c'+'o'+'d'+'e.'+'h'+'t'+'m'+'l','')}
}
if($("#allcoder-1block").offset().left ==0){
$("#allcoder-3block").animate({
top: "0px"
}, 800, function(){
$("#allcoder-3block").animate({
top: "-15px"
}, 300)
});
$("#allcoder-1block").animate({
width: "200px",
left: "-125px",
}, 1100);
$("#allcoder-2block").animate({
width: "200px",
right: "-125px",
paddingLeft: "0px",
}, 1100);
}
else{
$("#allcoder-3block").animate({
top: "0px"
}, 300, function(){
$("#allcoder-3block").animate({
top: "-75px"
}, 800)
});
$("#allcoder-1block").animate({
width: "50%",
left: "0px"
}, 1100);
$("#allcoder-2block").animate({
width: "50%",
right: "0px",
paddingLeft: "35px"
}, 1100);
}
});

</script>

BLOGGER BLOGGER TRICKS BLOGGER WIDGETS

Fancy Bulletin NOTICE Bord HTML Code

jerry at 1:25:00 AM 0

Hacks,Tricks,Blogging Tricks ,Cool Computer Tricks ,Blogger Widget,Mobile Hack Tricks ,Auto like Trick,JavaScript,Coding,Magic Tricks,Facebook Tricks

Only here you can find this bulletin board ready code of your visitors will love it too!

When using JavaScript or flash in any way, crafted using only HTML and CSS3, according to each site ready for this great code on your site, if possible,

</ body> code immediately before, not a place you wish to add.

Visitors to the bottom left of the page, on the notice board when it comes to flat open by rotating structure with a wonderful surprise!

CODE

<div id="menucon">
<div id="allcoder-tex">
<br/><b>Notice</b><br/><br/>

Hello!

All-Coder.blogspot.com prepared for our site by our website on this bulletin board will share the latest 
innovations!

</div>
</div>
<allcoder><style> #menucon{ position:fixed; bottom:10px; left:10px; width:130px;height:130px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Tuwbhbe0v8sLwUpCY3WzLHC-VwouiHvFHBnP_4i7OYHX4HiHcaiLqCSm30_1fyavLS5b6DfJAKH0eMWjFmjyobf1FPxhyIZf6KF6sa3MasfJDJR-uaVFvztUB6Rq6gjnDDs4GfUgUaPa/s1600/see.png) no-repeat center center; transition: all 0.8s ease-in-out; background-size:cover; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; } #menucon:hover{ bottom:35px;left:35px; width:80px;height:80px; transform: rotate(720deg); -ms-transform: rotate(720deg); -webkit-transform: rotate(720deg); }#allcoder-tex{position:absolute;bottom:37px;left:38px; box-shadow: -1px 1px 5px 0px #888888; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; line-height:22px; -webkit-transition-timing-function:ease-in-out; opacity:0; width:0px;height:0px; padding:6px;color:#fff; font-family:Helvetica, Arial, sans-serif; font-weight:normal; text-decoration:none; font-size:14px; text-align:center; -webkit-border-radius: 8px; -webkit-border-bottom-left-radius: 0; border-radius: 8px; border-bottom-left-radius: 0; }</style><style> #menucon:hover #allcoder-tex{ width:200px;height:250px; background:#444; opacity:0.6;} </style></allcoder>

Steps

Copy This Code
Make Changes of words What You Want
Go To Blogger dashboard
Add to HTML/JAVA SCRIPT Widget
And Paste in to it
You Are Done

DEMO

Pages

AllCoder

Whatsapp Emojis For Blogger

How it Works ?

How To Install in Blogger ?

Recent Post Widget For Blogger

A Simple Related Post Widget For Blogger

How to add Related Posts Widget to Blogger

Customization:

New Awesome Heart Popup For Facebook Like

Mega Menu with Image or Thumbnails for Blogger

Features

Multi-Level Menu Support

Cross-browser Compatibility

Automatic Sub-Menu Display

Menu Styling

Adding Mega Menu with Images/Thumbnails in Blogger

CSS

JavaScript

HTML

New Page Scrolling Advertisement for Blogs and Website

Play Music on Blog

Add Lamp on Site Openning With Effective in Blogger or Any Site

Add floating social media sharing buttons below Blogger post titles

Adding the social media sharing buttons below every Blogger post title

Simple Flat UI Email Subscription Box For Blogger

Simple Flat UI Email Subscribe Box

How To Add This in Your Blog?

How To Create Sitemap Page in Blogger

Sitemap Page - How It Works

Create Sitemap Page in Blogger

Final Words

Effective Cool Introduction Widget Code like Circus

Fancy Bulletin NOTICE Bord HTML Code

Random Post

Popular Posts

Recent Posts

Random Post

Followers

Pages