Follow Me on Google News Follow Now!

How To Add Multi Tab Syntax Highlighter in Imagz V1.2

Hello Everybody, Welcome Back in Adatun. Today in this Post I am going to share a interesting tutorial on How To Add Multi Tab Syntax Highlighter in Imagz V1.2. If you use Imagz V1.2 in Your Website Then this post is very amazing for you because in today's post I will give you the code of Multi Tab Syntax Highlighter in IMagz Blogger Theme.

You Can Use This Multi Tab Syntax Highlighter in Imagz V1.2 Because It is Compatible Only for Imagz V1.2 Blogger Template. If You Want it Any Other Theme Then I will Make Another post.

Benefits :-

  • Stylish Look For Your Blogger Website To Show Coding Part.
  • Unique Design Of Syntax Highlighting in IMagz V1.2
  • You Can Show All Source Code In One Box As Multi Tab Syntax Highlighter.
  • HTML, CSS, JS Code Will Be Added in One Place.

How To Add Multi Tab Syntax Highlighter in IMagz :-

Step 1 :- First of All. You Need To Login With Your Blogger Account.
Step 2 :- After That Click on Theme Menu.
Step 3 :- Then Click On Edit HTML.
Step 4 :- Now Copy Given CSS Code And Place it Just Above of ]]></b:skin> Tag Or Between of <style> 
.pre{background:var(--synxBg);color:var(--synxC);direction:ltr}.pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)}.pre pre{margin:0;color:inherit;background:inherit}.cmC i[rel=pre]::before,.pre:not(.tb)::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px}.pre:not(.tb).html::before{content:'.html'}.pre:not(.tb).css::before{content:'.css'}.pre:not(.tb).js::before{content:'.js'}.cmC i[rel=pre],pre{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}pre i{color:var(--synxBlue);font-style:normal}pre i.block{color:#fff;background:var(--synxBlue)}pre span{color:var(--synxGreen)}pre i.comment{color:var(--synxGray)}pre i.tag{color:var(--synxOrange)}pre i.blue{color:var(--synxBlue)}code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)}.pre.tb{border-radius:5px}.pre.tb pre{margin:0;background:inherit}.pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0}.pre.tb .preH>*{padding:13px 20px}.pre.tb .preH::after{content:'</>';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto}.pre.tb>:not(.preH){display:none}.pBd input[id*="1"]:checked~div[class*=C-1],.pBd input[id*="2"]:checked~div[class*=C-2],.pBd input[id*="3"]:checked~div[class*=C-3],.pBd input[id*="4"]:checked~div[class*=C-4]{display:block}.tbHd{display:flex;border-bottom:1px solid var(--contentBo);margin-bottom:30px;font-size:14px;font-family:var(--fontB);line-height:1.6em;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tbHd>*{padding:12px 15px;border-bottom:1px solid transparent;transition:var(--trans-1);opacity:.6;white-space:nowrap;scroll-snap-align:start}.tbHd>::before{content:attr(data-text)}.tbCn>*{display:none;width:100%}.tbCn>* p:first-child{margin-top:0}.pBd input[id*="1"]:checked~.tbHd label[for*="1"],.pBd input[id*="2"]:checked~.tbHd label[for*="2"],.pBd input[id*="3"]:checked~.tbHd label[for*="3"],.pBd input[id*="4"]:checked~.tbHd label[for*="4"]{border-color:var(--linkBg);opacity:1}.pBd input[id*="1"]:checked~.tbCn div[class*=Text-1],.pBd input[id*="2"]:checked~.tbCn div[class*=Text-2],.pBd input[id*="3"]:checked~.tbCn div[class*=Text-3],.pBd input[id*="4"]:checked~.tbCn div[class*=Text-4]{display:block}.tbHd.stick{position:-webkit-sticky;position:sticky;top:var(--headerH);background:var(--bodyBg)}

How To Use Multi Tab Syntax Highligter in Blogger Post :-

Step 1 :- Now Go To Your Posts Section To Create a New Post.
Step 2 :- Then Create a New Post.

Add Your Post Title And Description According To Your Choice.

Step 3 :- Then Click on HTML View.
Step 4 :- After That Copy the Code Given Below And Paste it in HTML View.
<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
 <pre>Your Parser HTML Code</pre>
   </div>

  <div class='preC-2'>
 <pre>Your CSS Code is Here</pre>
   </div>

  <div class='preC-3'>
 <pre>Your Javascript Code is Here</pre>
   </div>
 </div>
Step 5 :- After That Do Not Forget to Publish Your Post.

All Sourcde Code

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
 <pre>Your Parser HTML Code</pre>
   </div>

  <div class='preC-2'>
 <pre>Your CSS Code is Here</pre>
   </div>

  <div class='preC-3'>
 <pre>Your Javascript Code is Here</pre>
   </div>
 </div>
.pre{background:var(--synxBg);color:var(--synxC);direction:ltr}.pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)}.pre pre{margin:0;color:inherit;background:inherit}.cmC i[rel=pre]::before,.pre:not(.tb)::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px}.pre:not(.tb).html::before{content:'.html'}.pre:not(.tb).css::before{content:'.css'}.pre:not(.tb).js::before{content:'.js'}.cmC i[rel=pre],pre{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}pre i{color:var(--synxBlue);font-style:normal}pre i.block{color:#fff;background:var(--synxBlue)}pre span{color:var(--synxGreen)}pre i.comment{color:var(--synxGray)}pre i.tag{color:var(--synxOrange)}pre i.blue{color:var(--synxBlue)}code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)}.pre.tb{border-radius:5px}.pre.tb pre{margin:0;background:inherit}.pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0}.pre.tb .preH>*{padding:13px 20px}.pre.tb .preH::after{content:'</>';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto}.pre.tb>:not(.preH){display:none}.pBd input[id*="1"]:checked~div[class*=C-1],.pBd input[id*="2"]:checked~div[class*=C-2],.pBd input[id*="3"]:checked~div[class*=C-3],.pBd input[id*="4"]:checked~div[class*=C-4]{display:block}.tbHd{display:flex;border-bottom:1px solid var(--contentBo);margin-bottom:30px;font-size:14px;font-family:var(--fontB);line-height:1.6em;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tbHd>*{padding:12px 15px;border-bottom:1px solid transparent;transition:var(--trans-1);opacity:.6;white-space:nowrap;scroll-snap-align:start}.tbHd>::before{content:attr(data-text)}.tbCn>*{display:none;width:100%}.tbCn>* p:first-child{margin-top:0}.pBd input[id*="1"]:checked~.tbHd label[for*="1"],.pBd input[id*="2"]:checked~.tbHd label[for*="2"],.pBd input[id*="3"]:checked~.tbHd label[for*="3"],.pBd input[id*="4"]:checked~.tbHd label[for*="4"]{border-color:var(--linkBg);opacity:1}.pBd input[id*="1"]:checked~.tbCn div[class*=Text-1],.pBd input[id*="2"]:checked~.tbCn div[class*=Text-2],.pBd input[id*="3"]:checked~.tbCn div[class*=Text-3],.pBd input[id*="4"]:checked~.tbCn div[class*=Text-4]{display:block}.tbHd.stick{position:-webkit-sticky;position:sticky;top:var(--headerH);background:var(--bodyBg)}
Code is Not Available!

Conclusion :-

Well That's Great Tutorial on How To Add Multi Tab Syntax Highlighter in IMagz V1.2. I Hope You Like This Post. If you have any other question related to this post then you can tell by commenting. How did you like this post, you can tell us by commenting. I hope it is Useful for All.

Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

إرسال تعليق