Camera-Man Responsive Blogger Template

1. Backup & Uploading

Unzip the Template.zip file.
On Blogger Dashboard Click Template.
Click on Download Full Template to keep your old template.
Click Browse... button. Find where the “Camera-Man.xml” file location.
Then Click Upload.
Edit mobile Preveiw. (follow images).

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

On Blogger Dashboard Click Settings.
Click Other.
In Site Feed > Allow Blog Feed Choose Full.
Then Click Save settings.

Now you can Edit the meta tag Keywords of your blog. follow this steps

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

<meta content='Keywords_Here' name='keywords'/>

Change Keywords_Here with your blog keywords you want to use.
Click Save template.

Header Logo.
Menu
Popular Post

1. Setting Main Blog Part

On Blogger Dashboard Click Layout.

Click Edit on Blog Posts Widget.

Change it to look like that image.

Click Save.

2. Navigation Menu

On Blogger Dashboard Click Template.
Click Edit HTML.
Press Crtl+F.
And search 'menu-primary'
And find This Code:

Change	Please Change the links according to your need,For links Just replace the # with url and Change the Name of the link

3. About Author widget

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Add the following Code:

<div class="widget widget-about"> 
<div class="bussinesscard"> 
<div class="flip"> 
<div class="front"> 
<!-- Change the background image of the about widget,just change the URL--> 
<div class="top"  
style="background:url(http://hamzh.info/demo/Qalami/wp-content/uploads/2014/11/slider7-300x169.jpg) no-repeat center;background-size:cover;"> 
<!-- Change the front image here, Just change the URL and Alt Text--> 
<div class="bgbussinesscard"> 
<div class="logo"> 
<img class="img-responsive" alt="Nicolai" 

src="http://2.bp.blogspot.com/-RDCqNPDtgf0/VXp3P7jwucI/AAAAAAAACo4/ZOMnEzpaZKU/s1600/picjumbo-com_hnck1474.jpg" /></div></div></div> 

<div class="nametroduction"><div class="name">Author</div><div class="introduction text-center">Photographer</div></div> 

<div class="contact">  
<div class="aboutwords text-center"><i class="fa fa-quote-left"></i> A Graphics Designer, a Web Developer, a BoyFriend, a Friend, a Son, a Legend.. <i class="fa fa-quote-right"></i></div> 

<!--Change Your Personal Details Here,Or Can Change It Into simple Text--> 

<div class="phone"><div class="row"><div class="col-xs-1"><i class="fa fa-phone-square"></i></div><div class="col-xs-10">0123456789</div> 
<div class="clearfix"> 
</div> 
<div class="col-xs-1"><i class="fa fa-envelope"></i></div><div class="col-xs-10">yotemplate@gmail.com<script cf-hash="f9e31" type="text/javascript"> 

/* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */</script></div> 
<div class="clearfix"></div><div class="col-xs-1"><i class="fa fa-home"></i></div> 

<div class="col-xs-10">12 Misr ST ,KBND, U.K</div><div class="clearfix"></div></div></div><div class="social-icons"><a href="#"> 
<i class="fa fa-facebook"></i></a><a href="#"> 
<i class="fa fa-twitter"></i></a><a href="#"> 
<i class="fa fa-google-plus"></i></a><a href="#"> 
<i class="fa fa-instagram"></i></a><a href="#"> 
<i class="fa fa-linkedin"></i></a><a href="#"> 
<i class="fa fa-flickr"></i></a><a href="#"> 
<i class="fa fa-pinterest"></i></a><a href="#"> 
<i class="fa fa-youtube"></i></a></div></div></div></div></div></div>

Now all You Have to do is, Change the Image URLs with Your Desired Image URLs, And Social Links URLs (href=#) with Your Social Sites links

NOTE:

If You Are Still Facing some Problems, Feel Free to ask for the assistance.

4. Instagram Widget

On Blogger Dashboard Click Template.
Click Edit HTML.
Press Crtl+F.
And search 'coffeescript'
And find This Code:

Now change your instagram userId and accessToken,As shown in the Above demonstration

NOTE:

If You Are Still Facing some Problems, Feel Free to ask for the assistance.

5. Popular Post WidgetSS

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopost = 10;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
numpostsq	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

Go to this url Facebook Like Box

Facebook Page Url	Add Your FB Url in box
Color Scheme	Choose light color scheme

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopostb = 5;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
nopostb	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopostr = 5;
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr	Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div id="random-posts">

<script style="text/javascript">
 var numposts_gal = 4;
</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
</div>

numposts_gal	Number of posts to be shown.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div id="comments-container"></div>
<script>
var cm_config = {
ct_id: "comments-container",
max_result: 5
};
</script>

max_result	Number of recent comments to be shown.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var numpostso = 4;
var classo = "gallery_widget gallery_widget_posts owl-carousel owl-theme";
var ido = "footer_carousel";
</script>
<script src='/feeds/posts/default/-/slideshow?alt=json-in-script&amp;callback=ocarousel' type='text/javascript'/></script>

slideshow	Add This label name to posts you want them to be shown.
numpostso	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name `slideshow`.

6. Top Social Icons

On Blogger Dashboard Click Template.
Press ctrl + F.
try to find " Container4 "(Without quotes) .
You'll find the following code.

<!--Top Social Icons--> 
<div class='container4'><div class='row1'> 
    <ul class='social-items'> 
    <li><a class='facebook' href='#'><i class='fa fa-facebook'/><div/></a></li><li><a class='twitter' href='#'><i class='fa fa-twitter'/><div/></a></li><li><a class='youtube' href='#'><i class='fa fa-youtube'/><div/></a></li><li><a class='google' href='#'><i class='fa fa-google-plus'/><div/></a></li><li><a class='linkedin' href='#'><i class='fa fa-linkedin'/><div/></a></li><li><a class='rss' href='#'><i class='fa fa-pinterest'/><div/></a></li>    </ul> 
    </div></div> 
  </div>

#	Change social links with your links.

7. Bottom Social Icons

On Blogger Dashboard Click Template.
Press ctrl + F.
try to find " container3 "(Without quotes) .
You'll find the following code.

<!--Bottom Social Icons,change '#' With your desired Urls--> 

<section class='footer-social-bar'> 
    <div class='container3'><div class='row'> 
    <ul class='footer-social-items'> 
    <li><a class='facebook' href='#'><i class='fa fa-facebook'/><div><strong>Facebook</strong><span>Join us on Facebook</span></div></a></li><li><a class='twitter' href='#'><i class='fa fa-twitter'/><div><strong>Twitter</strong><span>Follow us on Twitter</span></div></a></li><li><a class='youtube' href='#'><i class='fa fa-youtube'/><div><strong>Youtube</strong><span>Join us on Youtube</span></div></a></li><li><a class='google' href='#'><i class='fa fa-google-plus'/><div><strong>Google Plus</strong><span>Join us on Google Plus</span></div></a></li><li><a class='linkedin' href='#'><i class='fa fa-linkedin'/><div><strong>Linkedin</strong><span>Join us on Linkedin</span></div></a></li><li><a class='rss' href='#'><i class='fa fa-pinterest'/><div><strong>Pinterest</strong><span>Join us on Pinterest</span></div></a></li>    </ul> 
    </div></div> 



    </section>

#	Change social links with your links.

8. Header photo-toggle animations

On Blogger Dashboard Click Template.
Press ctrl + F.
try to find " my-header "(Without quotes) .
You'll find the following code.

 
<!--This is the arrey where  you can insert your images,that will be shown in grid with all the animations--> 

<div class='my-header'> 
<div class='ri-grid ri-grid-size-1 ri-shadow' id='ri-grid'> 
    <ul> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/1.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/8.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/39.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/33.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/12.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/1.jpg'/></a></li> 
         
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/48.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/6.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/10.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/32.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/13.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/54.jpg'/></a></li> 

        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/16.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/47.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/26.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/1.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/8.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/6.jpg'/></a></li> 
         
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/10.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/40.jpg.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/48.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/6.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/10.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/36.jpg'/></a></li> 

        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/20.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/28.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/15.jpg'/></a></li> 

        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/43.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/24.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/50.jpg'/></a></li> 

        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/33.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/12.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/1.jpg'/></a></li> 
         
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/48.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/6.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/10.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/32.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/13.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/54.jpg'/></a></li> 

        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/16.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/47.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/26.jpg'/></a></li> 
        <li><a href='#'><img alt='Whatever works' src='http://themes.pixelwars.org/photographer-html/images/home-grid/1.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/8.jpg'/></a></li> 
        <li><a href='#'><img alt='Anything else' src='http://themes.pixelwars.org/photographer-html/images/home-grid/6.jpg'/></a></li> 
     
        <!-- ... --> 
    </ul> 
</div>

#	You Can Change the Images from Here, Just Change The Images URLs.

9. Animated slogan settings

First you have to Go

On Blogger Dashboard Click Template.
Click Edit HTML.
Press Crtl+F.
And search 'above-grid'
And find This Code:

Now change the slogan with your desired slogan,just keep it short and simple,As Above demonstration

Now Change Fliping words

On Blogger Dashboard Click Template.
Click Edit HTML.
Press Crtl+F.
And search 'word-flip'
And find This Code:

Now Change the 1st,2nd,3rd words,which will flip over as shown in the demo.

NOTE:

If You Are Still Facing some Problems, Feel Free to ask for the assistance.

10. Search Widget

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<form id="searchbox" method="get" action="/search" autocomplete="off"> 
<input name="q" type="text" size="15" placeholder="Enter keywords here..." /> 
<input id="button-submit" type="submit" value=" "/>
</form>

You Are All Set To Go. Enjoy the template..!!

Footer Social Links

you have to edit the social links manually.

Demo Slider

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code in the bottom

<ul class='contact-social'> 
<li><a href='#'><i class='fa fa-facebook'/> Facebook</a></li> 
<li><a href='#'><i class='fa fa-twitter'/> Twitter</a></li> 
<li><a href='#'><i class='fa fa-google-plus'/> Google+</a></li> 
<li><a href='#'><i class='fa fa-dribbble'/> Dribbble</a></li> 
<li><a href='#'><i class='fa fa-linkedin'/> Linkedin</a></li> 
<li><a href='#'><i class='fa fa-instagram'/> Instagram</a></li> 
</ul>

just replace the # with your social url Save template.
And delete the whole li which you don't want to use. Save template.

You can change the only color of the template using blogger template designer.

Go to Blogger Dashboard -> Template -> Customize and then advance

Change the color value here and link color can also be change

Camera-Man| Documentation [ Yotemplates.com ]

1. Backup & Uploading

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

Now you can Edit the meta tag Keywords of your blog. follow this steps

1. Setting Main Blog Part

2. Navigation Menu

3. About Author widget

4. Instagram Widget

5. Popular Post WidgetSS

6. Top Social Icons

7. Bottom Social Icons

8. Header photo-toggle animations

9. Animated slogan settings

10. Search Widget

Footer Social Links

Demo Slider

You can change the only color of the template using blogger template designer.

Go to Blogger Dashboard -> Template -> Customize and then advance

Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!