구글 블로거(blogger) HTML 수정 팁 정리List of All Useful HTML Editing Tips for Blogger/Blogspot

구글 블로거(Google Blogger 이하 "블로고"라 칭함)의 가장 큰 장점은 HTML을 수정하여 자신이 원하는 레이아웃으로 블로그를 꾸밀 수 있다는 것이다. HTML을 수정해야하는 번거로움이 있지만..HTML을 알면 그만큼 사용자에게 블로그 레이아웃/스킨을 마음대로 수정 할 수 있는 자유권과 선택의 폭을 준 것이다.

예전에 블로그는 그러한 자유권과 선택의 폭이 작았으니..2014년말 현재..상당한 혹은 대단한 자유권을 사용자에게 주고 있는 것 같다. 비록 아주 작은 부분에서 네이버에 약간 못미치는 부분이 있지만 자유권과 선택권의 가치 혹의 의미를 생각한다면 그야말로 파격적이라 할만하다.

더구나 위젯등도 많이 다양화되어 HTML과 위젯을 숙지한다면 블로거는 네이버의 레이아웃 수준의 블로그를 직접 만들 수 있을 것 같다.

어쨋거나 아주 예전에는 HTML의 수정이나 변경이 어려웠고, 허용되는 범위도 많지 않았는데..이제 다시 블로거를 이용해보니 정말 많은 부분에서 업그레이드가 된 것 같다. 네이버블로그와 별 차이 없는 수준의 블로그 꾸미기가 가능한 것 같다.(꾸미기 보다 더 중요한 건..그처럼 이용자 스스로 수정이나 변경을 허용한다는 것이다. 능력만 되면 말이다.) 아래의 블로거 수정 팁들을 이용한다면 자신이 원하는 블로그 레이아웃 혹은 스킨을 만들 수 있을 것이다.

만약 아래 팁중에서 잘 안되거나 영어이해에 어려움이 있다면.. 덧글로 문의를 남겨 주시라. 보장은 없지만..회신을 하도록 하겠다.

I made my blogger account long time ago. But I had not posted any posting so far. As I wanted to use Blogger instead of Naver's(from Korea) blog service, I want and need to study how to manage or edit HTML sources.

So, time to time, I will write some tips to use blogger and its HTML coding. The tips or information will be added and updated if I can find some reliable tips. Even if I am not a computer guy, I will try to post a reliable tips after applying the tips into my blog.

* If you use the following tips, you may need to use a "Ctrl+F" function to find specific code in a lot of HTML codes. To do that, after opening the Template HTML editing box, carefully move your mouse to any empty space in HTML code box, then press "Ctrl+F" to type a phrase or specific code expression you need to find. (Be careful to edit or move your mouse in HTML editing codes. It is better to backup your blog before doing any of the following tips.)

For example, if you need to fine a code or phrase called ".post-body", press Ctrl+F and type ".post-body" in that little search box of HTML codes. The result will be highlighted so that you can recognize the result.


1. How to center your Post Title
http://www.herandnicole.com/2013/03/how-to-center-your-post-title-and-date.html


2. How to center your Blog Header
http://www.freeprettythingsforyou.com/2012/11/how-to-center-your-blog-header-on-blogger/


3. How to remove Post Atom
http://bloggerhow.com/blogger/how-to-remove-subscribe-to-postsatom-on-blogger/


4. How to remove Navbar
http://helplogger.blogspot.kr/2012/02/how-to-remove-blogger-navbar.html


5. How to change Post Title size, color, etc.
http://www.betatemplates.com/2010/06/change-post-title-color-template.html


6.How to  Change Line Spacing in blogger blog

http://pro-blogging-tips.blogspot.kr/2013/06/change-line-spacing-in-blogger-blog.html


7. How to force links in Blogger to open a new tab
http://www.techrez.com/2013/06/open-blogger-links-in-new-window.html


8. How to change the font style, size and color of description in blogger
http://www.online-quick-guide.com/2013/05/how-to-change-font-style-size-and-color.html


9. How To Disable Copying Text From Blog or Website
http://www.mytrickpages.com/2013/10/how-to-disable-copy-your-text-from-blog.html


10. How to Add a Photo to a Blogger Header
http://smallbusiness.chron.com/add-photo-blogger-header-28901.html
(Layout> Header> Edit: image and placement)


11. How to change your country code from bloger domain name
http://parangbee.blogspot.com/2014/10/blogger-kr.html


12. How to apply "your language(ex: korean)" font type on blogger
http://parangbee.blogspot.com/2014/10/blogger.html


13. How to make a underline for post title
https://productforums.google.com/forum/#!topic/blogger/UB_2y1ssct8

Pixel: xxpx, / Line type: solid or dotted, etc. / Web Color: balck, tomato, etc.

14. How to automatically re-size photos or images to fit your blog
http://icanbuildablog.com/2013/11/auto-sizing-photos-blogger/
http://xomisse.com/blog/automatically-resize-blogger-images-to-fit-blog-post-area/
*Let's assume that you set "max-width" value as "600px", and try to upload a bigger image(ex: 800px) as original size. Even if your image size is bigger than max-width pixel(ex: 600px), that image will be fitted to your blog as 600px image size.

* You can decide and change the width size as 450px, 500px, 550px, and so on.

*If the posted image size is smaller than 600px, that image is not influenced by those above html code. The small size image which is less than 600px, in this example, is displayed as it is. So, when you post images with your posting, it is better to use images bigger than 600px or the value you have set in HTML code.


15. How to change the font size of "No Comment or Post a Comment" text at the bottom of each post.
http://netoopsblog.blogspot.kr/2013/08/change-post-a-comment-message-blogger-change-font-style-image-trick.html

16. How to make a recent post list on blogger
http://helplogger.blogspot.kr/2012/04/recent-posts-widget-for-bloggerblogspot.html

*Don't forget to customize as instructed above.


17. How to change the name of label
https://support.google.com/blogger/answer/74896?hl=en
*After removing the label, just choose "all labels". The posts having a blank labels are still selected. DO NOT NEED TO SELECT the posts. So, while the posts are still selected, click the Label icon again to select "Add new label" or choose another label name your want to apply.

*Maximum posts for label name changing at a time is 50 posts. So, logout and login again to change more than 50 posts.


18. How to post a long, last in height, picture can be posted
http://www.bloggersentral.com/2013/09/how-to-post-tall-pictures-on-blogger.html

*after posting a picture with Original size, go to posting HTML to edit the image size.
*s1600 is default. If change it as s"0", it allows to post a long height image.


19. How to remove "Powered by Blogger"
http://blogtimenow.com/blogging/remove-powered-by-blogger-attribution/



20. How to remove "Subscribe to Post Comments (Atom)" link
http://www.superwebtricks.com/blogger-beginner-guide/remove-post-comment-subscription-link/


21. How to remove or show "Home" button in Blogger
http://bloggerhow.com/blogger/remove-or-replace-home-link-and-box-from-blogger-template/
*Paste the code described just above link. To show Home button, change the "yes" variable to "none".

22. How to make numbered pagination in your blogger
Code A. http://helplogger.blogspot.kr/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html

Code B. http://bloggerstop.net/2010/01/bloggerblogspot-pagination-page.html

Code C. http://blog.infotwistsolutions.com/2013/02/how-to-add-pagination-in-your-blogger.html

*I had been studying for this pagination matter for a few weeks because I couldn't add pagination on my blog even if I tried to add all above three codes(code A,B,C). After a few weeks struggling, I found that it was because of "Home" button. To show a numbered pagination on your blogger, the "Home" button parameter must not removed from your HTML template. It has to be displayed on your blog. If you hide or remove Home button, any script or code for pagination will not work. Anyway, I choose code A for my blog.^^

23. Various Problems With Blog Owners Using Internet Explorer(IE와 블로거 호환문제)

http://blogging.nitecruzr.net/2013/12/various-problems-with-blog-owners-using.html

http://www.mayura4ever.com/2013/07/blogger-ie-compatibility.html

​https://support.google.com/blogger/answer/42247?hl=en 

​*얼마전(2014년 12월쯤)까지 문제가 있었으나..2015년 1월 현재 IE에서 블로거를 방문했을때 문제가 안생긴다. 구글에서 호완성 업데이트가 된걸까..? 암튼 지금은 문제가 없음.

​

​

24. Replacing Blogger header with an image map(헤더 이미지에 이미지맵 만들기)

http://www.bloggersentral.com/2012/06/replace-blogger-header-with-image-map.html​

​*이건 본좌가 아직 직접 해보질 않았다. 네티즌의 문의가 있어 함 알아봤는데..되는 것 같다. 나중에 기회되면 해봐야겠지만..당장은 나에게 필요가 없다.

​

25. How to create a spoiler or show-hide effect.(포스팅 텍스트 숨기/보이기)

http://www.bloggersentral.com/2009/12/create-show-hide-or-peek-boo.html

​*숨기기/보이기 기능을 "spoiler" 또는 "peek-a-boo"기능이라고 하는 모양이다. 암튼 포스팅 내용중 특정 텍스트를 숨기기/보이기 하고자 할때 사용할만한 것 같다.(달려있는 댓글에 보니까..이미지도 되는가 보다. 이미지는 직접 해보질 않아서 잘 모르겠다.)

26. To Show your Blogger Pages
1. Sign in to Blogger. > 2. Select the blog to update. > 3.In the left menu, click Layout. > 4. In the section you want your pages to show, click Add a Gadget. > 5. In the window that appears, next to Pages, click Add. > 6. Set your settings and click Save. > 7.At the top right, click Save arrangement.
*블로거에서 자신이 작성한 "Page"가 블로그상에 나타나게 하려면.. Layout으로 가서 Page Gadget을 설정하면 됨.