Cara Membuat Post Author Keren diatas Sidebar [Blogger dan Wordpress]

Code Pelajar - Halo sob, kali ini Code Pelajar bakal bagiin sebuah tutor yang mungkin gak anti mainstream banget sih karena sudah banyak juga yang pakai, tapi gapapalah saya share aja wkwk. Tutorial ini ada 2 versi ada yang untuk blogger dan ada juga yang untuk Wordpress mari simak baik-baik dan telitilah saat mengikuti tutorial ini.


Cara Membuat Post Author Keren diatas Sidebar - BLOGGER

  1. Pertama login blogger -> masuk editor template -> carilah widget sidebar kalian di bagian template -> contohnya seperti dibawah ini
  2. <aside id='sidebar-wrapper'>
    Mungkin ID sidebar disetiap template akan berbeda-beda
  3. Jika Sudah ketemu salin dan terapkan skrip HTML berikut tepat dibawah tag pembuka sidebar <aside id='sidebar-wrapper'>
  4. <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <!--Code Pelajar - Auhtor Style -->
    <div class="section"><div class="area">
    <section class="postauthor boxs" style="width: 100%; overflow: hidden;">
    <div class="authorava opacity80">
        <img src="https://pre00.deviantart.net/6f8b/th/pre/f/2013/305/d/7/neko_ava_by_gendo0032-d6sl34z.png"/>
    </div>
    <div class="authorright">
    <h4>Posted By</h4>
    <h2><script>document.write(cpAuthor);</script></h2>
    <h3>at <script>document.write(cpTimes);</script></h3>
    </div>
    </section>
    </div></div>
    <style>.section{margin-bottom:10px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.25);border-radius:3px}.postauthor{background:url(img/bg2.jpg);position:relative}.authorava{height:97px;width:auto;overflow:hidden;float:left}.authorava img{margin:5px;height:85px;border:3px solid #008cff;border-radius:99px;width:auto}.authorright{position:absolute;top:0;right:0;width:135px;height:0;float:left;padding-right:15px;border-bottom:100px solid #008cff;border-left:50px solid transparent}.authorright h4{line-height:12px;color:#eee;text-align:left;float:right;margin-top:20px;font-size:9px}.authorright h2{color:#fff;text-align:right;float:right;width:auto;font-size:initial;margin:-8px auto;text-transform:lowercase}.section h3{font-size:14px;padding:10px;font-weight:bold;background:#008cff;color:#fff}.authorright h3{line-height:15px;text-align:right;border-radius:3px;width:150px;float:right;margin-top:5px;border:none}.postauthor{background:url(https://3.bp.blogspot.com/-rB5dxJs56W0/XFFXUkVGXRI/AAAAAAAAARs/LkKJK9BGV60PDqledWn4vu1_SvIkkY1HQCLcBGAs/s1600/coeeg.jpg);position:relative}</style>
    </b:if>
  5. Jika Sudah save Template dan lihat hasilnya :v
  6. Opps Masih acak2an + Masih belum dapet ya? nama penulis dan tanggal post nya? yaps karena menurut penelitian di IPB dan ITB, waktu post dan nama penulis hanya bisa di panggil di dalam sebuah post-wrapper saja, jika diluar itu tidak bisa. Mungkin yang tau alasannya bisa tuliskan jawaban/pencerahannya di kolom komentar. maka dari itu saya mempunyai sebuah trick untuk membuat sebuah javascript di post-wrappernya dan kita panggil di sidebar.
  7. Carilah <data:post.body/> jika sudah ketemu letakkan skrip dibawah ini tepat di atasnya.
  8. <script>var cpTimes = &quot;<data:post.timestamp/>&quot;;</script>
    <script>var cpAuthor = &quot;<data:post.author/>&quot;;</script>
  9. Jika Sudah Save dan lihatlah hasilnya.

Cara Membuat Post Author Keren diatas Sidebar - Wordpress

  1. Anggaplah kalian sudah didalam editor -> Bukalah Fle sidebar atau biasanya penamaan file sidebar seperti ini sidebar.php
  2. jika sudah letakkan Skrip berikut dibawah element pembuka atau tag pembuka Sidebar mu sob.
  3. <?php  if ( is_single() ) {  ?>
    <!--CODE PELAJAR AUTHO STYLE -->
    <div class="section"><div class="area">
    <section class="postauthor boxs" style="width: 100%; overflow: hidden;">
    <div class="authorava opacity80">
    <!--<img src="<?php //echo get_avatar( $id_or_email, $size, $default, $alt, $args ); ?> " alt="Code Pelajar">-->
        <img src="https://pre00.deviantart.net/6f8b/th/pre/f/2013/305/d/7/neko_ava_by_gendo0032-d6sl34z.png"/>
    </div>
    <div class="authorright">
    <h4>Posted By</h4>
    <h2><?php the_author() ?></h2>
    <h3>at <?php the_date() ?></h3>
    </div>
    </section>
    </div></div>
    <style>.section{margin-bottom:10px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.25);border-radius:3px}.postauthor{background:url(img/bg2.jpg);position:relative}.authorava{height:97px;width:auto;overflow:hidden;float:left}.authorava img{margin:5px;height:85px;border:3px solid #008cff;border-radius:99px;width:auto}.authorright{position:absolute;top:0;right:0;width:135px;height:0;float:left;padding-right:15px;border-bottom:100px solid #008cff;border-left:50px solid transparent}.authorright h4{line-height:12px;color:#eee;text-align:left;float:right;margin-top:20px;font-size:9px}.authorright h2{color:#fff;text-align:right;float:right;width:auto;font-size:initial;margin:-8px auto;text-transform:lowercase}.section h3{font-size:14px;padding:10px;font-weight:bold;background:#008cff;color:#fff}.authorright h3{line-height:15px;text-align:right;border-radius:3px;width:150px;float:right;margin-top:5px;border:none}.postauthor{background:url(https://3.bp.blogspot.com/-rB5dxJs56W0/XFFXUkVGXRI/AAAAAAAAARs/LkKJK9BGV60PDqledWn4vu1_SvIkkY1HQCLcBGAs/s1600/coeeg.jpg);position:relative}</style>
    </b:if>
    <?php } ?>
  4. Jika sudah save dan lihat hasilnya.

Nah itulah tadi 2 tutorial yang wajib kalian ikuti, Jika bingung silahkan tanyakan pada kolom komentar.

ingat mulai sekarang saya tidak akan membalas pesan whatsApp yang nanya tentang masalah tutorial di chat WA, jika kalian bingung atau tidak bisa mari kita diskusi di kolom komentar saja. Kenapa harus di kolom komentar artikel terkait min? iya karena misal ada yang punya masalah sama dengan kamu kan bisa sama-sama solve dengan baca diskusi kita di komentar :) Selamat mencoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel