Documentation JD (Janda Design)

JD (Janda Design) is a blogger template, this template is updated from the same version to be similar to the landing page style, JD (Janda Design) is very suitable for my friend who has a blog tutorial, gallery and others. already equipped with interesting features at this time.

The initial stage you need to do is Change the Template, by copy and paste for maximum results. after changing the template, please upload the Defull.xml file that I have included in file.zip

This template has been changed to full setting in Layout, sold [Meta Tag SEO]

1.Meta Tag SEO
 Search and find the code below, and adjust it

<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>

2. Social Media Meta Tag
 Search and find the code below, and adjust it

<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>

Set Nav Menu simply Enter the layout
Look at the picture below and adjust it

For Nav Tools menu
you just need to upload the file: Default.xml. which I have included in the zip file

Example file

After you upload the default.xml file you must set the Contact From section

And enter Html Mode

Silakan isi form di bawah ini untuk menghubungi admin <a href="https://www.netralid.com/">Aliva Code</a>. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.<br /><br /><form name="contact-form"><div class="formcolumn1"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /></div><div class="formcolumn2"><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div><div class="formcolumn3"><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br /></div><div class="formcolumn4"><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></div><div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">#ContactForm1{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Google Sans';border-radius:99em;text-indent:10px;display:inline-block;width:98%;height:auto;margin:10px;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-email-message{font-family:'Google Sans';border-radius:22px;width:98%;height:250px;margin:10px;padding:20px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:transparent;box-shadow:0 0 0 0.125rem #1a73e8} #ContactForm1_contact-form-submit{background:#fff;outline:none;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:49%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} .Night #ContactForm1_contact-form-name:focus,.Night #ContactForm1_contact-form-email:focus,.Night #ContactForm1_contact-form-email-message:focus{background:#1c2733;box-shadow:0 0 0 0.125rem rgba(255,255,255,.15)} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style><br /><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br /><script type="text/javascript">//<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4415390148833512541';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4415390148833512541','//www.netralid.com/','4415390148833512541'); _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': '4415390148833512541', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

The blogger id I marked replaced with your blogger id

WhatsApp button
change whatsapp account number

Go to Blogger> Themes> Edit html look for this number:  628123456789  replace with your whatsapp number

            <div class='chat-container' id='sticky-button'>
              <div class='link' onclick='chatFunction()'>
                <svg class='svg-1' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
                <svg class='svg-2' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg>
              </div>
              <div class='chat-header'>
                <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
                <div class='head-title'>Hello, Can I help you? <span>Please chat with our team</span></div>
              </div>
              <div class='chat-isi'>
                <span>Our admin will reply within a few minutes</span>
                <a class='chat-box' expr:href='&quot;https://api.whatsapp.com/send?phone=628123456789&amp;text=Hallo ,%20Admin%20I%20need%20your%20help%20:%0A%0A&quot; + data:blog.homepageUrl' rel='nofollow'>
                  <div class='chat-img'/>
                  <div class='chat-name'>CS &amp; Admin <span>Customer Service</span></div>
                  <div class='chat-icon'>
                    <svg viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'/><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'/></svg>
                  </div>
                </a>
              </div>
            </div>

 Update : style JD aliva  template detail widget and Table features

Table features

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><th>FEATURES</th><th>AVAILABILITY</th></tr>
<tr><td>Responsive</td><td>True</td></tr>
<tr><td>Mobile Friendly</td><td>True</td></tr>
<tr><td>SEO Friendly</td><td>True</td></tr>
<tr><td>SVG Icon</td><td>True</td></tr>
<tr><td>Luxury Blog</td><td>True</td></tr>
<tr><td>1-2 Column</td><td>True</td></tr>
<tr><td>Featured Post Widget</td><td>True</td></tr>
<tr><td>Breadcrumbs Schema.org</td><td>True</td></tr>
<tr><td>Related Posts</td><td>True</td></tr>
<tr><td>Responsive Menu Navigation</td><td>True</td></tr>
<tr><td>ShareThis Share Button</td><td>True</td></tr>
<tr><td>Newsletter Widget</td><td>True</td></tr>
<tr><td>WhastApp Chat</td><td>True</td></tr>
<tr><td>Costume Abaut</td><td>True</td></tr>
<tr><td>Costume From Contact</td><td>True</td></tr>
<tr><td>Costume From Whatsapp</td><td>True</td></tr>
<tr><td>Costume Frequently Asked Questions (FAQ)</td><td>True</td></tr>
<tr><td>Costume Terms and Conditions</td><td>True</td></tr>
<tr><td>Shortcode</td><td>True</td></tr>
<tr><td>Blogger Comments</td><td>True</td></tr>
<tr><td>Testimonial</td><td>True</td></tr>
<tr><td>Recent Future</td><td>True</td></tr>
<tr><td>Documentation</td><td>True</td></tr>
<tr><td>More...</td><td>True</td></tr>
</tbody> 
</table>
<br />

Template detail widget

<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="https://web.netralid.com/" rel="nofollow noopener" target="_blank">Live Preview </a>
<div class="rio-ss idb">See it live with all the features that exist, both on the homepage and the page posts.</div></div>

<div id="store-style">
<a class="storebutton but2" href="https://a-liva.blogspot.com/p/join.html" target="_blank">$19.95 - Buy Now</a> <br />
<div class="rio-ss"><span class="storelist">Support Template Update</span> <span class="storelist">Remove Footer Credits</span> <span class="storelist">For Unlimited Domains</span> <span class="storelist">No Encrypted Scripts</span> <span class="storelist">Valid Schema.org</span> <span class="storelist">And Many More...</span></div></div></div>

Demo Template : https://a-liva.blogspot.com/2020/07/janda-design-responsive-blogger-template.html