Halaman

  • Web
  • Misther.co.cc

    • Mengatur Margin dan padding di template blogger


    Margin dan padding adalah elemen penting dalam design blogger. Kalo kau tahu, mereka adalah nyawa dari design dan style dari blog kamu.
    Sebelum kita melakukan modifikasi dan macam-macam pada blog kita, kita cari tahu dulu struktur blog di blogger itu seperti apa. Oh ya yang pasti kamu juga udah daftar dulu di blogger agar punya blog dengan alamat http://www.nama_blog_kamu.blogspot.com
    Baca selengkapnya »

    Membuat Teks Berjalan di Menu Bar


    Selain membuat teks berjalan di blog, anda juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.
    Baca selengkapnya »

    Cara buat Read More on Blogger

    Cara Buat Read More di Blogger Blogspot dengan Editor Lama. Bagi yang belum memakai Read More Editor Lama direkomendasikan untuk  memakai Read More Editor Baru yang jauh lebih mudah dan simple.
    Baca selengkapnya »

    Mengganti Link Read More dengan Icon Gambar



    Beberapa waktu yang lalu saya telah menjelaskan cara membuat link read more atau baca selengkapnya dalam postingan blog. Ternyata ada sobat blogger yang bertanya kepada saya apakah bisa link read more diganti dengan gambar? Jawabannya tentu saja bisa dan sangat mudah.
    Baca selengkapnya »

    Cara Membuat Artikel Yang Berhubungan



    Tip Trik Blogger sebelumnya saya telah membahas bagaimana Cara Membuat Kotak Link Exchange dan kali ini saya akan menjelaskan bagaimana Cara Membuat Artikel Yang Berhubungan atau Related Post dengan Fungsi Scroll
    Berikut langkah-langkahnya :

    Login ke Blogger
    Klik Rancangan → Edit HTML
    Klik tulisan Download Template Lengkap
    Baca selengkapnya »

    Cara membuat artikel terkait di blogspot

    Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan.

    Cara membuatnya di blogspot, disini kita akan menempatkannya tepat dibawah postingan :

    1. Login ke blogmu
    2. Klik Layout lalu pilih Edit HTML
    3. Untuk keamanan sebelum mengedit template backup dulu templete mu klik Download Full Template.
    4. Centang Expand Widget Templates
    5. Cari kode     <data:post.body>
    6. Copy kode dibawah ini letakkan dibawah <data:post.body>

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <span class='box'>
    <div class='widget-content'>

    <h3>Artikel Terkait</h3>
    <div id='data2007'/><br/><br/>
    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 6;
    maxNumberOfLabels = 100;
    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;
    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot;
    &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }
    var labelArray = new Array();
    var numLabel = 0;
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;
    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>
    </span></div>
    </b:if>
    Save Template dan lihat hasilnya

    Head " Artikel Terkait " dapat anda ganti dengan kata yang disukai contohnya Related Post, Related Articles, Baca Juga dan sebagainya.

    Cara Menghilangkan Tanggal Posting

    menghilangkan tanggal posting blogger, mau tau caranya? pertama masuk halaman Edit HTML kemudian cari h2.date-header { jika sudah ketemu tambahkan visibility: hidden; diantara kode tersebut. lihat contoh kodenya dibawah:

     h2.date-header {
    margin:.3em 0 0;
    padding:0;
    font-size:80%;
    color:#777;
    height: 0px;
     visibility: hidden;
    }
    Selama mencoba, Happy Blogging :)

    Cara Membuat Kotak Daftar Isi

    Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)

    Blogger Tutorial


    Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

    Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

    1. Login ke blogger. Buka menu Design -> Page Elements
    2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

    <style>
    .list {
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px;
    }
    </style>

    <div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

    <div class="list">
    1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

    <div class="list">
    2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

    </div>

    Keterangan:
    380px merupakan lebar kotak
    180px merupakan tinggi kotak
    #ffffff pada background-color merupakan warna background
    #ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.

    Ingat:
    Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

    Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

    3. Kalau sudah klik Save Template. Selesai.

    Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini

    <style>
    .list {
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px;
    }
    </style>

    Dengan kode berikut

    <style>
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqENSjCy3CcZPbjckjfHyduvfKx8RnQLur4vphwoMaI9gs8_940-8XMe5-VHrIJsvhdZ0aONHfgH22oJYuv2C6D6-wHPLR2yiKSaRoKVY7qGQYncVmPemtvHvixJAEJjNvGOzYiBdxWCb/") no-repeat left center;
    border-bottom:1px dotted #ddd;
    line-height:1.2em;
    padding:3px 0px 0px 20px;
    }
    </style>
    Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

    Selamat mencoba. Semoga berhasil

    Cara membuat kategori (label)

    Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca.

    Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

    Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

    Bagaimana cara membuat label?

    Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

    Apakah kategori (label) bisa di tampilkan di sidebar?

    Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

    1. Sig in di blogger dengan id sobat


    2. Klik menu Layout


    3. Klik menu Elemen Halaman


    4. Klik tulisan Tambahkan sebuah Elemen Halaman


    5. Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label


    6. Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya


    7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)


    8. Klik tombol yang bertuliskan SIMPAN PERUBAHAN


    9. Selesai.


    Sangat mudah bukan?

    Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

    Selamat mencoba !

    Cara Membuat Teks Dan Link Berkedip



    Apakah anda pernah melihat teks berkedip seperti ini?




    atau mungkin link berkedip seperti ini?



    Dan apakah anda tertarik untuk memasangnya di blog Anda? Kalau iya, silahkan ikuti tutorial dibawah ini.

    Untuk membuat teks dan link berkedip caranya sangat mudah, cukup tambahkan tag <blink> dan </blink> diantara teks atau link yang ingin Anda buat berkedip. Selesai.. Sebagai contoh, saya menuliskan kode

    <blink>Blogger Tutorial</blink>
    Maka hasilnya menjadi seperti ini

    Blogger Tutorial

    Dan
    <blink><a href="http://www.hermanblog.com" target="_blank">Herman Blog</a></blink>


    Catatan:
    Ganti tulisan berwarna biru dengan alamat link anda dan tulisan yang dicetak tebal dengan teks yang ingin anda tampilkan

    Agar lebih unik dan menarik, anda juga bisa memberikan sedikit atribut pada teksnya contohnya seperti tulisan Welcome to my blog diatas. Property yang saya gunakan pada tulisan Welcome to my blog adalah

    <blink style="font-weight: bold; font-family: forte; font-size: 18px; ">Teks atau link anda</blink>

    Silahkan ganti jenis font pada font-family, ukuran font pada font-size dan warna font pada color sesuai dengan selera anda. Untuk font-family anda bisa menggunakan semua jenis font yang tersimpan pada komputer anda. Masukkan nama font dengan lengkap maka font tersebut akan muncul.

    Selamat mencoba..