How to add embed post option to your Blogger post with your custom style?

It seems something impossible but it is true that you can make your post embeddable for others with your own custom style.This tutorial will guide you how can you make post embeddable for others using Blogger's layout data tags that actually make your Blogger template.

With the Blogger layout data,a code will be shown below every post to which user can copy and paste anywhere,like others.I do not have any demo related to this post.

Note:This is a step by step guide but not for those who don't know about Blogger layout data tags.Try read this.
Lets start with a design of the post that will be embedded.

1. Design Your Post

So open a code editor and design a embeddable post.But make sure that it should have 4 major elements:

1. Image,
2. title with link,
3. short summary of 140 characters,
4. Credits (eg: by Blogger Ever) with link.

This is a design I made for my post:

See the Pen qECro by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Note

• The class of the outer div or any element should be bigger or unique so that the person (going to embed post) blog CSS to not override with yours.

2. Replace the content with layout data tags 

Now we want to display this code below every post with their title,description and image.To make this functionality we will use layout data tags,so what are the tags can be used for them?

• data:post.title for title
• data:post.snippet for summary
• data:post.firstImageUrl for the image
• data:post.url for the link of post.

Next we need to do is to replace the above stuff with your design so lets change as I've done in my code:

<div class='post-by-bloggerever'>
  <img src='<data:post.imageFirstUrl'/>'/>
  <h3><a href='<data:post.url'/>' target='_blank'><data:post.title'/></a></h3>
  <p>
   <data:post.snippet'/>  </p>
  <span class='credit'>By <a href='http://bloggerever.com' target='_blank'>Blogger Ever</a></span>
</div>

3. Encode Your code

Okay now we have completed our second step.Now encode your HTML and CSS,but add your CSS to style tags so that it can add to a single page.Click here to encode your code.Like done below:

<style>
 Your CSS here ....
</style>
HTML goes here....

For my design after encoding my whole code will look something like this one:

&lt;style&gt;
.post-by-bloggerever{
  width:250px;
  background:#eee;
  display:inline-block;
  box-shadow:0 0 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.2);
  padding:10px;
  margin:10px;
}
.post-by-bloggerever img{
  max-width:100%;
  height:auto;
}
.post-by-bloggerever a{
  color:#00bfff;
  text-decoration:none;
}
.post-by-bloggerever h3{
  font:400 16px &quot;Segoe UI&quot;, Frutiger, &quot;Frutiger Linotype&quot;, &quot;Dejavu Sans&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif;
  padding:0;
  margin:10px;
}
.post-by-bloggerever p,.post-by-bloggerever .credit{
  font:400 13px &quot;Segoe UI&quot;, Frutiger, &quot;Frutiger Linotype&quot;, &quot;Dejavu Sans&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif;
  color:#333;
}
.post-by-bloggerever .credit{
  text-align:center;
  display:block;
}
&lt;/style&gt;
&lt;div class=&#39;post-by-bloggerever&#39;&gt;
  &lt;img src=&#39;&lt;data:post.imageFirstUrl&#39;/&gt;&#39;/&gt;
  &lt;h3&gt;&lt;a href=&#39;&lt;data:post.url&#39;/&gt;&#39; target=&#39;_blank&#39;&gt;&lt;data:post.title&#39;/&gt;&lt;/a&gt;&lt;/h3&gt;
  &lt;p&gt;
   &lt;data:post.snippet&#39;/&gt;
  &lt;/p&gt;
  &lt;span class=&#39;credit&#39;&gt;By &lt;a href=&#39;http://bloggerever.com&#39; target=&#39;_blank&#39;&gt;Blogger Ever&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;

4. Place the code 

Our code is ready,it means if you will add this code in template the post embedding option will show in every post.But this is the code only if you will add this on your template, it won't show code but the result. So to handle this situation we will use xmp tag which will show this whole code as a standard code and will not show result of this code.So that any reader who want to copy, will copy code and can paste anywhere to retrieve the result.

But where to put code?

The code will be placed in post footer under xmp tags like this

<xmp>
The code goes here...
</xmp>

Thats it? 

No,that is not enough if you will place this code below your post the visitors might get made at first glance.Make it pretty as your pretty blog.To customize you can add heading above it like Embed this post or Embed Post so that reader may know that it is code for embedding post.

Further to make it look clean you can make hidden panel,means when a user clicks on embed post button then only the code will display so that this do not mess with your blog.

Bingo!
But if I would get any demo I'll update this post.Since then our comment and hearts are open for you.