Documentation for Forum UI Blogger Theme

  • Join us to download any resource for free. You will be able to download or guest post.
    Sign Up Now

kashif

Administrator
Staff member
Apr 12, 2022
1,475
16
38
Pakistan
www.vuinsider.com

Typography:​

A post-data XML file is provided in Doc. zip file. However, you can create a post via the below format. Here is the post format with all codes:

Page Modes:​

You can easily activate any mode with help of labels.

Full Page With No Sidebar: Add the label 'Fullpage' to disable the sidebar on posts
Blog Post Mode: Add the label 'Blog' to activate blog post mode.
Threads Posting Mode: Add the label 'Thread' to activate threads mode
Resource Posting Mode: Add the label 'Resource' to activate Resouce download mode.


Contact Page Configuration​

Create a new page with the title 'contact' in blogger and save it without any content. Now edit the page and paste the following code in 'Post HTML Mode'.
Code:
<div class="ContactForm" id="ContactForm1">
  <form name="contact-form">
    <div class="input-area">
      <label>Name</label><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /></div>
    <div class="input-area">
      <label>Email<span>*</span></label><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /></div>
    <div class="input-area">
      <label>Message<span>*</span></label><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message"></textarea></div>
    <div class="input-area">
      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /></div>
    <div class="notif-area">
      <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
      <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
    </div>
  </form>
</div>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dXXXXXXXXXXXXXXX','//blog.pakthemes.com/','xxxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

*Find and replace 'XXXXXXXXXXXXX' with your Blog ID. Save it and you're done.

Ads Placements:​

Most ads can be placed anywhere you like from the Layout Menu in blogger. Ads inside the post container can be placed by editing the HTML code. To do that, search 'Top article ad', 'Bottom article ad', 'Post Comments ad' in HTML File and replace Ads with your Ads.

Widgets Management:​

All widgets can be modified accordingly. Just remember to select only one label while creating the node.
 

Attachments

  • Forum UI Post Markup.zip
    2.3 KB · Views: 6
Last edited:

Similar threads

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks