Tampilkan postingan dengan label Tips trik. Tampilkan semua postingan
Tampilkan postingan dengan label Tips trik. Tampilkan semua postingan

Senin, 04 Oktober 2010

Membuat Image Berada Di pojok Bawah

Posting ini  maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain ada di posisi pojok bawah blog kamu . Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:


1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>


<div id="trik_pojok">
<a href="http://elfasher86.blogspot.com">
<img src="http://social.peoplestring.com/uploads_user/513000/512088/73474.jpg
" border="0" /></a>
</div>


"http://elfasher86.blogspot.com" adalah link. ganti dengan link kamu.
"http://http://social.peoplestring.com/uploads_user/513000/512088/73474.jpg" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.

Read More......

Senin, 27 September 2010

MEMBUAT TULISAN BERJALAN (WELCOME NOTE)

Jangan hanya diam, itu mungkin dapat mengambarkan sebuah makna yang banyak, artinya apa? kita harus berbuat untuk sesuatu yang bermanfaat. Jangan hanya diam berarti harus bergerak, oleh sebab itu kita akan membuat tulisan yang gak hanya diam, tapi juga bergerak. Memang suatu yang bergerak bisa menjadi daya tarik atau menarik perhatian orang.

Kita akan membuat tulisan berjalan, yang berjalan ke samping, dari kanan ke kiri. Dan juga tulisan yang berjalan dari bawah ke atas, yaitu dengan menggunakan kode marquee sehingga nantinya kita dapat menarik perhatian pembaca dengan tulisan yang berjalan itu, mungkin tulisan itu berisi sesuatu yang penting yang pembaca harus tahu.
Cara Membuat Tulisan Berjalan(welcome note)
Berikut ini adalah kode untuk tulisan berjalan ke samping


Selamat Datang Di Bagi Bagi Ilmu Blog


Selamat Datang Di Bagi Bagi Ilmu Blog

Kita dapat menggati tulisan yang selamat datang itu dengan tulisan yang lain sesuai dengan keinginan kita.

Berikut ini adalah kode untuk tulisan berjalan ke atas

Selamat Datang Di Bagi Bagi Ilmu Blog


Selamat Datang Di Bagi Bagi Ilmu Blog

Selain tulisan, untuk kode yang berjalan ke atas juga dapat kita aplikasikan menjadi blogroll, contoh kode htmalnya menjadi sebagai berikut:


LINK 1
LINK 2
LINK 3


Bisa juga kita gunakan untuk aplikasi newsflash. Kode HTMLnya sebagai berikut





Jangan lupa mengganti http://elfasher87.blogspot.com dengan URL kamu sendiri, sebagai recent post..
ok good luck and selamat mencoba

Read More......

MEMBUAT READ MORE DI BLOGSPOT


Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma main subject nya saja kemudian anda ingin link Read More / Baca Selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :
<p><data:post.body/></p>

4. Ketemu kan,nah sekarang Ganti kode kode tersebut sehingga menjadi seperti ini:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

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

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
<span class="fullpost">


</span>


8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :
<span class="fullpost">
</span>


10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11.  oke
Selamat Mencoba...

Read More......

Minggu, 26 September 2010

MEMBUAT READ MORE DI BLOGSPOT 2nd version

He he he mau bagi bagi ilmu blog baru lagi hasil surfing nich read more ini beda lho just chex that out,kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita, ya tho?.  Read more yang ini beda dan gak akan membuat browsing loading lagi buka dari halaman awal jadi langsung breeet turun ke bawah dan terbuka artikel lengkapnya gitu lho.

Berikut ini langkah-langkahnya:

1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>


6. Sudah? sudah belum? ditanya kok diam aja gimana sih ? :x
7. Kalo sudah cari kode dibawah ini
<div class='post-header-line-1'/>

(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)

8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan kode ini dibawahnya.
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. jadi seluruh kodenya akan menjadi seperti ini :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id="fullpost">


</span>

selesai....

Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>


Bagi yang udah pakai  'read more' yang lama dan pengen  ganti dengan 'read more' yang baru ini,
gini nih caranya

'Read more' yang lama kodenya seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

hapus text yang berwarna hijau , lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span
id="fullpost">


</span>
bedanya apa sama read more yang dulu? perhatikan text yang berwarna biru, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
 Oke selamat mencoba dech ;-)

Read More......

Sabtu, 25 September 2010

Mari Belajar Membuat Menu Navigasi Dengan Sub Menu DROP DOWN

Menu navigasi dengan tab menu  drop down ini saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot.

Penasaran bagaimana membuat tab menu drop down,bisa ikuti langkah berikkut ini.

Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger



  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Menu Navigasi Sub Menu.
    Gb.1

  • Selanjutnya pilih tab Edit Html (Gb.2).

    Cara Membuat Menu Navigasi Horizontal dengan Sub Menu.
    Gb.2

  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Menu Navigasi Css SubMenu.
    Gb.3

  • Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.

    #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
  • Setelah itu Simpan Templates.
  • Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
  • Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)

    Menu Navigasi Dengan Sub Menu Blogger.
    Gb.4

    Cara membuat menu navigasi horizontal dengan sub menu vertikel.
    Gb.5

  • Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.

    <div class='menuhorisontal'>
    <ul id='nav'>

    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
    <ul>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'></ul> </li>

    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>

    <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
    <ul>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    </ul> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    </ul>
    </div>







SEMOGA BERMANFAAT

Read More......