Membuat Author Box Blogger Dengan Ikon Centang Biru
Thursday, November 1, 20180 Comments
Membuat Author Box Blogger Dengan Ikon Centang Biru
A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Membuat Author Box Blogger Dengan Ikon Centang Biru
Kemarin aku membuat Author Box blogger dengan CSS dan HTML untuk template Qolorful. Aku menambahkan ikon centang biru biar kesan nya seperti akun yang sudah verified seperti akun twitter atau instagram yang sudah terverifikasi wkwk. Author Box ini khusus untuk profile blogger yang sudah beralih ke Google+ untuk profile blogger yang lama disarankan beralih dulu ke profile Google+.
User & verified icon
  1. Pertama masuk ke akun Google+ untuk mengisi keterangan atau deskripsi profil kita.
  2. Di halaman profil Google+ klik 'Tentang' atau buka link ini https://aboutme.google.com/?referer=gplus
  3. Ikuti langkah berikut ini.
    Setting Profil
  4. Setelah selesai menyeting deskripsi di Google+ kita beralih ke setting di blog kita.
  5. Masuk ke blogger.com kemudian ke bagian Tata Letak.
  6. Klik 'Edit' pada widget posting blog.
    Widget Posting Blog
  7. Kemudian akan muncul popup, tambahkan tanda centang pada tulisan Tampilkan Profil Pengarang Di Bawah Pos.
    Memunculkan Author
  8. Sekarang setting blog untuk memunculkan Author telah selesai. Sekarang Author Box bawaan blogger nya sudah muncul secara otomatis di bawah setiap postingan. Buat yang Author Profile nya ngga muncul mungkin karena udah di sembunyiin sama yang bikin template nya.
  9. Masuk ke Edit HTML. Cari kode berikut ini.
    author-profile
    Jika kita menemukan nya berarti kita beruntung karena kita akan menambahkan kode Author Box di bawah Author Profile bawaan blogger. Lah, nanti jadi dua dong profile pengarang nya? Nggak juga, karena kita akan menyembunyikan Author Profile bawaan blogger nya. Kode lengkap Author Profile bawaan blogger dan cara untuk menyembunyikannya adalah seperti di bawah ini.
    <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <b:if cond='data:post.authorPhoto.url'>
           <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
        </b:if>
        <div>
           <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
           </a>
        </div>
        <span itemprop='description'><data:post.authorAboutMe/></span>
    </div>
    
    Ganti dengan
    
    <!-- Menyembunyikan Author Profile
            <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
              <b:if cond='data:post.authorPhoto.url'>
                <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
              </b:if>
              <div>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </div>
              <span itemprop='description'><data:post.authorAboutMe/></span>
            </div>
    -->
    Kenapa ngga di hapus aja? Sebenarnya untuk jaga-jaga apabila kita lebih menyukai author profile bawaan blogger kita bisa dengan mudah mengembalikannya.
  10. Di bawah kode yang sudah di edit tadi tambahkan kode berikut ini.
    <b:if cond='data:view.isPost'>
    <div class='avatar-container'>
    <ul>
       <li><span class='author_avatar'><a expr:href='data:post.authorProfileUrl'><img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='50' width='50'/></a></span></li>
       <li><a class='author_nama' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><data:post.author/></a><img height='15' src='https://cdn.staticaly.com/gh/ekaawaludin/qolorful/6e41ad6b/verified.png' style='margin: 0 0 -2px 5px;' width='15'/>
       <br/>
       <div class='deskripsi-penulis' itemprop='description'><data:post.authorAboutMe/></div></li>
    </ul>
    </div>
    </b:if>
  11. Selanjutnya terapkan kode berikut ini sebelum kode ]]></b:skin> atau </style>.
    .avatar-container {
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     color: #333;
     text-align: left !important;
     background-color:#eee;
     padding: 10px 25px 10px 25px;
    }
    
    .avatar-container ul {
     list-style-type: none;
    }
    
    .avatar-container li {
        display: inline;
    }
    
    .author_avatar img {
     float: left;
     border-radius: 50%;
     margin: 1px 15px 0 0;
    }
    
    .deskripsi-penulis {
     font-size: .9em;
     line-height: 1.2em;
     max-height: 2.4em;
     overflow: hidden;
    }
  12. Tampilan final nya kira-kira akan seperti berikut ini.
    Tampilan final Author Box
Silahkan untuk selanjutnya bisa di oprek lagi sesuai dengan keinginan kita, misalnya merubah warna background dan teks nya, merubah padding dan margin nya, dan lain-lain. Sekian dan jumpa lagi di artikel berikutnya, Ciao!.

1 comment: