Archive for July 2019

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2DS7KAEoQ4GG82F3n14GYfOxPaXXZI1Mnq-Nr0PsMA3Iy3h_bOoknVP7vxx84mcY3EBsqG46ePKhKZJAtsx93sVPoCuqMan6_hmALoqMZlfHiVI9tgNxxPUXlxVlpF5nzSpCiiF1lgjN/s1600/55555555555.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1500" data-original-width="1200" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2DS7KAEoQ4GG82F3n14GYfOxPaXXZI1Mnq-Nr0PsMA3Iy3h_bOoknVP7vxx84mcY3EBsqG46ePKhKZJAtsx93sVPoCuqMan6_hmALoqMZlfHiVI9tgNxxPUXlxVlpF5nzSpCiiF1lgjN/s400/55555555555.jpg" width="320" /></a></div>
<br />
GetSiteControl combines seven most popular Blogger plugins and 
widgets: email opt-in forms, live chats, custom contact forms, Follow 
and Share social media buttons, online surveys, popups and floating 
bars.<br />
In order to be able to publish widgets on your blog you need
 to add a small piece of code into the code of the page. You will need 
to do this only once. This will allow you to create and edit widgets in 
the dashboard — the changes you make will be applied to your blog in 
real time.<br />
Here are the steps to install GetSiteControl on a blog built with Blogger:<br />
<h3>
Step 1</h3>
<a href="https://app.getsitecontrol.com/#/sign-in">Sign in</a> to your GetSiteControl account. If you do not yet have an account, <a href="https://getsitecontrol.com/start/">create one</a>.<br />
<h3>
Step 2</h3>
Click the <strong>Site settings</strong> link at the top of the page and switch to the <strong>Install</strong> tab.<br />
<div class="post-image">
<source media="(min-width:501px)" type="image/webp"></source><source media="(min-width:501px)" type="image/png"></source><source media="(max-width:500px)" type="image/webp"></source><source media="(max-width:500px)" type="image/png"></source><img alt="How to install widgets on Blogger" class="loaded" height="278" src="https://assets.getsitecontrol.com/prod/howto/images/installation/how-install-widgets-blogger/1.1-1@2x.png?rev=fb45834a02" width="400" /></div>
<h3>
Step 3</h3>
You will see a a piece of code that needs to be added to the code of your blog:<br />
<div class="post-image">
<source media="(min-width:501px)" type="image/webp"></source><source media="(min-width:501px)" type="image/png"></source><source media="(max-width:500px)" type="image/webp"></source><source media="(max-width:500px)" type="image/png"></source><img alt="How to install widgets on Blogger" class="loaded" height="278" src="https://assets.getsitecontrol.com/prod/howto/images/installation/how-install-widgets-blogger/1.1-2@2x.png?rev=b0d6176576" width="400" /></div>
Press the <strong>Copy to Clipboard</strong> button to copy the provided code.<br />
<h3>
Step 4</h3>
Login to your Blogger account, choose the necessary blog and switch to <strong>Theme</strong>. Click the <strong>Edit HTML</strong> button.<br />
<div class="post-image">
<source media="(min-width:501px)" type="image/webp"></source><source media="(min-width:501px)" type="image/png"></source><source media="(max-width:500px)" type="image/webp"></source><source media="(max-width:500px)" type="image/png"></source><img alt="How to install widgets on Blogger" class="loaded" height="278" src="https://assets.getsitecontrol.com/prod/howto/images/installation/how-install-widgets-blogger/2102-@2x.png?rev=879af0d864" width="400" /></div>
<h3>
Step 5</h3>
Find the closing <code></body></code> tag at the bottom of the page and paste the code you've copied from GetSiteControl right before this tag.<br />
<div class="post-image">
<source media="(min-width:501px)" type="image/webp"></source><source media="(min-width:501px)" type="image/png"></source><source media="(max-width:500px)" type="image/webp"></source><source media="(max-width:500px)" type="image/png"></source><img alt="How to install widgets on Blogger" class="loaded" height="278" src="https://assets.getsitecontrol.com/prod/howto/images/installation/how-install-widgets-blogger/2112-@2x.png?rev=c3cd13ca40" width="400" /></div>
<h3>
Step 6</h3>
Click <strong>Save theme</strong> to save the changes.<br />
<div class="post-image">
<source media="(min-width:501px)" type="image/webp"></source><source media="(min-width:501px)" type="image/png"></source><source media="(max-width:500px)" type="image/webp"></source><source media="(max-width:500px)" type="image/png"></source><img alt="How to install widgets on Blogger" class="loaded" height="278" src="https://assets.getsitecontrol.com/prod/howto/images/installation/how-install-widgets-blogger/2122-@2x.png?rev=403c7d4d2d" width="400" /></div>
That’s it. Now you can go back to your GetSiteControl dashboard and <a href="https://getsitecontrol.com/howto/general/how-create-your-first-widget/">create the first widget for your blog</a>.<br />
If you have any questions, feel free to contact us at <a href="mailto:support@getsitecontrol.com">support@getsitecontrol.com</a>.

How to install widgets on Blogger

GetSiteControl combines seven most popular Blogger plugins and widgets: email opt-in forms, live chats, custom contact forms, Follow an...

<div class="separator" style="clear: both; text-align: justify;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjP5ZyqL9aQS2Z2xkRF7ydotD-BvVpdyiJTSjJ6ZYbXIq5hK_Jm45BhDHiD0UFMiw-QZBPnkLKrCVfenDz1Tvyi5Po31r3N81CjkMZRbzxGKd7AzGVw8xsjnYRIFOtVc59G9pTGrMqko-/s1600/22g.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="432" data-original-width="825" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjP5ZyqL9aQS2Z2xkRF7ydotD-BvVpdyiJTSjJ6ZYbXIq5hK_Jm45BhDHiD0UFMiw-QZBPnkLKrCVfenDz1Tvyi5Po31r3N81CjkMZRbzxGKd7AzGVw8xsjnYRIFOtVc59G9pTGrMqko-/s400/22g.jpg" width="400" /></a></div>
<br /></div>
<div style="text-align: justify;">
Creating blogs is really easy with blogger. Blogger is a well-known 
blog-publishing service that allows the users to create amazing blogs 
for free. However, a little HTML, CSS and Javascript coding knowledge is
 required. It’s not that tough. Once you make your mind to learn “How to
 create Blogger template from scratch”, with some basic concepts, you 
are ready to go.</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
How to Create Blogger Template?</h2>
<div style="text-align: justify;">
Having your own unique blogger template is something sumptuous. But 
the question arises – from where to start? The simple answer is, there 
are two reliable methods for designing a template as follows</div>
<h3 style="text-align: justify;">
There are two ways to Create Blogger Template</h3>
<ul style="text-align: justify;">
<li><b>Create Blogger Template with Manual Method</b></li>
<li><b>Create Blogger Template with TemplateToaster</b></li>
</ul>
<div style="text-align: justify;">
If you have good knowledge of coding, you will go for manual method 
to create blogger template. But if you are a beginner and don’t know how
 to code – then TemplateToaster is the best to choose to create blogger 
template. You require no coding with this <a href="http://templatetoaster.com/blogger-template-creator">blogger template creator</a>.
 It will give you an easy drag & drop interface to design your 
template. You just select what you want, rest of the things it will 
handle. Let’s delve deeper to see the detailed procedure that how to 
design blogger template with both the methods</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Create Blogger Template with manual method</h2>
<div style="text-align: justify;">
A Blogger template consists of XHTML and blogger elements. To design a
 basic layout of the template, you will use namespaces. A namespace 
(xmlns) is pre-defined to use with the Blogger by Google. 3 types of 
namespaces are basically used as follows</div>
<ul style="text-align: justify;">
<li><b>xmlns:b</b> – ‘b’ specifies that this namespace is used to access the blogger elements.</li>
<li><b>xmlns:data</b> – It is used to specify that from where the data of the blog comes.</li>
<li><b>xmlns:expr</b> – Calculates the expression for attributes.</li>
</ul>
<div style="text-align: justify;">
You will write all the code in <b>main.xml</b> file of Blogger.</div>
<div style="text-align: justify;">
<b>Syntax for Basic Layout</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>

</body>
</html></pre>
<pre> </pre>
</div>
<div style="text-align: justify;">
<b>Sections</b></div>
<div style="text-align: justify;">
A blogger template is divided into sections. The basic sections are: 
Header, Content, Footer, Sidebar. You will use the Widget element to 
define the content in a section. Note that you can’t use HTML within a 
section. But around a section, it’s permissible to use HTML.</div>
<div style="text-align: justify;">
The correct format of section will be</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre><b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
While the below format, will be considered Wrong:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section></pre>
<pre> </pre>
</div>
<div style="text-align: justify;">
<b>Section Attributes</b></div>
<div style="text-align: justify;">
You need to specify following attributes in a section. id is the only required attribute while others are optional.</div>
<ul style="text-align: justify;">
<li><b>id</b> – It is the unique name of section specified in letters and numbers only.</li>
<li><b>class</b> – Consists of common classes such as 
‘navbar,’  ‘main,’ ”header,’  ‘footer, and ‘sidebar,’. If you 
change templates later, these will let you to decide whether transfer 
your content or not. You can also use other class names if you wish.</li>
<li><b>maxwidgets</b> – It limits the maximum number of widgets that can be added in a section.</li>
<li><b>showaddelement</b> – Consists of ‘yes’ or ‘no’ value. 
‘Yes’ is the default. This establishes whether the Page Elements tab 
displays the ‘Add a Page Element’ link or not.</li>
<li><b>growth</b> – It can be ‘horizontal’ or ‘vertical’. 
‘vertical’ is the default. This determines whether widgets are arranged 
side-by-side or stacked within a section.</li>
</ul>
<div style="text-align: justify;">
<b>Syntax to Add Sections</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre><b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">

</b:section>
<b:section id='footer' class='footer' showaddelement="no">

</b:section></pre>
<pre> </pre>
</div>
<div style="text-align: justify;">
<b>Widgets</b></div>
<div style="text-align: justify;">
A widget is the main part which displays real data for section. It 
works as a placeholder. Section only defines the layout elements. Some 
default widgets are available in blogger. However, you can also create 
your own custom widget.</div>
<div style="text-align: justify;">
<b>Widget Attributes</b></div>
<div style="text-align: justify;">
Widget can have many attributes. Out of which, only id and type are required and others are optional.</div>
<ul style="text-align: justify;">
<li><b>id</b> – It can have letters and numbers only. Each 
widget ID is unique. A widget’s ID can only be changed by deleting the 
widget or creating a new widget.</li>
<li><b>type</b> – It indicates the type of widget and can have one of the valid widget types listed below</li>
</ul>
<ol style="text-align: justify;">
<li>BlogArchive</li>
<li>Blog</li>
<li>Feed</li>
<li>Header</li>
<li>HTML</li>
<li>SingleImage</li>
<li>LinkList</li>
<li>List</li>
<li>Logo</li>
<li>BlogProfile</li>
<li>Navbar</li>
<li>VideoBar</li>
<li>NewsBar</li>
</ol>
<ul style="text-align: justify;">
<li><b>locked</b> – It can have a ‘yes’ or ‘no’ value. The 
default value is ‘no’. You cannot move or delete a locked widget from 
the Page Elements tab.</li>
<li><b>title</b> – Displays the title of the widget. If not specified, a default title such as ‘List1’ is used.</li>
<li><b>pageType</b> – It can be ‘all,’ ‘archive,’ ‘main,’ or ‘item’. ‘All’ is the default. A widget will display only on the designated pages.</li>
<li><b>mobile</b> – It can be ‘yes’, ‘no,’ or ‘default’. It 
tells a widget will display on mobile or not. Only Header, Blog, 
Profile, PageList, AdSense, Attribution will be displayed on mobile if 
it is set to ‘default.’</li>
</ul>
<div style="text-align: justify;">
<b>Widget Syntax</b></div>
<div style="text-align: justify;">
Widgets are included within a section. The syntax to add a widget in a section will be somewhat like this</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre><b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section></pre>
<pre> </pre>
</div>
<h2 style="text-align: justify;">
Create blogger template with TemplateToaster blogger template creator</h2>
<div style="text-align: justify;">
In this method, no coding is involved. Just a simple drag & drop 
interface to create Blogger template. More interestingly, it is a 
complete solution to the frequently asked questions by readers that how 
to make responsive Blogger template as all the templates designed with 
TemplateToaster <a href="https://templatetoaster.com/web-design-software">web design software</a> are responsive by default.</div>
<div style="text-align: justify;">
TemplateToaster <a href="https://templatetoaster.com/website-builder">website builder</a>  is the most convenient method to create Blogger template. Just <a href="http://templatetoaster.com/blogger-template-creator" rel="noopener noreferrer" target="_blank">download</a>
 it by visiting the official site. Its trial version is free. Follow the
 easy steps to install. The first screen you see after installation will
 look like</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blog.templatetoaster.com/create-blogger-template-tutorial-guide/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="https://blog.templatetoaster.com/create-blogger-template-tutorial-guide/" border="0" data-original-height="240" data-original-width="640" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvcfaYUILm9TUDr3tYLqUxji-r-4Tqwuz9G4TzN6byq7OkaWKdKlEvAP3ARx6BniPH_xO_hv6zZzWLlXkvBRUZhhmrtAOm_GkNKecUgalvRvRv1zAOdFoHD9Kzdm1wB-XaT2WwgWsr_49/s320/image+33.jpg" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre> </pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre> </pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre> </pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<pre> </pre>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>

How to Create Blogger Template

Creating blogs is really easy with blogger. Blogger is a well-known blog-publishing service that allows the users to create amazing ...

All Free Blog Themes

How to install widgets on Blogger

How to Create Blogger Template

Followers

About Me

Popular Posts

Contact Form