Cara Membuat Blockquote Keren Di Blog Dengan Css

Bagaimana cara membuat dan memodifikasi tampilannya? Oke langsung saja, berikut ini adalah caranya :

Pertama kita akan memodifikasinya terlebih dahulu

• Pertama, masuk ke dasboard blog kalian
• Buka Template, pilih Edit HTML
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> (Jika sudah ada kode yang mirip, hapus kode tersebut terlebih dahulu, saya sarankan back up dulu template lama kalian)

.post blockquote{max-height:100px; overflow:auto; background: #0e0e0e; font-style:normal; border:1px solid #006acc;margin:10px;padding-left:15px;padding-bottom:8px;padding-top:8px;color:#fff; border-radius:4px; transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;}

.post blockquote:hover {box-shadow:0 0 13px #000;}

.post blockquote p{margin:.75em 0; padding-right:5px; padding-left:15px;background:rgba(153,153,153,0.07);padding-bottom:8px;padding-top:8px;}

Keterangan :

Ganti kode yang berwarna KUNING dengan ukuran tinggi maximal blockquote yang kalian inginkan

Hapus kode yang berwarna HIJAU jika kalian ingin menghilangkan scroll blockquote

Ganti kode yang berwarna UNGU dengan kode warna background blockquote yang kalian inginkan

Ganti kode yang berwarna BIRU dengan ukuran border blockquote yang kalian inginkan

Ganti kode yang berwarna ORANGE dengan jenis border blockquote yang kalian inginkan

Ganti kode yang berwarna PINK dengan kode warna border blockquote yang kalian inginkan

Ganti kode yang berwarna AQUA dengan kode warna teks blockquote yang kalian inginkan

• Terakhir tinggal disimpan

Selesai, sekarang cara membuatnya. Mudah saja, saat membuat postingan atau laman, tinggal kita block teks yang ingin kalian masukkan blockquote, kemudian klik tanda kutip biru di bagian atas satu grup dengan "Link, Insert Image, Insert a Video, dan lainnya"

Read More

Optimasi Widget Popular Posts Blogger

Popular post adalah salah satu widget penting yang banyak digunakan, dan sekarang www.mestiqui.com akan membagikan bagaimana mengoptimasi widget popular posts bawaan blogger sehingga menjadi lebih seo friendly dengan memberi title tag di link dan gambarnya.

Dengan memberi title link dan title di gambar popular post, maka cara ini juga mengatasi "Website Links" popular post di chkme.com. Cara memberi title link dan juga title images di popular post sendiri tidak begitu sudah, tinggal utak utik sedikit kode saja.

Langsung saja memberi title link dan title images popular post agar popular post lebih seo friendly, simak caranya dibawah ini.

Optimasi Widget Popular Posts Blogger

1. Pergi ke Template > BackUp template terlebih dahulu untuk mengantisipasi > Edit HTML

2. Klik Jump to widget dan pilih PopularPost1

3. Setelah anda Jump ke widget popular post, maka akan  terlihat kode seperti dibawah ini, dan hapus kode tebal yang berwarna merah agar Valid HTML5

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

4. Selanjutnya tinggal memberi title tag dan juga title images popular post, dengan menambahkan kode berwarna biru.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h3><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>

5. Simpan template Anda.

 Dengan menambahkan title tag dan title images serta membuat widget popular post ini Valid HTML5, maka blog andapun akan lebih SEO Friendly. Dan itulah Optimasi Widget Popular Posts Blogger, jika ada pertanyaan silahkan berkomentar.

Read More