Change JetTheme Logo Image To Blog Title

There are several steps to follow to complete the above task.

I am describing below step by step how to get the work done. The steps must be followed very carefully.

Make sure to backup your Blogger template before doing this. So that you can get it back if there is a problem.

Login to blogger dashboard and now go to theme and enter edit html.

Now find the following code.

  <Group description="_Header Color">

Place these codes below the found codes.

  <Variable name="header.height" description="Header height" type="length" max="80px" default="60px" value="80px"/>
<Variable name="header.heightM" description="Header height(mobile)" type="length" max="80px" default="60px" value="80px"/>
<Variable name="header.titleSize" description="Header title font size" type="length" max="20px" default="16px" value="16px"/>
<Variable name="header.text" description="Header text colors" type="color" default="#48525c" value="#48525c"/>
<Variable name="header.icon" description="Header icon colors" type="color" default="#615f5f" value="#615f5f"/>
<Variable name="header.bgColor" description="Header background color" type="color" default="#e0e5ec" value="#e0e5ec"/>

Now find this code.

  :root {

After finding the above code, copy and paste the below code below it.

--headerC: $(header.text) ;
--headerT: $(header.titleSize) ;
--headerW: 300 ; /* write 400(normal) or 700(bold) */
--headerB: $(header.bgColor) ;
--headerL: $(header.border) ;
--headerI: $(header.icon) ;
--headerH: $(header.height) ; 
--headerHm: $(header.heightM) ;

Then find the text below.

  /*Your custom CSS is here*/

Now copy the following CSS codes and place them below the text.

/* Header Widget */ .Header{background-repeat:no-repeat;background-size:100%;background-position:center} .Header img{max-width:160px;max-height:45px} .Header .headH{display:block;color:inherit;font-size:var(--headerT); font-weight:var(--headerW)} .Header .headH.hasSub{display:flex;align-items:baseline} .Header .headTtl{color: white; margin-top: 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; display:block;font-weight: bold;} .Header .headSub{margin:0 5px;font:400 11px var(--fontB); white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60px;opacity:.6} .Header .headSub::before{content:attr(data-text)}

Now find the following codes.

<b:widget id='HTML10' locked='true' title='Logo' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>https://1.bp.blogspot.com/-mo6pIle8rXw/YLplHDA1ZCI/AAAAAAAAATo/JPbzsy_srC8gFem56vJZ3wua-A5qClFxACLcBGAsYHQ/w175-h55/jettheme-logo.png</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
        <b:include name='JetLogo'/>
      </b:includable>
  </b:widget>

Now copy the following codes and replace them above the found codes.

  <b:widget id='Header1' locked='true' title='THE REAL ANWARUL (Header)' type='Header' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'/>
      <b:widget-setting name='displayHeight'>0</b:widget-setting>
      <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
      <b:widget-setting name='useImage'>false</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
      <b:widget-setting name='displayWidth'>0</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main' var='this'>
                      <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
                      <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
                      <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
                      <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
                    </b:includable>
    <b:includable id='behindImageStyle'>
                      <b:if cond='data:sourceUrl'>
                        <b:include cond='data:this.image' data='{image: data:this.image, selector: &quot;.Header&quot;}' name='responsiveImageStyle'/>
                      </b:if>
                    </b:includable>
    <b:includable id='description'>

  </b:includable>
    <b:includable id='image'>
                      <!-- Header Image -->
                      <a expr:href='data:blog.homepageUrl.canonical'><img expr:alt='data:title' expr:height='data:height' expr:src='resizeImage(data:sourceUrl, 200)' expr:width='data:width'/></a>
                      <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
                    </b:includable>
    <b:includable id='title'>
                      <!-- Header Title -->
                      <div class='headInnr'>
                        <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='hidden'/>
                        <b:tag class='headH' expr:name='!data:view.isSingleItem ? &quot;h1&quot; : &quot;h2&quot;'>
                          <b:class cond='data:this.description' name='hasSub'/>
                          <b:tag class='headTtl' expr:name='!data:view.isHomepage ? &quot;a&quot; : &quot;span&quot;'>
                            <b:attr cond='!data:view.isHomepage' expr:value='data:blog.homepageUrl.canonical' name='href'/>
                            <data:title/>
                          </b:tag>
                          
                          <!--[ Header Description ]-->
                          <!--<b:tag class='headSub visually-hidden' cond='data:this.description' expr:data-text='data:this.description' name='span'/>-->
                        </b:tag>
                      </div>
                    </b:includable>
  </b:widget>

Then you save the Blogger theme and visit your website to see the results you want.

The source codes used here are all collected from Jago Design Theme. If anyone has any complaints about this blog post, please email.