Tuesday, April 25, 2023

Module-2: Conditional Tag

 Blogger Contain Some Conditional tags which will let us to define the statement to make it visible or not. This is some example of it.


<b:if cont='!data:view.isLayoutmode'> {{code}}</b:if>


<b:if cont='!data:view.isHomepage'> {{code}}</b:if>


<b:if cont='!data:view.isMultipleItem'> {{code}}</b:if>


<b:if cont='!data:view.isMultipleItem and isHomepage'> {{code}}</b:if>


<b:if cont='!data:view.isMultipleItem or isHomepage'> {{code}}</b:if>

Posted by at No comments:

Wednesday, April 12, 2023

Module-1: Basic Startup With Blogger

Start Blogger Template Development with steps.

If you are going to start your blogger development then you need to open your blogger and edit your page on HTML from theme. For this Just follow this step,

  1. Open Blogger and Sign in 
  2. Click On theme
  3. Click on side of customize and click on Edit on HTML
First, Try to understand following Code, This is the basic syntax will be used in the blogger template. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><data:blog.title/></title>
<b:skin/>
</head>
<body>
<div class="container">
<header class="header-area">
<b:section id="header" class="header" showaddelement="yes" name="header" maxwidgets="1"></b:section>
</header>
<main class="main">
<b:section id="main" class="main" showaddelement="yes" name="main" maxwidgets="4">
<b:widget id="Blog1" locked="true" title="Blog Post" type="Blog"/>
</b:section>
</main>
<aside class="sidebar">
<b:section id="sidebar" class="sidebar" showaddelement="yes" name="sidebar" maxwidgets="4"></b:section>
</aside>
<footer class="footer">
<b:section id="footer" class="footer" showaddelement="yes" name="footer" maxwidgets="4"></b:section>
</footer>

</div>
</body>
</html>


Using the basic syntax of this lets have a boiler plate template,


Now Click on Save. Now you have developed the Blogger theme.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' lang='en:IN' 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>
<!-- All Your Scripts Here -->
<meta charset='utf-8' />
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport' />
<meta content='ie=edge' http-equiv='X-UA-Compatible' />
<title>
<data:blog.pageTitle/>
</title>
<b:include name='theme-head' />
<b:if cond='!data:view.isLayoutMode'>
<b:skin version='1.0.0'>
<![CDATA[ /*
Theme Name : (Theme Name)
Theme Designer : (Designer Name)
Designer URL : (Designer Link)
Publisher URL : (Pubisher Link)
Special Thanks : (If Any)
Boilerplate URL : https://github.com/Soham-Wani
*/
/* <!-- Customize Options --> */
/* All Your Main CSS Here */
]]>
</b:skin>
</b:if>
<b:if cond='data:view.isLayoutMode'>
<b:template-skin>
<![CDATA[
/* All Your Layout CSS Here */
]]>
</b:template-skin>
</b:if>
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='customOpenGraphMetaData'>
<b:if cond='data:view.isHomepage'>
<meta content='website' property='og:type' />
</b:if>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type' />
</b:if>
<b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
<meta content='object' property='og:type' />
</b:if>
<meta expr:content='data:view.title.escaped' property='og:title' />
<meta expr:content='data:blog.url.canonical' property='og:url' />
<meta expr:content='data:view.description.escaped' property='og:description' />
<meta expr:content='data:blog.title.escaped' property='og:site_name' />
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='meta' property='og:image' />
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='meta' property='twitter:image' />
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage resizeImage 1600' property='og:image' />
<meta expr:content='data:view.featuredImage resizeImage 1600' name='twitter:image' />
</b:if>
<meta content='summary_large_image' name='twitter:card' />
<meta expr:content='data:view.title.escaped' name='twitter:title' />
<meta expr:content='data:blog.url.canonical' name='twitter:domain' />
<meta expr:content='data:view.description.escaped' name='twitter:description' />
<b:if cond='data:view.isHomepage'>
<script type='application/ld+json'>{&quot;@context&quot;:&quot;http://schema.org&quot;,&quot;@type&quot;:&quot;WebSite&quot;,&quot;name&quot;:&quot;
<data:view.title.escaped/>&quot;,&quot;url&quot;:&quot;
<data:view.url.canonical/>&quot;,&quot;potentialAction&quot;:{&quot;@type&quot;:&quot;SearchAction&quot;,&quot;target&quot;:&quot;
<data:view.url.canonical/>search?q={search_term_string}&quot;,&quot;query-input&quot;:&quot;required name=search_term_string&quot;}}
</script>
</b:if>
</b:includable>
<b:includable id='theme-head'>
<link href='//blogger.com' rel='dns-prefetch' />
<link href='//fonts.gstatic.com' rel='dns-prefetch' />
<link href='//1.bp.blogspot.com' rel='dns-prefetch' />
<link href='//2.bp.blogspot.com' rel='dns-prefetch' />
<link href='//3.bp.blogspot.com' rel='dns-prefetch' />
<link href='//4.bp.blogspot.com' rel='dns-prefetch' />
<link href='//www.blogger.com' rel='dns-prefetch' />
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch' />
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch' />
<link href='//www.googletagmanager.com' rel='dns-prefetch' />
<link href='//www.google-analytics.com' rel='dns-prefetch' />
<link href='//connect.facebook.net' rel='dns-prefetch' />
<link href='//c.disquscdn.com' rel='dns-prefetch' />
<link href='//disqus.com' rel='dns-prefetch' />
<link href='//code.jquery.com' rel='dns-prefetch' />
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch' />
<link href='//fontawesome.com' rel='dns-prefetch' />
<link href='//cdn.jsdelivr.net' rel='dns-prefetch' />
<link href='//blogger.googleusercontent.com' rel='dns-prefetch' />
<link href='//lh3.googleusercontent.com' rel='dns-prefetch' />
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type' />
<meta content='blogger' name='generator' />
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon' />
<b:if cond='data:blog.adultContent'>
<meta content='adult' name='rating' />
</b:if>
<link expr:href='data:view.url.canonical' rel='canonical' />
<data:blog.feedLinks/>
<data:blog.meTag/>
<meta expr:content='data:view.description.escaped' name='description' />
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:href='data:widgets.Blog.first.posts[0].featuredImage resizeImage 1600' name='link' rel='image_src' />
<b:tag cond='data:view.isSingleItem and data:view.featuredImage' expr:href='data:view.featuredImage resizeImage 1600' name='link' rel='image_src' />
<b:include name='customOpenGraphMetaData' />
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
</head>
<body>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<!-- Your Header Widgets Here -->
</b:section>
</header>
<div class='main'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' />
</b:section>
</div>
<aside>
<b:section class='sidebar' id='sidebar' preferred='yes' maxwidgets='8' showaddelement='yes'>
<!-- Your Sidebar Widgets Here -->
</b:section>
</aside>
<footer>
<b:section id='footer' class='footer' showaddelement='yes' maxwidgets='2'>
<!-- Your Footer Widgets Here -->
</b:section>
</footer>
<script>
//Your All JavaScript Code Here
</script>
</body>
</html>
While setting up in Blogger Theme developement Just setup following things on Visual Studio Code



OR use this Template this is also the Boiler Plate


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html lang='en' b:layoutsVersion='3' 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>

<meta charset='UTF-8'/>

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

<title><data:blog.title/></title>

<b:skin></b:skin>

</head>

<body>

<!-- Header Area -->

<!-- Necessary: Don't Remove -->

<header>

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

<!-- Header widgets -->

</b:section>

</header>

<!-- Main area blog posts -->

<!-- Necessary: Do not Remove -->

<div class='content-wrapper'>

<!-- Main area blog posts -->

<main>

<!-- Necessary - Don't Remove -->

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

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>

</b:widget>

</b:section>

</main>

<!-- Sidebar Area -->

<aside>

<b:section id="sidebar" class="sidebar" showaddelement="yes">

<!-- Sidebar widgets -->

</b:section>

</aside>

</div>

<!-- Footer -->

<footer>

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

<!-- Footer widgets -->

</b:section>

</footer>

</body>

</html>





Goto Files>Preferences>Configure User Snippets> and Define in HTML and put it

{
"B:Widget Snippet": {
"prefix": "bwidget",
"body": [
"<b:widget id=\"$1\" locked=\"$2\" title=\"$3\" type=\"$4\"/>$0"
],
"description": "Inserts a <b:widget> tag with attributes"
},
"B:Section Snippet": {
"prefix": "bsection",
"body": [
"<b:section id=\"$1\" class=\"$2\" showaddelement=\"$3\" name=\"$4\" maxwidgets=\"$5\"></b:section>$0"
],
"description": "Inserts a <b:section> tag with attributes"
}
}

Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)