39 Modifikasi Widget Profil Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

modifikasi widget profil blogger Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog, tutorial kali ini juga masih merupakan request sahabat blogger.

Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.

Baiklah silahkan ikuti langkah-langkah berikut:

cara membuat modifikasi widget profil blogger di blog

1. Setelah login ke akun anda.
2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent
<style>
#profileAmatullah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAmatullah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;  
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} 
</style>
   <!--[endif]----> 

<img align="left" class="opacity" id="#profileAmatullah" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" style="color: #888888;">...Read More</a><!--![endif]----> 

<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=5143343840607190550&amp;widgetType=Profile&amp;widgetId=Profile1&amp;action=editWidget&amp;sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

Kustomisasi

  • Ganti profilAmatullah dengan nama profil anda,
  • perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
  • ganti blog ID dengan ID blog anda
  • silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.
4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Demikian tutorial kali ini, cara modifikasi tampilan widget profil blogger pada blog. Semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

39 komentar :

  1. Di Blog saya udah paten Mbak tempat Profilnya. Tidak bisa di Add New gadget,mungkin udah dari templatenya kali yah?

    Oh iya Mbak, oot boleh yah? (maaf), kalau pakai emoticon kan menyisipkan kode js di atas kode head, tapi kok ada pengaruh di slide yah? Slide nya ndak jalan. Kemarin iseng2 saya copot, ehh sekarang bisa lagi slide nya. Ini kenapa yah?

    BalasHapus
    Balasan
    1. Mbak indah selalu cepat ya? Nmbahin JS dibawah kode <head> mbak, dan kalau kedua widgetnya menggunakan JQuery cukupkan satu script JQuery aja yang dipakai.
      Semoga membantu.

      Terimakasih pula tuk apresiasinya.

      Hapus
    2. Alhamdulillah .....akhirnya bisa mbak. Slide dan Emo nya lancar semua. Ternyata saya kurang teliti, sudah ada Jquery di blog saya mungkin itu sisa yang dulu dan blm terhapus. Maklum suka otak atik template,biar pinter spt Mbak Amatullah. heheheh
      Akhirnya sekarang bisa tidur nyenyak...mksh banyak ya Mbak,mudah2an menjadi amal jariyah tutorialnya. Aamiiin.

      Hapus
  2. mba, poular postnya keren deh, gmana yah bkinnya??

    BalasHapus
    Balasan
    1. Popular posts yang ada dihalaman beranda, sudah ada tutorialnya saya share disini:
      http://www.tipstrikblogging.com/2012/11/widget-popular-posts-dengan-circle.html

      Hapus
  3. makin lengkap deh blognya :) kerenn .. @-)

    BalasHapus
    Balasan
    1. Masih kurang menurut anaa karena hanya bisa sesekali update di waktu luang, tapi terimakasih tuk supportnya.

      Hapus
  4. oh, sama seperti gadget yang ada di atas itu ya mbak ?? makasih ya atas sharenya :)
    ilmunya oke-oke banget..

    BalasHapus
    Balasan
    1. Iya benar, sama seperti widget profil dengan title About The Author disidebar samping blog ini.

      Terimakasih juga tuk apresiasinya.

      Hapus
  5. Thanks ni mbak..
    ane sndiri blom smpet kepikir untuk masang widget ini..
    boleh lah kapan" ane redesign lagi nih.. :D

    BalasHapus
    Balasan
    1. Silahkan unjuk kebolehan :p

      Hapus
    2. sudah jadi..
      hasilnya kurang bagus..
      http://mdf-demo.blogspot.com/2013/05/author-box.html

      Hapus
    3. Ciieh, masyaAllah. Keren (h) Izin Ctrl+U ya? :))

      Hapus
    4. jiahaha.. silahkan.. :D
      hanya sekedar meluangkan waktu meskipun hasilnya tidak maksimal... :-s
      dikasih background gradientuh biar lebih mantep..

      Hapus
  6. makasih mba udah dibuatin tutorialnya... ini buat blog kedua ane...

    BalasHapus
    Balasan
    1. Oh sobat yang dulu nanya itu ya? Maaf ya benar anaa lupa waktu buat postingan ini, siapa yang nanya dan dipostingan mana nitip pertanyaannya! Kalau anaa ingat kebiasaan anaa memberikan link back ke penanya sebagai apresiasi karena sudah memberikan inspirasi baru untuk bahan update blog ini.

      Terimakasih.

      Hapus
  7. Pada dasarnya semua widget standar blogger bisa dimodifikasi ya Mbak ? Salam sukses selalu

    BalasHapus
    Balasan
    1. Yaa asal ngerti CSS dan HTML pasti asyik bermain kode dan punya ide yang kreatif untuk terus berkreasi.

      Hapus
  8. widihhh kren bgt nicchh bisa di coba nichhh

    bkalan tmbah keren nichh blog w

    BalasHapus
  9. Ternyata ada juga modifikasi untuk widget profil,kreatif benar Mbak :)

    BalasHapus
  10. Wah kalau sudah dipoles pakai CSS, hasilnya pasti maknyus. Great trick, mba! :)

    BalasHapus
  11. blog nya makin keren aja, aku suport deh

    BalasHapus
  12. widihhh mantap bgt dachhh bisa di coba nichhh

    thank's ya

    BalasHapus
  13. mba , gimana ya cara buat kayak gitu di setiap bawah post otomatis ? :)

    Salam kenal dari www.kevin-432.blogspot.com

    BalasHapus
  14. aku Blogger newbie nih, blog aku masih jelek, belajar desainnya susah bnget ya (m) (m) (m)

    BalasHapus
  15. makasih tutorialnya teh, bisa dilihat hasilnya http://acilpedia.blogspot.com/ (h)

    BalasHapus
  16. nice tips gan..

    visit me back n follow

    http://purbalaban.blogspot.com/

    BalasHapus
  17. mantap gan yuk bagi agan2 kunjungi blog saya http://all1online.blogspot.com/

    BalasHapus
  18. nice banget om widget profil nya..

    ijin sedot yee

    jayamakmur-depok.blogspot.com

    BalasHapus
  19. koq gak bisa ya
    coba cek di sini gmn caranya
    http://freetbisnis.blogspot.com/

    BalasHapus
  20. Mba saya udah coba di blog saya ternyata sukses juga. :d

    BalasHapus
  21. Ok Banget Ilmunya sob..
    Kunjungan + Comment baliknya ya..
    http://master-1st.blogspot.com/2013/09/berbagai-potensi-lokal-di-bojonegoro.html
    ditunggu..
    hehehe...

    BalasHapus
  22. mesti di coba nihhh :-d , mampir juga disini http://sonytutorial.blogspot.com/

    BalasHapus
  23. Moga bisa diaplikasiin.. makasih tipsnya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!