Free Blogger Templates

BTemplates, the best place for Blogger templates since 2008.

Modern Photography Blogger Template

Modern Photography

Free Download Live Demo

19,751 Downloads.


Mobile screenshot

Instructions

  1. How to install a Blogger template.

About Modern Photography

Modern Photography is a free premium Blogger template with 2 columns, right sidebar, rounded corners, slider and abstract.

Excellent template for blogs about photography.


More Premium Blogger templates:


Credits

Author: Bloggermint.


80 Questions and comments on Modern Photography

Helena 5 November 2010 at 17:15

¿Cómo se cambiarían las imágenes de la cabecera?

↩ Reply
Claudia 5 November 2010 at 18:27

@Helena: Ve a Diseño/Edición de HTML y busca el siguiente código:

<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD01yOVRI/AAAAAAAAA1U/CU045Bmlq2Y/s000/field.jpg' width='497'/>

<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1BYf4KI/AAAAAAAAA1Y/opCTGpxB9Pw/s000/gnome.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1v53n7I/AAAAAAAAA1c/0lao1dqe6Zw/s000/pencils.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD11_yMVI/AAAAAAAAA1g/GCHnTsa_i_Q/s000/golf.jpg' width='366'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD2SPRzgI/AAAAAAAAA1k/mMCfjj1OvwM/s000/river.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD2576RxI/AAAAAAAAA1o/wCJuXl6giSw/s000/train.jpg' width='440'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD3BMcg6I/AAAAAAAAA1s/5PURw-NMLjE/s000/leaf.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD3neKa3I/AAAAAAAAA1w/MbTfMJq_odg/s000/dog.jpg' width='497'/>

Ahí debes reemplazar las URL de tus imágenes que deben tener 330 píxeles de alto. El ancho de cada imagen (width) lo puedes modificar manualmente en el mismo código.

↩ Reply
jesus rueda 6 November 2010 at 17:28

estoy tratando de bajr este template blog pero no se como se lo edita.
ayudame por favor

↩ Reply
Francisco 6 November 2010 at 21:26

@jesus rueda ¿qué quieres editar exactamente? ¿revisaste ya nuestras instrucciones? https://btemplates.com/faqs-es/

Liz 7 November 2010 at 9:58

How do I use my own photos for the ones scrolling across the top of the page?

↩ Reply
Franklin Manuel 8 November 2010 at 4:48

@Liz – Search for <div class=%u2019scrollableArea%u2019> in the template and replace the existing image link with yours.

↩ Reply
Franklin Manuel 8 November 2010 at 4:49

@Liz – Ignore my previous comment. Search for in the template and replace the existing image link with yours.

↩ Reply
Liz 8 November 2010 at 11:13

@Franklin— Sorry, what is the second one I should look for? I think you forgot to post it in :P And do you know what I type for a personal picture link? Does it need to be from the internet, or html?

↩ Reply
Franklin Manuel 8 November 2010 at 11:30

@Liz – Here is what you need to search in the template
and replace the existing links with yours

↩ Reply
Claudia 8 November 2010 at 11:33

@Liz: Go to Design/Edit HTML and find this code:

<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD01yOVRI/AAAAAAAAA1U/CU045Bmlq2Y/s000/field.jpg' width='497'/>

<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1BYf4KI/AAAAAAAAA1Y/opCTGpxB9Pw/s000/gnome.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1v53n7I/AAAAAAAAA1c/0lao1dqe6Zw/s000/pencils.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD11_yMVI/AAAAAAAAA1g/GCHnTsa_i_Q/s000/golf.jpg' width='366'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD2SPRzgI/AAAAAAAAA1k/mMCfjj1OvwM/s000/river.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD2576RxI/AAAAAAAAA1o/wCJuXl6giSw/s000/train.jpg' width='440'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD3BMcg6I/AAAAAAAAA1s/5PURw-NMLjE/s000/leaf.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD3neKa3I/AAAAAAAAA1w/MbTfMJq_odg/s000/dog.jpg' width='497'/>

You must replace every single URL by the direct link to each hosted image that you want to use in that place. All your images must be 330 pixels height, but you can modify the width in the same code.

↩ Reply
Priscilla 9 November 2010 at 17:25

Hi Claudia, I love this template, but I can’t get it to scroll! I didn’t change anything except the pictures just the way you described. Help!

↩ Reply
Claudia 9 November 2010 at 19:29

@Priscilla: Delete the stat counter badge, and see what happens.

↩ Reply
Erica C. 15 November 2010 at 10:07

Hola Claudia.

Hay manera de que el templete tome automáticamente las fotos del blog sin necesidad de hacerlo manualmente?

Gracias de antemano por tu respuesta

↩ Reply
Priscilla 15 November 2010 at 10:29

Hey Claudia, I did that but didn’t work. Any other suggestions?

I was wondering, do you think it’s because I’m redirecting my blog to my website address?

↩ Reply
Claudia 16 November 2010 at 21:43

@Priscilla: Maybe you should try to install the template again and see what happens… In this way, we will know if the problem is the template or it is due to the redirection.

↩ Reply
Claudia 16 November 2010 at 21:44

@Erica C.: No, es necesario hacerlo todo manualmente. No es como en WordPress :(

↩ Reply
jletona 17 November 2010 at 16:16

I understand you have to replace the code with the direct link to your photo (will this work off picasa/ photo bucket?) I tried and can’t get it to work?!

Please help!

Should I be uploading my images to blogger first>?

↩ Reply
Erica C. 21 November 2010 at 20:41

Hola

EStoy teniendo problemas con las etiquetas o ‘labels’ ya que al aparecer publicadas en forma vertical me publica la nota despues de que se termina el texto de etiquetas. Como puedo solucionar eso?

↩ Reply
Doris 26 November 2010 at 12:20

Hi,

I love the layout and everything except I wish to change the 2 column and footer of 3 column, all in 1 column only. How can I do that?

↩ Reply
Juan 8 December 2010 at 17:45

Hola Claudia, use este template con blogger y me funcionó perfectamente con mis imagenes, luego compre el dominio .com para que lo redireccionen ahi y dejó de funcionar. Al entrar al blogspot seguia funcionando, pero al entrar al .com, no funcionaba. Instalé la plantilla de nuevo pero sigue sin funcionar.

Estará echa solo para blogspot? debe haber un lugar en el codigo donde se pueda modificar eso… ayudame porfis!

↩ Reply
Claudia 8 December 2010 at 17:48

@Juan: Si el problema es que no se muestran las imágenes de la plantilla, la solución sería que descargues todas las imágenes y las realojes en un hosting gratuito como photobucket o tinypic.

↩ Reply
Millaray 8 December 2010 at 23:42

@Claudia: ¿Cómo sé cuál es la URL de mis imágenes?

↩ Reply
Claudia 9 December 2010 at 7:11

@Millaray: Las buscas en la plantilla (Diseño/Edición de HTML). Si usas Firefox, las puedes descargar todas desde Herramientas/Información de la página/Medios/Guardar como. Las puedes descargar todas juntas o una por una.

↩ Reply
Franklin Manuel 9 December 2010 at 12:31

Hi everyone. I found there is an issue with files hosted on sites.google.com when a user use the template on a custom domain to avoid that I am giving the script link from my own server.

So please replace the two link that points to site.google.com and replace it with these two

http://bloggermint.com/files/jquery.ui.widget.js

http://bloggermint.com/files/jquery.smoothDivScroll-1.1-min.js

↩ Reply
Sheanne 11 December 2010 at 1:14

how do you make the main background wider, as well as the side bar. Thank you.

↩ Reply
Ashley 11 December 2010 at 16:57

I cannot for the life of me get this template to work. There is no HTML in the zipped file.. just a bunch of stuff that brings me back to the internet.. can someone post the full HTML code please.

↩ Reply
Irene 12 December 2010 at 19:12

How do I create a drop down menu on the navigation page? Please help.

Thanks

↩ Reply
Claudia 13 December 2010 at 13:10

@Ashley: You don’t need any HTML file. Just upload the XML file included (Modern-Photography.xml).

↩ Reply
Ashley 14 December 2010 at 0:46

I did upload the xml file… I am just dumb I suppose, I have no clue what to do with it, because on the instructions it says to extact the files and then copy past the HTML in blogger. So please explain what I do with the xml file. Thank you.

↩ Reply
Claudia 14 December 2010 at 9:34

@Ashley You can find the answer to your questions and more in our FAQ section.

Paulo Teixeira 21 December 2010 at 11:42

Olá boa tarde, estou a trabalhar com o código do vosso template e tenho um problema no internet explorer os menus não funcionam correctamente nos outros browser funciona perfeitamente mas no IE não funciona poderiam ajudar-me? Obrigados

↩ Reply
Claudia 23 December 2010 at 14:41

@Paulo Teixeira: This template is not compatible with Internet Explorer. If you want to solve the problem, you may contact the author.

↩ Reply
k05tinha 21 January 2011 at 20:57

I have a question
The background can be changed?! You can only change what’s behind the title of blogger.

↩ Reply
Claudia 21 January 2011 at 23:19

@k05tinha: You can change the background by editing the background property in Design/Edit HTML, in this part:

body {
color:#ccc;
font-family:”Helvetica Neue”,Arial,”Lucida Grande”,sans-serif;
font-size:14px;
margin-top:-1px;
line-height: 20px;
background:url(“http://2.bp.blogspot.com/_JUg9QsmKp5s/TNODw2aEF7I/AAAAAAAAA0o/g9-VwdesD6E/s000/img-circles.jpg”) no-repeat scroll 50% 0 #170505;
}

↩ Reply
k05tinha 22 January 2011 at 19:36

Thanks I managed to change the background =)

↩ Reply
k05tinha 22 January 2011 at 20:37

I forgot to ask in the comment above, so I put the title of blogger to the center of the page?

↩ Reply
Claudia 23 January 2011 at 15:11

@k05tinha: Go to Design/Edit HTML, and find:

#header h1 {
font-size:40px;
font-weight:600;
text-decoration:none;
border-bottom:none;
letter-spacing:-1px;
line-height:40px;
color:#FFF;
display:block;
padding:13px;
text-shadow:1px 1px 1px #000;
text-transform:uppercase;
font-family:georgia;
}
#header a {
color:#FFF;
text-shadow:1px 1px 1px #000;
}
#header a:hover {
color:#999;
text-decoration:none;
}
#header .description {
font-size : 18px;
font-weight : 200;
margin-left:15px;
letter-spacing : -1px;
}

Now change it by:

#header h1 {
font-size:40px;
font-weight:600;
text-decoration:none;
border-bottom:none;
letter-spacing:-1px;
line-height:40px;
color:#FFF;
display:block;
padding:13px;
text-shadow:1px 1px 1px #000;
text-transform:uppercase;
font-family:georgia;
text-align: center;
}
#header a {
color:#FFF;
text-shadow:1px 1px 1px #000;
}
#header a:hover {
color:#999;
text-decoration:none;
}
#header .description {
font-size : 18px;
font-weight : 200;
margin-left:15px;
letter-spacing : -1px;
text-align: center;
}

Save changes.

↩ Reply
karin 1 February 2011 at 10:22

hola claudia quiero cambiar las imagenes de cabezera de la planilla ya estoy en el codigo

↩ Reply
karin 1 February 2011 at 10:24

hola claudia quieroq ue em ayudes quiero cambiar las images de mi planilla como tu dices ya estoy en el code que tu dices pero cuando intento poner mi url me sale error y no se peude te agradeceria que me ayudees la url que quiero poner esde esta miagen pero nada

↩ Reply
Claudia 1 February 2011 at 11:44

@karin: Tienes que remplazar sólo las URL, sin comillas, con http://. Las imágenes deben tener 330 píxeles de alto.

↩ Reply
Victor E. 7 February 2011 at 14:29

Hola Claudia, verás, tengo un pequeño problema con la plantilla:

Al ponerla se ve todo bien, excepto cuando entras a un post, que entonces el tamaó de las cosas sobrepasa en de las publicaciones mezclandose con la columna lateral, y no se como ampliar el centro o disminuir la columna, un saludo, y gracias por adelantado.

PD: Adoro estas plantillas ^^

↩ Reply
Claudia 8 February 2011 at 16:43

@Victor E.: Ve a Diseño/Edición de HTML y busca:

.post {
margin-bottom:30px;
background:url("https://3.bp.blogspot.com/_JUg9QsmKp5s/TNODxnSyoVI/AAAAAAAAA00/L_BQSeGv7-U/s000/content-bg.png") no-repeat scroll 50% 0 #3C1B1B;
padding:20px;
-moz-border-radius:20px 20px 20px 20px;
}

Reemplaza ese código por:

.post {
margin-bottom:30px;
background:url("https://3.bp.blogspot.com/_JUg9QsmKp5s/TNODxnSyoVI/AAAAAAAAA00/L_BQSeGv7-U/s000/content-bg.png") no-repeat scroll 50% 0 #3C1B1B;
padding:20px;
-moz-border-radius:20px 20px 20px 20px;
word-wrap: break-word; 
overflow: hidden; 
}

y guarda los cambios.

↩ Reply
Prince Arnold 10 February 2011 at 3:19

Its not scrolling please Help

↩ Reply
Prince Arnold 16 February 2011 at 19:34

never mind…all of a sudden it started to work

↩ Reply
Marta 25 February 2011 at 12:03

Hi Claudia,
is possible to add a column in the left side of the themplate?
THX
Bye

↩ Reply
Pedro 2 March 2011 at 10:04

Hi Claudia! when I tried to modify the url for Home in the menu I get this error message:”LHS of numeric is null before 35 in frechasemfotos.blogspot.com/ “. I don’t think I did nothing wrong! Can you help me?
Thanks

↩ Reply
Pedro 2 March 2011 at 12:02

also the page is too slow to load in any browser, can this be because of the slider, if so, how do I remove it?

↩ Reply
Claudia 2 March 2011 at 18:55

@Pedro: You must replace your complete URL with http:// if you want your tabs work.
Now, to remove the slideshow, you must go to Design/Edit HTML and delete the following codes:


<div id='makeMeScrollable'>
<div class='scrollingHotSpotLeft'/>
<div class='scrollingHotSpotRight'/>
<div class='scrollWrapper'>
<div class='scrollableArea'>

<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD01yOVRI/AAAAAAAAA1U/CU045Bmlq2Y/s000/field.jpg' width='497'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1BYf4KI/AAAAAAAAA1Y/opCTGpxB9Pw/s000/gnome.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD1v53n7I/AAAAAAAAA1c/0lao1dqe6Zw/s000/pencils.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD11_yMVI/AAAAAAAAA1g/GCHnTsa_i_Q/s000/golf.jpg' width='366'/>
<img alt='Demo image' height='330' src='https://2.bp.blogspot.com/_JUg9QsmKp5s/TNOD2SPRzgI/AAAAAAAAA1k/mMCfjj1OvwM/s000/river.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD2576RxI/AAAAAAAAA1o/wCJuXl6giSw/s000/train.jpg' width='440'/>
<img alt='Demo image' height='330' src='https://1.bp.blogspot.com/_JUg9QsmKp5s/TNOD3BMcg6I/AAAAAAAAA1s/5PURw-NMLjE/s000/leaf.jpg' width='496'/>
<img alt='Demo image' height='330' src='https://4.bp.blogspot.com/_JUg9QsmKp5s/TNOD3neKa3I/AAAAAAAAA1w/MbTfMJq_odg/s000/dog.jpg' width='497'/>
</div>

</div>
</div>

	<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/bloggermint/jquery.ui.widget.js' type='text/javascript'/>
<script src='https://sites.google.com/site/bloggermint/jquery.smoothDivScroll-1.1-min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});

//]]>
</script>
↩ Reply
Pedro 3 March 2011 at 0:14

@Claudia: I did replace the url, with the one that appears in the adress bar in the browser:( frechasemfotos.blogspot.com/ ), and I continue to have the same problem. I tried to create my own menu, as I did in another blogs, but it did not work. Can you help me?

↩ Reply
Pedro 3 March 2011 at 0:54

I managed to solve the problem! Thanks.

↩ Reply
Pedro 3 March 2011 at 3:44

@Claudia: It works in Internet Explorer 9, altough the menu bar style it’s a bit different.

↩ Reply
Matt 10 March 2011 at 15:05

@Claudia: Is there any way that I can completely remove the tabs above the scrolling pictures (Home, Posts RSS, Comments RSS, Edit), I’d rather have nothing there at all, can I remove that top bar too? Also, can I change the color of text that is “tag line” of the blog. It’s currently gray, and I’d rather it was just black. One more question, how can I edit the colors of the blog. The designer on blogger doesn’t offer any thing to change, I’m assuming because of the template. Thanks SO much!

↩ Reply
Claudia 13 March 2011 at 3:16

@Matt: If you want to delete the menu bar, go to Design/Edit HTML and delete the following code:


<div id='nav'><ul>
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='feed' expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a class='comment' expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a class='edit' href='#'>Edit</a></li>
</ul>
</div>

Now save changes.

To change the color of the tagline, go to Design/Edit HTML and find:

#header .description {
font-size : 18px;
font-weight : 200;
margin-left:15px;
letter-spacing : -1px;
}

Change that code by:

#header .description {
font-size : 18px;
font-weight : 200;
margin-left:15px;
letter-spacing : -1px;
color: #000;
}

and save changes.

To change other colors, you must change the CSS of the template… If you tell me where do you want to change the colors, maybe I could help you a little.

↩ Reply
ajit 13 March 2011 at 7:27

HEY…I SUCCESSFULLY INSTALLED THE TEMPLATE AND IT WORKS GREAT ON MY BLOG……EXCEPT…THE LINKS I.E. ” HOME, RSS FEE, EDIT” I CANGED IT FOR MY CONTACT AND ABOUT PAGE….AND IT IS NOW SHOWING THE ERROR…PLEASE HEL…

see the error at top of image scroller

↩ Reply
harry 17 March 2011 at 1:38

dear claudia,

how can i change the moving photo with my own?

thanx.

↩ Reply
harry 17 March 2011 at 1:51

dear claudia,

its ok. i found it!.. :)

↩ Reply
Suciu Florin 27 March 2011 at 6:51

Hey Claudia, I want to install this template but when i install it the moving images won’t appear :( how I make them appear and how can i change them? pls help

↩ Reply
suciu florin 27 March 2011 at 8:03

Ok, the problem with the images is solved but in the menu bar won’t appear my own menu :( can i change the color of the template?How?Help

↩ Reply
ajit 28 March 2011 at 9:15

check out my blog…i have done it successfully…if any problem…contact me…i will help it fast as i can

↩ Reply
Mateus 5 April 2011 at 20:49

Olá Claudia tudo bom?
Gostaria de saber como mudar a velocidade de rolgem da imagens.

Obrigado.

↩ Reply
Mateus 5 April 2011 at 21:24

Claudia Hello how are you?
I wonder how to change the speed of rolgem images.

Thanks.

↩ Reply

Leave a Reply

Your email address will not be published. Required fields are marked *