Showing posts with label Blogger Tutorials. Show all posts
Showing posts with label Blogger Tutorials. Show all posts

How To Install (Hide/Unhide) Spoiler button In Blogger Post

This time around am gonna share with a  simple tips on how to make the spoiler which has an amazing slide effects in the blog post.

The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.

This effect displays a button with text and by clicking on the button it will expand the content and on clicking it again will hide the content. It has a simple script code and can also be used anywhere. You can hide whatever you want an image, code, text etc.

Follow me step by step through this tutorial ans we'll learn 'How to Add Spoiler or Hide/Show Button in Blogger'.

Always Instruction To Follow:
  1. Go to Blogger Dashboard→Your Blog
  2. Click Template→Click Edit HTML tab
  3. Find anywhere inside template </style> or ]]></b:skin>
Step 1: Now,copy the below CSS code and put it above ]]></b:skin>
#flippy {
text-align: center;
}
#flippy button {
background: # aa65c7;
color: # fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 3px 0px 0px 0px # 883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px RGBA (0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button: hover, #flippy button: focus {
background: # 9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: # f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}


Step 2:  After you have Done that! proceed and copy JQuery code below and paste it just after/below </body>
<Script>
$ (Document) .ready (function () {
    $ ("# Flippy"). Click (function () {
        $ ("# Flippanel"). SlideToggle ("normal");
    });
});
</Script>

Save your template and follow the step below.

Step 3: Now whenever you want to put the spoiler button to your post just copy the below HTML code and switch to HTML POST EDITOR and the add it anywhere you want the spoiler to appear.

HTML CODE TO USE

<Div id = "Flippy"><button> Your Button Text Here </button></div>
<Div id = "flippanel">
--- Put Your Content Here ---
</Div>

I hope this tutorial has been of great help to you and also further decorate your blogs like never before by creating beautiful widgets that may engage your readers even more. If facing any difficulties let me know the the comment section below and I will glad to help you more.
Share:

Seo Friendly and Valid HTML5 Meta Tags

How to create a powerful SEO meta tag for blogspot - meta tags? Most bloggers wouldn't know what meta tags means and their important but just make you understand, actually the function of meta tags is generally to provide information in form of metadata associated with html and xhtml based on its functions. Let's go a head and break things down a little better for more understanding.

Meta tags is one of optimization methods used to identify blog posts and articles in search engine. n other words you posts will be more easily traced in the browser/search engine such as Google, Bing, or other search tool and therefore will be more easily sorted in the SERP (search engine results page).

The function of the meta tag basically consists of several key elements such as:

  • Meta tag description Meta description tag is used to give a general overview of the contents of your blog page. The characters should not be more than 200 characters. See code below.

<meta content='Enter Your Blog Description Here'  name='description'/>

  • Meta tag keywords meta tag keywords are very important to define and determine what keywords can be found on your page in search engines. It also good for Adsense optimization.

<meta content="Enter Keywords Here'' name="keywords"/>
  • Meta tag robots The main function of robots tag use is to determine which and where the blog pages will be indexed in search engines. This tag is very useful especially if a blog uses frames for navigation.
<meta content="index follow" name="robots"/>
Now combining the three code component mentioned above you get the one shown below:
<meta content='Enter Your Blog Description' name='description'/>
<meta content='Enter Keywords Here' name='keywords'/>
<meta content='index, follow' name='robots'/>
Okay with that well noted. Let's see how we can deal with the 'xxxx' value that you normally see in your blog template.

Meta Tags Seo Friendly and Valid HTML5

Since nowaday we have newly modified template, I will be using the example below to show you to change the code in your template, note that not all blog template will have the same feature but at least you should get an idea how to do it. Do not worry I will answer you questions when needed. The below code are installed after the opening tag <head> or before </head>
<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta content='sat, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='BLOG-DESCRIPTION' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/GOOGLE-PLUS-USER/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE-PLUS-USER/about' rel='author'/>
<link href='https://plus.google.com/GOOGLE-PLUS-USER' rel='me'/>
<meta content='GOOGLE-WEBMASTER-VALIDATION-CODE' name='google-site-verification'/>
<meta content='BING=WEBMASTER-VALIDATION-CODE' name='msvalidate.01'/>
<meta content='Tanzania' name='geo.placename'/>
<meta content='ADMIN-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='tz' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Put URL address of you blog logo here' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/FACEBOOK-PROFILE' property='article:author'/>
<meta content='https://www.facebook.com/FB-FUN-PAGE' property='article:publisher'/>
<meta content='FB-APP-CODE' property='fb:app_id'/>
<meta content='FB-ADMIN-CODE' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>

Information- Use the table below to learn how to make changes in the meta tags

DETAILS TO CHANGE DESCRPITION EXPLAINED
BLOG-DISCRIPTION Decription or Keyword of your blog
GOOGLE-PLUS-USER Your Google+ admin link e.g +amsamuel
GOOGLE-WEBMASTER-VALIDATION-CODE Your google validation code obtained from Search Console
BING=WEBMASTER-VALIDATION-CODE Fill in your Bing validation code
ADMIN-NAME Fill the author's name
tz fill the country abbreviation code of where the blog is being published from. eg for Kenya is ke, Tanzania is tz.
FACEBOOK-PROFILE Fill you facebook profile link
FB-FUN-PAGE Fill you facebook fun page
FB-APP-CODE Fil with facebook Application code: get it from https://developers.facebook.com
FB-ADMIN-CODE Fill in with your facebook profile code: use http://findmyfbid.com
USER-TWITTER Fill in with your twitter user name


N/B Delete the meta tag if not in use(optional) 

Re-customize the 'xxxx' value with your own value following the examples in the table above. Now that you are done and all set, tell me how you are doing I will be there to guide you step by step untill you get it right. Okay don't forget to share with friends too.
Share:

How to Add HTML Parse Tool To Blogger (Adsense Parser)

HTML Parse tool for blogger also known as HTML encoder tool can also be used to parse any HTML or javascript code into XML code format. In our tutorial today we are going to learn on how to add an HTML parse tool to your especially in the blog's static page. The advantages of having this tool in your blog will be useful whenever you need to convert and display XML code instead of HTML codes in your blogger post.

Since you can't add Ad codes directly without parsing them in you blog post, you will be required to use Ads parser tool to solve your problem. Most effectively Adsense codes or any other Ads code can be parsed and you get the XML code to put in your template or anywhere in the post section.

Let's see how we can add this code in you blogger.

How to Add HTML Parse Tool to Blogger

Step 1: Log into you blogger account and then from the dashboard, click on 'Pages', select 'new page' to create a static page.

Step 2: Click on 'HTML' mode, then Copy the code below and paste into the text field of the new page you've created.
<form> <textarea style=" height: 320px; width: 600px;" name="data1" ></textarea><input type="button" class="myclass" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"><input type="reset" class="myclass" value="Clear" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"></form>
Step 3: Save the page and the go back to Template/Theme>>>click on 'Edit HTML'. Click anywhere inside your template the press CTRL+F to search  for </head> and then copy the code below and paste code above it.
<script type='text/javascript'> //<![CDATA[ function html2entities(){var a=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"&lt;";if(">"==a)return"&gt;";if('"'==a)return"&quot;";if("'"==a)return"&#039;";if("&"==a)return"&amp;"}; //]]> </script>
Step 4: Last but not the least with CTRL+F search for ]]></b:skin> and then Copy the CSS code below and paste above it.
input.myclass{background:none repeat scroll 0 0 #888;border:2px dotted #777;color:#eef;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} input.myclasshov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} textarea{width:100%;color:#261fc0;font:14px verdana;background:#fffdf7;border:2px dotted #ff180d} textarea:hover{border:1px dotted #444}
Lastly save you template the refresh you blog to see the result. Ask me if trouble arise will help you out. It always nice having you around. Ciao,...



Share:

How To Add Javascript/HTML Code Box Tool In Blog post

Most bloggers whose work mainly involving developing widget using code will always need some special tool to share them out with other. That's why today I will sharing with a simple trick on how to add Javascript/HTML code box into your blog post. This tool is essential in organizing you content and displaying different sections designed for specific purposes

Okay below is how you can go about adding this code box too in your post.

Step 1. As always you will need to sign into your blogger account>>>>then go to Dashboard and then to the template/theme section.

If you ain't a pro, you can easily go to customize then from the new window  select Advanced and click on Add CSS.

For pros or those who need heavy tactics, you will need to go to Edit HTML and then use CTRL+F to find "]]></b:skin>".

Step 2. Copy and Paste the below codes in the CSS section or just above "]]></b:skin>" and apply to the blog or save your template.
.code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

Step 3. You will need to go back to post page and on HTML tab view add the code below:

<div class="code">
Your Codes
</div>

Change your codes with whatever code you have and you are done to save your work. publish int to see the result...

Comment below if you got any trouble.

Share:

Trending

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.