Posts

Showing posts from May, 2020

b:loop Tag - Blogger Tags References

Image
Loops allow access to the data contained in a table. In Blogger's XML editor , a loop is implemented using the tag <b:loop> . It provides access to the items of ARRAY . Loop Syntax: <b:loop values='ARRAY' var='VARIABLE_NAME'> <!-- Code to Be Executed Here --> </b:loop> Attributes used for b:loop tag Attributes Classification Prefix "expr:" Description Strictness values XML Blogger Expression authorized Table array to extract in the loop. The expected value can be an explicit value, a data item or a Blogger expression whose type is array To create an expression, use: Array operators Lambda operators (where/first) The Binary / Ternary Operator Mandatory var HTML classic authorized The expected value is any variable name that will contain the values of the items in the array. As an indication, in the gadget model supplied by default, Blogger engineering has chosen for most tables, the name of the table in th...

Google News Setup Complete Guide

Image
Google News is a free service that Google lists in its system by taking news stories from other sites. This service, which is a great opportunity especially for news sites, makes important contributions to your web page traffic. Of course, there are a few criteria you need to overcome in order to be accepted during the application process. In this article, we will tell you how to sign up for Google News. How to sign up for Google News? In the first step, Google will track the following data about your site: Does your site have original content? How often do you write? Are your site and articles professional? Is their information about your authors and content providers? Join Google News Step by Step Now let's talk step by step on what we should do if you're ready. After passing each of these short titles, we will be ready for the registration phase. The Right Headlines: After creating original content, what we need to pay attention to the first stage is the titles we enter...

How to add timeago format in blogger

Image
You might have seen time ago notification on different kinds of social media sites. If you want to implement this time ago format in blogger blogs then this article is for you. In this article, we will see how we can add time ago notification format in our blogger blog in just simple and easy steps. I have recently got a comment from one of the visitors that he wants to add time ago notification format into their blogger site. To add this time ago notification format in blogger blog you need to have some knowledge about blogger XML Tags and a little bit of information about web design, especially HTML and JavaScript languages. You need to have a little bit of information about web design because here we have to find some certain things that we have to find and replace with some new things. These are not the things these are lines of codes. Ok now let's figure out the steps to add this time ago format in our blogger blog. You can also add this post published time format in ...

Expending Flex Cards Blogger Widgets

Image
You may have seen many different blogger widgets on this website and I mostly create blogger widgets in beautiful styles because today in the modern world UI is one of the things that most of the people want to be beautiful. Before this article, I was sharing blogger widgets that have only one functionality. Some of them are only for recent posts some with popular posts some with related posts and some with a labelled posts functionality. Most of you people like the UI design of blogger widgets which I share on this website but mostly if you want different functionalities then the functionality they have. For example, you want it a recent posts widget with the same design or UI but in different functionality. From today onwards I will try to create blogger widgets having different functionalities in the same UI design. Ok, leave everything and let's talk about today's UI design of blogger widgets. Today's article contains the list of widgets that you can implement in...

b:comment Tag - Blogger Tags References

Image
The <b:comment> tag is an instruction tag that allows you to add a comment in the XML code of the Blogger theme. Make no mistake! This tag is a real Swiss Army Knife for experienced developers and hobbyists who want to learn the XML language of Blogger. Syntax: <b:comment> YOUR COMMENT HERE <b:comment> Characteristics: The <b:comment> tag works in all of the XML, except in the tag <b:skin> . Several <b:comment> tags can be combined. <b:comment> tag cannot nest. Attributes used: At first glance, this tag can make you smile, but it is very useful because, not only does it allow you to add comments, but in addition, it executes the Blogger expressions that are in the comment. And since that was not enough, we can also add attributes that are listed under. Attributes Classification Prefix "expr:" Meaning - render HTML classic authorized Display the comment in the HTML rendering. The expected value is true or false . Accompanied b...

b:tag Tag - Blogger Tags References

Image
<b:tag> Tag allows you to add a tag under certain conditions. The tag <b:tag> is an XML instruction tag which allows you to add any HTML tag. Syntax: <b:tag cond='CONDITION' name='TAG_NAME'> <!-- Content Goes Here --> <b:tag> Characteristics: The <b:tag> tag works in all of the XML, except in the tag <b:skin> . Several tags <b:tag> can be combined. Tags <b:tag> can nest. Attributes Used for this tag: Attributes Classification Prefix "expr:" Description Strictness name HTML classic authorized The expected value is the name of the tag. Accompanied by the prefix expr: , the value may be: type data string a Blogger expression whose result is of type string Mandatory cond XML Blogger Expression authorized Condition of execution of the tag. The expected value must be boolean ( true or false ). It can be an explicit value, a data item or a Blogger expression. Optional Some Example Usage: To add simple t...

b:attr Tag - Blogger Tags References

Image
Attribute tag ( <b:attr> ) allows you to generate attributes in the parent tag. The singleton tag <b:attr> is an instruction tag that allows any attribute and value to be added to the parent tag. Syntax: <b:attr cond='CONDITION' name='ATTRIBUTE_NAME' value='VALUE'/> Characteristics: The tag <b:attr> works in all of the XML, except in the tag <b:skin> . Several tags <b:attr> can be combined. Tag <b:attr> cannot nest. Attribute Classify Prefix 'expr:' Description Strictness name HTML classic authorized The expected value is the name of the attribute that will be added to the parent tag. Accompanied by the prefix expr: , the value may be: type data string a Blogger expression whose result is of type string Mandatory value HTML classic authorized The expected value is the value of the attribute that will be added to the parent tag. When the value does not exist, the attribute is not added. Accompanied by the p...

b:class Tag - Blogger Tags References

Image
<b:class> Tag is used for adding a class attribute with value to its parent element. It is singleton tags and categorized as an instruction tag. b:class Tag can only add class to the parent element ( element in which it is placed ). Syntax: The syntax for b:class tag is as under. <b:class cond=' CONDITION ' name=' CLASS_NAME '/> CONDITION : It is the condition that will be checked to add class to the element. CLASS_NAME : It is the value that should be added as the class name. Characteristics: The tag <b:class> works in all of the XML, except in the tag <b:skin> . Several tags <b:class> can be combined. Tags <b:class> cannot nest. Attributes Used for <b:class> Tag: There are several attributes that can be used for this tag that are listed under. Attribute Description Strictness name It is the name of a class that should be added to the parent element. Expression ( expr: ) is also allowed. The Data Type Must be String . ...

b:eval Tag - Blogger Tags References

Image
The Expression Evaluation Tag or <b:eval> is a singleton tag that allows you to explicitly display the value of the result of a Blogger expression. It is only used when you want to use expressions in your blogger XML code. Characteristics or Expression Evaluation Tag: It can not nest. Works in all of the XML, except in <b:skin> tag. The syntax for b:eval Tag: <b:eval expr='EXPRESSION'/> EXPRESSION : is the expression that we want to evaluate. Attributes Used for <b:eval> Tag: There are several attributes that can be used for this tag that are listed under. Attribute Description Strictness expr The expected value can be an explicit value, a data item or a Blogger expression. Mandatory Examples for b:eval Tag: To Get Data From table by Index. <b:eval expr='data:posts[0].labels[5].name'/> The result of the expression is the 6th wording of the 1st article To be able to use the index in data, it is necessary to check that the set exists by...

data: Data Output Tag - Blogger Tags References

Image
The Data output tag or <data:...> is one of the tags in blogger tags references that are used to extract values from blogger blog data. It is one of the most common tag that is used all around blogger XML code. It is the global tag that can be used anywhere in complete XML code for blogger. Characteristics of data output tag: Main characteristics of the data output tag listed under. It cannot be nested This tag does not support any attribute A tag Data Output Tag does not accept data from tables that are extracted by their index. Syntax of Data Output Tag: The syntax for data output tag is: <data: DATA_NAME /> DATA_NAME in the above code is the name of the data that we want to extract. Data Output Tag Syntax Composition: Depending on the dictionary from which the data is extracted and depending on the type of data, the composition of the syntax may differ. Simple Item: <data: itemName /> An Object: <data: objectName . itemName /> Multiple Nested Objects: <d...

b:template-script Tag - Blogger Tags References

Image
<b:template-script> is an instruction tag that allows you to call a JavaScript file hosted on blogger server. Normally this tag is founded in official themes that are shared by blogger team. This tag is mainly used in official Layouts Version 3 themes. These JavaScript files are officially made for official themes for blogger and these files cannot be used in other themes because they are made for specific layout version of blogger. Syntax of <b:template-script> Tag: The syntax for <b:template-script> is just simple. This tag only supports one mandatory attribute ( name ) which contains the script name to call its contents. You can check its simplicity below. <b:template-script name=' FILE_NAME '/> HTML Output: HTML rendering of b:template-script is similar to the code provided below. <script type="text/javascript" src="https:// FILE_NAME .js"/> Example Code: If you are wondering about the example for this tag now let me c...

Centering Elements With CSS

Image
To make our website look responsive and beautiful center elements is the best technique that works here. There are different ways to center the elements on our web pages. By default HTML5 also provides us Centre tag ( <center></center> ) to Centre the contents of our page. We can also Centre the elements on a webpage using JavaScript snippets. If we take CSS into action then CSS also provides us center elements on our webpage using flex property . There are multiple ways to Centre an element on our web page but flex property is the best one which allows us to Centre the contents of an element on which this property is applied. Code Snippet: This is a tiny CSS code snippet that allows you to send the contents of an element on your web pages. I am going to use a wrapper as a class name for the element on which we want to apply this flex property to Centre the element contents. .wrapper{ height: 100vh; width: 100vw; display: flex; align-items: center;...

b:skin and b:template-skin Tags - Blogger Tags References

Image
The dress-up tags , <b:skin> and <b:template-skin> are tags or elements inserted in the header of the Blogger theme XML file, the content of which is composed of a series of variable declarations and CSS interacting with the theme creation tool. <b:skin> and <b:template-skin> are two different tags in same category, dress-up. Use of <b:skin>: The <b:skin> tag contains the CSS style code that is for blogger template. <b:skin> Syntax: <b:skin> <![CDATA[ ]]> </b:skin> Use of <b:template-skin>: The <b:template-skin> tag also contains CSS code but this CSS code will not be applied to the theme. It will be applied to the layout section of your theme in layout editor of blogger dashboard. <template-skin> Syntax: <b:template-skin> <![CDATA[ ]]> </b:template-skin> Key Points of Dress-up Tags: The markers CDATA is nested in the tags. This indicates that the content will not be analyzed...

b:defaultmarkup and b:defaultmarkups Tags - Blogger Tags References

Image
The default markup tags <b:defaultmarkups> and <b:defaultmarkup> allows you to replace or create default inclusions that will be specific to the current Blogger Template or Theme. <b:defaultmarkups> and <b:defaultmarkup> are two different XML tags for blogger. <b:defaultmarkups> is used as a parent tag and <b:defaultmarkup> is the child of its parent. Syntax For Default Markup Tags: Here it goes the syntax for default markup tags used for blogger template development. <b:defaultmarkups> <b:defaultmarkup type=' WIDGET_TYPE '> </b:defaultmarkup> </b:defaultmarkups> In the above code widget type is the type of widget described under. Key Points for Default Markup Tags: These are some main key points for default markup tags. The tag <b:defaultmarkups> should preferably be located before </head> or </body> . The tag <b:defaultmarkups> can only contain tags <b:defaultmarkup> (...

b:widget Tag - Blogger Tags Reference

Image
The <b:widget> in blogger tag reference is the second tag which is used as a layout element in the blogger XML editor. This tag is used to define widgets in blogger you can also say that this is the container tag for a blogger widget code. Syntax of <b:widget> Tag: <b:widget cond='true' id='Header1' locked='false' title='Blogger Code (Header)' type='Header'> /* Main Widget Code */ </b:widget> Characteristics of <b:widget> Tag: It can only be used with in <b:section> Tag. Each <b:widget> Tag can only contain one includible section, one of which is mandatory with identifier main . It cannot be nasted. Attributes Used for <b:widget> Tag: This is a list of some several attributes that can be added in this tag some are required and some are optional. Attribute Description Strictness id Id is the unique identifier for this tag. The identifier is composed of the type of gadget, followed by a number b...