Membuat Tabel Keterangan Responsive pada Postingan Blog

Kali isi saya ingin berbagi cara membuat TABEL, sebenernya saya juga bingung mau memberi nama apa pada TABEL yang sebenernya iseng saya buat. TABEL ini sebenernya terinspirasi setelah saya melihat sebuah TABEL keterangan pada sebuat website jual Template.

Lalu saya mencoba membuatnya dengan versi yang sangat sederhana agar mudah diterapkan oleh Sobat Blogger semuanya. Sebenernya TABEL ini bisa Sobat aplikasikan sesuai kebutuhan dan tidak harus seperti apa yang saya buat. Untuk lebih jelasnya silahkan lihat demo dibawah ini

DEMO

Dan jika Sobat ingin menerapkan, silahkan ikuti tutorial dibawah ini :

1. Silahkan simpan kode dibawah ini setelah kode <style> dan atau <style type='text/css'>

/* Demo Tabel */
#main .dgz-tabel ul{margin:5px 0;list-style:none;background:#FAFAFA;border:1px solid #FDD761;padding:3px}
#main .dgz-tabel ul h3{position:relative;margin:0;background:#FDD761;color:#555;font:normal 700 16px sans-serif;padding:15px;overflow:hidden}
#main .box_content{text-align:justify;padding:15px;background:#fff;color:#595959;margin:1px;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
#main .dgz-tabel ul li{position:relative;margin:0 0 5px;padding:0 5px;line-height:25px;color:#1B1B1B;font-size:13px;font-weight:600;overflow:hidden}
#main .dgz-tabel ul li b{position:relative;font-weight:600;background:#FDD761;color:#444;line-height:25px;font-size:18px;display:block;padding:5px 10px;margin-right:6px;float:left;min-width:20px;border-right:2px solid #FAFAFA;overflow:hidden;text-align:center;white-space:nowrap;margin-left:-5px}
#main .dgz-tabel ul li a{position:absolute;font-weight:300;color:#444;line-height:25px;font-size:18px;padding:5px 10px;overflow:hidden;width:100%;background:#EEEFF0}
@media (max-width: 640px){
#main .box_content{position:relative;float:none;padding:5px;width:100%;overflow:hidden;}
#main .dgz-tabel ul li{position:relative;float:none;width:100%;overflow:hidden;}
#main .dgz-tabel ul li b,#main .dgz-tabel ul li strong{display:inline-block;font-size:15px;float:none;width:15%}
#main .dgz-tabel ul li a{display:inline-block;float:none;width:85%;font-size:15px;}
}

2. Kemudian letakkan kode dibawah ini didalam kotak Postingan Blog pada menu HTML dan bukan Compose

<div class="dgz-tabel">
<ul><h3>FEATURED</h3>
<div class="box_content">
<li><b>1</b><a href="Link Tester" rel="nofollow" target="_blank" title="Responsive">Responsive</a> </li>
<li><b>2</b><a href="Link Tester" rel="nofollow" target="_blank" title="Google Testing Tool Validator">Google Testing Tool Validator</a> </li>
<li><b>3</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Mobile Friendgz-tabely">Mobile Friendgz-tabely</a> </li>
<li><b>4</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Custom 404 Page">Custom 404 Page</a> </li>
<li><b>5</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Fast Loading">Fast Loading</a> </li>
<li><b>6</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Seo Friendgz-tabely">Seo Friendgz-tabely</a> </li>
<li><b>7</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Ads Ready">Ads Ready</a> </li>
<li><b>8</b> <a href="Link Tester" rel="nofollow" target="_blank" title="HTML5 and CSS3">HTML5 and CSS3</a> </li>
<li><b>9</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Social Sharing">Social Sharing</a> </li>
<li><b>10</b> <a href="Link Tester" rel="nofollow" target="_blank" title="Clear Design">Clear Design</a> </li>
</ul>
</div>
</div>

Catatan :
Ganti tulisan yang saya tandai Link Tester dengan link tester milik sobat

Selesai...mudah bukan? Semoga bermanfaat dan jangan lupa share ya Sob !!!!

Cara Membuat Content Pagination di Blogger seperti Wordpress

Content Pagination berfungsi membagi sebuah konten menjadi beberapa halaman dengan menampilkan pager angka sesuai banyak halaman yang dibuat ( umumnya tampilan ini banyak digunakan oleh Template berplatform Wordpress ) sehingga memudahkan navigasi pengunjung untuk melihat konten selanjutnya.

Content Pagination yang diterapkan di blogger ini menggunakan Javascript, tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog. Ketika pengunjung mengklik pager untuk membaca konten selanjutnya, maka selain konten yang berganti juga otomatis mereload halaman sehingga otomatis konten berikut iklan yang ada di halaman juga ikut berganti.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan gunakan ( masukkan ) kode berikut ini pada postingan mode HTML untuk membuat postingan dengan content pagination ini.

 <style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Kontent untuk halaman 1 tulis di sini......
</div>

<div id="page2">
Kontent untuk halaman 2 tulis di sini......
</div>

<div id="page3">
Kontent untuk halaman 3 tulis di sini......
</div>

<div id="page4">
Kontent untuk halaman 4 tulis di sini......
</div>

<div id="page5">
Kontent untuk halaman 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Silahkan sesuaikan pembagian konten halaman dan tombolnya sesuai keinginan. Namun Sobat juga bisa menyimpan style CSS dan javascript-nya pada edit HTML agar lebih simple ketika membuat postingannya.

Semoga bermanfaat.

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

Widget Popularpost default atau bawaan Blogger umumnya kurang keren atau sering dari kita ingin menggantinya namun tidak tahu apa yang harus dilakukan, terutama bagi newbie yang belum begitu mengenal koding. Widget Popularpost yang umum dibagikan pada template template gratis juga kebanyakan dengan tampilan yang kurang menarik.

Demo
Click here

Nah…pada kesempatan kali ini CrepictDGZ coba memberikan tips bagaimana cara mengganti Widget Popularpost bawaan template dengan Widget Popularpost seperti pada gambar diatas...

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

1. Sobat harus memperhatikan syarat berikut ini :

Hapus kode CSS Widget Popularpost yang sebelumnya terpasang pada template Sobat sebelum menggantinya dengan Widget Popularpost dari CrepictDGZ.

2. Setelah menghapus, silahkan ganti dengan CSS Widget Popularpost dibawah ini :

/* CSS Popularposts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;counter-reset:popcount;background: linear-gradient(to right, #2B0C93 0px, #A54098 56%, #F84272 100%) repeat scroll 0% 0% transparent;z-index:999;transition:all .4s ease-in-out;}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0;line-height:1.2em;}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img { width: 318px;height: auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {margin:0;width:100%;height:180px;overflow:hidden;display:block;}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(45,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(45,62,80,.6);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s;text-align:justify;}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}

3. Simpan kode Javascript dibawah ini sebelum kode</body>

<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});
//]]>
</script>

4.Pastikan settingan Widget Popularpost seperti dibawah ini

5.Simpan Template, dan lihat hasilnya

Tentu sedikit banyak akan ada permasalahan dibalik semua tutorial yang saya berikan, dan jika ada pertanyaan seputar tutorial diatas silahkan isi kolom komentar yang sudah saya sediakan dibawah…

Demikian dan dan semoga bermanfaat..

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :

 /* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 

Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog#pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post#labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema#org/BreadcrumbList'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if></b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 

3. Terakhir, simpan template...

Selamat mencoba dan semoga bermanfaat.

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Salam Blogger, Kali ini CREPICTDGZ mau berbagi tips Bagaimana Cara Membuat atau Mengganti Header Blog Menjadi 2 Kolom dan tentunya Responsive. Mengganti yang dimaksud disini adalah HEADER BLOG yang sebelumnya hanya terdiri 1 kolom yaitu Judul dan Diskripsi blog saja, Nah… disini kita akan menggantinya menjadi 2 kolom yaitu KIRI yang terdiri Judul dan Header Blog dan KANAN umumnya sebagai kolom IKLAN atau ADSENSE.

Pada Tahap awal Sobat harus mencari kode CSS dan HTML yang terkait dengan HEADER BLOG yang ingin Sobat ganti pada Template sebelumnya…..lalu menghapusnya.

DISINI yang WAJIB Sobat Newbie lakukan adalah BACKUP TEMPLATE sebelum melakukan oprek kode CSS dan HTML dalam hal ini sambil belajar koding Newbie butuh ketelitian dan kehati-hatian  …

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Langkah 1

Cari kode CSS yang berkaitan dengan HEADER BLOG umumnya kode CSS seperti berikut ( #header atau .header dan pada body#layout #header dst) termasuk kode CSS yang ada pada Media Query dan jika sudah ketemu HAPUS semuanya….!

Langkah 2

Cari kode seperti dibawah ini atau mirip ( kode HTML Header Blog ini panjang )

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
...........
...........
...........
</b:section>
</div>

Jika sudah ketemu silahkan dihapus semuanya dan GANTI dengan kode yang ada dibawah ini.

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
  <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='CREPICTDGZ (Header)' type='Header' version='1'>
      <b:widget-settings>
        <b:widget-setting name='displayUrl'/>
        <b:widget-setting name='displayHeight'>0</b:widget-setting>
        <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
        <b:widget-setting name='useImage'>false</b:widget-setting>
        <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
        <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
        <b:widget-setting name='displayWidth'>0</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
                <b:include name='title'/>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
                <b:include name='title'/>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
          <b:include name='title'/>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
        <span itemprop='name'><data:title/></span>
      </a>
    </h2>
      </b:if>
</b:includable>
    </b:widget>
  </b:section>
  <b:section class='header-right section' id='header-right' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='clear'/>

Langkah 3

Kita mengganti semua kode CSS yang sudah kita hapus pada Langkah 1 sebelumnya :

1. Letakkan kode dibawah ini sebelum kode ]]></b:skin>

#header-wrapper {margin:20px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}

2. Letakkan kode dibawah ini dibawah kode <b:template-skin>

body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {width:30%;}
body#layout #header-right {width:70%;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}

3. Kemudian letakkan kode dibawah diatas kode</head>

/* CSS Header Wrapper */
#header-wrapper {margin:30px auto;padding:0;overflow:hidden;max-width:920px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;color:#333;margin:0;}
#header h1, #header h2, #header p {font-family:Roboto;font-size:240%;font-weight:700;color:#333;text-transform:uppercase;}
#header a {color:#333;text-decoration:none;transition:all 0.3s ease-out;}
#header a:hover {color:#398dcc;}
#header .description {font-family:Roboto;font-size:100%;font-weight:400;color:#666;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}
.header-right img {display:block;}
.Header h1,.Header h2 {margin-bottom:0;}

@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:20px auto;}}

@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#header-wrapper{padding:0;margin:20px auto;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header .description {font-size:100%;line-height:1.5;}}

Langkah 4

Save atau Simpan Template… Selesai

Demikian Tutorial Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive, Jika permasalah terkait dengan tips diatas silahkan isikan problem serta keluhan pada kotak komentar atau hubungi Admin melalui Kontak Form yang tersedia….Terima kasih , semoga bermanfaat….

Jangan lupa share ya…Sob