Thursday, September 25, 2014

HTML Tips&Tricks No:2 | Get A Picture Between Posts


Hey! 
I had so many request about HTML codes and I can truly say that I am not a expert. You can check so many new things from bloghocam.blogspot.com and owner is Mr. Serdar. I don't know he can speak English or not but you can understand with pictures. So many people asked me about my little Crocus (purple flower) picture which is in between posts. It's so easy and so simple. Let's get start ^.^

First you must find ]]></b:skin> code on Template/Edit HTML. For this CTRL+F and write in box this code.

Selam!
HTML kodları ile ilgili çok mail aldım ve söyleyebilirim ki ben bu işin uzmanı değilim. Daha detaylı bilgiye bloghocam.blogspot.com adresinden ulaşabilir ve sahibi Serdar beye mail atarak sorabilirsiniz. Bir çok insan bana minik Çiğdem çiçeğinin yayınlar arasında nasıl yerleştirdiğimi sordu. Oldukça basitçe anlatmaya çalışacağım. Hadi başlıyoruz ^.^

Öncelikle ]]></b:skin> kodunu Şablonumuz da HTML'yi Düzenleden bulmak gerekiyor bunun için de CTRL+F demek yeterli çıkan kutucuğa da kodumuzu yazıp buluyoruz.

Then copy this codes right down below which are in blue dark and paste before this code ]]></b:skin>

Sonra aşağıda vermiş olduğum mavi ile taranan kodu kopyalayıp ]]></b:skin> kodundan önce yapıştırıyoruz.

.post { background:url('YOUR PHOTO URL CODE HERE');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 135px;
margin:  10px 0px  10px 0px; }


Let's do important thing: Photo URL! Yes you need a picture/photo url code which you want to add your blog. For this I'm using photobucket.com and I choose .png pictures for my blog because I prefer transparent background. After you upload your picture at photobucket.com then copy picture's url code then paste into which I wrote Your Photo URL Code Here instead :) You can change where it looks on your blog from changing padding-bottom value and also margin values. 

En önemli adıma geçiyoruz. Seçeceğiniz resmin URL kodu! Ben bunun için photobucket.com adresini kullanıyorum ücretsiz olduğu için. Seçtiğim resmin png formatında ve transparan arka fona sahip olmasına dikkat ediyorum. photobucket.com adresine istediğiniz resimi yükledikten sonra url kodunu alıp size vermiş olduğum kodda yazan Your Photo URL Code Here yazısı yerine yapıştırıyoruz. Yayınlar arasındaki yerini padding-bottom yazan yerde px değerini değiştirerek veya margin deki px değerlerini değiştirerek istediğiniz şekilde düzenleyebilirsiniz.


Then you can check from preview button. 

Kontrol etmek için Şablonu önizleye tıklayıp bakabilirsiniz.


You're all done! 
I hope this was helpful ^.^ Please share if you like, Thank you ^.^

Bitti! Umarım size yardımcı olmuştur. Beğendiyseniz lütfen paylaşın, Teşekkürler ^.^

{If you like this post, also you can like this post too: HTML Tips&Tricks Center Column Border}


    photo Bloglov_35px_zps9a144105.png  photo Insta_35px_zpsd39241ee.png  photo Twit_35px_zps5f3adfce.png  photo goog_35px_zps05219007.png  photo Pin_35px_zps0f3adf38.png

No comments:

Post a Comment

Link içeren yorumlar yayınlanmayacaktır.
Link contains comments will not be posted.

Many thanks for your comments, I am very happy for your interest ^.^
If you have a blog I will visit your blog ^.^ If you follow me just let me know, I will follow you back ^.^ You can leave in comment your blog address (Please don't just advertise your blog links, because comments that aren't related to the post will be marked as spams...)

Crocus xo

www.crocusinsun.com




All images and contents © CrocusInSun unless stated otherwise. privacy policy