Wednesday, September 10, 2014

HTML Tips&Tricks | Center Column Border/Frame

Hey!
I had so many request about my column center border which frame all column in a once. So I decided to share with you guys ^.^ 
Firstly I can say you must preview after you tried new html code in any where. And then it's easy :)

Selam!
Blogumdaki postların olduğu yeri nasıl çerçeveye alırım diye o kadar mesaj aldım ki en sonunda sizinle paylaşmaya karar verdim ^.^
Öncelikle ne olursa olsun yaptığınız her html kod denemesinden sonra kaydetmeden önce bir önizlemesine bakın. Sonrası kolay :)


We start on blogger control pannel. Choose Template and then click on Edit HTML 

Öncelikle blogger kontrol panelinde şablona gelip HTML'yi Düzenle yi seçiyoruz. Resimde görüldüğü üzere ben İngilizce kullanıyorum. Zaten kullandığım tüm cihazları İngilizce kullanıyorum ^.^


Okay. We must find ]]></b:skin> code and for this CTRL+F then write code in box and click enter.
Then write below code which is in blue, before ]]></b:skin> code. 

.main-inner .column-center-inner { border:15px solid #fff0e0; padding:15px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 40px; }

Tamam şimdi ]]></b:skin> kodunu bulmamız gerekiyor bunun içinde CTRL+F ye (klavyede basıp) çıkan kutucuğa kodumuzu yazıyoruz. Daha sonra yukarıda maviyle taradığım kodu ]]></b:skin> kodundan evvel yazıyoruz.

You can change your border thickness from border:15px you can write higher or lower value. You can also change your border color from solid #fff0e0 you can write different color code which you want ^.^

Siz isterseniz çerçevenizin kalınlığını border:15px yazan yerde 15 yerine daha büyük veya daha küçük sayı yazarak değiştirebilirsiniz. Aynı zamanda solid #fff0e0 yazan yerde de # ile başlayan yeri değiştirerek çerçevenizin rengini istediğiniz gibi değiştirebilirsiniz ^.^

You are done!

Bitti!

I hope this was helpful ^.^

Umarım yardımcı olmuştur ^.^




    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

3 comments:

  1. Çok faydalı bir yazı olmuş, teşekkürler ^.^

    ReplyDelete
  2. Merhaba bloğunuzu merakla takip ediyorum :) Sizde benim bloğuma uğrarsanız çok sevinirim :)

    ReplyDelete
  3. Fantastic !!!


    xx

    http://www.thetrendysurfer.com

    ReplyDelete

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