If you got any questions or inquiry with the admin of the blog you visited, you always find the contact page. Whether you will send your inquiry thru email or any other forms of communication.

Now one of the feature apps of Facebook is the messenger, basically this apps is used for communication. With this apps you can directly contact anyone from your friend lists in Facebook. Messenger is such a great tool for communication and we are going to integrate this in blogger so that visitors if they want to can directly send message to the Blog Admin.

This is how we are going to integrate this apps to your blogger site.

To begin with our tutorial, simply follow the steps below.

Demo Click here

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Go to Blogger Layout section.

Step #3: Click on Add Gadget and select HTML/Javascript gadget.

Step #4: Leave the title blank and Paste the below code into the HTML/Javascript gadget.

Note: Add the code including the CONTINUATION code below together as one.

<style type="text/css">#b-c-facebook .fbchat_box,#chat_f_b_smal,#f_bt_start_chat{background:#3a5897}#fbchat_box{padding-right:15px;max-width:210px;max-height:50px;display:block;transition:all .3s}#b-c-facebook .f-chat-conent .chat-single a,#chat_f_b_smal{font-family:Arial,sans-serif}#b-c-facebook .fbchat_box,#chat_f_b_smal{text-shadow:0 1px 0 rgba(0,0,0,.1);background-repeat:repeat-x;background-size:auto;background-position:0 0;text-decoration:none}.chat_f_vt{position:fixed;right:10px}#chat_f_b_smal{padding:0 10px;cursor:pointer;width:90px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;margin-right:12px;font-size:14px;z-index:999999999;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;bottom:-400px;transition:all .3s;text-align:center;display:block}#chat_f_b_smal:hover{background-color:#3B5998;opacity:1}#b-c-facebook{margin-right:50px;bottom:0;z-index:9999999999;transition:all .3s;width:250px;height:auto;max-height:375px;min-height:38px;box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;display:block}#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}#b-c-facebook .f-chat-conent .chat-single{float:left;position:absolute;bottom:0;left:0;background-color:#fff;line-height:25px;color:#fff;width:100%}#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#0C5BB5;font-size:12px}#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}#b-c-facebook .fbchat_box label{width:185px}#b-c-facebook .f-chat-conent .chat-single label{float:right;color:silver;margin-right:5px;font-size:12px;font-family:Arial}#b-c-facebook .fbchat_box,#b-c-facebook .fbchat_box label{line-height:20px;margin:0;cursor:pointer;font-family:Arial,sans-serif;font-size:14px}#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}#b-c-facebook .fbchat_box{float:left;padding:0 25px;padding-left:15px;width:250px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;z-index:9999999;margin-right:12px}#b-c-facebook .fbchat_box label{position:absolute;top:10px}//Widget by www.bloggerspice.com .title-f-chat-icon{margin-left:-10px}#t_f_chat{float:left;position:absolute;right:15px;top:-5px}#t_f_chat a{color:#fff;font-size:17px;font-family:verdana;text-decoration:none}#t_f_chat a:hover i{color:#ff0;text-decoration:none}.chat-left-5{margin-left:2px}#start_chat{position:absolute;width:248px;height:239px;top:70px;left:0;background-color:#fff;padding:10px;float:left;display:none}#start_chat em{font-size:11px;color:gray}.msg_b{color:#434a54;width:80%;word-wrap:break-word;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;background:#edeef1;padding:10px;min-height:13px;margin-bottom:5px;position:relative;margin:5px;border-radius:5px;border:1px solid #dfe3e9}#close_chat{opacity:0.5}#close_chat:hover{opacity:1}.msg_b a{text-decoration:underline;color:#01509E}#f_bt_start_chat{margin:auto;background-color:#3a5897;border-radius:3px;color:#fff;font-family:Arial;font-size:14px;font-weight:bold;padding:9px 35px;text-decoration:none}#f_bt_start_chat:hover{text-decoration:none;opacity:0.8}#start_chat p{margin-top:30px}#fb_alert_num{background-color:#ff0;padding:0 7px;color:red;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:55px;top:12px;height:20px;line-height:20px;display:none!important}.hide_chatbox{display:none}#f_enter_3{margin-top:30px}</style>

Continuation Code:

<script>//<![CDATA[function check_fist_vist_f(){var _=f_read_cki("check_fist_vist_f");(0==_||""==_)&&(fb_eshow("f-chat-conent"),f_create_cki("check_fist_vist_f","1",1),f_create_cki("f_chat_open","1",1))}function close_chat(){fb_ehide('b-c-facebook'),f_create_cki('close_chat',1,1),$('body').find('.zopim').remove(),fb_eshow('chat_f_b_smal'),on_playsound('click')}function open_chat(){f_create_cki('close_chat','0',1),fb_eshow('b-c-facebook'),fb_eshow('f-chat-conent'),fb_ehide('chat_f_b_smal')}function f_bt_start_chat(){f_create_cki('f_bt_start_chat','1',10),fb_ehide('start_chat'),fb_ehide('fb_alert_num'),on_playsound('click')}function f_c_start_chat(){var t=f_read_cki('f_bt_start_chat');0==t||''==t?(fb_eshow('start_chat '),fb_eshow('fb_alert_num'),f_chat_step()):(fb_ehide('start_chat'),fb_ehide('fb_alert_num'))}function b_f_chat(){var t=f_read_cki('f_chat_open');0==t||''==t?(fb_eshow('f-chat-conent'),f_create_cki('f_chat_open','1',1)):(fb_ehide('f-chat-conent'),f_create_cki('f_chat_open','0',1)),on_playsound('click')}function f_ck_chat(){check_fist_vist_f();f_c_start_chat();var t=f_read_cki('close_chat');if(''==t||0==t||'0'==t){fb_eshow('b-c-facebook'),fb_ehide('chat_f_b_smal');var e=f_read_cki('f_chat_open');(1==e||'1'==e)&&fb_eshow('f-chat-conent')}else fb_eshow('chat_f_b_smal'),fb_ehide('b-c-facebook')}function f_chat_step(){on_playsound('door_bell')fb_eshow('f_enter_1');fb_eshow('f_enter_3');}function fb_eshow(t){document.getElementById(t).style.display='block';}function fb_ehide(t){document.getElementById(t).style.display='none';}function f_create_cki(t,e,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var c='; expires='+o.toGMTString()}else var c='';document.cookie=t+'='+e+c+'; path=/';}function f_read_cki(t){for(var e=t+'=',n=document.cookie.split(';'),o=0;o<n.length;o++){for(var c=n[o];' '==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(e))return c.substring(e.length,c.length)}return''}function on_playsound(t){}function ionSound(){1==web_sound&&$.ionSound({sounds:['click','door_bell'],path:fb_path.live_chat_path+'sounds/',multiPlay:!0,volume:'1.0'})}var web_sound=!0;jQuery(document).ready(function(t){t(window).scroll(function(){var e=t(window).width();680>=e?f_create_cki('f_chat_open','0',1):f_create_cki('f_chat_open','1',1)})}),setTimeout(function(){f_ck_chat()},1000);var $=jQuery.noConflict();!function(t){if(!t.ionSound){var e,n,o,c,_={},f={},a=!1,i=function(e){var c,a;-1!==e.indexOf(':')?(c=e.split(':')[0],a=e.split(':')[1]):c=e,f[c]=new Audio,n=f[c].canPlayType('audio/mp3'),o='probably'===n||'maybe'===n?_.path+c+'.mp3':_.path+c+'.ogg',t(f[c]).prop('src',o),f[c].load(),f[c].preload='auto',f[c].volume=a||_.volume},u=function(t){var e,n,o,c;if(-1!==t.indexOf(':')?(n=t.split(':')[0],o=t.split(':')[1]):n=t,e=f[n],'object'==typeof e&&null!==e)if(o&&(e.volume=o),_.multiPlay||a){if(_.multiPlay)if(e.ended)e.play();else{try{e.currentTime=0}catch(i){}e.play()}}else e.play(),a=!0,c=setInterval(function(){e.ended&&(clearInterval(c),a=!1)},250)},l=function(t){var e=f[t];if('object'==typeof e&&null!==e){e.pause();try{e.currentTime=0}catch(n){}}},r=function(t){var e=f[t];if('object'==typeof e&&null!==e){try{f[t].src=''}catch(n){}f[t]=null}};t.ionSound=function(n){if(_=t.extend({sounds:['water_droplet'],path:'/sounds/',multiPlay:!0,volume:'0.5'},n),e=_.sounds.length,'function'==typeof Audio||'object'==typeof Audio)for(c=0;e>c;c+=1)i(_.sounds[c]);t.ionSound.play=function(t){u(t)},t.ionSound.stop=function(t){l(t)},t.ionSound.kill=function(t){r(t)}},t.ionSound.destroy=function(){for(c=0;e>c;c+=1)f[_.sounds[c]]=null;e=0,t.ionSound.play=function(){},t.ionSound.stop=function(){},t.ionSound.kill=function(){}}}}(jQuery);//]]></script><a title="Open Chat" id="chat_f_b_smal" onclick="open_chat()" class="chat_f_vt">Open Chat</a> <div id="b-c-facebook" class="chat_f_vt"> <div id="fbchat_box" onclick="b_f_chat()" class="fbchat_box"> <label>Send Message to Admin</label> <span id="fb_alert_num">1</span> <div id="t_f_chat"><div class='close_chatfb' onclick='hidechatfb()'>&#95;</div></div></div><div id="f-chat-conent" class="f-chat-conent"> <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/romebros/" data-width="250" data-height="310" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"> </div><div id="start_chat"> <div id="f_enter_1" class="msg_b hide_chatbox"> Hello! Thanks for visiting my site. Please press Start button to Contact with Admin :) </div><p id="f_enter_3" class="hide_chatbox" align="center"> <a href="javascript:;" onclick="f_bt_start_chat()" id="f_bt_start_chat">Start</a> </p></div></div></div><div id="fb-root"></div><script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>

Editing: Locate https://www.facebook.com/romebros and change "romebros" on your own Facebook page username.

Step #5: Now hit Save Button and Press the Save Arrangement button from the top.

Head over to your blog and see the result. 

That's it for this tutorials.. Happy Blogging!

Learn more »

Today's trend in blogging is how to make your templates responsive, that it can adapt in any kinds of devices e.g. PC, Laptop, mobile, tables etc. This is also a challenge  on the part of every website/blog administrator.

There are instances that yes your templates is responsive but when your posting image/photos it display larger and some would even go out of the blog post body when seen in other devices.

Now to solve this issue, we have to make your image post responsive.

Just simply follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click ->Template -> Edit HTML

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before ]]></b:skin>

.post-body img {
  max-width:100%;
  height:auto;
}

Step #5: Now hit Save Template

The code width is define 100%, this means that image will be the same width according to your blog post width while the height is set auto.

That's all for this tutorials. To all visitors thank you for dropping by at vbt blog.

Happy Blogging!

Learn more »

Logo for a website or blog usually is a for branding purposes. It can give visitor/s the idea of what kind of website you have. Having fancy logo would also attract visitors to your site. Now for this tutorial, We will be showing you how to add spinning effect on your logo when mouse over.

This is such an amazing tricks since you are giving your logo an amazing effect that even your visitors can play around.

Let's start with the tutorial.

Demo: Mouse over VBT logo or see GIF below




Follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click ->Template -> Edit HTML

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before ]]></b:skin>

#header-inner{
 -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#header-inner:hover{
-moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Step #5: Now hit Save Template

Now head over to your blog site, mouse over to your logo and see that your logo is spinning.

That's all for this tutorials. To all visitors thank you for dropping by at vbt blog.

Happy Blogging!

Learn more »

Viralisme Responsive Blogger Template is actually clean and an elegant blogger theme and possesses great customization for creating blog of viral in internet. This blogger theme is suitable for a wide range of blog for example personal blog, viral news, travel etc. You can also use this template for movie/video blog. This theme has the following features: Responsive, SEO friendly, mobile friendly, Minimal, social sharing, Magazines, browser compatibility, clean layout, simple design, Ads Friendly, drop down menu and much more.

Features: Viralisme

• Seo Ready
• Responsive Design
• Mobile Friendly
• Loading Speed
• Error Page
• Customized Comment Widget
• Fast Loading
• Pagination Widget
• Social Media Ready
• Drop Down Menu

Screenshot: Viralisme

   

Information: Viralisme

How to Install Blogger Templates: Click Here
Template name : Viralisme Blogger Template
Platform: Blogger/Blogspot
Author :  Themeindie

Download: Viralisme

Demo Click here
Download Click here

Learn more »

Video Download is a responsive and high-quality gaming blogger template. Loaded with premium features and beautiful design, it has everything to creation a professional looking site. It is an uniquely designed and perfectly built video blogging blogger theme. Some of its best features are, latest framework and coding structure, it is one of its kind fast loading and fully responsive theme. This theme gives you platform to publish posts related to movies and movie related stuffs, whether its review or promotion. It is a perfect template for YouTubers, Video Tutorials, Online Courses and video blogs.

Features: Video Download

• Seo Ready
• Responsive Design
• Ads Ready
• SEO Optimized
• Ads Ready
• Tabbed Widget Ready
• Fast Loading
• Social Bookmark Ready
• Page Navigation Menu
• WhatsApp Sharing

Screenshot: Video Download

   

Information: Video Download

How to Install Blogger Templates: Click Here
Template name : Video Download
Platform: Blogger/Blogspot
Author :  SoraTemplates

Download: Video Download

Demo Click here
Download Click here

Learn more »

Game Shift is a responsive and high-quality gaming blogger template. It is a simple design 3 column blogger template. You can create gaming based blog to publish gaming news related to online or offline games. Added with an 'Accordion Menu bar' in this free blogger template. An Accordion is a drop down widget makes it easy to switch to other posts. Below are more features of this templates.

Features: Game Shift

• Page Navigation Menu
• Responsive Design
• 4 Columns Footer
• Post Thumbnails
• Ads Ready
• Social Bookmark Ready
• Drop Down Menu
• 2 Sidebars

Screenshot: Game Shift

   

Information: Game Shift

How to Install Blogger Templates: Click Here
Template name : Game Shift
Platform: Blogger/Blogspot
Author :  BloggerThemes9

Download: Game Shift

Demo Click here
Download Click here

Learn more »

PowerGame is Blogger Template with a responsive and high-quality feature for Gaming, news and entertainment blog. It can create and manage gaming based blog to publish gaming news, gaming hacks and mod related to online or offline games. Some of its best features are, this template is packed with great features and created with Clean and pure coded HTML, CSS, jQuery. This theme perfect for Search Engine Optimization. Its High User Friendly Blogger Template. Some of its features are 2 Comment System (Blogger, Facebook), Compatible with major browsers (IE8+,Mozilla,Chrome,Safari), Professional admin layout, help you easy work with blog layout and more.

Features: PowerGame

• Advance Search Engine Optimization
• Responsive Design
• Ads Ready
• SEO Optimized
• Ads Ready
• Auto resize thumbnail image
• Fully Responsive Design
• Grid based Design
• Related posts support
• Recent Post By Label

Screenshot: PowerGame

   

Information: PowerGame

How to Install Blogger Templates: Click Here
Template name : PowerGame
Platform: Blogger/Blogspot
Author :  Themexpose

Download: PowerGame

Demo Click here
Download Click here

Learn more »

Hot Games Gaming Blogger Template is a responsive and high-quality gaming blogger template for gamer enthusiast. It can create and manage gaming based blog to publish cheats, gaming hacks and mod related to online or offline games. Some of its best features are, this template is packed with great features and admin options, so you can add and filter gaming related articles and much much more! Created with Clean and pure coded HTML, CSS, jQuery, Documentation is included in your downloaded package and created by top SEO technologies so the website will generate much more organic traffic than before. More features for this template below.

Features: Hot Games Gaming

• Seo Ready
• Responsive Design
• Ads Ready
• SEO Optimized
• Ads Ready
• Well Documentation
• Fast Loading
• Social Bookmark Ready
• Page Navigation Menu
• Drop Down Menu

Screenshot: Hot Games Gaming

   

Information: Hot Games Gaming

How to Install Blogger Templates: Click Here
Template name : Hot Games
Platform: Blogger/Blogspot
Author :  SoraTemplates

Download: Hot Games Gaming

Demo Click here
Download Click here

Learn more »

Movie Blogger template is a professional and high-quality movie template that is best for movie/video website. It is highly optimized for a video blog and it has more unique features which help you to build any kind of video or movie streaming websites. Movie can do it and it is an perfect choice. You can setup your own website and stream your own media using our Template. This theme utilizes built-in features of Blogger, making it really easy to use and setup.

Features: Movie Blogger template

• Responsive - Check Here
• SEO Friendly - Check Here
• Google Testing Tool Validator - Check Here
• Mobile Friendly - Check Here
• Custom 404 Page - Check Here
• Entertainment
• Social Buttons
• Supports Video
• Ads Ready
• Slider
• Clean Design
• Clear Layout
• Browser Compatibility

Screenshot: Movie Blogger Template

   

Information: Movie Blogger Template

How to Install Blogger Templates: Click Here
Template name : Movie
Platform: Blogger / Blogspot
Author :  Soratemplates

Download: Movie Blogger Template

Demo Click here
Download Click here

Learn more »

VideoTube a wordpress video theme is a high-quality video template. The blogger version of this template VideoTube Blogger Video Template was actually posted here in vblogger templates. This responsive theme allows users to embed or upload videos and the homepage is easy to build with plenty of widgets. The theme includes automatic video resizing for thumbnails, has a like button and view counter and comes with easy to change theme colors.

Features: VideoTube - Wordpress Video Theme

• Un-limit video in one page
• 7 Color Schemes
• Infinite Scrolling Template
• Visual Page Builder
• 10+ Hompages templates
• Responsive Design
• Easily embed videos from Youtube, Vimeo, Dailymotion, Facebook, Twitter, Streamable, Openload, Hulu …(Supported Video Sites) or upload your video file
• Automatic video thumbnails
• Upload your own videos
• Allow users to submit videos and contribute to Videotube, (view image)
• 13 Widget packed with options
• Channel page, demo
• Custom Login/Register page, supported by shortcode
• Like Button & View count
• Sort Videos by: Likes, Views, Comments and date
• Lots of Theme Options
• Easily change the colors of the site
• Video Post type and custom taxonomy
• Custom Video Slug
• 2 Different video layouts (Normal & Full Width)
• Video Post type and custom taxonomy
• Custom Logo, favicon, CSS and JS
• Featured Videos Area
• Full width and Right sidebar Page templates
• WordPress Menu Support – 2 levels of dropdown
• Video Embed & Thumbnail Generator compatible
• Social Counter Widget
• Translation Ready
• Free installation

Screenshot: Smart Tube

   

Information: VideoTube - Wordpress Video Theme

Template name : VideoTube
Platform: Wordpress
Theme Version: version 3.2.4
Wordpress Version: WordPress 5.0.x and WordPress 4.9.x

Download: Smart Tube

Demo Click here

Download Click here

Learn more »