Home Tutorial Blogger

Selasa, 09 Februari 2010

Membuat Daftar Isi Blogger

      Comment   

Sebenarnya untuk tutorial Membuat Daftar Isi Blogger sudah pernah saya bikin, cuma kali ini saya buat beberapa macam jadi tinggal sahabat pilih mau memakai yang mana, Daftar Isi Berdasarkan Tanggal Postingan, menurut artikel terbaru atau berdasarkan label.
Untuk tutorialnya saya bikin jadi dua semoga lebih jelas, pertama untuk halaman / page dan kedua untuk widget / gadget.


Yang pertama kita menciptakan sebuah halaman yang berisi daftar isi, berikut tutorialnya :
  • Login ke blogger.
  • Klik Laman > Laman Baru > Laman Kosong.
  • Beri judul Daftar Isi atau Sitemap atau apalah terserah Anda.
  • Kemudian klik pada tab Edit HTML.
    wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB Membuat Daftar Isi Blogger
  • Lalu letakkan isyarat berikut pada area artikel.
    <div style="overflow:auto;width:480px;height:450px;padding:10px;border:1px solid #eee">
    <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    Keterangan :
    • Ganti Alamat wadahtutorial.blogspot.com dengan url / alamat blog Sobat.
    • width:480px : Lebar area, ganti dengan ukuran yang sahabat inginkan.
    • height:450px : Tinggi area, ganti sesuai impian sobat.
    • Untuk tidak memakai text area atau scroll hapus goresan pena yang saya beri latar kuning.
    • https://html-scripts.googlecode.com/files/feeds.js : ganti dengan alamat daftar isi yang anda inginkan. Berikut beberapa kodenya :
      1. Berdasarkan Label :
        https://html-scripts.googlecode.com/files/feeds-labels.js
      2. Berdasarkan Tanggal :
        https://html-scripts.googlecode.com/files/feed-dates.js
      3. Berdasarkan Artikel terbaru :
        https://html-scripts.googlecode.com/files/feeds.js
  • Klik tombol Preview / Pratinjau untuk melihat hasilnya, kalau sudah benar klikPublish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…
Yang kedua kita Membuat Widget Daftar Isi, berikut tutorialnya :
  • Pada dashboard blogger, klik Tata Letak.
  • Klik Tambah Gadget.
  • Pilih HTML/Javascript.
  • Silakan beri judul pada widget. Lalu letakkan isyarat berikut :
    <div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee">
    <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    • Ganti Alamat wadahtutorial.blogspot.com dengan url / alamat blog Sobat.
    • Ganti https://html-scripts.googlecode.com/files/feeds.js dengan isyarat daftar isi dibawah ini :
      1. Berdasarkan Label :
        https://html-scripts.googlecode.com/files/feeds-labels.js
      2. Berdasarkan Tanggal :
        https://html-scripts.googlecode.com/files/feed-dates.js
      3. Berdasarkan Artikel terbaru :
        https://html-scripts.googlecode.com/files/feeds.js
  • Klik tombol SAVE. Lalu lihat karenanya di Blog Sobat.

Cara Menciptakan Permalink Diblog

      Comment   


Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.


Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan aba-aba berikut di atas kode ]]></b:skin>



Klik show untuk melihat
.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}


4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan aba-aba berikut sempurna di bawahnya. 

__________________________________________________

<!-- Permalink Tatelu -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='http://i1108.photobucket.com/albums/h405/christian410/269111_225685127450056_100000257112719_900053_7432574_n.jpg'/>
Sobat sedang membaca artikel ihwal <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='https://nichitah.blogspot.com//search?q=cara-membuat-permalink-di-blog' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->
______________________________________________________________


Tambahan :
  • Ganti aba-aba yang berwarna biru dengan Url foto / gambar milik sobat
  • Sesuaikan angka yang berwarna merah dengan ukuran template blog teman ( ukuran textarea )


Cara Memasang Game Online Diblog

      Comment   

 kali ini akan saya kasih tutorial lengkap cara pasang permainan di blogspot entah sahabat pasang di sidebar ataupun di halaman posting. Sobat yang tertarik, silahkan ikuti tutorial berikut.


1. Silahkan menuju ke http://www.khemer.com

2. Pilih game yang di inginkan, lalu ambil embed kode nya.

Cara Pemasangan :
Cara pemasang di sini terbagi 2 ialah di pasang di halamn postingan ( artikel ) dan di sidebar sebagai widget. Mari kita lihat tutorialnya.

A. Memasang Game Online di Postingan Blog
1. Log in ke akun blogger sobat
2. Buat entri gres dengan meng-klik goresan pena Entri Baru
3. Masukkan Embed Code di Edit HTML di form penulisan artikel. Lihat Gambar


4. Setelah itu, klik goresan pena Terbitkan Entri yang menadakan entri sahabat sudah terposting.
B. Memasang Game Online di Sidebar Blog
1. Klik Rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
2. Masukkan embed arahan kedalam kotak yang di sediakan.
3. Klik Save / Simpan

Tambahan :
Embed Code yang sahabat ambil, kira - kira ibarat berikut.
<object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object>

Tambahkan kode <center></center> agar game online ditampilkan di tengah halaman. Hasilnya ibarat berikut.  
<center><object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object></center>

Berikut Contoh Game Onlinenya.. Silahkan di mainkan... 



Cara Menciptakan Fans Page Facebook [Blog]

      Comment   

Salam blogger, Melengkapi undangan dari salah satu sahabat Zuaz'Z Creator on Facebook yang meminta saya untuk memposting cara untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page/Like Box. Facebook page sudah sangat lazim dipakai di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. 

Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh alasannya yaitu itu, menciptakan Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.
Cara Membuat Fans Page Facebook di Blog/Website
1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", ibarat pola gambar berikut:

5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, contohnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau pribadi menciptakan Facebook Like Box yang nantinya sanggup dipasang di blog/website.

Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612


6. Berikutnya sobat pilih hidangan nomer 5 dan klik "add like box" atau sanggup juga buka halaman berikut: Like Box

7. Selanjutnya, isikan spesifikasi ibarat gambar berikut:

Setting Facebook Like Box:
1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: yaitu tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light kalau ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan arahan warna kalau ingin memberi border atau kosongkan semoga transparan.

7. Show stream: Centang kalau ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang kalau ingin menampilkan goresan pena header "Temukan kami di Facebook".

    Lihat preview tampilan di sebelah kanan form tersebut.

    8. Jika settingan yang dibentuk sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).


    Copy kedua arahan tersebut untuk pemasangan Like Box di blog Sobat.

    Cara pemasangan like Box pada Blog:
    1. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
    2. Pilih HTML/JavaScript.
    3. Masukkan arahan yang telah dicopy ke dalam kotak arahan HTML/JavaScript.
    4. Save/Simpan
    .
    Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat sanggup dengan gampang meng-klik like pada like box yag telah disediakan.

    Demikianlah Cara Membuat Fans Page Facebook Di Blog semoga bermanfaat Sobat.

    Cara Menciptakan Widget Kaleng Diatas Blog [Header]

          Comment   


    Karena seruan salah salah satu yang bertanya cara menciptakan widget kaleng tersembunyi di atas blog, maka dari itu saya akan menyebarkan tutorial bagaimana cara menciptakan widget tersebut, sebagai rujukan sobat dapat melihatnya di blog saya, letaknya diatas bab heade, Berikut cara pembuatannya.



    Silahkan Ikuti Langkah-langkah berikut :
    1. Silahkan login akun Blog Anda
    2. Pilih menu Rancangan dan Pilih Elemen Laman
    3. Setelah itu pilih Tambah Gadget 
    4. Kemudian Tambahkan HTML/JavaScript
    5. Dan Copy dan isyarat di bawah ini :

    <!-- Widget - http://wizyuloverz.blogspot.com - Start -->
    <style>
    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
    list-style: none;
    z-index:999999;
    width: 993px;
    }
    ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
    border:0;
    }
    ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.96;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    }
    ul#navigation li a:hover{
    background-color:#BDBDBD;
    }
    ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFFFFF;
    font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
    font-weight:bold;
    text-shadow: 0 -1px 1px #fff;
    }
    ul#navigation .rss a{
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/RSS.png);
    }
    ul#navigation .facebook a {
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Facebook.png);
    }
    ul#navigation .twitter a {
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Twitter.png);
    }
    ul#navigation .g-mail a{
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Google.png);
    }
    ul#navigation .y-mail a{
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Yahoo.png);
    }
    ul#navigation .youtube a{
    background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/YouTube.png);
    }
    </style>

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    $(function() {
    var d=300;
    $('#navigation a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

    $('#navigation > li').hover(
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-2px'
    },200);
    },
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-80px'
    },200);
    }
    );
    });
    </script>

    <ul id="navigation">
    <li class="rss"><a target="_blank" href="http://hanjiaprianto.blogspot.com/atom.xml"  rel="http://wizyuloverz.blogspot.com">RSS Feed</a></li>
    <li class="facebook"><a target="_blank"href="http://www.facebook.com/hanjiaprianto">Facebook</a></li>
    <li class="twitter"><a target="_blank"href="https://twitter.com/hanjiaprianto">Twitter</a></li>
    <li class="g-mail a"><a target="_blank"href="https://www.google.com/bookmarks/">Google</a>
    <li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>
    <li class="youtube a"><a target="_blank" href="https://www.Youtube.com/">YouTube</a></li>
    </li>
    </li></ul>
    <!-- Widget - http://wizyuloverz.blogspot.com - End-->

    6. Setelah di Copy silahkan sobat dapat mengganti Angka berwarna Pink diatas untuk mengatur posisi widget pada blog sahabat.
    7. Ganti URL/Alamat Blog di atas yang berwarna Kuning dengan URL/Alamat Blog sahabat
    8. Ganti Tulisan berwarna Orange diatas dengan ID Facebook sahabat.
    9. Ganti Tulisan berwarna Hijau diatas dengan ID Twitter sahabat.
    10. Setelah Selesai Silahkan Simpan/SAVE widget, lalu lihat hasilnya

    Cara Menciptakan Kotak Komentar Facebook Diblog

          Comment   
    kali ini aku akan posting tentang Cara Buat Kotak Komentar Facebook di Blogsetelah kemaren aku posting artikel  Cara Memasang Tombol Like Facebook di Blog













    bagi sahabat yang berminat ingin membuatnya silahkan ikuti cara-caranya di bawah ini:
    1. Seperti biasa anda masuk dulu ke Account Blogger.
      
    2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
    3. Setelah terbuka kotak Edit HTML cari aba-aba berikut 
    <b:includable id='status-message'>
     dan diatas aba-aba tersebut sahabat akan menemukan aba-aba ini   </b:includable> 
     (agar lebih cepat mendapat aba-aba yang aku maksud diatas tekan tombol F3).
    4. Copy paste kode <b:includable id='status-message'> kedalam kotak pencarian. 
    Tahap selanjutnya Copy paste Kode dibawah ini dan letakan diatas kode  </b:includable>

    <b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
    </b:if>
    Langkah Terakhir Save Template sahabat dan selesai sehingga alhasil akan terlihat ketika membuka salah satu postingan blog. Semoga bermanfaat.

    SS: