|
|
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>>>
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).
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 != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a class='profile-name-link' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li>
</b:loop>
</ul>
<b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<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='"background-image: url(" + data:profileLogo + ");"' rel='author'>
<data:displayname/>
</a>
</dt>
<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>
<b:if cond='data:aboutme != ""'><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 != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- 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 != ""'>
<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 == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>
<b:if cond='data:aboutme != ""'><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> .
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. ;)
Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan!
Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah..
thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['
', '
']]}
', '']]}{["Useless", "Boring", "Need more details", "Perfect"]}
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
+ komentar + 0 Diskusi pada 'Cara Menghilangkan Icon Blogger Di Profil (About Me)'
Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!
Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.
Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".
Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^