Documentation Maisha
Documentation Maisha

Documentation Maisha

 

How To Setup Maisha Blogger Template


d




Method of Installing Manual Template Code:

  1. Download files sent via email or WhatsApp
  2. Open it using the Winrar or Zip application
  3. Then select the template folder
  4. Select one file type to be installed, .xml to be uploaded directly and notepad replace all and paste it in the Edit HTML. Recommendations (notepad), how to install notepad can be seen here.
  5. Before installing, it's a good idea to first backup the previous template.

URGENT

1. Make sure all articles have a label, don't any without a label
2. In the Feed make it Full



PRIMARY MENU

Access your blog Layout - click Edit icon on Menu widget



as


Normal Link : Dropdown
Sub Link : __Submenu 1 (before the link add "__") 2 underscore




POPULAR HEADER


Access your blog Layout - click Edit Icon on Popular Header (Show/Hide) widget




POPULAR HEADER

Icons Avaliables (facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen)



SOURCE CODE


DROCUP

<span class="text-dropcap dcap1">P</span>


BUTTON


<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>



GALLERY



<section id="box-gallery">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg" /></a>

</section>




LAZYLOAD 

Every time to add an image in an article or anywhere you have to insert the Lazyload Image code in it to speed up loading on the blog

Example:


class="lazyload" data-sizes="auto"



SLOTS IN THE ARTICLE 





SITEMAP

Create a new page and name it Sitemap without any content in it then publish it





ORDER COMMENT FORM




Insert code: <b>&lt;i rel=&quot;code&quot;&gt;Put code here&lt;/i&gt;</b> or <b>&lt;i rel=&quot;pre&quot;&gt;Put code here&lt;/i&gt;</b>
Insert image: <b>&lt;i rel=&quot;image&quot;&gt;Put Url/Link here&lt;/i&gt;</b>
Insert title: <b>&lt;b rel=&quot;h3&quot;&gt;Your title.&lt;/b&gt;</b>
Insert blockquote: <b>&lt;b rel=&quot;quote&quot;&gt;Put text here&lt;/b&gt;</b>
Bold font: <b>&lt;b&gt;Put text here&lt;/b&gt;</b>
Italics: <b>&lt;i&gt;Put text here&lt;/i&gt;</b>

Information:
Put the code in the Comment Message

And for the video format in the comments

[iframe]Enter Your Embed Video Url Here[/iframe]




ALERT

<h2>
Success Message</h2>
<div class="alert-message success">
<i class="fa fa-check-circle"></i> success message : You successfully read this important message.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Alert Message</h2>
<div class="alert-message alert">
<i class="fa fa-info-circle"></i> Alert message : This alert needs your attention.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Warning Message</h2>
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i> Warning message : Warning! Best check yo self.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Error Message</h2>
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i> Error message : Oh snap! Change a few things up.     <br />
<div class="alert-del-btn">
</div>
</div>


TAB 1



<div class="tabbed-content">
  <nav class="tabs">
    <ul>
      <li><a class="active" href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
    </ul>
  </nav>
  <div class="gs active" data-title="Tab 1" id="tab1">
    <div class="gs-content">
      <p>A simple solution for having tabbed content on a large screen but turn it into accordion on a smaller one. Just resize your screen below 800 pixels to see the tabbed interface transforming into an accordion.</p>
      <p>In order to keep the HTML as clean as possible, without duplicating elements, we use element attributes as CSS content to display the accordion tabs.</p>
    </div>
  </div>
  <div class="gs" data-title="Tab 2" id="tab2">
    <div class="gs-content">
      Tab 2 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    </div>
  </div>
  <div class="gs" data-title="Tab 3" id="tab3">
    <div class="gs-content">
      Tab 3 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    </div>
  </div>
</div>



TAB 2


<div class="tabbed-content tabs-side">
  <nav class="tabs">
    <ul>
      <li><a class="active" href="#side_tab1">Tab 1</a></li>
      <li><a href="#side_tab2">Tab 2</a></li>
      <li><a href="#side_tab3">Tab 3</a></li>
    </ul>
  </nav>
  <div class="gs active" data-title="Tab 1" id="side_tab1">
    <div class="gs-content">
      <p>This example brings the tabs at the left side by simply adding an extra class "tabs-side" at the ".tabbed-content" container. Just resize your screen below 800 pixels to see the tabbed interface transforming into an accordion.</p>
      <p>The change applies only on large screens. On smaller screens (in this example: below 800 pixels) it falls back to the same accordion we have on the previous example.</p>
    </div>
  </div>
  <div class="gs" data-title="Tab 2" id="side_tab2">
    <div class="gs-content">
      Tab 2 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    </div>
  </div>
  <div class="gs" data-title="Tab 3" id="side_tab3">
    <div class="gs-content">
      Tab 3 content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    </div>
  </div>
</div>



FILE FORMAT IN THE COMMENTS

Code:  <i rel="code">Code</i> or <i rel="pre">Code</i>

Image:  <i rel="image">Url Image</i>

Tag Heading h3:  <b rel="h3">Title Tag</b>

Documentation Maisha

Documentation Maisha

Pesan via WhatsApp! - Proses Pemesanan Mudah ( via WhatsApp ) Instan checkout, tanpa registrasi / login.

Pesan via WhatsApp!

Proses Pemesanan Mudah ( via WhatsApp ) Instan checkout, tanpa registrasi / login.

Pengiriman Fleksibel - Kami menyediakan Layanan Pesan - Ambil ( Pickup ) & Pesan - Antar ( Delivery )

Pengiriman Fleksibel

Kami menyediakan Layanan Pesan - Ambil ( Pickup ) & Pesan - Antar ( Delivery )

Metode Pembayaran Lengkap - Bayar via Bank Transfer, E-Wallet atau PayPal? Bisa banget!

Metode Pembayaran Lengkap

Bayar via Bank Transfer, E-Wallet atau PayPal? Bisa banget!

Toko WA+

Template Blogger dengan fitur Toko Online berbasis WhatsApp + Keranjang Pesanan yang berguna untuk membantu "Pebisnis Online" menjual Produk maupun Jasa secara Instan & Efisien.

Hubungi Kami

Jl. Alamat Toko, No. 123 - Bandung 40241
Phone / WhatsApp. +62 89618885066
E-mail. info@website.com

Documentation Maisha https://aulianv23.blogspot.com/2022/04/documentation-maisha.html
( 0 ) 0