Cara membuat widget hanya tampil dihalaman posting

Cara membuat widget hanya tampil dihalaman posting adalah kebalikan dari posting saya terdahulu yaitu cara supaya widget hanya tampil di homepage atau beranda saja, kode yang digunakan pun tidak jauh berbeda dengan kode sebelumnya. Fungsinya pun tidak jauh berbeda dengan trik sebelumnya, yaitu memperingan loading suatu halaman blog. Cara membuat widget hanya tampil dihalaman posting adalah sbb :

• Log in ke blogger


• Masuk ke Rancangan


• Edit HTML - Centang kotak Expand Template Widget


• Selanjutnya cari nama widget yang ingin disembunyikan, contoh dibawah ini adalah widget saya dengan judul follow.

<b:widget id='HTML1' locked='false' title=Follow Me' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

• Selanjutnya tambahkan kode berwarna merah seperti kode diatas, kode berwana biru adalah nama dari widget yang saya gunakan dan akan disembunyikan dari homepage.


• Terakhir adalah simpan template.

Cara membuat widget hanya tampil di homepage

Cara membuat widget hanya tampil pada homepage atau beranda, widget adalah salahsatu attribut blog yang sering dipasang oleh para blogger untuk mempercantik blognya, namun terkadang terlalu banyak widget yang dipasang dapat memperlambat proses load suatu halaman blog, oleh karena itu para blogger mengakalinya dengan cara memasang suatu widget hanya tampil pada halaman beranda atau homepage ataupun sebaliknya yaitu suatu widget hanya tampil pada halaman posting saja.

Tertarik untuk mencobanya, silahkan ikuti langakah-langkah dibawah ini untuk memasang suatu widget hanya tampil pada halaman utama atau beranda saja.

• Log in ke blogger

• Masuk ke Rancangan

• Edit HTML - Centang kotak Expand Template Widget supaya semua kode widgetnya tampil

• Setelah itu cari nama widget yang sobat pasang, seperti kode dibawah ini

<b:widget id='HTML1' locked='false' title='Follow Me' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

• Nama widget yang saya tampilkan hanya pada homepage adalah Follow Me! pada kode diatas berwarna biru.

• Selanjutnya masukan kode berwana merah seperti kode diatas.

• Terakhir adalah simpan template dan silahkan lihat hasilnya.

Cara mempercantik Blockquote

Cara mempercantik atau merubah Blockquote default blogger. Blockquote biasanya digunakan oleh para blogger untuk memberikan kutipan pada kode atau kesan berbeda pada suatu postingan sehingga pembaca dapat membedakan dengan mudah mana kode dan mana yang tulisan biasa.

Namun terkdang kita juga sering menggunakan blockquote untuk hal lain yang kita inginkan. Contoh blockquote bisa dilihat pada blog ini dalam setiap kode yang dipostingkan biasanya saya mengaplikasikan blockquote supaya user tidak bingung saat membedakan mana kode yang dimaksud untuk digunakan.

Cara mempercantik blockquote adalah sbb :

• Log in ke blogger


• Masuk ke Rancangan - Edit HTML


• Setelah itu cari kode ]]></b:skin>


• Setelah ketemu kode ]]></b:skin> silahkan copy dan paste kode dibawah ini lalu letakan tepat diatas kode ]]></b:skin> tadi

.post blockquote {

background:#F9F9F9 url(http://lh4.ggpht.com/_7Y9pl24WpQY/S8Tb4-HIjdI/AAAAAAAADXU/XN-0YdNmIBI/image_thumb%5B26%5D.png) no-repeat scroll 5px 5px;

color:#3B0B0B;

border:2px outset #E6E6E6;

margin:10px;

padding:10px 10px 10px 40px;

}

• Setelah itu simpan dan silahkan lihat hasilnya.

Mengganti posting lama dan posting baru dengan judul posting

Cara mengganti posting lama dan posting baru dengan judul posting, tips ini untuk menarik pengunjung melihat postingan lama atau postingan baru dengan cara memperlihatkan judulnya. Sehingga pengunjung akan melihat posting lama ataupun baru ketika melihat judul postingan kita yang dianggapnya bermanfaat atau berguna.

Misalnya judul postingan kita Mari Berkomunitas Di Faceblog yang mereka belum tahu apa sih isinya, sehingga mereka meng-klik dan membacanya. Untuk merubah postingan lama dan postingan baru dengan judul postingan kita yang sebelumnya cukup mudah, silahkan sobat ikuti langkah-langkah dibawah ini untuk membuat posting lama dan posting baru dengan judul post.

• Log in ke blogger


• Masuk ke Rancangan


• Pada elemen halaman pilih tambah gadget dan pilih HTML/JavaScript


• Setelah itu copy dan paste kode dibawah ini kedalam kotak HTML/JavaScript tersebut

<style type="text/css">

#blog-pager-newer-link {font-size:14px;width:200px;float:left; text-align:left;}

#blog-pager-older-link {font-size:14px;width:200px;float:right; text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

});

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link:first").text();

$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

});

});

</script>

• Setelah itu klik simpan.


• Selanjutnya masuk pada tab Edit HTML dan jangan lupa centang kotak expand widget template


• Setelah itu cari kode </head> 


• Setelah ketemu kode </head> selanjutnya copy dan paste kode dibawah ini tepat diatas kode </head> tersebut

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

• Selanjtnya klik simpan dan silahkan sobat lihat hasilnya.


• Untuk contohnya silahkan sobat lihat di sini

Menghilangkan didukung oleh google pada custom search

Cara menghilangkan Didukung oleh Google (Powered by Google) pada Google Custom Search, jika sobat blogger menggunakan widget asli custom search dari blogger tentu sobat akan sering melihat Didukung oleh Google dibawah widgetnya.

Google

Lalu bagaimana cara menghilangkan tanda tersebut pada Google Custom Search ini, mari ikuti langkah-langkah dibawah ini untuk menghilangkannya

• Log in ke blogger


• Masuk Ke Rancangan - Edit HTML (centang kotak expand widget template)


• Cari kode ]]>


• Setelah ketemu, letakan kode dibawah ini tepat diatasnya

.gsc-branding-text, .gsc-branding-img-noclear,.gsc-branding-img {

display:none;

}

• Setelah itu simpan deh.

Membuat tanda administrator pada komentar

Cara membuat tanda Administrator pada kotak komentar, tanda administrator atau tanda komentar pemilik blog sangatlah berguna untuk membedakan mana komentar pemilik dan mana komentar pengunjung blog.

Cara membuat tanda administrator pemilik blog adalah sbb :

• Log in ke blogger

• Masuk ke Rancangan - Edit HTML - centang kotak Expand template widget

• Cari kode ]]></b:skin> (gunakan opsi CTRL + F untuk mempermudah pencarian)

• Setelah ketemu kode tersebut, copy dan paste kode dibawah ini tepat diatasnya.

/*credit messages*/

.creditmessages {

text-align: right;

color: #000;

padding-right: 5px;

}

.creditmessages a:link{

color: #000;

font-style:bold;

}

.creditmessages a:hover{

color: #F90;

font-style:bold;

border-bottom: solid 1px

}

.creditmessages a:visited{

color: #000;

}

• Selanjutnya cari kode <data:comment.body/>

• Setelah ketemu, copy dan paste kode dibawah ini lalu letakan tepat dibawah kode diatas.

<div class='creditmessages'>

comment by : &gt;

<span><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span>

</div>

• Selanjutnya simpan template, dan silahkan sobat lihat artikel yang ada komentarnya untuk melihat apakah sudah jadi atau belum.

Cara membuat scroll pada daftar komentar

Daftar komentar yang terlalu banyak mungkin sedikit mengganggu, dan akan lebih cantik jika daftar komentar yang banyak tersebut diberi fungsi scroll agar semakin menarik, lalu bagaimana cara membuat scroll pada daftar komentar tersebut?

Cara membuat scroll pada daftar komentar adalah sbb

1. Log In ke blogger

2. Masuk ke Rancangan

3. Edit HTML (centang kotak Expand Template Widget)

4. Cari kode yang mirip denga kode dibawah ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

5. Tambahkan kode dibawah ini tepat diatasnya

<div style='overflow:auto; width:ancho; height:650px;'>

6. Lalu scroll ke bawah lagi dan tambahkan kode </div>

7. Sehingga kodenya menjadi seperti dibawah ini

<div style='overflow:auto; width:ancho; height:650px;'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

          <b:loop values='data:post.comments' var='comment'>

            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

              <a expr:name='data:comment.anchorName'/>

              <b:if cond='data:blog.enabledCommentProfileImages'>

                <data:comment.authorAvatarImage/>

              </b:if>

              <b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

              <b:else/>

                <data:comment.author/>

              </b:if>

              <data:commentPostedByMsg/>

            </dt>

            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

              <b:if cond='data:comment.isDeleted'>

                <span class='deleted-comment'><data:comment.body/></span>

              <b:else/>

                <p>

                  <data:comment.body/>

                </p>

              </b:if>

            </dd>

            <dd class='comment-footer'>

              <span class='comment-timestamp'>

                <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>

                  <data:comment.timestamp/&gt;

                </a>

                <b:include data='comment' name='commentDeleteIcon'/>

              </span>

            </dd>

          </b:loop>

        </dl>

</div>

8. Kode paling atas "650" adalah tinggi kotak scrollnya, silahkan sesuaikan sesuai kebutuhan

9. Simpan template

Cara membuat komentar admin berbeda dengan pengunjung

Komentar admin tentunya harus memiliki perbedaan dengan pengunjung, itu berguna supaya pengujung bisa membedakan komentar admin dengan komentar dari visitor blog kita,lalu bagaimana cara membuat komentar admin berbeda dengan komentar pengunjung blog kita? caranya adalah sbb

1. Log in ke blogger

2. Masuk ke Rancangan

3. Edit HTML (centang kotak Expand Template Widget)

4. Cari kode ]]></b:skin> lalu letakan kode dibawah ini diatasnya

.author-comments {

Color: #0000ff;

background: #ffffff;

border: 2px solid #0000ff;

padding: 3px;

}

5. Setelah itu cari kode yang mirip dengan kode dibawah ini

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

          <b:loop values='data:post.comments' var='comment'>

            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

              <a expr:name='data:comment.anchorName'/>

              <b:if cond='data:blog.enabledCommentProfileImages'>

                <data:comment.authorAvatarImage/>

              </b:if>

              <b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' ><data:comment.author/></a>

              <b:else/>

                <data:comment.author/>

              </b:if>

              <data:commentPostedByMsg/>

            </dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='author-comments'>

<p><data:comment.body/></p>

</dd>

<b:else/>

            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

              <b:if cond='data:comment.isDeleted'>

                <span class='deleted-comment'><data:comment.body/></span>

              <b:else/>

                <p>

                  <data:comment.body/>

                </p>

              </b:if>

            </dd>

</b:if>

            <dd class='comment-footer'>

              <span class='comment-timestamp'>

                <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>

                  <data:comment.timestamp/>

                </a>

                <b:include data='comment' name='commentDeleteIcon'/>

              </span>

            </dd&gt;

          </b:loop>

        </dl>

      </div>

6. Kode warna hijau dan bergaris bawah pada kode diatas adalah kode yang harus ditambahkan

7. Simpan template

8. Selamat mencoba, semoga berhasil sobat