Google/Blogger

From Omnia
Revision as of 22:58, 14 May 2018 by Kenneth (talk | contribs) (→‎Stretch Background Image)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Hide Poster

Layout -> Configure Blog Posts

  • deselect Posted by

Hide Powered By

/* Hide "Powered by" */
#Attribution1 {
  font-size: xx-small;
  color: white;
  visibility: hidden;
}

Or Edit Theme HTML, Jump to #Attribution1, and delete all of this:

      <!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>...</b:widget>
      </b:section>

Hide Comments from Pages

Pre

pre {
  overflow: auto;
  border: 1px solid black;
  padding: .5em;
}

horizontal scrolling:

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}
<pre style="overflow: auto; word-wrap: normal; white-space: pre;"

Add CSS

body {
  background-repeat:no-repeat;
  background-size:cover;
}

#Attribution1 {
  font-size: xx-small;
  color: white;
  visibility: hidden;
}

h2 {
  font-size: large;
  color: black;
}

.descriptionwrapper {
  visibility: hidden;
}

.blog-feeds {
  visibility: hidden;
}

.home-link {
  visibility: hidden;
}

pre {
  overflow: auto;
  border: 1px solid black;
  padding: .5em;
}

img.photoframe {
  border: 20px solid black;
}

img.thinphotoframe {
  border: 5px solid black;
}

/*
.tabs-inner .widget ul {
  background: none;
  background-color: #005A9C;
}
*/


body {
  background-repeat:no-repeat;
  background-size:cover;
}

#Attribution1 {
  font-size: xx-small;
}

.description {
  font-weight:bold;
}

h2 {
  font-size: large;
  color: black;
}

pre {
  overflow: auto;
  border: 1px solid black;
  padding: .5em;
}


#Attribution1 {
  font-size: xx-small;
  color: white;
  visibility: hidden;
}

h2 {
  font-size: large;
  color: black;
}

.descriptionwrapper {
  visibility: hidden;
}

.blog-feeds {
  visibility: hidden;
}

.home-link {
  visibility: hidden;
}

pre {
  overflow: auto;
  border: 1px solid black;
  padding: .5em;
}

img.photoframe {
  border: 20px solid black;
}

img.thinphotoframe {
  border: 5px solid black;
}

.tabs-inner .widget ul {
  background: none;
  background-color: #005A9C;
}

Hide Follow By Email

Only show on Posts:

Edit HTML: (add b:if statement) [1] [2] [3] [4]

<b:section-contents id='footer-1'>
  <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' version='1' visible='true'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
      ...
</b:if>
    </b:includable>
  </b:widget>
</b:section-contents>

Hide Subscribe to Post Atom

Subscribe to: Posts (Atom)
    <!-- feed links -->
    <!-- <b:include name='feedLinks'/> -->

To only show on post pages:

    <!-- feed links -->
    <b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
    <b:include name='feedLinks'/>
    </b:if>

Stretch Background Image

Better:

/* Stretch Background Image */
body {
  background-repeat:no-repeat;
  background-size:cover;
}

---

html, body {
background: url('bgimage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Chang bgimage.jpg to your url

Ref: https://www.stramaxon.com/2013/01/full-page-background-blogger.html

Hide Background on Mobile

@media only screen and (max-width: 640px){ body { background-image: none !important; } }

ref: https://theme-fusion.com/knowledgebase/how-to-hide-full-width-background-images-on-mobile/

keywords