Cara Menghilangkan Icon Blogger Di Profil (About Me)

Assalamu Alaikum Wr.Wb...

Pada sore hari ini, saya akan mencoba memberikan Trik Cara Menghilangkan Icon Blogger Di Profil (About Me), awalnya saya tidak terpikirkan tuk menshare trik ini, krn awalnya saya juga cri tahu bgaimana cara menghilangkan icon blogger yang berada diprofil (about me), dan stelah sy  utak atik coding ditemplate akhirnya sy dapat menghilangkan icon itu dari beberapa template saya, nah.. disitu lah sy terpikirkan untuk mencoba berbagi trik ini, gtung-ngitung tambah koleksi dipostingan.hehee,...

Baiklah klw bgtu kita langsung sj memperaktekkannya di template sobat,. sebelum mulai disini saya akan memberikan gambar default dari profil blog. biar lebih jlas apa yang akan kita peraktekkan.

Default>>>

 

 

Sesudah>>>

Nah jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

1. Login blogger.
2. Rancangan, Edit Html, Cari kode Seperti ini (Pastikan anda sudah memasang widget profil terlebih dahulu).

• <b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
        <ul>
          <b:loop values='data:authors' var='i'>
            <li><a class='profile-name-link' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
          </b:loop>
        </ul>
  
      <b:else/> <!-- normal blog profile -->
  
        <b:if cond='data:photo.url != &quot;&quot;'>
          <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
        </b:if>
  
        <dl class='profile-datablock'>
          <dt class='profile-data'>
            <a class='profile-name-link' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
              <data:displayname/>
            </a>
          </dt>
  
          <b:if cond='data:showlocation == &quot;true&quot;'>
            <dd class='profile-data'><data:location/></dd>
          </b:if>
  
          <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
        </dl>
        <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
      </b:if>
  
       <b:include name='quickedit'/>
      </div>
    </b:includable>
  </b:widget>

 

3. Jika sudah ketemu semua kode diatas, lalu sobat hapus semua kode diatas dan ganti dengan kode berikut :

 

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
      <ul>
        <b:loop values='data:authors' var='i'>
          <li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
        </b:loop>
      </ul>

      <b:else/> <!-- normal blog profile -->

      <b:if cond='data:photo.url != &quot;&quot;'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>

      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link' expr:href='data:userUrl' rel='author'>
            <data:displayname/>
          </a>
        </dt>

        <b:if cond='data:showlocation == &quot;true&quot;'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

        <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
    </b:if>
     <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

 

4. Terakhir Priview Dulu, Jika tidak terjadi kesalahan lalu sobat Simpan Template.

TAMBAHAN :

Jika ingin merubah tampilan Profil Blog anda seperti pada gambar diatas, sobat bisa menambahkan kode CSS berikut diatas Kode ]]></b:skin> .

/*Reset CSS Profile Admin*/
.profile-img{height:80px;width:80px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:3px solid #111;box-shadow:1px 1px 10px #eee;-moz-box-shadow:1px 1px 10px #eee;-webkit-box-shadow:1px 1px 10px #eee;opacity:.1;float:left;margin:0 10px 5px 0;padding:0;transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;}
.profile-img:hover{transform:rotate(15deg);-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);box-shadow:1px 1px 20px #D60000;-moz-box-shadow:1px 1px 20px #D60000;-webkit-box-shadow:1px 1px 20px #D60000;opacity:2.2;border-top:3px solid #D60000;border-bottom:3px solid #D60000;border-right:3px solid transparent;border-left:3px solid transparent;}
.profile-data{margin:0;padding:0;letter-spacing:.1em;}
.profile-datablock a{font:normal 18px impact;text-align:justify;color:#D60000;text-shadow:0 0 2px #D60000;margin:0}
.profile-textblock{text-align:justify;color:#777;font:normal 13px century gothic;margin:5px 0}
.profile-link{display:none;}

Mungkin cukup sekian tutorial saya kali ini, semoga trik ini bermanfaat bagi anda. ;)