New post will be posted to targeted Google plus account

A several days ago, we discussed about how to create Google plus page. And now the time to discuss about how to make a new post will be posted to targeted google plus account.


Below are the simple steps how to share a new post in targeted Google plus account:

1. Go to your blogger account

2. Choose Google+ menu

3. Make sure you check list "Prompt to share after posting" box

4. Now the time to decide which account you choose to share your blog posts? Then click the one,...

5. You are done,...

On the sample above, I choose Blogger HTML page, So...it will be marked as the top account and every you write a new post, you can share it to the targeted Google plus account directly.

Create google plus page for your blog

With google plus page we can keep in touch with our blog readers which mean we will be able to keep our blog traffic. So, let's try it!


Steps of Creating google plus page:

1. login to your blogger account

2. Choose Google+ menu

3. On that page, click "create a new page" button

Or go to this link:

https://plus.google.com/pages/create

4. Choose "other"

5. Choose a name such as "Blogger HTML" and "List your external website" such as: http://www.bloggerhtml.com => click continue

In this step I assume that you have finished creating your Google plus page. At least, your page will appear like below:

Or visit my page here (for preview): https://plus.google.com/111212137828529289299

Then, now the time to install your google page on your blogger blog:

1. Go to layout tab

2. Click "add a gadget" and then choose "Google+ followers". It will be generated automatically when your Google plus page was created => Click save

3. You are done. Your Google plus page widget will appear like below:

For more customization, visit https://developers.google.com/+/web/badge/ (you can generate a google plus followers code in there, so it will allow you to install your badge in anywhere on your website/blog)

keep blogging

Basic tips how to use blogger template designer

In blogger.com we can customize our blog template even though we know nothing about coding (html, css, javascript, etc). How is it possible? Blogger.com provided us a feature that called Blogger template designer which allows us to customize our default blogger blog template as we wish. After creating a free blog in blogger.com, you may try this feature (blogger template designer) as well.


What elements could be arranged? We can arrange every thing like below:

• Templates - You can choose which one template you prefer to use
• Background - You can set up your blog background with your Favorite colors and even you can maka some images as your blog background
• Widths - You can adjust your blog widths such as; entire blog, left sidebar, right sidebar, etc
• Layout - You can choose any layouts for your blog; body layout and footer layout
• Advanced - You can customize everything such as; page, link, blog title, blog description, date header, etc and even you can add your CSS

Let's go to the topic...

To use blogger template designer feature you have to login to your blogger account first:

1. Click template tab => choose Customize option

2. You will be on the page "blogger template designer". To start customize using your blogger template designer feature, just look at the left top of the page; you can use that tabs to take actions..which contains: Templates, Background, Adjust widths, Layout, and Advanced

3. Start using tabs:

Note: to apply your arrangements, don't forget to click Apply to blog button (on top right of the page)

Templates

Choose a template that you prefer to use by clicking it

If you are done, click "Apply to blog" button


Background

Choose your background image

Click done => Apply to blog


Adjust widths

Drag the buttons into the size you wish, then click Apply to blog

Layout

You don't need to know about CSS to customize your layout. Just click and click then choose "apply to blog"

Advanced

In this tab you can set anything for your blog template, such as; page, links, blog title, blog description, tabs text, tabs background, date header, post title, post background, gadget title, gadget text, gadget links gadget background, sidebar background, images, feed, feed links, pager, footer, mobile button color, and add CSS like below

.quickedit{
display:none;
}
.alert { background: #EFEFEF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #FFFFFF;border-bottom: 1px dotted #FFFFFF;border-left: 11px solid #418EE9;border-right: 1px solid #FFFFFF;}

That's all for blogger designer guide. If you are done with this customization, you may click "back to blogger" menu

Keep blogging

Show extensions for known file types, for HTML file editing purpose

A several times ago i posted about HTML syntax which in the content (in 1st part of "note" section) said: "...and don't now how to show file format with aim to ease editing your html file...". So this post actually to complete that part...


To Show extensions for known file types, for HTML file editing purpose just follow the steps below:

1. Go to "open windows explorer" on your computer

2. Click Organize => choose Folder and search options

3. In folder options, click tab "View" and uncheck the option of "Hide extensions for known file types"

4. Click OK and finish,...

The difference before and after:

Before

After

• Before: you can't change the file type from txt into html easily (manually)
• After: you can change the file type easily; by changing txt with html. If some notification appeared, just click YES

The notification when you renamed your file (in this case txt => HTML)

My lab code

I use this page to view all codes that frequently used in my blog


1. To highlight code or words

<p class="alert">

My codes/words

</p>

2. Create dropdown menu

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu name</option>
<option value="my link 1">text 1</option>
<option value="my link 2">text 2</option>
</select>

New tab version

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="#" selected>menu name</option>
<option value="my link 1">text 1</option>
<option value="My link 2">text 2</option>
</select>

3. Jump break / read more maker

<!--more-->

4. ...