Facebook is Going on Start Offline Mode for Users

Facebook is Going on Start Offline Mode for Users
Hello,
How are you all. Hopefully all are well. I am also well.

In offline users to access Facebook the top social site that is going on start in offline mode. If do not connect to the Internet or at the end of the data allows user to access Facebook. News Feed allows users to comment on the status of access, as well as friends. Facebook said, in a blog post on the Internet connection is low or where is no good Internet they will giving users access Facebook online service, steps are being taken.

Facebook offline Mode


The service is being introduced to communicate with the users to increase Home page or News Feed. Within a short time the News Feed is offline feature will be introduced experimentally. The social media Company said, at the end of the Internet connection that allows users to write comments to any post. Then when the Internet connection will came the post or comment will automatically publish.

Facebook consider the service which Countries Internet is 2G . Facebook hopes the initiative will help low-speed Internet developers or will encourage the discovery of new technologies.

Post You May Like :
1# How to make Facebook profile name single 
2# How to use Whatsapp upto 2022 totally free?
3# Facebook Starts Letting You Add A 7-Second Looping Video As A Profile Picture
Read More

Syntax Code Highlighter for Blogger

Syntax Code Highlighter for Blogger
Hello, Reader's many days later we have comes again. Hopefully all you have well. Today we start a amazing tutorial about Html, CSS, JavaScript, and Jquery  all together called Syntax Code.
The Tutorial Name: Syntax Code Highlighter / Highlihgting

 

Whats is Syntax Highlighting?

Syntax Highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colors and fonts according to the category of terms.

Syntax Highlighting is one of the most important part of blogger. Who want to share any post related Blogspot Trick and Tips, Widget, etc... the tutorial for him.

Important Features

  • Highlight CSS language
  • Highlight HTML language
  • Highlight JavaScript language
  • Highlight Jquery language
  • Highlight embedded languages {i.e. CSS inside HTML, JavaScript inside HTML}
  • Highlight inline code as well, not just code blocks  

How to install prism syntax code highlighter?


Step: 1* At first Go to your blogger Dashboard > Template > Edit HTML and copy past below CSS code just before </Style>


 /* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: &#39;Double click to selection&#39;;
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #aaa;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #bbb;
}

pre code .token.punctuation {
    color: #777;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #aaa;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #d75046;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #00a1d6;
}

pre code .token.string {
    color: #6fb401;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #5ac954;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: &#39;Code&#39;;
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers &gt; code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows &gt; span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows &gt; span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype=&#39;CSSku&#39;]:before {
    background-color: #00a1d6;
}

pre[data-codetype=&#39;HTMLku&#39;]:before {
    background-color: #3cc888;
}

pre[data-codetype=&#39;JavaScriptku&#39;]:before {
    background-color: #CC00FF;
}

pre[data-codetype=&#39;JQueryku&#39;]:before {
    background-color: #e5b460;
}
 


Step: 2* Now again copy past below 3 code before </body>

 <script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/> 



 <script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script> 



 <script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 

Step: 3* Save the Template


Step: 4* Then when you create a new post, use the code on 'HTML' Tab and past your code in the place of  "... Your HTML Code HERE ..." at the time of 'Compose' Tab


<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... Your HTML Code HERE ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... Your CSS Code Here ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... Your Javascript Code HERE ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... Your JQueryuery Code Here ... </code></pre> 
Read More

New Bouncy Effect Search Box Widget For Blogger

New Bouncy Effect Search Box Widget For Blogger
Hello Reader's "Welcome to Blogger ArifIT "

A Search box widget is very important for every blog because with the help of the Search box visitor's can easily find any articles/post of our blog. We can see all Blogger Blog have a custom Search box and when we find something in the Search box the searching results be showing on the full page that is boring. And it also takes more second for loading. So, if as you wish to add a Bouncy Search box on your blog follow bellow step one by one.


Bouncy Search Box


*** Before adding this widget to take a look by clicking Demo button.

How to add a Bouncy Search box widget in Blog?


Step 1♦  Go to your blogger Dashboard > Template > Edit HTML > Press ctrl+F and find <body> copy and past following code after <body>

 <div class="live-search">
<form class="searchmein" id="search">
<div class="input">
<input class="search" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="search" value="Search Here..." />
<button class="submit fa fa-search" type="submit" value=""></button>
</div>
<button class="fa fa-times" id="close" type="reset" value=""></button>
</form>
<div class="search-content">
<div class="search-result">
</div>
<div class="more-result">
Load more</div>
</div>
</div> 

 Step 2♦ Again copy the below CSS code and past before ]]></b:skin> or </style>

 /* CSS Custom Ajax Search */
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}
.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}
#search .input .submit:focus,#search .input .submit:hover {background:#2c9bd5;}
#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.live-search .search:focus {outline:none;}
.search-result{padding:15px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.search-item img{width:60px;height:60px;float:left;border-radius:4px}
.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}
.search-item a:hover{color:#069;}
.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}
li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}
li.searchbutton.active {background:transparent;}
li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}
.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}
.more-result a{text-decoration:none;color:#fff;}
.more-result:hover a,.more-result a:hover{color:#fff;}
.queryword{font-weight:700} 

Step 3♦ Now copy below code and past just before </body>

 <script type="text/javascript">
//<![CDATA[
var _0x4d59=["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x63\x6C\x69\x63\x6B","\x66\x6F\x63\x75\x73","\x2E\x73\x65\x61\x72\x63\x68","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x6C\x69\x76\x65\x2D\x73\x65\x61\x72\x63\x68","\x6F\x6E","\x2E\x73\x65\x61\x72\x63\x68\x62\x75\x74\x74\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x63\x6C\x6F\x73\x65"];var mql=window[_0x4d59[1]](_0x4d59[0]);if(mql[_0x4d59[2]]){$(function(){$(_0x4d59[11])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[8]](_0x4d59[7])[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[9])[_0x4d59[10]](_0x4d59[3],function(){$(this)[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[13])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[12]](_0x4d59[7])});});window[_0x4d59[14]]=function(){var _0xce82x2=document[_0x4d59[16]](_0x4d59[15]);if(_0xce82x2==null){window[_0x4d59[18]][_0x4d59[17]]=_0x4d59[19]};_0xce82x2[_0x4d59[20]](_0x4d59[17],_0x4d59[19]);_0xce82x2[_0x4d59[20]](_0x4d59[21],_0x4d59[22]);_0xce82x2[_0x4d59[23]]=_0x4d59[24];};};function findit(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").show(),$(".search-filter").attr("data-query",e),$(".search-result span").show().html("Searching ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".more-result").hide(),doSearch(t,e)}})}else $(".search-content").hide()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="http://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").hide(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".more-result").show()})}else $(".search-result span").show().html("No result"),$(".more-result").hide()}$(".searchmein").submit(function(){return $(".search-item").remove(),findit(),!1}),$(".close-search").click(function(){$(".search-content").hide()}),$(".more-result").click(function(){$(".more-result").hide(),findit()});
//]]>
</script> 

Step 4♦ The last, one code copy and past where you want to show Search Icon.

 <li class="searchbutton" title="Search articles :)"></li> 

Step 5♦ Save Template

Also Read•••


  1. Animated Contact Form Widget for blogger
  2.  Add your youtube video on blog with CSS stylish Laptop frame 
  3.  Add a YouTube Subscribe Button in Blogger
  4.  Add a Show and Hide Comments Button in Blogger  (New)
  5. Grid Style Recent Post Widget for Blogger  (New)



Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy
Read More

Grid Style Recent Post Gallery Widget for Blogger

Grid Style Recent Post Gallery Widget for Blogger
Hello Readers, How about you all? Hopefully all are well. Today I am present to you give a new widget. So, take a look!

Grid Style Recent Post
Grid Style Recent Post
### Recent Post widget is necessary for all blog. If you want to add a Grid Style Recent post widget on your blog follow bellow step one by one.


Step #1: Go to your Blogger Dashboard > Template > Edit HTML Copy and past following  code before </head>

 <script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script> 

Step #1: Now again Copy and past following CSS code before ]]></b:skin> or Style

 /* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;} 

Step #3: Save Template

Step #4: Now again go to Layout > Add a Gadget  > HTML/JavaScript > Copy and past following HTML code in Content box.

 <script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script> 

Step #5: Click Save Button
 
Customization
  • var arlina_thumbs=72;
  • var arlina_title=true;
  • max-results=9
Also Read:  #1 Animated Contact Form Widget for blogger
                     #2 Add your youtube video on blog with CSS stylish Laptop frame 
                     #3 Add a YouTube Subscribe Button in Blogger
                     #4 Add a Show and Hide Comments Button in Blogger
Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.
Read More

Add a Show and Hide Comments Button in Blogger

Add a Show and Hide Comments Button in Blogger
Hello Readers, How about you all? Hopefully all are well. Today I am present to you give a new widget and blogger tips. So, take a look!

We also know blog has a default comments box. The box is very large and it is increase when someone hit a comment. For this reason beauty of the blog is loss.

Show and Hide Comments
Show and Hide Comments Button

If you add "Show and Hide Comments" widget in your blog, reader's can customize comments by click. When reader's do click on "Show Comments" button, the button will open and Show comment box for hit a comments. Again when readers do click on "Hide Comments" button, the button will hide/close.

### For adding Show and Hide comments button follow bellow step one by one. Now lets start the tutorial. Before start work, please take a backup of your template for safety.

Step #1: Go to your Blogger Dashboard > Template > click Edit HTML > click anywhere in html box and press ctrl + F and Find bellow code and remove it.

    <div class='comments' id='comments'>

Step #2: Now replace following code in the place of removing code.

 <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/> 

Step #3: Again Find  ]]></b:skin> or Style Copy  and past following CSS code before either.

 /* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;} 

Step #4: Again Find </body> Copy and past bellow code before </body>

 <script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script> 

Step #2: Finally Save Template.

Also Read:  #1 Animated Contact Form Widget for blogger
                     #2 Add your youtube video on blog with CSS stylish Laptop frame 
                     #3 Add a YouTube Subscribe Button in Blogger
Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.
Read More

Add a YouTube Subscribe Button in Blogger

Add a YouTube Subscribe Button in Blogger
Hello Readers,
How about you all? Hopefully all are well.

Today I am present to give you a new widget. So, take a look!

If you are a YouTubian or you have a YouTube channel and a YouTube blog site, the YouTube Subscribe widget is very useful for you to grow your viewer and subscriber. Many many viewer and subscriber means many many revenue. The process of adding YouTube subscribes button to a blog is easy and can be done within just in a few step.

Youtube-Subscribe button


Step 1: First of all Go to YouTube Developer's Page and add your YouTube Channel name or ID.



Step 2: Scroll down and Copy Your JavaScript code from YouTube Developer's Page. Code like following. Don't need copy following code.

 <script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCekQ9UGPJXmCWhf8FzBdQ7A" data-layout="default" data-count="default"></div> 


Step 3: Now Go to your Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript and past your YouTube subscribe code which you create from YouTube Developer Page's.

Step 4: Click Save button.

Note: YouTube ID like following picture.


Read More

How to make Facebook profile name single

How to make Facebook profile name single
Although Facebook does not make it any ordinary way, but using some tricks to it. I have give you a YouTube link to change the name of a single willing likes just for them.

Youtube link: https://youtu.be/mQj5kEiVRmg

Facebook Single Name


Special Note: 
  • You have must need "Google Chrome"  browser (other browser doesn't work)
  • After changing your name, change your Facebook language "Bahasa Indonesia" to "English (US)".
  • Disable "Geo-proxy extension"
 
Read More

Add your youtube video on blog with CSS stylish Laptop frame

Add your youtube video on blog with CSS stylish Laptop frame
Hello, Reader's
How are you all? Hope to all are well.
Here are any YouTubian? If anybody is here this post is must of need for you.


YouTube is most popular video sharing site. We can embedded  any YouTube video on our website/blog with default Frame. But the frame is not attractive and also like unresponsive. Today I will Educate a new system for embedded your video and post your blog/website with attractive "Laptop Frame".

Now lets start the tutorial. Before start work, please take a backup of your template for safety.

At first login your blogger blog. Then follow bellow step.

Step 1: Go To Dashboard > Template > Edit HTML and past bellow code before ]]></b:skin>

 .tb_outer_wrap{width:100%;max-width:650px;margin:15px auto}.tb_video_wrap_macbook{position:relative;padding-bottom:43%;padding-top:0;height:0;overflow:hidden;-webkit-border-image:url(http://3.bp.blogspot.com/-QGirMPKK70g/Vev4qh091PI/AAAAAAAAK2U/bMLgCDyHhJ4/s1600/macbook%2Blaptop%2Bframe-esobondhu.png) 50 233 112 228 stretch stretch;-moz-border-image:url(http://3.bp.blogspot.com/-QGirMPKK70g/Vev4qh091PI/AAAAAAAAK2U/bMLgCDyHhJ4/s1600/macbook%2Blaptop%2Bframe-esobondhu.png) 50 233 112 228 stretch stretch;-o-border-image:url(http://3.bp.blogspot.com/-QGirMPKK70g/Vev4qh091PI/AAAAAAAAK2U/bMLgCDyHhJ4/s1600/macbook%2Blaptop%2Bframe-esobondhu.png) 50 233 112 228 stretch stretch;border-image:url(http://3.bp.blogspot.com/-QGirMPKK70g/Vev4qh091PI/AAAAAAAAK2U/bMLgCDyHhJ4/s1600/macbook%2Blaptop%2Bframe-esobondhu.png) 50 233 112 228 stretch stretch;border-color:transparent;border-width:27px 76px 55px;border-style:inset}.tb_video_wrap_macbook embed,.tb_video_wrap_macbook iframe,.tb_video_wrap_macbook object{position:absolute;top:0;width:100%;height:100%;background-color:#ddd}@media (max-width:500px){.tb_video_wrap_macbook{border-width:20px 62px 40px}@media all and (max-width:400px){.tb_video_wrap_macbook{border:none!important}}} 

Step 2: Then when you create a new post, use the code below caller on the post HTML Tab.

 <div class="tb_outer_wrap">
 <div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4QnFq4FVB0?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> 


Step 3: Customize your YouTube links like as following highlight link. Replace your link 4QnFq4FVB0 

https://www.youtube.com/embed/4QnFq4FVB0s 

Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.
Read More

Add a Spider live widget for blogger

Add a Spider live widget for blogger
How to ADD?

In fact it have not any adventage , but it's a funny thing, because it will be fun to blog visitors. You can add it for visitor's to fun. Very funny if you couldn't believe please watch Live Demo. So let's go...




Go to your blogger Dashboard then  click > Layout > Add a Gadget > HTML/Javascript > then past following code on where you want add. At last click "Save button"  Enjoy!


 <script 
src='https://googledrive.com/host/0B5Z7dU1X-KejdlJObkFvMV9SQTA' 
type='text/javascript'></script><canvas id='scratch' 
style='width: 500px; height: 350px; margin-left: -100px; margin-top: 
-30px;'></canvas><script 
src='https://googledrive.com/host/0B5Z7dU1X-KejVEN3T3d1REVfajg' 
type='text/javascript'></script><style>#scratch 
{position: ;top: 0px;left: 0px;}</style> 
Read More

Animated Contact Form Widget for blogger

Animated Contact Form Widget for blogger
Add a animated Contact Form widget to your blog! Yes, you have seen and read the title right. In fact, today I will share with you a very interesting contact form widget. This contact form is very easy if you use your blog for your visitors to your blog, they can send mail to the message. So let's take a look at how you can use the contact form on your Blogspot Blog.


 How to Add Animated Contact Form widget on Blog?

 
Step #1: At first Go to your blogger Dashboard > Layout > Add a Gadget > More Gadget > Contact Form



Step #2: Now again Go to your Dashboard > Template and click on the > Edit HTML and past below code before ]]></ b: skin>  then click Save.



#ContactForm1 {display:none}

Step #3: Now Go to > Page > New Page > then click HTML tab at last Past the following two box code and press Publish button.

 <style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#0277bd; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #00b0ff; box-shadow: 0px 0px 5px #00b0ff; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#FFFFFF; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#00b0ff; text-shadow: 1px 0 0 #ede7f6; border:1px solid DodgerBlue ; } #ContactForm1_contact-form-submit:hover { background:#000000; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style> 


<div id="wrap-contact">
<div id="form_wrap-contact">
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Content" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
Read More