HOT!Join Our Community For Exclusive Blogging IdeasClick Here

Shortcodes and Page Markups

Drop Caps


Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding at the very first letter.
<span class="firstcharacter">L</span>
Change "L" with your own text.

Typography


Access your blog Posts > click Edit on any of your posts or add a new post. then select any text you want to customize and click on the options available above your post editor. check below image for preference.


There are mainly 9 options which you can use to create awesome looking typography.

  1. Text Size
  2. Text Heading Style
  3. Bold
  4. Italic
  5. Underline
  6. Strikethrough
  7. Text color
  8. Text Highlighter
  9. Link

Tables


Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the table appear.
<div class="post-table">
<table>
    <thead>
<tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Hero Title</th>
      </tr>
</thead>
    <tbody>
<tr>
        <td data-label="First Name">Bruce</td>
        <td data-label="Last Name">Wayne</td>
        <td data-label="Hero Title">Batman</td>
      </tr>
<tr>
        <td data-label="First Name">Peter</td>
        <td data-label="Last Name">Parker</td>
        <td data-label="Hero Title">Spiderman</td>
      </tr>
<tr>
        <td data-label="First Name">Bruce</td>
        <td data-label="Last Name">Banner</td>
        <td data-label="Hero Title">The Hulk</td>
      </tr>
<tr>
        <td data-label="First Name">Clark</td>
        <td data-label="Last Name">Kent</td>
        <td data-label="Hero Title">Superman</td>
      </tr>
</tbody>
</table>
</div>
Change details with your own text.

Blockquote


Access your blog Posts > click Edit on any of your posts or add a new post. then select any text you want to customize and click on the blockquote option available above your post editor. check below image for preference.

Bullet And Lists


Access your blog Posts > click Edit on any of your posts or add a new post. then select any text you want to customize and click on the bullets and lists option available above your post editor. check below image for preference.

Buttons


Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the table appear.

  • Simple Buttons

<div class="small-button">
<a class="button small" href="https://www.blogger.com">Button Small</a>
<a class="button medium" href="https://www.blogger.com">Button Medium</a>
<a class="button large" href="https://www.blogger.com">Button Large</a>
</div>

  • Buttons With Icons

<div class="small-button">
<a class="button small demo" href="https://www.blogger.com">Demo Button</a>
<a class="button medium demo" href="https://www.blogger.com">Demo Button</a>
<a class="button large demo" href="https://www.blogger.com">Demo Button</a>
                <br>
<div class="clear">
</div>
<a class="button small download" href="https://www.blogger.com">Download Button</a>
<a class="button medium download" href="https://www.blogger.com">Download Button</a>
<a class="button large download" href="https://www.blogger.com">Download Button</a>
                <br>
<div class="clear">
</div>
<a class="button small buy" href="https://www.blogger.com">Buy Now Button</a>
<a class="button medium buy" href="https://www.blogger.com">Buy Now Button</a>
<a class="button large buy" href="https://www.blogger.com">Buy Now Button</a>
                <br>
<div class="clear">
</div>
<a class="button small visit" href="https://www.blogger.com">Visit a Link Button</a>
<a class="button medium visit" href="https://www.blogger.com">Visit a Link Button</a>
<a class="button large visit" href="https://www.blogger.com">Visit a Link Button</a>
</div>
Change details with your own text.

Alert Boxes


Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the boxes appear.
<div class="alert-message success">
<i class="fa fa-check-circle"></i> success message You successfully read this important message.</div>
<div class="alert-message alert">
<i class="fa fa-info-circle"></i> Alert message This alert needs your attention.</div>
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i> Warning message Warning! Best check yo self.</div>
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i> Error message Oh snap! Change a few things up</div>
</div>
Change details with your own text.

Code Box


Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the code box appear.
<pre>function generate() {
    var a = $('#container').html();
    var b = window.open('', '', 'width=600,height=400');
    b.document.write('&lt;textarea&gt;' + a + '&lt;/textarea&gt;');
}</pre>
Change details with your own text.

Comment Form


Access your blog Posts or static page > click Edit on any of your posts/ page or add a new post/page. then switch to HTML area of the post editor and add the below coding anywhere you want to make the contact form appear.
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
                                <br />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Change details with your own text.
Shortcodes and Page Markups Shortcodes and Page Markups Reviewed by Templates Yard on July 31, 2017 Rating: 5

103 comments:

  1. Replies
    1. This feature is only available in some of our template we are updating our older templates too, hence there are a lot of templates in our directory, it will take some time, please be patient and stay tuned.

      Delete
    2. NOT WORKING...DO YOU ALREADY HAVE THE CORRECT CODE?

      Delete
    3. We have updated the maxazine, please use the latest version.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. The code above does not work with : Magazine Blogger Template. Is there a new code ?

    ReplyDelete
    Replies
    1. This feature is only available in some of our template we are updating our older templates too, hence there are a lot of templates in our directory, it will take some time, please be patient and stay tuned.

      Delete
  4. Replies
    1. Fabio Filomena, can you please tell, which template you are using?

      Delete
    2. Do you have any template used for reselling of individuals and marketing

      Delete
  5. Thanks for your great themes! I'm using Photonic and I love it! Here's my site: http://pineridgerqb.blogspot.ca

    Question 1: Featured Slider not appearing

    I've used this code (div class="tagpost" data-label="featured" data-no="5") and labeled all of my posts 'featured' hoping they might appear in the slider on the homepage, but no luck. I also tried the code (div class="latestposts" data-no="5") and that didn't work either. (Please note in the instructions it says "Featured Posts" but the widget in the Photonic Blogger Layout it says "SLIDER WIDGET": http://www.sorabloggingtips.com/2017/03/how-to-setup-photonic-blogger-template.html)
    What am I missing?

    Question 2: Getting the contact form to Send

    I've customized the contact form, which looks great! Now I just need the 'Send' button to send the email. I appreciate that you are updating your themes and this may take time. Might you be able to direct me to one of your free themes where the contact form 'Send' button works? I can take it from there. Or should I make my own button?

    Huge thanks!!
    KM

    ReplyDelete
    Replies
    1. There is a tutorial about it in our blog here is the link.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete
  6. How do i add download button with image? can you teach me? sorry for my bad english...

    ReplyDelete
  7. is those code works with sora seo template?

    ReplyDelete
    Replies
    1. We don't have any template named Flora, its our exclusive feature.

      Delete
    2. Sorry! Flow Template!

      Delete
  8. Hi i am having problem. Please can you solve

    ReplyDelete
    Replies
    1. how can i share screenshot of page where i actually want your help ?
      i anable to unload image in comment here.

      Delete
    2. Upload the image anywhere and post the link in comments, we will see it.

      Delete
    3. https://3.bp.blogspot.com/-aX_kwF-M20c/WVEzyIsYuEI/AAAAAAAAAUE/6myRLY4ZvkM-sw4UXT6XC2p8nLWP_XMcQCLcBGAs/s1600/Screenshot%2B%25283%2529.png

      https://3.bp.blogspot.com/-BK0NcG1AwPI/WVEzyKMrLbI/AAAAAAAAAUA/c4aLfwdUHMsnt5vVSxLCbZUU8_8hv0lXACLcBGAs/s1600/Screenshot%2B%25282%2529.png

      Delete
    4. Add the below code above ]]></b:skin>

      .widget .post-body ol {
      padding: 0 0 0 15px;
      }
      .post-body ul li {
      list-style: none;
      }

      Delete
    5. repect to sora team.
      its working
      .widget .post-body ol {
      padding: 0 0 0 15px;
      }
      .post-body ul li {
      list-style: none;
      }

      however, bullet type is still not good :-|
      this screenshot https://3.bp.blogspot.com/-BK0NcG1AwPI/WVEzyKMrLbI/AAAAAAAAAUA/c4aLfwdUHMsnt5vVSxLCbZUU8_8hv0lXACLcBGAs/s1600/Screenshot%2B%25282%2529.png

      Delete
  9. Hey i have a problem. When i post i gave a post label to refrence page but i dosnt appear on that page instead i appear on home page. i want my posts to apear on home page as well as the given label page but it only apear on home not on my label given to the post where to apear. sory for my bad english

    ReplyDelete
    Replies
    1. You have a strange probllem which normally doesn't happens, please provide our url.

      Delete
  10. I added Contact form on Static page, Message is Send But I am not receiving Contact Form Input on my Email. So What Should I do for That. The Contact form Page Url as follows
    http://www.shayarilife.com/p/contact.html Please Help Me to Resolve This. Thank You

    ReplyDelete
    Replies
    1. to make the form work you have to add contact widget in your blog first.

      Delete
    2. Then how to hide contact widget on my sidebar? i want contact form work as static page.

      Delete
    3. Use this css.
      #ContactForm1 {
      display:none;
      }

      Delete
  11. intro posts doesnt appear please help me

    ReplyDelete
  12. https://2.bp.blogspot.com/-8cHyyDIino0/WWOnIJyo0QI/AAAAAAAAAOQ/womE2Ae-ShYWjWVN9tkg4TDS1tnyZS2CwCLcBGAs/s320/111.PNG

    https://2.bp.blogspot.com/-kOXEvUdZeuo/WWOnJU_cnCI/AAAAAAAAAOU/CY7zU7yOBXYHOuokLM3LtkuXFByhVMrywCLcBGAs/s320/222.PNG

    Help! I edited the template and then suddenly the images become blurry. How to fix it?

    And can I remove the labels that are above the image?

    ReplyDelete
    Replies
    1. Have you edited the the scripts?

      Delete
    2. Yes i edited the scripts a little bit. But nevermind i fixed it already. Everything is good. Thank you anyways :)

      Delete
  13. I use Rose Blog but the contact form does not appear. Can you help me please?

    ReplyDelete
  14. brother i buy an other template with in a days i buy 2 template but your contact us forum is not working what r the thing i need to change would u please explain am tired of trying it

    ReplyDelete
  15. http://pakistanifox.blogspot.com/p/contact-us.html

    THIS IS MY BLOG IPSIDE, AM SORRY AM NOT DOING SPAM BUT I NEED THIS CONTACT FORM TO WORK BECAUSE THIS CONTACT FORM IN BOTH OF MY PAID TEMPLATE DOESN'T SEND MAIL WHAT DO I NEED TO CHANGE IN IT CAN YOU PLEASE EXPLAIN A BIT AND 2 IF IN EVERY DOCUMENTATION OF BLOG U EXPLAIN THAT WHAT THINGS NEED TO BE CHANGED WHEN YOUR CREATE IT SO IT WILL BE A LITTLE BIT EASY

    ReplyDelete
    Replies
    1. to make the form work you have to add contact widget in your blog first.

      Delete
    2. Thanks a lot its start working ,but one thing more i don't want widget in the website just page because i did this before and i forget the code to remove with that contact us page only still work and widget not appear on blog

      Delete
    3. Thanks i did it, you check my website now the contact us page working but widget not appear on the blog, because the thing which u mention that ad contact us widget, with that contact us widget also appear and contact us page also. so i did now

      Delete
    4. Where do you want to make it appear ?

      Delete
  16. Am using Msora but none of this is working on it, and please how can i make my site to fit all screen ?

    ReplyDelete
    Replies
    1. We have a huge directory, it takes time to enable every template with this feature.

      Delete
  17. i have question as i have say my blog name is https://pakistanifox.blogspot.com/ and when you enter to post and check blog comment section it has blog comment default, but i want to add Facebook comment box also but its comes up and down and i want both blogger comment and Facebook comment in same like when you click on left widget Facebook comment shows and when you click on right widget show blogger comment... can you explain that because i have seen some of you blogger you did that...

    ReplyDelete
    Replies
    1. Sorry but this template doesn't have tabbed comment system.

      Delete
    2. Hi, Pakistani Fox
      You should try Disqus Comment System. Disqus is a worldwide blog comment hosting service for web sites and online communities

      Delete
  18. The Contact form is not working. How can I fix it. When I try to send a e-mail the "send button" doesn't work.
    Thanks for your help

    ReplyDelete
    Replies
    1. You have to install blogger's official contact form first.

      Delete
  19. Hello Sora, your setup guide for the READING template gives a code to replace the text of the author bio. I have been scrolling through the whole html doc all day and couldn't find the place where the author bio is. It's bad enough that the widget on Layout mode doesn't allow one to disable/remove the author bio with its dummy text; wouldn't it be nice if you could provide the line number where one can edit the code? Thank you.

    ReplyDelete
  20. how to add short description on my post please help

    ReplyDelete
    Replies
    1. Follow this part of the tutorial
      "How to Add "Quick overview" to a Product"

      Delete
  21. Hi, Sora

    Please help me how i can add a drop down menu in blogger.
    WordPress makes it easy to add a drop down menu, it's a little more complicated on Blogger. Your help will be appreciated

    ReplyDelete
    Replies
    1. We are using Underscore menu system in our new templates, which is very easy to add in comparison of html. You can check the documentation of your template.

      Delete
  22. How to center between Simple Buttons, I used (style="text-align: center;) but not feasible

    ReplyDelete
    Replies
    1. <center> Your Button </center>

      Put your button code like this.

      Delete
  23. How do I remove the automatic "" from the blockquote?

    ReplyDelete
  24. hi....kindly check out these two URLs
    1.) https://ffyvbu.blogspot.com.ng/p/my-issue.html
    2.)https://ffyvbu.blogspot.com.ng/2017/08/simple-tips-for-having-longer-hair.html

    PS: "1.)" is a page where i uploaded a screenshot of my issue...i circled it with a black ink
    and "2.)" is a page where you can find the issue

    i want to remove the sora templates...blahblahblah description from my blog
    kindly reply as soon as possibe so i can change it back to the original URL
    beautiful templates by the way... thanks to sora templates :)

    ReplyDelete
  25. hi....pls check this link
    https://girliefix.blogspot.com.ng/p/my-issue.html
    i want to remove the about sora templates descriptions and how can i change it?

    ReplyDelete
    Replies
    1. Access your blog Theme > click Edit Html>  and then find the following coding.
      Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

      Delete
    2. please what should i delete from the html coding... i really know not much about html.....what should i delete from the html to remove it

      Delete
    3. Please Follow the above method, This is the best help we can provide.

      Delete
  26. I used these codes in blog post.
    Massenge send success but massege is to receive.

    Is any changes needed in these codes to receive massage?

    ReplyDelete
    Replies
    1. Check which email is set with contact form.

      Delete
  27. Hi !
    I'm from Brazil

    ""To make the form work you have to add contact widget in your blog first.""

    how to do this ??


    ReplyDelete
  28. Form is working But cant receiving messages.? what i do for this ?

    ReplyDelete
    Replies
    1. Check settings to see whihc email id is listed to recieve email updates.

      Delete
  29. Thanks sir that is working.

    I'musing Evento event them. when i create a new post, a picture of way2themes is automaticly added in post. How can I remove that picture from post?
    There is no source code available in the code of new created post.

    ReplyDelete
    Replies
    1. It's an example for ads inside post, we have mentioned that in our documentation, please replace the image with your ad codes.

      Delete
  30. Hi, I have purchased Premium YourCoupon template and have an issue with posting images. Can you check here, please: couponchild.com. Why the posted image is blurry and doesn`t get displayed correctly? Can you assit me on the matter, please? Thank you very much in advance.

    ReplyDelete
    Replies
    1. Publish more than 10 posts, activate every widget, use original size in image settings.

      Delete
  31. my post product didnt show the price , how i show the price , or how code to show the price ?
    thanks sora

    ReplyDelete
    Replies
    1. Please follow the documentation carefully because if you will miss any widget setup, it will create errors.

      Delete
  32. Hello there! Sorry to derail but I have a pressing issue. I am presently using a demo version of Publico, which I ought to have bought its full version already. However, I am in doubt whether or not to buy because my images are stretched on mobile view. The blog in question is 'jiffynaija.com.ng'. Please visit with a mobile phone to understand my pain. Hoping you would help.

    ReplyDelete
    Replies
    1. Always use Original Size option while uploading the images.

      Delete
  33. Hi! :) is it possible to change the font in Avocet free template? In customize area I don't see possibility for that, but is there any code for doing that in html area? Thank you.

    ReplyDelete
  34. Can i use some-codes in SoraJobs Blogger Templates like: visit button or buy now button

    ReplyDelete
    Replies
    1. Only above buttons designs are supported.

      Delete
  35. Hi :)
    I love your publicomagazine!

    by the way, i am looking for some shortcode that bring all post in certain categories displayed into grid view 4 columnn / 3 column would be fine.

    do you have such a features ?

    ReplyDelete
    Replies
    1. You have to buy the blog customization service.

      Delete
  36. For titles Edwardian script ITC, and for text (if it's changeable) book antiqua.

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  37. My post section only shows 1 - 2 posts

    ReplyDelete
    Replies
    1. Remember one thing you have to keep the post count same in your blog settings and pagination widget.

      There is a limit of 1mb from blogger side, only 1mb of images or text you can show in home page and you are exceeding that limit and that is the reason rest of the post is going on next page, there is not any solution, but you can try page break after 1st paragraph in every post, may be this will help

      Delete
  38. tell me how to embed my text in code box .. i dont understand

    ReplyDelete
    Replies
    1. We have already provided the best information above.

      Delete
  39. how to make BUTTON align to center?

    ReplyDelete
    Replies
    1. <center> Your Button </center>

      Put your button code like this.

      Delete
  40. I did not find the search bar when using on my mobile

    ReplyDelete

Powered by Blogger.