Cara Membuat, Memasang Kotak Penulis Blogger dibawah Postingan

Cara membuat kotak penulis menggunakan css dan html yang dipasang dibawah postingan blogger guna memberikan tampilan blog/website semakin menarik dan sekaligus memberikan informasi tentang siapa penulis artikel/postingan tersebut kepada pengunjungnya, sebenarnya platform blogger secara default sudah menyediakannya. 

Namun, apabila kotak penulis yang telah tersedia secara default pada platform blogger dipasang pada blog/website yang Anda miliki dan dirasa kurang puas dan menarik akan desainnya, bisa saja sebenarnya Anda memodifikasi ulang desain kotak penulis bawaan platform blogger menggunakan css. Dan tentu saja, itu bagi yang sudah biasa mengutak-atik kode css. Tapi, bagi yang baru pertama kali terjun ke dunia blogger, mungkin akan merasa kesulitan.

Kotak Penulis Blogger

Anda yang baru terjun ke dunia blogger, untuk membuat kotak profile penulis dibawah postingan, sudah tidak perlu bingung lagi. Kali ini, Kami akan berbagi cara membuat dan memasang kotak penulis blogger dibawah postingan menggunakan kode css dan html. Cara membuat dan memasangnya pun tidak terlalu sulit.

Berikut dibawah ini langkah-langkah untuk membuat kotak profile penulis dibawah postingan blogger menggunakan kode css dan html.

⥤ Buka Blogger ➧ Tema ➧ Edit HTML,

Pada jendela editor Edit HTML, gunakan CTRL + F pada keyboard untuk menampilkan kolom pencarian, kemudian ketik ]]></b:skin> atau </style>. Setelah kode tersebut ditemukan, salin kode dibawah ini dan letakkan tepat diatas kode yang telah disebutkan diatas.

.product {
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15);
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 160%;
    line-height: 1.8;
    font-family: "Roboto Condensed",sans-serif;
    color: #434c55;
    -webkit-tap-highlight-color: transparent;
}
.product__image {
    padding: 20px;
    text-align: center;
  
}
.product__image img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
      border: 0;      
}
.product__description {
    padding: 20px;
    vertical-align: middle;
    border-top: 1px solid rgba(67,76,85,0.1); 
}
.product__description h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
    color: #193d5a;
    font-size: 160%;
    margin: 0 0 20px;
    font-family: inherit;
    line-height: 1.1;        
}
.product__description a {
  text-decoration:none;
}
.product__description p {
    margin-bottom: 0;
    margin: 0 0 20px;
}
.product__description em {
    display: block;
    font-size: 100%;
    color: #687179;
    font-style: normal;
    line-height: 1.8;
}
.product__cta {
    padding: 20px;
    padding-top: 0;
}
.product__cta .btn:visited {
    color: #fff;
}
.post__content a:visited {
    color: #708eab;
}
.product__cta .btn {
    font-weight: 600;
    display: block;
}
.btn-lg  {
    padding: 12px 25px 13px;
    font-size: 100%; 
    font-size: 1.6rem;
    border-radius: 3px;
    line-height: 1.3333333;
    font-weight: 600;
}
.btn {
      margin-bottom: 0;
    font-weight: normal; 
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 100%; 
    line-height: 1.428571429;
    border-radius: 3px; 
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
    border: none;
    padding-bottom: 8px; 
    -webkit-transition: background-color 0.1s linear,color 0.1s linear; 
    -o-transition: background-color 0.1s linear,color 0.1s linear;
    transition: background-color 0.1s linear,color 0.1s linear;
    font-family: "Roboto Condensed", sans-serif;
}
.btn-apply {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
@media (min-width: 600px){
.product {
    display: table;
}
.product__description {
    padding-left: 0;
    border-right: 1px solid rgba(67,76,85,0.1);
    border-top: none;
}
.product__image {
    width: 200px;
}
.product>* {
    display: table-cell;
}
.product__cta {
    padding-top: 20px;
    width: 175px;
}
}

Setelah kode css tersebut terpasang, lanjutkan dengan mencari kode <data:post.body/> pada kolom pencarian edit HTML. Biasanya kode tersebut akan ditemukan lebih dari 1 (satu), temukan kode <data:post.body/> yang ke 2 (dua) atau ke 3 (tiga). Setelah, Anda menemukannya, salin kode dibawah ini dan letakkan tepat dibawah kode tersebut.

<div class="product ">
    <div class="product__image"><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRr8TRZZCXj2CY5QOqRAUEinVY_yna0PWObX4HhLNPjg4xxUenwmK0YSQ8NuLoYrbwtquAbhyphenhyphenYNvIqcBfPIGSKEoFUFmEvK8DY1xCmwZpQZmU3KREDNQdLasGpcN4w3Y_WyJcU3QwaSdVN/s1600/Avatar+Golodog+Udud.png" alt="+62-878-0360-1031"></div>
    <div class="product__description">
      <h4><a href="https://golodogudud.blogspot.com/" data-position="" target="_blank">GOLODOG UDUD</a></h4>
      <p>url : golodogudud.blogspot.com</p>
        <p><em>Media Pemasaran Internet</em></p>
    </div>
  <div class="product__cta"><a data-position="top_5_button_pl_product" href="https://golodogudud.blogspot.com/" target="_blank" class="btn btn-lg btn-apply">About Us</a></div>
</div>

Setelah kode css dan html terpasang, lanjutkan dengan memilih button "Save" untuk melakukan perubahan pada tema blogspot yang Anda miliki. Anda juga bisa memodifikasi desain tampilan kotak penulis blogger dengan mengutak-atik kode css diatas sesuai dengan yang diinginkan.