Modifikasi well-known Post untuk Template Gallery Yang wajib Kita Tau

in No Comment
belajar ngeblog, blogging tips http://cahyamenethil.files.wordpress.com/2010/11/dewikeadilan.jpg http://cahyamenethil.files.wordpress.com/2010/11/dewikeadilan.jpg WPGrosir.Com 0 http://wpgrosir.com/2016/03/modifikasi-well-known-post-untuk-template-gallery-yang-wajib-kita-tau.html#respond
1986




Apa kabar maniak Blogger, bertemu kembali dengan WPGrsoir.Com, pusatnya informasi seputar Tips Blogging dan Bisnis Online, kali ini kita akan membahas mengenai Modifikasi well-known Post untuk Template Gallery, yang pastinya bermanfaat sekali buat kita dalam dunia blogging dan jualan online, jangan lupa silahkan di pelajari dengan pelan pelan supaya setiap isinya terserap dengan sempurna dan langsung action aja ya, biar Bisa langsung di nikmati pelajaran seputar Modifikasi well-known Post untuk Template Gallery dari WPgrosir.Com ini.

Modifikasi well-known Post untuk Template Gallery

Saya akan mengulas satu persatu fitur yang ada di template demo sebelum nanti saya bagikan, sehingga diharapkan kita Bisa menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini yaitu well-known Post, suatu widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. dengan cara default widget well-known Post ini sudah menarik Sebab sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu Bisa langsung dipasang di blog yang lebih banyak memakai artikel daripada gambar, bila widget default itu dipasang di blog yang bertipe gallery sepertinya kurang cocok.
TEMPLATE GALLERY 
DEMO
 kali ini saya mencoba untuk memodifikasi widget tersebut supaya cocok dipasang di blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. bila kita tertarik, berikut ini Tips membuatnya :
  1. Login ke Blogger dengan akun kita
  2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
  3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :

    .PopularPosts .widget-content ul li background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none
    .PopularPosts ulpadding:5px 0
    .PopularPosts .item-thumbnail imgwidth:110px;height:110px;padding:11px;margin:0
    .PopularPosts .item-contentposition:relative;float:left;margin:0
    .PopularPosts .item-title afont-size:11px;coloration:#fff;display:block;padding:0 5px;float:left;width:122px
    .PopularPosts .item-title:hoveropacity:1;-moz-opacity:1;filter:alpha(opacity=100)
    .PopularPosts .item-thumbnailfloat:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden
    .PopularPosts .item-titlebackground:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)
    Kode warna merah diatas yaitu panjang dan lebar gambar thumbnail, kita Bisa ganti dan sesuaikan dengan lebar sidebar di template, seperti yang terlihat di sidebar blog ini.
  4. setelah itu masuk ke design >> add a gadget pilih well-known Post di baris kelima.
  5. Setelah muncul halaman well-known Post, setting seperti di gambar dibawah ini :

    FAREL.ID

    Yang wajib diperhatikan yaitu centang hanya thumbnail, biarkan kotak snippet kosong tidak wajib dicentang. Judul dan jumlah post yang ingin ditampilkan terserah kita.
  6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

  • <b:widget id=’PopularPosts1′ locked=’false’ title=’well-known Posts’ type=’PopularPosts’>
    <b:includable id=’main’>
      <b:if cond=’data:title’><h2><data:title/></h2></b:if>
      <div class=’widget-content well-known-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=”http://masterteamplate.blogspot.com/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=”http://masterteamplate.blogspot.com/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 in addition to also thumbnails –>
                <div class=’item-content’>
                  <b:if cond=”http://masterteamplate.blogspot.com/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=”http://masterteamplate.blogspot.com/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>

  •  

  • Setelah ketemu, ganti dengan kode berikut ini :
    1. <b:widget id=’PopularPosts1′ locked=’false’ title=’Most Product View’ type=’PopularPosts’>
      <b:includable id=’main’>
        <b:if cond=’data:title’><h2><data:title/></h2></b:if>
        <div class=’widget-content well-known-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-content’>
                    <b:if cond=”http://masterteamplate.blogspot.com/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=”http://masterteamplate.blogspot.com/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 in addition to also thumbnails –>
                  <div class=’item-content’>
                    <b:if cond=”http://masterteamplate.blogspot.com/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=”http://masterteamplate.blogspot.com/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>

    2. Terakhir, save templates lihat hasilnya.
    Modifikasi widget well-known Post dari blogger ini tidak hanya untuk blog gallery aja, kita juga Bisa memakainya di blog yang bukan gallery seperti yang terlihat di sidebar di blog ini. Demikian tadi tutorial memodifikasi tampilan well-known Post untuk template Gallery bila masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

    http://cahyamenethil.files.wordpress.com/2010/11/dewikeadilan.jpg

    0 thoughts on “Modifikasi well-known Post untuk Template Gallery Yang wajib Kita Tau”

    Write a Reply or Comment

    Your email address will not be published. Required fields are marked *