NEWS
Loading...
  • Posted by : Johanes Djogan 21 Mar 2012

    Trik Memasang Avatar penulis blog


    Trik Memasang Avatar penulis blog,Mungkin sobat sering melihat avatar" atau foto penulis blog yang penulis blognya berbeda,dan mempunyai avatar'a masing" yang berbeda seperti template Anime" orang luar negeri yang tiap design'a menggunakan sistem postingan seperti itu.sebenarnya Ini trik lama dan untuk memasang'a sangat simple,tapi trik saya kali ini agak berbeda dengan yang lain ,karena trik yang saya berikan valid HTML dan penempatan CSS'a yang benar.penggunaan css Inline Styles yang salah contoh'a seperti dibawah ini.


    <div style="color=#fff;background:#fff;">...</div>

    Sebisa mungkin hindari penggunaan inline style seperti diatas. Lebih baik menggunakan stylesheet bawaan blogger,diantara <b:skin> isi css </b:skin>. cara ini akan sangat memudahkan kamu pada saat mengedit CSS'a.

    Untuk mencoba trik ini saya sarankan untuk membackup template kamu agar tidak terjadi hal yang tidak diinginkan.sebenarnya cara'a cukup simple dan sudah umum menurut saya.
    Fungsi avatar'a itu sendiri menggunakan tag Conditional data:post.author yang memungkinkan untuk menampilkan konten dari author/penulis tersebut



    ok langsung saja,pertama buka blogger=>rancangan=>edit HTML,lalu centang Expand Widget Templates.

    Setelah saya coba,ternyata tidak semua template sama,oleh karena itu disini ada 2 cara:
    tapi saya sarankan coba yang cara2 ,karena tingkat keberhasilan'a lebih tinggi daripada cara1 :)

    Cara 1
    kemudian Cari kode HTML seperti dibawah ini
    <div class='post hentry uncustomized-post-template'>


    #Note bila kamu menemukan kode html yang sama seperti diatas,pastikan dibawah kode html itu ada kode:

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>


    Cara2

    Cari kode Html yang mirip" seperti dibawah ini


    <b:include name='mobile-nextprev'/>
    </b:includable>
    <b:includable id='post' var='post'>
    <div class='post hentry'>




    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>






    Setelah itu,copy paste Kode HTML dibawah ini


    <div class='admin'>
    <b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
    </div>


    Cara1
    copy paste kode html diatas tadi tepat dibawah kode:
    (<div class='post hentry uncustomized-post-template'> )

    Atau


    Cara2
    copy paste kode html diatas tadi seperti dibawah ini.

    <b:include name='mobile-nextprev'/>
    </b:includable>
    <b:includable id='post' var='post'>
    <div class='post hentry'>

    <div class='admin'>
    <b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
    </div>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>


    Setelah itu,copy paste CSS Dibawah ini,diatas kode ]]></b:skin>


    .admin {
    position: absolute;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: -webkit-linear-gradient(top, white, #EEE);
    background: -moz-linear-gradient(top, white, #EEE);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    margin-left: 10px;
    margin-top: 40px;
    }

    .admin img {width:68px;height:68px}



    Pada CSS .Admin,untuk mengatur posisi gunakan margin.
    CSS Diatas sama dengan Template saya Another dan Guilty Crown

    pada CSS .admin img digunakan untuk mengatur lebar dan tinggi gambar/avatar itu sendiri

    CSS Dibawah ini cuma Hiasan background gradient dan border radius CSS3,kamu bisa merubah warna atau sudut bulatnya.

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: -webkit-linear-gradient(top, white, #EEE);
    background: -moz-linear-gradient(top, white, #EEE);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);

    //Ada kemungkinan sesudah kamu menyimpan'a,posisi'a tidak beraturan,karena itu gunakan margin-left,margin-right,margin-top dan margin-bottom untuk mengatur posisi avatar tersebut.//

    lalu simpan dan lihat hasilnya.dan lihat source code yang saya gunakan,sama dengan tutorial diatas
    untuk contoh demo'a,silakan lihat sendiri pada template saya:
    Another blogger template
    Guilty crown Blogger template



    Pengaturan Tambahan


    Untuk Avatar,sama seperti template Another dan Template Guilty Crown kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v

    Pertama,buka blogger=>rancangan=>edit HTML=> Centang Expand Widget Templates
    Lalu carikode html seperti dibawah ini

    <b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='http://3.bp.blogspot.com/-uQmO1KVif9M/T2dgwzpAlwI/AAAAAAAABVs/5gq4ttjsFEg/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>


    kode html Diatas ini,saya cuma beri 1 jenis avatar untuk 1 author blog.
    cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia.untuk menambahkan avatar'a,yang kamu perlu lakukan cuma copas HTML diatas,tepat dibawahnya,lalu ganti nama penulis dan url gambar avatar'a.

    text bewarna merah:ganti dengan Username kamu.
    text bewarna biru :ganti dengan Url gambar avatar kamu.Ukuranya 136px x 190px.

    kalau tidak tahu username kamu,sebenar'a mudah aja,tinggal copas dari nama profil di blog kamu,atau bila ada banyak penulis tapi tidak tahu username'a,cara'a:
    buka blogger=>setting=>izin/permission.

    Contoh:

    Lalu kamu akan melihat beberapa nama penulis dan admin disana.tinggal copy paste deh nama'a


    //Saya Sudah mencobanya di berbagai template,dan hasilnya ada beberapa yang bisa menggunakan cara 1 dan juga ada yang bisa menggunakan cara2.//



    Selesai deh.jadi dengan ini saya harapkan sobat bisa lebih kreatif dalam hal CSS dan HTML,jangan ngikutin style orang lain,apalagi punya orang luar negeri.ciptakan style kita sendiri,kreasi kita sendiri,dan hasil tangan kita sendiri.Ini Style ku,apa style mu?Indonesia harus kreatif.Arigatou Gozaimasu,semoga bermanfaat :)

    { 27 comments... read them below or Comment }

    1. pertamaxx.. :D
      ijin nyoba masbroo, manteb tutorialnya

      BalasHapus
    2. sorry ya,ternyata ada template yang tidak mendukung,saya udah update cara kedua'a

      BalasHapus
    3. Gan buat avatar Black Rock Shooter gak ada ya?

      BalasHapus
    4. @Arungraven ini buat semua template.template black rock shooter pny aq jg bisa. :)

      BalasHapus
    5. @Arungraven ini buat semua template.template black rock shooter pny aq jg bisa. :)

      BalasHapus
    6. asik dah...

      jo, adsense sekarang udah nggak ngeblokir indo lagi. jadi gw bisa masang iklan adsense, hahaha
      klik jo :p

      BalasHapus
    7. seebz udah aq pke di www.b-blogsshadow.com
      templatenya juga naruto sasuke tp kok dmozilla ancur ya?

      BalasHapus
    8. huuuuumt tulisannya gak posted by kuk tetep di bawah yah gak mau ngikut ke atas gan

      BalasHapus
    9. Kok nggak bisa dipasang di template saya ya gan :/

      BalasHapus
    10. brow bisa gak request kalau avatar penulis blog nya otomatis alias sesuai yg nulis, kan misal blog kita dikelola oleh orang banyak, tapi kan ribet kalo mau nulisnya satu2,., nah bisa gak dia mengcrawl data otomatis sesuai yg nulis dan fotonya juga otomatis

      BalasHapus
    11. Bang jo kalau ukuran imagenya lebih dari 136px x 190px, bisa ndak?

      BalasHapus
    12. bingung deh bang -.- udah baca teliti tapi gak ngerti ngerti ~_~

      BalasHapus
    13. Não consigo colocar os avatares no modelo: Fansubber :C
      Quero muito colocar os avatares...

      BalasHapus
    14. thanks gan , mohon kunjunganya ke akupun-tau.blogspot.com

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -