NEW !!Jasa Pembuatan WebsiteKlik Disini
NGB4MWBcLWF4MqF5LWR5LGp8NCQovnV=

Documentation Officialmag

byAdministrator 1 Komentar

HOMEPAGE SECTION SETTINGS


META TAG

<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<meta content='#22140E' name='theme-color'/>
<meta content='#22140E' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#22140E' name='apple-mobile-web-app-status-bar-style'/>
<!-- Title -->
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'>
<title>All Posts - <data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType in {&quot;error_page&quot;}'>
<title>Page Not Found - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Meta keywords otomatis homepage, static page, dan post -->
<b:if cond='data:blog.pageType in {&quot;index&quot;} and data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>    
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<!-- Noindex search page, label, dan arsip -->
<b:if cond='data:blog.pageType in {&quot;archive&quot;} or data:blog.searchLabel or data:blog.searchQuery'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<!-- Facebook Open Graph Tag -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta content='article' property='og:type'/>
<b:else/>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>

INFORMATION:
Adjust it


BREAKING NWES


Enter the script below in the widget layout that has been provided:
<span data-type="recent" data-no="5"></span>


INFORMATION:
            Please adjust the number of labels to be displayed




VIDEO LINK LIVE


Enter inside EDIT HTML then search for the following code:
<div class='video-content'>
<div class='bg-opacity'>
<a class='popup-youtube' href='https://www.youtube.com/watch?v=9dkne6Jr_18'><i aria-hidden='true' class='fa fa-play'/></a>
  <span>Live</span>
</div>
</div>
INFORMATION:
          Change with your Link / Video Url




MEGA MENU

<div class='mega-wrapper'>
<div class='dropdown' id='mega-main'>
<div class='menu-content'>
<nav>
    <ul class='megaleft'>
        <li class='homelink'><a href='/'>Home</a></li>
        <li><a href='/p/featrues.html' itemprop='url'><span itemprop='name'>Menu</span></a></li>
        
        <!--Sub Menu Start-->
        <li class='submenu'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a>
            <ul>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 6</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 7</span></a></li>
            </ul>
        </li>
        <!--Sub Menu End-->
        
        <!--Multi Level Sub Menu Start-->
        <li class='submenu'><a href='#' itemprop='url'><span itemprop='name'> Mult-Level Sub</span></a>
            <ul>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
                <li class='submenu2'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a>
                    <ul>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 1</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 2</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 3</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 4</span></a></li>
                    </ul>
                </li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 6</span></a></li>
                <li class='submenu2'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 7</span></a>
                    <ul>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 1</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 2</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 3</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 4</span></a></li>
                    </ul>
                </li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 8</span></a></li>
            </ul>
        </li>
        <!--Multi Level Sub Menu End-->
        
      <!--Menu Recent four col start-->
      <li class='mega-recent' data-label='Word'><a href='#' itemprop='url'><span itemprop='name'>Word</span></a></li>
      <!--Menu Recent four col End-->
        
        <!--Menu Recent Tabs start-->
        <li class='mega-tab'><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a>
            <ul class='tab-outer'>
                <div class='megatableft'>
                    <li data-label='Business'>Business</li>
                    <li data-label='Economy'>Economy</li>
                    <li data-label='Politic'>Politic</li>
                    <li data-label='Sport'>Sport</li>
                    <li data-label='Otomotive'>Otomotive</li>
                </div>
            </ul>
        </li>
        <!--Menu Recent Tabs End-->
        
  <!--Mega Menu Start -->
        <li class='megamenu'><a href='#'>Mega Menu</a>

            <ul>
                <div class='offcial-mag'>
                    <h4>Headline 1</h4>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                </div>
            </ul>
            <ul>
                <div class='offcial-mag'>
                    <h4>Headline 2</h4>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                </div>
            </ul>
            <ul>

                <div class='offcial-mag'>
                    <h4>Headline 3</h4>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                </div>
            </ul>
            <ul>
                <div class='offcial-mag mega-last'>
                    <h4>Headline 4</h4>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                    <li><a href='#'>Demo Link</a></li>
                </div>
            </ul>
        </li>
        <!--Mega Menu End-->
    </ul>
</nav>

</div>
</div>

</div>
INFORMATION:
          Replace with the Label name that will be displayed listen to the sign (#) please change it with url / Destination link




FEATURED


Enter the script below in the widget layout that has been provided:
<span data-type="recent"></span>





RECENT LIST


Enter the script below in the widget layout that has been provided:
<span data-type="columnright" data-label="News" data-no="6"></span>


INFORMATION:
          Replace with the label name
          Number of labels that will be displayed




RECENT 1


Enter the script below in the widget layout that has been provided:
<span data-type="goom" data-label="Sport"></span>


INFORMATION:
          Replace with the label name




RECENT SLIDER CAROUSEL


Enter the script below in the widget layout that has been provided:
<span data-type="carousel" data-label="Economy" data-no="6"></span>


INFORMATION:
          Replace with the label name
          Number of labels that will be displayed




RECENT 2


Enter the script below in the widget layout that has been provided:
<span data-type="goomsite" data-label="Politic"></span>


INFORMATION:
          Replace with the label name and the title widget puts two sentences





RECENT 3


Enter the script below in the widget layout that has been provided:
<span data-type="recentgoom" data-label="Travel" data-no="5"></span>


INFORMATION:
On each widget, place the script above
          Replace with the label name
          Number of labels that will be displayed





RECENT 4


Enter the script below in the widget layout that has been provided:
<span data-type="goom" data-label="Politic"></span>


INFORMATION:
          Replace with the label name




RECENT 5


Enter the script below in the widget layout that has been provided:
<span data-type="rc-list" data-label="Fashion"></span>


INFORMATION:
          Replace with the label name





RECENT 6


Enter the script below in the widget layout that has been provided:
<span data-type="gallery" data-label="Business"></span>


INFORMATION:
          Replace with the label name




SIDEBAR RECENT POST 


Enter the script below in the widget layout that has been provided:
<span class="recentposts" data-no="4"></span>
INFORMATION:
          Is the number of comments that will be displayed





SIDEBAR RECENT COMMENT


Enter the script below in the widget layout that has been provided:
<span class="recentposts" data-no="4"></span>
INFORMATION:
          Is the number of comments that will be displayed



SUBSCRIBE


Enter inside EDIT HTML then search for the following code:
<div id='na-wrapper'>
<div class='invertsubs-content'>
<div id='invertsubs-subs'>
<div class='mvp-email-sub-left'>
<span>Newsletter Signup</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
</div>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='invertsubs-form' method='post' novalidate='' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=goomsite&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='email' placeholder='Enter Email Address' title='Email' type='text'/>
  <input name='uri' type='hidden' value='goomsite'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div></div>
INFORMATION:
          Change Feedsburn Goomsite shortname with your Blog FeedBurner Shortname



SHORTCODE


Drop Caps

Beautify your content with smart dropcaps
Dropcap style 1

<span class="text-dropcap dcap1">M</span>
<span class="text-dropcap dcap2">S</span>
<span class="text-dropcap dcap3">S</span>

LIST STYLE

Style 1
<ol>
<li>PowerFull Admin Panel</li>
<li>Custom Image Lightbox</li>
<li>Masonry Layout Design</li>
<li>Multiple layout styles</li>
<li>Posts navigation with next and previous post above the fold</li>
<li>Attractive related post design</li>
</ol>


Style 2
<ol>
<li>PowerFull Admin Panel</li>
<li>Custom Image Lightbox</li>
<li>Masonry Layout Design</li>
<li>Multiple layout styles</li>
<li>Posts navigation with next and previous post above the fold</li>
<li>Attractive related post design</li>
</ol>


Style 3
<ol>
<li>PowerFull Admin Panel</li>
<li>Custom Image Lightbox</li>
<li>Masonry Layout Design</li>
<li>Multiple layout styles</li>
<li>Posts navigation with next and previous post above the fold</li>
<li>Attractive related post design</li>
</ol>


Style 4
<ul>
<li>PowerFull Admin Panel</li>
<li>Custom Image Lightbox</li>
<li>Masonry Layout Design</li>
<li>Multiple layout styles</li>
<li>Posts navigation with next and previous post above the fold</li>
<li>Attractive related post design</li>
</ul>


Style 5
<ul class="box-custom box-arrow-li">
<li>PowerFull Admin Panel</li>
<li>Custom Image Lightbox</li>
<li>Masonry Layout Design</li>
<li>Multiple layout styles</li>
<li>Posts navigation with next and previous post above the fold</li>
<li>Attractive related post design</li>
</ul>


Style 6
<ul class="box-custom box-multi">
<li><i class="fa fa-coffee"></i> PowerFull Admin Panel</li>
<li><i class="fa fa-diamond"></i> Custom Image Lightbox</li>
<li><i class="fa fa-cloud-upload"></i> Masonry Layout Design</li>
<li><i class="fa fa-code"></i> Multiple layout styles</li>
<li><i class="fa fa-camera-retro"></i> Posts navigation with next and previous post above the fold</li>
<li><i class="fa fa-cart-plus"></i> Attractive related post design</li>
</ul>


COLUMB


Style 1

<div class="box-colum">
<div class="colum1">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>

Style 2

<div class="box-colum">
<div class="colum2 pull-left">
<div class="box-f-colum">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
<div class="colum2 pull-right">
<div class="box-s-colum">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
</div>

Style 3

<div class="box-colum">
<div class="colum3 pull-left">
<div class="box-f-colum3-one">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
<div class="colum3 pull-left">
<div class="box-f-colum3-two">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa metus dapibu dui.</div>
</div>
<div class="colum3 pull-left">
<div class="box-colum3-tree">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
</div>


Style 4

<div class="box-colum">
<div class="colum4 pull-left">
<div class="box-f-colum4-one">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
<div class="colum4 pull-left">
<div class="box-colum4-two">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac.</div>
</div>
<div class="colum4 pull-left">
<div class="box-colum4-tree">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac.</div>
</div>
<div class="colum4 pull-left">
<div class="box-colum4-four">
Suspendisse enim orci, fermentum eget vestibulum vitae, tristique nec tortor. Duis posuere risus quis nunc congue, eget faucibus arcu gravida. Proin pellentesque justo a sapien accumsan, in viverra metus dapibus. Duis in metus a risus dapibus laoreet. Vestibulum et dui arcu. Nam quis ipsum elementum, consequat magna vel, commodo urna. Phasellus scelerisque tincidunt velit nec hendrerit. Quisque convallis molestie est vitae varius. Donec sollicitudin, nulla sit amet volutpat adipiscing, massa dui laoreet mi, at interdum turpis odio nec nisl. In hac habitasse platea dictumst. Mauris a vestibulum dolor.</div>
</div>
</div>



GALLERY





<section id="box-gallery">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtwJ_SqR1kEi5zRFZ87qbp6hW6AmQzOH9Wj_qTAmKADa04uysUV3yP40pb4sCyHy1kvWP-OHKD_CFsUUseqQQuDOF_M2W6vh_vwt9-2lZOrt2uPj19N-zQd2EKWGvA1RB3iRaVy1Ju4Kn/s1600/1.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtwJ_SqR1kEi5zRFZ87qbp6hW6AmQzOH9Wj_qTAmKADa04uysUV3yP40pb4sCyHy1kvWP-OHKD_CFsUUseqQQuDOF_M2W6vh_vwt9-2lZOrt2uPj19N-zQd2EKWGvA1RB3iRaVy1Ju4Kn/s1600/1.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7OVoljELawf36IEe6ZsilrmKujPWCN12EXH0Z7jI6F5v4uPcKwslSIvwlYYZppP1SOVjBGGsAD5qKVHn_ISDsqlda4qqjIHR9XEwfyPWX4efv8mW92kepVYZ_9X-pCD1jPkyjRf3tCHS/s1600/2.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7OVoljELawf36IEe6ZsilrmKujPWCN12EXH0Z7jI6F5v4uPcKwslSIvwlYYZppP1SOVjBGGsAD5qKVHn_ISDsqlda4qqjIHR9XEwfyPWX4efv8mW92kepVYZ_9X-pCD1jPkyjRf3tCHS/s1600/2.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJghfbRJ9MHU9io6MMjEXKaoCeVazZTH_HdSE4uM4K8yyd01EiAe8-EfUX3utGEiGoFouAcdrBVl2DDhRZdyDP5h8YcsmxNbv96ufr4vTGQscKw4nmqYrAZAjknjXx2wuxiQDXoICgpY_/s1600/3.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJghfbRJ9MHU9io6MMjEXKaoCeVazZTH_HdSE4uM4K8yyd01EiAe8-EfUX3utGEiGoFouAcdrBVl2DDhRZdyDP5h8YcsmxNbv96ufr4vTGQscKw4nmqYrAZAjknjXx2wuxiQDXoICgpY_/s1600/3.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dw8bLC01ksqOvrHJVheZUEvaJ8MKeqPqZh6hKT-yxgUY3H33VAueyWrZHdaMCmDUgrlrfVMNHmjGCOzikLbH5dZWLS2sk_PUkqK0XNHRcHizrR7CiGXq14yONaanR9lugMOBgvWp5H9R/s1600/4.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dw8bLC01ksqOvrHJVheZUEvaJ8MKeqPqZh6hKT-yxgUY3H33VAueyWrZHdaMCmDUgrlrfVMNHmjGCOzikLbH5dZWLS2sk_PUkqK0XNHRcHizrR7CiGXq14yONaanR9lugMOBgvWp5H9R/s1600/4.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqtAGLsYrK44tHqbhYMwn6WvxtG1SvWkKtRcvjWvamYP-sVcBcyBLfV9p9hWe4dNWPRoXwGXD6ysHAz-sRZmHA7j7AG4Bse-3ioTTMhvy0VOcMnXHL6pczmMsX-UWh-5-2GpmD1NQV6BW/s1600/5.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqtAGLsYrK44tHqbhYMwn6WvxtG1SvWkKtRcvjWvamYP-sVcBcyBLfV9p9hWe4dNWPRoXwGXD6ysHAz-sRZmHA7j7AG4Bse-3ioTTMhvy0VOcMnXHL6pczmMsX-UWh-5-2GpmD1NQV6BW/s1600/5.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AX3GaS0DhXkI4Cfh7VRF4Sic7LmKLmSl1OGCz444EjCg6tqMlETrz3Ai_AYeLH-tyJNhD_UMiWDoCtQYX12E1ac5Fyd87q8s9wEiCIdPFMlko7J4zq4TLNgoYuIMM4H1WI4nF7F8Fcr7/s1600/6.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AX3GaS0DhXkI4Cfh7VRF4Sic7LmKLmSl1OGCz444EjCg6tqMlETrz3Ai_AYeLH-tyJNhD_UMiWDoCtQYX12E1ac5Fyd87q8s9wEiCIdPFMlko7J4zq4TLNgoYuIMM4H1WI4nF7F8Fcr7/s1600/6.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxw7ZhtM4prOjBNl6zBvEWoQVERnidLikeKnMiJtDfGpCZIFL1KVLSZnXSdzUL5ytsHKxvlii9nA16DZcyjqm4wfVhEGuxl9qUcEJHKpdp2Wu16tmVYj-rEi8nZpM97PFyiVJ5b11rq9g/s1600/7.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxw7ZhtM4prOjBNl6zBvEWoQVERnidLikeKnMiJtDfGpCZIFL1KVLSZnXSdzUL5ytsHKxvlii9nA16DZcyjqm4wfVhEGuxl9qUcEJHKpdp2Wu16tmVYj-rEi8nZpM97PFyiVJ5b11rq9g/s1600/7.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQChOIJhTJr_6CWAh7RUoiYtr-VJsfZJJ3ZC3qDLl21S91ApmN-TmoxPhK3xZqzNCyjry1i0X0S3gBWLuDSJom4gGscZ7-qb22U_HHm6uvIkflzvRai-XqduaYstRyy9TtXltB43h9yHW/s1600/8.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQChOIJhTJr_6CWAh7RUoiYtr-VJsfZJJ3ZC3qDLl21S91ApmN-TmoxPhK3xZqzNCyjry1i0X0S3gBWLuDSJom4gGscZ7-qb22U_HHm6uvIkflzvRai-XqduaYstRyy9TtXltB43h9yHW/s1600/8.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmWBfJN2324O9A-KEnY4pg8PtYx_cfgrLDCDZvwafyncM5oWk8o4LO_03F8_c1k_xITh13Bn_uhFW74Pl_gAwFat3dwfvGj6RiuA-HbdMeHlvllru9OUdLRpHosNsnZ6tvswnnIYMoW1XN/s1600/9.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmWBfJN2324O9A-KEnY4pg8PtYx_cfgrLDCDZvwafyncM5oWk8o4LO_03F8_c1k_xITh13Bn_uhFW74Pl_gAwFat3dwfvGj6RiuA-HbdMeHlvllru9OUdLRpHosNsnZ6tvswnnIYMoW1XN/s1600/9.jpg" /></a>    
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEolqqql33l_C0RMCPS37QiS9Wgj57OcxiAdYc2PwY3G91L3g1MMFr2cjWcres97Pg-S_Gn8sKDvi4XK0MEBQDxSO5LBsQYN-ybfzYJ3QTbrf3RvbvQ9V2UDRNN2SZFmSsgmJKl9rv6RDs/s1600/10.jpg" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEolqqql33l_C0RMCPS37QiS9Wgj57OcxiAdYc2PwY3G91L3g1MMFr2cjWcres97Pg-S_Gn8sKDvi4XK0MEBQDxSO5LBsQYN-ybfzYJ3QTbrf3RvbvQ9V2UDRNN2SZFmSsgmJKl9rv6RDs/s1600/10.jpg" /></a>
</section>


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>



ALERT CLOSE

<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

<div class="box-tabs">
<div class="box-btn">
<span class="babutton">Button 1</span><span class="babutton">Button 2</span><span class="babutton">Button 3</span></div>
<div class="box-tab-content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>



ACCORDION

<div class="box-accordion">
<span class="babutton">Button 1</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 2</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 3</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 4</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>


1 Komentar

  1. Ken P27 Juli 2022 pukul 23.37

    Please how do I change recent post code to specific label code in that featured post section

    BalasHapus

Posting Komentar

Lebih baru Lebih lama