Giter VIP home page Giter VIP logo

op-blogger-themes's Introduction

OP Blogger Theme

Notice

This theme is no longer maintained. It is welcome to have a pull request.

Other language:

한국어

Example

https://opbloggertheme.blogspot.com/

Description:

OP Blogger Theme is for blogger theme development or real case use. This theme is based on most recent default blogger theme (Contempo theme). I support only 1 theme now.

Download

https://github.com/opdev1004/op-blogger-themes/releases

Features:

  1. Responsive Web design
  2. Sensible CSS variables - Only few configuration for different color and font
  3. SEO
  4. Resizing iframe media(Youtube) for responsive web design
  5. Better label control
  6. Pretty google search
  7. International Language support in 1 theme (Only Korean and English for now)
  8. Few fixes

Setting up:

  1. In blogger setting:
  • Blog descriptions - Up to you however it is good to use
  • HTTPS redirection-Yes
  • Same format for time - Recommand 00/00/0000 format
  • Disable Mobile version from settings (OP blogger theme supports responsive web design)
  1. In blogger theme page:
  • Apply Contempo theme to blog
  • Restore theme with op.xml (or copy and Paste OP Blogger Theme in HTML edit)
  • all good to go!

Problem & Solve

  • Q: Image doesn't fit into the container.

  • A: Please use new release, new themes force no margin for images in post. So now no more image breaking out from its container.

  • Q: How do I update localization?

  • A: There's a comment like <b:comment>International language support</b:comment>. You have to find each of them and update the if statement below the comment tag. If you want to add new language just add eg. <b:elseif cond='data:blog.locale == "ko(locale)"'> then add the equivalent translation of English version. I will make the list of translation at some point.

  • Q: Why is localization system so messy?

  • A: Avoiding performance issue. Handling everything with Javascript isn't good. And blooger theme system is quite messy.

Contribution

You are welcome to improve OP Blogger Theme and contributing your theme. You can contribute by opening a pull request in this repository.

License:

MIT

Author:

op-blogger-themes's People

Contributors

binuball avatar opdev1004 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

op-blogger-themes's Issues

The effective responsive theme

The effective responsive theme

  • header is fixed
  • menu button and search in header
  • multiple design of sections to put widgets.

Its name is 'Today'

이전 게시물 버튼 Previous post button

글 수가 적은데 이전 게시물 버튼 출현. 블로거 시스템 자체 버그일 가능성이 높습니다.
블로거 테마 태그를 이용해 서버사이드에서 수정가능한지 확인해볼 필요가 있습니다.
JS로 해결 안될 것 같습니다.

Previous button appears in post list when number of post does not meet limit of showing.
It is unsure that it can be fixed. So we need to check the blogger data tags and see if we can fix from server side.
It can't be fixed with JS.

Korean version

Adding version of Korean

  • Localization
  • Only translate the features that is not connected to blogger theme system.

Issue #10 has to be redone

It is not replacing br tag properly. It is caused by not replacing br tag one by one from most inner tags.

It is found that themes are not SEO

It is found that fusion theme is not SEO for google search.
The theme is working fine and gives great experience for reader and blog owner.
However since it is using javascript to change some of design in webpage, the google search console won't render what we actually experience.
It is strongly advised not to use any op blogger theme that use JS to change its mobile design.
Don't use themes listed below

  • Fusion
  • RT
  • Today

Blogger theme with 2 columns

It is the theme that has same feature as "The_beginning.xml" however it has a sidebar.

Feature & Plan

  • Sidebar to right side.
  • Responsive design redone for sidebar

<br> to <p> in post-body (article)

It is very wrong to use
for creating space in text contents. Since blogger does not change it, we should fix it in the theme.

  • Use JS to fix remove
    and reasonably place

    tags

검색 버튼 마우스 포인터 Search button hover clickable mouse pointer

검색 버튼 마우스 포인터가 적용되어있지 않습니다. HTML 요소가 클릭이 가능한 요소가 아니기 때문에 생긴 경우로 CSS를 변경하여 추가 가능합니다.

Mouse pointer does not turn into clickable shape on search button.
This is because they are not clickable element. It can be changed by CSS instead of fixing html.

Removing text decoration from addr (CSS)

It is found that addr element's text decoration styling is not visible in some cases. For readers, text decoration better be removed. addr element is just being used because of original theme system.

  • Remove text decoration from addr element.

Supporting number of posts in label

Current version of blog theme does not support number of posts in label properly.

  • Fix it to support number of posts in label with javascript

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.