About Me

header ad

รูปแบบ Shortcode ที่ใช้ใน Blog

atomant 15:15

Button Small
Button Medium
Button Large

<div class="small-button">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXYF85ztQ5_pzeta0NMweNFcq8ta8INCkOvOPpGrwvgK5PwAv9D3S8C4m5qCrIylS6Pr6GHEZVCB1p6rLlwSNuLgmm7Yc9i-DsR-M_O7YSSd8fKJnRhiaMynWlLDNMVKq1DvJ1jL_-_g/s1600/shortcode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXYF85ztQ5_pzeta0NMweNFcq8ta8INCkOvOPpGrwvgK5PwAv9D3S8C4m5qCrIylS6Pr6GHEZVCB1p6rLlwSNuLgmm7Yc9i-DsR-M_O7YSSd8fKJnRhiaMynWlLDNMVKq1DvJ1jL_-_g/s640/shortcode.jpg" width="640" /></a></div>
<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>

success message You successfully read this important message.
Alert message This alert needs your attention.
Warning message Warning! Best check yo self.
Error message Oh snap! Change a few things up

<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>

First Name Last Name Hero Title
Bruce Wayne Batman
Peter Parker Spiderman
Bruce Banner The Hulk
Clark Kent Superman

<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>

Demo Button
Demo Button
Demo Button


<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>

Download Button
Download Button
Download Button

<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>

Buy Now Button
Buy Now Button
Buy Now Button

<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>

Visit a Link Button
Visit a Link Button
Visit a Link Button

<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>

function generate() {
    var a = $('#container').html();
    var b = window.open('', '', 'width=600,height=400');
    b.document.write('<textarea>' + a + '</textarea>');
}

<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>






<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" />

<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>
</div>


Tags: