Desain Website - Blog - Editing Photo: Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Rabu, 05 Januari 2011

Cara Membuat Halaman Blog Melipat

17.57 Rifky dan Dian No comments

Trik blogger kali ini share tentang cara membuat halaman blog melipat,dan uniknya bila kursor mouse berada dipojok halaman maka halaman tersebut akan melipat seperti contoh pada blog ini.

Pada Lipatan halaman ini bisa dipasang RSS FEED atau apa saja yang sobat ingin pasang di dalam lipatan ini.

Untuk membuat halaman blog seperti ini caranya sangat mudah, sobat penasaran mau membuatnya?

Mari ikuti langkah2 berikut:

1. Login ke blogger >> Design >> Edit HTML >> Expand widget template

2. Cari kode <b:skin><![CDATA[

Dan letakkan kode berikut di atasnya:

<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.js

' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$("#pageflip").hover(function() {

$("#pageflip img , .msg_block").stop()

.animate({width: '307px',height: '319px'}, 500);

} , function() {

$("#pageflip img").stop()

.animate({width: '50px',height: '52px'}, 220);

$(".msg_block").stop()

.animate({width: '50px',height: '50px'}, 200);

});

});

</script>

3. Lalu cari lagi kode ]]></b:skin>

Dan letakkan kode berikut tepat di atasnya:

#pageflip {

position: relative;

}

#pageflip img {

border: none;

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .msg_block {

width: 50px; height: 50px;

position: absolute;

right: 0; top: 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbGrmo55NJnN04dLmsNNLT7FGcoh9KwwYW46m9W5QIldch6We2hF5ZBXCU5iKFDJP45PbUaGBG0x_FsyHJAFJHHZ0Og0J014-sMNzcnynbR81xVj-v_ZtmiKYwkR5CsaMDO4Ja0eV6F83/) no-repeat right top;

text-indent: -9999px;

}

4. Cari kode <body>

Dan letakkan kode berikut di bawahnya:

<div id='pageflip'>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=TrikBlogger' target='_blank'>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyFwVBSv5QoOQGyzlpXui39FcrFthYMrOpXXYEcFcZcEQpAC3EyUhkh9ypvALRJ44qJmgctjkQRce_5rhstNswU-4Z7yTL-CD0jqBKCx3wHJh_FWOhv_V2QF3nIA616mmpJJOYvd_-MDU/'/>

<span class='msg_block'/>

</a>

</div>

Catatan ganti kode yang berwarna merah dengan Link yang anda inginkan. Saran saya Link RSS atau

link berlangganan

5. Kemudian simpan template sobat

Untuk mengganti gambar background URL yang berwarna merah, sobat bisa mengganti dengan URL gambar yang sobat inginkan

Selesai sudah cara membuat halaman blog melipat dan lihat hasilnya bagaimana....baguskan?

Selamat mencoba

Sumber script dari http://t4belajarblogger.blogspot.com/

Membuat Blogger Dengan Tampilan Mobile

00.36 Rifky dan Dian No comments

Salam persahabatan, trik blogger kali ini sedikti share tentang membuat blogger tampilan mobile dengan menggunakan Mippin Mobilizer

Mippin Mobilizer merupakan salah satu solusi untuk memperingan suatu website / blog jika dibuka menggunakan ponsel. Mippin Mobilizer ini akan mengubah suatu web / blog menjadi versi mobile atau mobile view yang menjadikan suatu web / blog tersebut ringan dan cepat diakses.

Walaupun dengan semakin canggihnya teknologi ponsel saat ini, tapi akses internet yang kurang memadai dan biaya internet yang tidak murah, maka mobile view tetap diperlukan untuk itu.

Mippin Mobilizer menggunakan feed suatu web / blog dan akan merubahnya menjadi situs versi mobile yang ringan dan cepat dan support dengan berbagai macam ponsel saat ini.

Kalau belum mempunyai account dari Mippin, silahkan daftar dulu di Mippin Mobilizer.

Setelah account Mippin sudah jadi, silahkan login dan pada menu Mippin Mobilize akan ada kolom untuk mengisi alamat URL web/blog (gunakan URL atau Atom feed), silahkan isi dan jika sudah selesai klik dahulu tanda panah disebelah kanannya

Pilih salah satu dari 2 Layout yaitu “List View” atau “Gallery”, preview nya bisa dilihat di sebelah kanannya.

Klik Next Step.

Mippin Mobilizer Customize

Upload logo dengan ukuran maksimum 120×30 pixel, isi site name dan atur beberapa warna tampilan

Klik Next Step.

Mippin Mobilizer Publicize

Isi unique mobile url dan buat tag dari mippin kita

Cara Membuat Website, Blog Versi Mobile via Mippin Mobilizer

Web mobile dari Mippin sekarang sudah siap

Cara Membuat Website, Blog Versi Mobile via Mippin Mobilizer

URL Mippin kita sudah jadi, dan sebagai contoh dari Mippin Mobilizer ini silahkan di lihat di :

http://mippin.com/trikblogger

http://mippin.com/ariefew

http://mipping.com/alltopgames

Dianjurkan untuk menggunakan opera mini via ponsel atau menggunakan Opera Mini Simulator

Selamat mencoba

Sumber

http://ariefew.com/

Trik Memasang Nomor Urut Komentar

07.15 Rifky dan Dian No comments

Salam persahabatan, trik kali ini yang akan saya share adalah trik memasang nomor urut pda komentar. Dengan sedikit modifikasi pada template maka tampilan komentar blog sobat akan lebih menarik dengan adanya nomor urut komentar.

Kalau di blog sobat belum ada nomor urut komentarnya, sobat bisa memasangnya dengan mengikuti tutorial di bawah ini :

Masuk ke blogger dengnan ID teman

Pilih Design >> Edit HTML

Backup terlebih dahulu sebelum sobat memulai untuk memodifikasi template,

Setelah itu cari kode ini ]]></b:skin> (biar cepat Ctrl+F)

Lalu kode di bawah ini tepat di atas kode ]]></b:skin>

.TrikBloggerKomentar{

    float: right;

    display: block;

    width: 50px;

    margin-right: 5px;

    margin-top: -35px;

    text-align: right;

    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

    font-size: 30px;

    font-weight: normal;

    }

    .TrikBloggerKomentar a:link, .TrikBloggerKomentar a:visited {color: #445566 !important; text-decoration: none !important;}

    .TrikBloggerKomentar a:hover, .TrikBloggerKomentar a:active {color: #FF9933 !important; text-decoration: none !important;}

Untuk kode yang berwarna merah di atas, silahkan sobat ganti dan sesuaikan dengan warna template blog sobat.

Untuk kode warna silahkan sobat lihat DISINI

Kemudian cari kode seperti ini

<dl id='comments-block'>

Kode di atas berbeda-beda pada tiap template, jika belum ketemu coba kode seperti di bawah ini:

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

Setelah ketemu, perhatikan penempatan kode yang berwarna hijau di bawah ini

(Intinya sobat hanya menyisipkan kode yang berwarna merah itu)

    <dl id='comments-block'>

    <script type='text/javascript'>var CommentsCounter=0;</script>

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

    <div class='' expr:id='data:comment.id'>

    <dt class='comment-author' expr:id='"comment-" + data:comment.id'>

    <a expr:name='"comment-" + data:comment.id'/>

    <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/>

    <span class='TrikBloggerKomentar'>

    <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

    <script type='text/javascript'>

    CommentsCounter=CommentsCounter+1;

    document.write(CommentsCounter)

    </script>

    </a>

    </span>

    </dt>

    <dd class='comment-body'>

    .......

    </dd>

    </div>

    </b:loop>

    </dl>

Atau untuk sebagian template (jika kode di atas tidak ada)

Cari kode seperti di bawah ini

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

    <script type='text/javascript'>var CommentsCounter=0;</script>

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

    <div class='' expr:id='data:comment.id'>

    <dt expr:class='"comment-author " + 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/>

    <span class='TrikBloggerKomentar'>

    <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

    <script type='text/javascript'>

    CommentsCounter=CommentsCounter+1;

    document.write(CommentsCounter)

    </script>

    </a>

    </span>

    </dt>

    <dd expr:class='"comment-body " + data:comment.commentAuthorClass' 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/>

    <span class='interaction-iframe-guide'/>

    </p>

    </b:if>

    </dd>

    </div>

TAMBAHAN:

Bagi sobat yang sudah memasang fitur replay dan komen admin berbeda dengan pengunjung dapat melihat kodenya seperti di bawah:

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

    <script type='text/javascript'>var CommentsCounter=0;</script>

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

    <div class='' expr:id='data:comment.id'>

    <dt expr:class='"comment-author " + 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/>

    <span class='TrikBloggerKomentar'>

    <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

    <script type='text/javascript'>

    CommentsCounter=CommentsCounter+1;

    document.write(CommentsCounter)

    </script>

    </a>

    </span>

    </dt>

    KODE REPLY DAN KODE KOMENTAR ADMIN BIASANYA DISINI

    <dd expr:class='"comment-body " + data:comment.commentAuthorClass' 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/>

    <span class='interaction-iframe-guide'/>

    </p>

    </b:if>

    </dd>

    </b:if>

    </div>

Setelah selesai simpanlah template sobat

Selamat mencoba dan jangan lupa komennya

Trik Untuk Menampilkan Widget Pada Halaman Tertentu

09.13 Rifky dan Dian No comments

Trik blogger kali ini memberikan suatu trik untuk menampilkan widget pada halaman tertentu. Sebenarnya trik ini sudah lama sekali, tapi mungkin masih banyak yang belum tahu tentang trik untuk menampilkan widget pada halaman tertentu ini.

Bagaimana Anda tertarik untuk mencobanya?

Berikut tutorialnya:

Menampilkan Widget Hanya di Homepage

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

..........................

</b:if>

Menampilkan Widget selain di Homepage

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

.....................................

</b:if>

Menampilkan Widget hanya di Archivepages

<b:if cond='data:blog.pageType == "archive"'>

......................................

</b:if>

Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != "archive"'>

....................................................

</b:if>

Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == "item"'>

............................................

</b:if>

Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != "item"'>

....................................

</b:if>

Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == "static_page"'>

..................................

</b:if>

Menampilkan widget selain di staticpages

<b:if cond='data:blog.pageType != "static_page"'>

............................

</b:if>

Menampilkan widget pada URL Postingan Tertentu

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

.........................................

</b:if>

Catatan : Pada "alamat posting", ganti dengan url postingmu

Menampilkan widget selain di URL postingan tertentu

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

................................................

</b:if>

Catatan : Pada "alamat posting", ganti dengan url postingmu

Sekarang Cara menaruh kodenya dengan susunan sebagai berikut :

Misal Judul Gadget yang ingin disembunyikan adalah "translator"

Maka kode keseluruhan pada templatenya adalah:

<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>

    <b:includable id='main'>

    Masukkan kode penyembunyi widget

      

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

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

      </b:if>

      <div class='widget-content'>

        <data:content/>

      </div>

      <b:include name='quickedit'/>

    Masukkan kode penutup

    </b:includable>

    </b:widget>

Misalnya kita akan menampilkan widget translator pada home page saja maka hasil keseluruhan kodenya adalah :

<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>

    <b:includable id='main'>

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

      

      <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>

Catatan kode yang berwarna merah adalah kode penyembunyi dan kode penutup

Bagaimana cukup jelas dengan tutorial ini

Selamat mencoba

Memasang Widget I Love Indonesia

23.32 Rifky dan Dian No comments

Kali ini saya share tentang cara memasang widget I Love Indonesia seperti yang ada di blog ini. Untuk sobat blogger yang tertarik untuk memasangnya di blog sobat dan tanpa panjang lebar saya menjelaskannya langsung saja cara memasang widget I Love Indonesia berikut ini :

Seperti biasa sobat login ke blogger

Pilih Design >> Add Gadget >> HTML/Javascript

Copy kode di bawah ini dan pastekan ke dalam gadget

<script language="JavaScript" src="http://trik-blogger-andreas-widget.googlecode.com/files/widget.js

" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://img38.imageshack.us/img38/8584/iluvindonesia.png")</script>

Jika sudah selesai simpan gadget sobat dan lihat hasilnya

Selamat mencoba

Cara Menambahkan Scrool Pada Label Kategori

23.25 Rifky dan Dian No comments

Beberapa waktu lalu saya pernah share tentang memasang fungsi scrool pada Arsip blog, pada kesempatan ini saya akan share tentang menambahkan fungsi scrool pada label atau kategori. Caranya sangat mudah sekali dan hanya menambahkan beberapa script saja tampilan label kategori pada blog sobat akan lebih menarik, trik ini sangat berguna untuk menghemat tempat pada blog sobat,

Ingin tahu cara untuk memasangnya? Mari ikuti langkah-langkah memasang fungsi scrool pada label atau kategori

Seperti biasa sobat harus login ke Blogger

Pilih Design → Edit HTML

Klik tulisan Download Template Lengkap

Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

Beri tanda centang pada kotak di samping tulisan Expand Widget Templates

Kemudian cari kode seperti dibawah :

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

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

<span expr:dir='data:blog.languageDirection'>

<data:label.name/>

</span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

<data:label.name/>

</a>

</b:if>

<span dir='ltr'>(<data:label.count/>)</span>

</li>

</b:loop>

</ul>

Untuk menambahkan Scroll Copy kode berikut :

dan

</div>

Dan letakkan kode tadi tepat di bawah kode berikut :

<div class='widget-content'>

dan di bawah kode ini:

<ul>

Maka hasil akan menjadi seperti di bawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

</div>

Lihat kode yang berwarna merah, itu adalah kode tambahannya.

Catatan nilai dari width: 100%px; dan height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.

Jika sudah selesai SIMPAN TEMPLATE sobat dan lihat hasilnya

Selamat mencoba semoga berhasil

Memasang Widget SMS Gratis

23.06 Rifky dan Dian No comments

Dengan teknologi internet kita bisa mendapatkan layanan SMS secara gratis yang dapat digunakan oleh siapapun dan dimana saja.

Pada postingan kali ini saya share tentang memasang widget SMS Gratis pada blogger, dengan widget ini para pengunjung blog bisa mengirim sms secara gratis. Sobat blogger bisa mencobanya sendiri di blog ini.

Untuk memasang widget Sms gratis maari kita ikuti langkah-langkah berikut ini :

1,   Login ke blogger sobat.

2.    Pilih Design/ Rancangan.

3.    Pada Tab Element Halaman >> Tambah Gadget.

4.    Pilih HTML/Java Script.

5.    Langkah berikutnya copy paste kode-kode dibawah ini.

<iframe height="350" name="I2" src="http://sms-online.web.id/widget" width="270">&lt;p&gt;not support&amp;amp;lt;br /&amp;amp;gt; &lt;/p&gt;</iframe><br/>

<center><b>Get this Widget from <a
target="_blank"
href="http://trik-blogger-andreas.blogspot.com/2010/12/memasang-widget-sms-gratis.html">here!!!</a></b></center>

6. Simpan Gadget sobat dan lihat hasilnya

Selamat mencoba dan semoga berhasil

Memasang Widget Animasi Entri Populer

22.49 Rifky dan Dian No comments

Kali ini saya akan mencoba share tentang memasang widget animasi entri populer dan menampilkannya secara slide dengan mengunakan jQuery Spy.

Untuk lebih jelasnya langsung saja ikuti tutorial berikut ini :

1.    Login ke Blogger pilih Design >> Add Gadget >> Entri Populer

2.    Simpan Gadget sobat

3.    Setelah itu klik tab Edit HTML >> centang Expand Widget Templates

4..    sebelum sobat menambahkan kode css, nackup dahulu template sobat

5.    Lalu cari kode ]]></b:skin> dan masukkan kode CSS berikut di atasnya atau sebelum kode ]]></b:skin>

#postlist-spy {

font-size: 11px;

overflow: hidden;

margin-top: 5px;

padding : 0; }

#postlist-spy ul {

width: auto;

overflow: hidden;

list-style-type: none;

padding: 0;

margin: 0; }

#postlist-spy li {

padding: 0;

margin: 0 0 5px;

list-style-type: none;

float: left;

height: auto;

overflow: hidden;

line-height: 12px;

text-indent: 0px;}

#postlist-spy li a {

margin-left: 0; }

#postlist-spy li a img {

margin-top: 0;

float: left; }

6. Cari lagi kode </head> dan masukkan code JavaScript berikut sebelum </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'><![CDATA[//><!]]></script>

Catatan :

Angka 2 yang berwarna merah pada javascript diatas adalah jumlah post yang di tampilkan, anda bisa mengubahnya hingga sesuai dengan keinginan anda, maksimal 4 dan default 2.

7. Selanjutnya cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang ada dibawahnya dengan :

<div id='postlist-spy'>

<ul class='spy'>

8. Cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode berikut setelah </ul> :

</div>

9. Simpan template sobat dan lihat hasilnya

Selamat mencoba dam semoha berhasil

sumber http://edopranata.blogspot.com/

Trik Merubah Warna Background Secara Otomatis

18.25 Rifky dan Dian No comments

Sobat blogger bosan dengan warna dasar background dan ingin mengganti warna dasar background? Trik kali ini saya coba share tentang cara menganti warna background dasar blog secara otomatis dan cara sangat mudah sekali, cuma menambahkan beberapa script saja.

Mau tahu caranya?

Mari ikuti tutorialnya :

1.    Masuk pada dasbor blog anda

2    Pilih Design >> Add widget Template >> Pilih HTML/Javascript

3.    Masukan script merubah background outomatis dibawah ini :

    <div style="overflow:auto; width:100%; height:100%;margin-top:16px">

    <script type="text/javascript">

    function bgChange(bg)

    {

    document.body.style.background=bg;

    }

    </script>

    Pilih Warna Latar

    <table border="1" width="300" height="20">

    <tr> <td

    onclick="bgChange('')" bgcolor="white">

    </td> <td

    onclick="bgChange('#FAFAD2')" bgcolor="#FAFAD2">

    </td> <td

    onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">

    </td> <td

    onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">

    </td> <td

    onclick="bgChange('#98FB98')" bgcolor="#98FB98">

    </td> <td

    onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">

    </td> <td

    onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">

    </td> <td

    onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">

    </td> <td

    onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">

    </td> <td

    onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">

    </td> <td

    onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

    </td> </tr>

    </table>

    </div><br/>

<center><b>Get this Widget from <a target="_blank" href="http://trik-blogger-andreas.blogspot.com/2010/12/trik-merubah-warna-background-secara.html">here!!!</a></b></center>

4. Jika sudah silahkan klik simpan dan lihat hasilnya.

Sobat bisa merubah warna-warna background yang ada di script diatas dengan mengganti kode warna sesuai selera anda.

Selamat mencoba.

Menambahkan Fungsi Scrool Pada Blog Arsip

17.32 Rifky dan Dian No comments

Trik kali ini saya akan share tentang menambahkan fungsi scrool pada arsip blog dan caranya sangat mudah sekali, hanya menambahkan beberapa script saja. Ingin tahu caranya? ikuti langkah-langkah berikut ini

1    Login ke Blogger

2.    Klik Rancangan → Edit HTML

3    Klik tulisan Download Template Lengkap

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

4.    Beri tanda centang pada kotak di samping tulisan Expand Template Widget

5.    Kemudian cari kode seperti berikut :

cari kode Widget Arsip yang akan sobat berikan Scroll

<b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/>

Kode title adalah judul dari Widget. Apabila tidak diberi judul maka kodenya adalah title=' '
Yang harus sobat perhatikan dengan adalah kode id='BlogArchive2'
Perhatikan pada bagian BlogArchive2 itu adalah id dari Widget Arsip Blog.

6.    Kemudian cari kode ]]></b:skin>

7.    Copy kode dibawah dan Paste di atasnya

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba semoga berhasil

Membuat Bubble Tool Tips

20.01 Rifky dan Dian No comments

Bubble tool tips ini sangat berguna sekali untuk memberikan informasi tentang sebuah link. Jika mouse diarahkan di atas link maka secara otomatis akan ada informasi tentang link tersebut.

Biasanya untuk membuat balon tips ini menggunakan javascript dan pasti akan memberatkan loading blog, kali ini saya memberikan trik untuk membuat bubble tool tips ini dengan menggunakan CSS murni sebagai pemanggil kodenya.

Contoh hasil dari Bubble Tool Tips

Icons Gallery

Adapun langkah-langkahnya sebagai berikut :

1.   Seperti biasa sobat logi dahulu ke blogger

2.   Pilih menu Design >> Edit HTML

3.   Cari kode ]]></b:skin>

4.   Copas kode CSS di bawah ini sebelum kode tadi

/*---------- bubble tooltip-----------*/

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1FO6HAFbAyPTqqieql9hrhmdWzj-oYdgeeOhIQJ8Le5kqW7OtR4v7Oi4oTQQHooqRyhajvEe-y5cXib2lUgyPI5sA2RZUjaFZp8nitmv-jpC2spEbFks0ADpvcdthXrDH32rascrfTc/s320/bubble-712378.gif) no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18OaJzE_KMPf9SyvqayMZ-zrtmqz3vwB7BB6z5Dq18W9woQdHNGyFV0Wqq28N0bvlk3743EA1opNgjq_j8u8A2aW0eX8t44A-p27QNf62e65bVad2eAmcNA3hl3crbUsxB2LDYLmsLAM/s320/bubble_filler-711451.gif) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1FO6HAFbAyPTqqieql9hrhmdWzj-oYdgeeOhIQJ8Le5kqW7OtR4v7Oi4oTQQHooqRyhajvEe-y5cXib2lUgyPI5sA2RZUjaFZp8nitmv-jpC2spEbFks0ADpvcdthXrDH32rascrfTc/s320/bubble-712378.gif) no-repeat bottom;

}

5.   Sekarang simpanlah template sobat

6,   Klik tab Page Elements >> Add Gadget

7.   Copy kode di bawah ini dan pastekan ke dalam gadget sobat

<a href="URLLINK SOBAT" class="tt">

Nama link disini

<span class="tooltip">

<span class="top"></span><span class="middle">

Kerterangan atau tulisan pada tooltip disini

</span><span class="bottom"></span><span>

8. Simpan gadget sobat dan lihat hasilnya

Selamat mencoba, semoga bermanfaat dan sukses selalu buat sobat-sobat blogger

Jangan lupa komennya, makasih

MY PROFILE

BOGRES ( BONEK GRESIK )And Me....

BOGRES ( BONEK GRESIK )And Me....

BOGRES ( BONEK GRESIK )And Me....

BOGRES ( BONEK GRESIK )And Me....

BOGRES ( BONEK GRESIK )And Me....

Rabu, 05 Januari 2011

Cara Membuat Halaman Blog Melipat

Membuat Blogger Dengan Tampilan Mobile

Minggu, 02 Januari 2011

Trik Memasang Nomor Urut Komentar

Sabtu, 01 Januari 2011

Trik Untuk Menampilkan Widget Pada Halaman Tertentu

Rabu, 29 Desember 2010

Memasang Widget I Love Indonesia

Senin, 27 Desember 2010

Cara Menambahkan Scrool Pada Label Kategori

Sabtu, 25 Desember 2010

Memasang Widget SMS Gratis

Kamis, 23 Desember 2010

Memasang Widget Animasi Entri Populer

Rabu, 22 Desember 2010

Trik Merubah Warna Background Secara Otomatis

Selasa, 21 Desember 2010

Menambahkan Fungsi Scrool Pada Blog Arsip

Minggu, 19 Desember 2010

Membuat Bubble Tool Tips

Share

KURS

Labels

Blog Archive

TRANSLATOR

IKLAN

PENGUNJUNG

FOLLOWERS

Pengikut

MY FACEBOOK