URL Image Parameter for Custom Blogger Images

URL Image Parameter for Custom Blogger Images
URL Image Parameter for Custom Blogger Images. How to compress image blogger, convert to webp, and many more

URL Image Parameter for Custom Blogger Images

Blogger.com is a blogging platform provided free by Google. And the space provided is unlimited, including for image storage.

But there are some bloggers who have not even utilized the unlimited and free image hosting facilities from this blogger. There are still bloggers who still save their pictures in third parties.

Of course this is actually not a big problem, but there are some Blogger codes that do not support hosting other party images such as code for thumbnail post.

For that, it is recommended to post pictures please upload directly to the post. No need to worry about storage space because Blogger image hoster gas unlimited space.

Likewise for images for other purposes such as favicons, manifest.json, blog logos, and others, please upload them on Blogger.

If you do not understand how to take the URL of an image hosted on Blogger, I have made a video, please watch it to better understand.

And in the image URL that is stored on Blogger, there are several parameters that can make it easier for us to modify the image.

Usually the image URL that is hosted on Blogger or uploaded on the post will look like this.

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s..../imagepng

Blogger provides 4 domains for hosting images, namely https://1.bp.blogspot.com, https://2.bp.blogspot.com, https://3.bp.blogspot.com, and https: / /4.bp.blogspot.com.

Note the s.... code which is marked, in that code we can modify the image with the following parameters.

List of parameters for modifying Blogger images

1. s (square or maybe size), meaning square. By default, Blogger uses param s for images uploaded in posts. Param s is usually followed by a value that indicates the size of the image in pixels, taken from the largest side. If the square is horizontal, then the width value is taken. If the vertical square, the high value is taken.

Example: s320

If you want the size according to the original you can use the value according to the original width or height which has the largest value, for example s3250 or can use s0.

2. w (width), meaning width. To determine the desired width, for example w320.

3. h (height), meaning height. To determine the desired height, for example h320.

If w and h are combined, then what is taken is the value of h, for example w500-h100 then the benchmark is the value of h and the width of w will follow the comparison.

Latest Blogger Conditional Tags 2019

4. c (crop), meaning to cut. To crop the image at the top according to the value specified by the other param in front of it. For example: s320-c will cut a square with a width and height of 320px at the top of the image, w320-h100-c will cut with a width of 320px and a height of 100px at the top of the image.

5. n is the same as c but cuts it right in the middle.

6. p is the same as n and c but cut from the midpoint of the image.

7. cc (circle crop), meaning to cut round and the outer side will be a white area. s320-cc is a circle with a diameter of 320px, w500-h750-cc is a circle with a diameter of 500px (the smallest value is taken).

8. It's useful to prevent changes in image size that is larger than the original dimensions. For example, if the width of the original image is 600 pixels, then even if it determines a wider width such as w1600-nu, the image will not be larger than the original width.

9. fv (vertical flip) reverses the image vertically, for example s320-fv

10. fh (flip horizontal) flips the image horizontally, for example s320-fh

11. r (rotate) rotates the image to a value of 90, 180, or 270, for example s320-r90 then the image will tilt to the right 90 degrees.

12. rj to change the image format from PNG or GIF to JPG.

13. rp to change the image format from JPG or GIF to PNG.

14. rw to change the image format from JPG or PNG to WEBP.

15. rh to change the GIF format to MP4 so that it can be a source in the HTML5 <video> tag.

Example:

<video controls>
<source src="https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s500-rh/video.gif" type="video/mp4">
</video>

16. l to compress image quality, for example, s320-rj-l85, the image will be a JPG format with 85% quality with a size of 320px.

17. d (download) functions to download images when the image URL is used as a link, for example: s320-d.

Those are some parameters that might be useful for modifying images uploaded in posts.

Maybe useful.

Read More

Post New Blogger Article to Facebook Automatically

Post New Blogger Article to Facebook Automatically

Table of Contents

• How to Reg Account
• How to Connect Blogger to DLVRIT
• How to Connect Blog with Social using DLVRIT

How to Post New Blogger Article to Facebook Automatically with Third Party App

Facebook is one of the most widely used social media on the Internet today. So, Facebook is one of the good media promotions.

Bloggers and Webmasters must certainly use Facebook to bring in large visitors to website. Usually companies or websites have a Facebook account to promote their content.

Usually. for large media that publish many articles every day, many of them use third-party application to make it easier to promote their latest articles on Facebook.

These third party applications are able to automatically upload the latest articles to Facebook FansPage.

This time, I will share the tutorial about How to Post New Published Article to Facebook Automatically with Third Party App. That app called DLVR.IT 

How to Reg Account 

Go to https://dlvrit.com/ and click Sign Up free, create new account with your email and your password.  Or you can sign up with your Facebook aor Twitter Account.

After register successful, you will redirect to DLVRIT dashboard. Now, you will connect your Blog to Facebook.

How to Connect Blogger to DLVRIT

To post new content automatic to Facebook, you need connect your blog to DLVRIT. 

Navigate Automate, and fill your Blog Feed in form. If you using Blogger.com, the Feed slug is /atom.xml
For Example: https://www.amp-blogger.com/atom.xml

Read more: How to Add Google Tag Manager to AMP Blogger Page

It will show your valid Blogger feed. Click Connect. Now your blog was connected to DLVRIT.

How to Connect Blog with Social using DLVRIT

Next step, you need to connect your Blog to Facebook using DLVRIT.  In tab When should we make your first post? choose Post When New item Published then click Connect Social.

Now login to your Facebook Account. After login, back to DLVRIT Dashboard and click Connect New. 

Choose Facebook Icon, then connect your Facebook to DLVRIT. Choose your Fanspage and click Allow.

Finish, your Facebook will publish your new Blog content after it published. 

Thanks for reading. Please rate and give comment below. If you like my content and learn't something from me you can donate by PayPal.

Read More

How to Make Recent Post Widget for AMP Blogger Template

How to Make Recent Post Widget for AMP Blogger Template

Tutorial how to make Widget Recent Post for Blogger Template valid AMP HTML. Read this article. Recent Post widget developed by Kompi Ajaib, valid Google AMP HTML for Blogger/Blogspot

Table of Contents:
Recent Post for AMP Blogger
Demo

Tutorial how to make Widget Recent Post for AMP Blogger Template

Blogger widgets become one of the important components in a blog. A widget function to beautify the appearance of the template and aim to make navigating a Website easy.

Even widgets like Popular Post Widget and Recent Post can reduce the bounce rate of a Blog. This is usually what will improve the performance of the Website and ad revenue.

This time, I will share the tutorial on making Recent Post Widget that can display the latest articles on a Blogger blog. This widget is valid AMP HTML, so it fits you apply to AMP Blogger Template.

Recent Post for AMP Blogger

This widget was developed by Kompi Ajaib, a famous blog that discusses a lot of Blogging Tutorial contents. This Recent Post widget uses the amp-iframe component, so make sure you have placed the amp-iframe component on <head>.

<script async='' custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Kompi Ajaib has prepared Javascript and HTML that has been hosted on Github, so you can simply embed using amp-iframe. I have prepared it.

Copy this following code in Sidebar, please Edit your template, and paste this following code.

          <b:widget id='HTML97' locked='false' title='' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'><![CDATA[<!--recentpost-->]]></b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?fontSize=16px&amp;color=333&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='488' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>
    <amp-img height='488' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqa7Q5P7TfDt_FvpkQV-X0rBPfCqVKzY5G2QpL9kYXBs8acUvZevkFgAa9yNcqfrtUMOBWGi1O0dOprbWCShQh2R9KR5QE9RnNkijoRNuH5sc44YMf_QY2Fq-FGT1-ht8iOz_UlS2rdo/s1600/back-iframe.png' width='auto'>
    </amp-img>
  </amp-iframe>
  </b:if>
  </div>
</b:includable>
          </b:widget>

If you are confused about how to place the code, you can use the manual method. Click Layout on the Blogger.com dashboard, then Add Gadget, and choose HTML / JavaScript.

<amp-iframe frameborder="0"
    height="500"
    layout="fixed-height"
    sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' 
    src="https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?url=https://www.amp-blogger.com/">
    </amp-iframe>

Paste the code below, then replace the yellow mark with the address of your blog.

Read More

Tutorial on How to Change the Font Type on Blogger / Website using CSS

Tutorial on How to Change the Font Type on Blogger / Website using CSS

how to Change font type on Blogger.com with Google Fonts. This is step by step change font using CSS. It's easy!

Table of Contents

1. How to change fonts on the website
2. How to Change the Font Type on Blogspot

How to Change the Font Type on Blogger / Website using CSS

The choice of font type is an important factor in developing web design. Fonts that are clear and easy to read, will certainly have a big effect on the blog.

More than 50% of websites on the Internet, use the sans-serif font type which is most obvious to read. Google Fonts becomes one of the free font providers that can be applied on a web page or blog.

Of course, using Google Fonts must follow a few steps in order to be implemented in website design. amp-blogger.com will provide a way to change the Font type on a web page using CSS.

How to change fonts on the website

Here are the steps:

Open https://fonts.google.com/ then choose one type of font that you like. Here I will choose Tools.

Click "Select this Font" in the left bar of Google Font. Then copy the <link> code provided.

Paste the code before </head>, see the example below:

<head>
....
<link href="https://fonts.googleapis.com/css?family=Alatsi&display=swap" rel="stylesheet" />
....
</head>

Then we will change all font types currently used, with new fonts.

Back on the Google Fonts page, copy the CSS by following the body tag on the page on your website. Examples like this:

body {font-family: 'Alatsi', sans-serif;}

The code will change all font types on your website pages.

If you only want to change the font on a particular page, then it must be adjusted to the existing div. For example:

#menu {font-family: 'Tool', sans-serif;}

or

#footer {font-family: 'Alatsi', sans-serif;}

Then do the Save to update your website, and see the results.

How to Change the Font Type on Blogspot

To change the font type on Blogger.com, the best way is to use HTML Edit mode.

Click Template on the Blogger.com dashboard, then click Edit HTML.

Search </head> then copy the <link> code provided by Google Fonts. Paste between <head>.

<head>
....
<link href="https://fonts.googleapis.com/css?family=Alatsi&display=swap" rel="stylesheet" />
....
</head>

Search ]]></b:skin> and paste the CSS given to Google Fonts before ]]></b:skin>.

If there is a CSS font-family in the body tag, delete it and replace it with the new code.

Click Save to make changes.

that's a simple way to change the font type on your website. May be useful :)

Read More

Tutorial on How to Bring up Thumbnails on AMP HTML Blogger Template

How To Bring Up Thumbnails On AMP HTML Blogger Template

rial on How to Bring up Thumbnails on AMP HTML Blogger Template

I used the AMP blogger template and changed all the articles including the <img> code to <amp-img>, but how come the thumbnails don't appear? I wonder why?

It turns out that the blogger template will not read thumbnails if all the images in an article are converted into <amp-img> code.

As we know, that the IMG tag in AMP HTML changes to amp-img. If we write in posts like this:

<img alt = 'image' src = 'url-image' />

it will result in an AMP HTML validation error. The correct writing like here is:

<amp-img src = "url-image-here.png"
    width = "1080"
    height = "610"
    layout = "responsive"
    alt = "AMP HTML"> </amp-img>

Image will appear well on the post. However, it will not appear on the thumbnail on the main page / homepage. To outsmart it, so that the image appears on the Homepage add a noscript tag so the code becomes like this:

<Noscript> <Img Alt = 'Image' Src = 'Url-Image-You' /> </Noscript>

Good luck ...

Thus the Tutorial Article How to Bring up Thumbnails on AMP HTML Blogger Template. Hopefully the solution of your "confusion": D

Read More

Create an Automatic Watermark on Blogger Image Articles

How to Create an Automatic Watermark on Image Articles on Blogger. Automatically image watermark for blogspot domain blog

1. What kind of "watermark" that I mean?
2. What CSS do I use to create "WATERMARK"?
3. How to implement it?
4. Is it done?

How to Make 'Watermark' Automatically on Image Articles Blog with CSS After and Overlay (VALID AMP BLOGGER)

Watermark is a sign that we make manually on a picture or video. This watermark is used to protect our image from people who carelessly take it up to admit that it is a picture of hers..

The watermark on the image is marked with the logo or company name of the copyright holder of the image. Many bloggers who often put a watermark so that images uploaded not carelessly taken by others. 

To be honest I'm a bit lazy to first edit the pictures in photoshop, then put a watermark on the photos that I will upload. Because of that sense of laziness, so I rarely put watermark on image. 

But, I am trying new things to overcome the lazy feel of editing the watermark in photoshop. The trick is to try to apply it through CSS language. Can it? Of course NOT.

Because it seems impossible a CSS language can make our watermarks attached automatically to an image. For that I just outsmarted by making "My Watermark".. 

What kind of "watermark" that I mean?

Well, if you look at every image I uploaded on this blog, it will see a text in the bottom left corner of the image I uploaded. That's what I mean as a watermark. 

But you need to know, the logo or text that is not stick in the picture, but just stack it on it. So the image will remain the same as the original. if we back download it. 

What CSS do I use to create "WATERMARK"?

Initially, I was looking for a text overlay tutorial on w3school, and I had an idea to create a watermark on every image I uploaded with the CSS. Because this blog uses a valid template AMP for blogger, then I change some code.

How to implement it?

Okay, I'll explain in detail how to create an automatic watermark in the blog article image. Just follow  this step.

1. Go to Themes - Edit HTML on blogger dashboard.

2. Copy the following CSS code. I will make 2 versions, for non amp and valid amp blog.

FOR NON-AMP

/* Post body img start */

.post-body img:after {
    content: "YOUR TEXT";
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 10px;
    background-color: white;
    color: black;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    margin: 2px;
    padding: 0px 5px 0px 5px;
    opacity: 0.5;
    text-transform: uppercase;
}

FORM VALID AMP BLOGGER

/* Post body amp-img start */
.post-body amp-img:after {
    content: "YOUR TEXT";
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 10px;
    background-color: white;
    color: black;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    margin: 2px;
    padding: 0px 5px 0px 5px;
    opacity: 0.5;
    text-transform: uppercase;
}

/* Post body amp-img end */

Note:

• For non-amp blogs, paste the CSS code above ]]> </ b: skin>
• For valid blogger amp, please paste the code in amp-custom.
• cange YOUR TEXT as desired.

3. Click SAVE for final Step.

Is it done?

It's basically done. However, I have a little suggestion for you who use AMP blog. To make the picture look more neat, please use special fixed-height layout code that I have written in the article: CSS For Image in AMP Articles with Unknown Dimension.

Read More