MAMAS SUMARNO

Tampilkan postingan dengan label Blogspot. Tampilkan semua postinganTerima kasih atas komentarnya.

Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Membuat daftar isi (arsip blog)

11.11.00

2 Komentar

Allhamdullilah... selesai juga... Oke, sekarang saat berbagi…
Gambar

Pada postingan kali ini.. saya akan share bagaimana cara membuat daftar isi (arsip blog). Arsip merupakan dokumen (postingan terdahulu) yang disimpan dan dipelihara di tempat khusus (Widget/Item Pages) sebagai referensi pengunjung. Pastilah sudah banyak yang membahas tentang tutorial ini, tapi saya akan mengulasnya dengan cara yang sangat mudah. Alasan atau awal cerita saya membuat tutorial sebenarnya ingin memudahkan pengunjung untuk melihat daftar isi atau arsip blog yang ada, sehingga pengunjung tidak perlu memainkan scroll atau meng-klik next/previous hanya untuk mencari judul arsip yang menarik bagi mereka.

Baiklah,. langsung aja deh ya kita mulai bagaimana Cara Membuat Daftar Isi (Arsip Blog).

Pertama, yang pasti sobat harus masuk/login ke akun bloggernya.
Masuk ke Rancangan  Element Laman  Tambah Gadget HTML/JavaScript
Lalu, Paste Script dibawah ini.
<script src="http://mamas.googlecode.com/files/arsipost.js"> </script> <script src="http://teknoringan.blogspot.com/feeds/posts/default?max-results=200&alt=json-in-script&callback=loadtoc"></script>
Gantilah teks yang bertulisan link http://teknoringan.blogspot.com dengan alamat blog sobat, http://alamatblogsobat.blogspot.com.
Kemudian simpan, dan lihat hasilnya.

Catatan: Tutorial ini bisa digunakan dalam 2 bentuk, yaitu pada widget dan bisa juga pada halaman postingan. Cukup dengan :

Klik New Post/Entri Baru
Setelah masuk pada halaman New Post/Entri Baru
Silahkan, isi Title/Judul postingannya terserah sobat
Pilih opsi Edit HTML bukan Compose
Lakukan tahap 3 (tiga) dan 4 (empat) diatas
Kemudian Publish Post/Terbitkan Entri, dan lihat hasilnya

Sekian.. semoga berguna dan bermanfaat ya.

Pasang Emoticon di kotak komentar

19.28.00

0 Komentar

KALAU anda perhatikan di halaman komentar blog saya belakangan ini, ada tampilan emoticon untuk mengekpresikan komentar yang datang dari sobat. Rasanya blog akan lebih hidup dengan adanya emoticon di kotak komentar. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui emoticon. Mungkin kalau di Wordpress fasilitas ini sudah tersedia, tapi kalau di Blogger belum. Maka dari itu, kita mesti pintar-pintar mengakalinya. Sebenarnya sudah ada yang pernah bahkan banyak yang mengulas tentang tutorial ini, Mungkin saya termasuk orang yang ketinggalan untuk hal ini, tapi tidak ada salahnya juga jika saya mencoba untuk memberikan tutorial ini menurut versi saya.

Untuk memasang kode Emoticon pada kolom komentar, seperti pada umumnya masuk kehalaman Edit HTML dan backup dulu template kamu, kemudian copy-paste Script berwarna biru dibawah dan letakan diatas kode </body> kode ini biasanya berada dipaling bawah pada kode HTML.

Selanjuntnya untuk memasang kode emoticon diatas kotak komentar, tetap berada pada halaman Edit HTML (jangan lupa beri tanda centang pada Expand Template Widget). kemudian cari kode warna biru dibawah ini:

<b:if cond='data:post.embedCommentForm'>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

<b:else/>

<b:if cond='data:post.allowComments'>

</b:if>

</p>

Kalo sudah, sekarang copy paste semua kode dibawah ini dan letakan tepat di bawah kode <p class='comment-footer'> kalo sudah simpan, dan lihat hasilnya.

Pemasangan emoticon ini akan berhasil bila template mempunyai kode <dd class='comment-body'> karena tidak semua template memiliki struktur / karakteristik dan penempatan kode yang sama. Jadi bila ada yang sudah melaksanakan instruksi diatas dengan benar tapi masih gagal, berarti memang template yang digunakan berbeda atau belum menggunakan sistem commenting terbaru dari blogger.

Search Engine Tidak Berfungsi

08.49.00

1 Komentar

Saat kita mengganti template yang kita miliki dengan template gratisan terkadang banyak terdapat kekurangan namanya juga gratisan, salah satunya kotak search/pencarian yang tidak berfungsi ketika kita memasukkan kata kunci ke kotak search dan kita klik tombol cari/find dan hasilnya menampilkan tulisan “Tidak ada posting yang sesuai dengan query Anda.” padahal kita memasukkan keyword yang jelas-jelas terdapat pada Blog tersebut, Untuk mengatasi masalah tersebut ada beberapa tips dan langkah-langkah bisa kita jadika solusi, tapi ini tidak mutlak.

Apa anda tau dengan Tags Meta/Meta Tags "Pastilah pasti tau", tapi bagi yang belum tau, saya mau berbagi sedikit informasi nih. Meta Tags adalah sejenis Informasi yang dimasukan kedalam Blog yang tidak terlihat atau tampil di dalam browser, ini digunakan untuk menghubungkan blog kita dengan Search Engine/mesin pencari atau mengoptimalkan hasil pencarian pengunjung blog dan sebagai informasi isi dari blog kita kepada search engine. Informasi Meta Tag ini difungsikan kedalam mesin pencari / search engine.

Gimana udah ngertikan ama yang namanya Meta Tags, jika sudah kita langsung aja lihat susunan dari Meta Tags

1. Meta Description
<meta content=’Teknoringan, Trik Komputer, Tips dan Triks, Folder autorun, Cara Pasang Ms.Office 2007‘ name=’description’/>
Deskripsi blog ini berfungsi untuk menginformasi isi atau keterangan singkat dari blog kita agar dapat muncul di search engine. Cara memasangnya sangat mudah hanya memasukkan kata-kata sesuai isi blog kamu dan jika lebih dari satu gunakan tanda koma sebagai pembatas kata.
misalnya : Teknoringan, Trik Komputer, Tips dan Triks, Folder autorun dan Cara Pasang Ms.Office 2007

2. Meta Keyword
<meta content=’Blogspot, Blogger, Tema gratis, Komputer, Mobile‘ name=’keywords’/>
Keyword Ini sebagai kata kunci yang penghubung blog kita yang kan di data oleh search engine nantinya. isilah dengan kata-kata penting yang sangat berhubungan dengan blog.
misalnya: Blogspot, Blogger, Tema gratis, Komputer, Mobile

3. Meta Tags Robots
<meta content=’INDEX, FOLLOW’ name=’ROBOTS’/>
Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

4. Meta Author
<meta content=’Mamas Sumarno‘ name=’author’/>
Meta tags ini tidak terlalu penting hanya untuk mengetahui siapa author atau pembuat dari blog. tapi siapa yang tidak ingin terkenal.!? maka jika anda ingin terkenal silahkan isi saja.

Nah saatnya kita terapin informasi diatas kedalam blog kita, cara pasangnya sebagai berikut :
1. Masuk ke Blogger dengan ID anda
2. Klik Layout—>Add Element Widget—>Edit HTML
3. Lalu cari Code <title><data:blog.pageTitle/></title> dan pasang kode tersebut dibawahnya
4. Contoh
<title><data:blog.pageTitle/></title>
<meta content=’Teknoringan, Trik Komputer, Tips dan Triks, Folder autorun, Cara Pasang Ms.Office 2007‘ name=’description’/>
<meta content=’Blogspot, Blogger, Tema gratis, Komputer, Mobile‘ name=’keywords’/>
<meta content=’INDEX, FOLLOW’ name=’ROBOTS’/>
<meta content=’Mamas Sumarno’ name=’author’/>

Cukup mudah bukan.!!? Sampai sini dulu semoga bermanfaat.

Note: perlu diketahui cara diatas tidak menjamin bahwa blog anda akan mudah diindex oleh search engine, tetapi cara ini sangat membantu loh...

Cara Ganti Tampilan Blogspot

14.58.00

0 Komentar

New blogger template berbeda dengan template classic, proses mengganti template juga lebih mudah. Hanya saja perlu download template baru yang ada, untuk contoh bisa download disini kemudian upload lewat account blogger. Umumnya template tersebut sudah bisa langsung digunakan namun tidak semua template bisa langsung digunakan. Apabila template tersebut tidak bisa digunakan biasanya hal ini disebabkan versi template Anda adalah versi klasik, silakan lakukan upgrade atau carilah template terbaru yang menerangkan bahwa template Anda bisa digunakan pada versi terbaru blogger.
Langkah Mengganti Template

Pastikan Anda telah memili file template untuk blogspot yang berekstensi .XML. Bahasa XML adalah masih keluarga dari HTML dan XHTML dan merupakan standar bahasa web yang bisa diterjemahkan oleh browser internet menjadi susunan yang sedemikian rupa sehingga membentuk sebuah layout atau desain dari website/blog.

Silakan Login menggunakan account blogger/Google Anda, lalu pilih salah satu blog Anda (maaf tutorial ini menggunakan setting bahasa Inggris, jika Anda menggunakan bahasa Indonesia maka letak dan posisinya adalah sama).

Langkah 1:
Pilih menu Layout - Edit HTML

Langkah 2:
Klik tombol Browse, cari lokasi penyimpanan file .xml Anda. Dalam contoh ini saya memakai tampilan ikara muda (TB-Ikara-Muda.xml)

Langkah 3:
Klik tombol Upload, pastikan tidak ada error seperti terlihat pada gambar di bawah

Langkah 4:
Klik tombol SAVE TEMPLATE

Sekarang kamu bisa liat hasilnya.
Selamat mencoba.

Pasang Tools Share & Bookmark

02.04.00

2 Komentar

Salah satu cara untuk memperbanyak trafik / pengunjung ke blog kita adalah dengan bantuan situs-situs sosial bookmarking seperti technorati, delicious, stumbleupon, dan berbagai macam situs sosial bookmarking terkenal lain nya. Karena dengan di bookmark / share nya blog dan artikel kita pada situs sosial bookmarking tersebut, maka akan peluang blog kita untuk dilihat oleh jutaan orang pun bisa terwujud, dan mereka akan dengan mudah menemukan artikel kita kembali, karena mereka sudah membookmark artikel kita di account mereka.

Sekarang anda tidak perlu-repot lagi untuk mengetikkan nama alamat dari masing-masing situs sosial bookmarking tersebut, karena tools dari addthis.com sudah menyediakan fasilitas tersebut. Anda tinggal klik saja gambar nya,kemudian tinggal masukkan artikel nya, selesai. Cuma syaratnya, anda harus punya account dulu di masing-masing situs sosial bookmarking tersebut.

Cara pasang nya sebenar nya sangat mudah, untuk yang belum tau, gini caranya :

Masuk ke addthis.com
Buat account baru, kemudian login ke account anda
Pilih GET YOUR BUTTON CODE pada bagian kanan atas
Kemudian anda akan ditunjukkan pada setingan bentuk tampilan, pilih sesuai dengan keinginan anda, lalu pada menu WHERE, pilih BLOG, pada PLATFORM pilih BLOGGER.
Klik menu GET YOUR BUTTON CODE, kemudian anda akan mendapatkan kode javascript yang harus anda pasang pada blog anda. Copy kode tersebut.
Masuk ke account blogger anda, pilih TATA LETAK --> EDIT HTML (beri tanda centang pada expand text widget)
Anda cari kode <div class='post-footer'>
Paste kode javascript tersebut.
Save dan lihat hasilnya...

Templates Blogspot

13.38.00

0 Komentar

DOWNLOAD

Cara Buat Tab View

19.36.00

2 Komentar

Karena ada pertanyaan pada kolom komentar Gratis Download dari Rapidshare tentang bagaimana cara membuat menu tab view, berikut saya akan menjelaskan bagaimana cara membuat menu tab view. Penggunaan menu tab view ini sangat efisien, karena dengan menggunakan satu layout kita bisa menampilkan beberapa informasi halaman pada tab-tab yang akan kita buat, jadi kita bisa menghemat tempat. Penggunaan tab view Widget pada blogger pernah di populerkan oleh Hoctro dengan menggunakan bantuan dari Yahoo! UI Library

Dengan trik yang sama, saya akan menjelaskannya dengan cara yang berbeda. trik ini saya dapatkan dari trik-tips.blogspot.com bagi yang langsung meluncur kesana saya persilahkan, namun saya disini juga akan menjelaskan dengan bahasa yang mudah dipahami. Ok untuk yang belum tau menu tab view seperti apa bisa liat contoh di bawah ini..!!!

Untuk membuat menu tab view seperti disamping caranya adalah:

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
Seperti biasa sebelum kita mengedit kode html pada blog kita biasakan selalu membackup template, untuk menjaga-jaga apabila ada kesalahan kita bisa mengembalikan template kita ke semula. caranya tinggal klik pada Download Template Lengkap.

2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #FFCC00; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #222; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFE16C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFB7; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan tab view. Kita bisa mengatur lebar, tinggi, dan warna pada elemen tab view ini.

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"

7. Lalu pilih ke menu,"Page Elements"

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan kamu letakkan Menu tab view ini.

9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka-angka atau text yang berwarna biru adalah ukuran tinggi dan lebar tabview. Kamu bisa sesuaikan dengan lebar kolom tempat kamu menaruh menu tab view ini.

- Kode yang berwarna Hijau Adalah text yang akan mucul di Menu utama (Menu Atas/tab view). Ganti tulisan tab 1 , tab 2, dan tab 3 dengan judul tab yang kamu inginkan.

- Kode yang berwarna merah adalah isi dari tab view tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berwarna hijau stabilo. tambahkan menu tersebut dibawahnya.

Note:
Untuk teman2 yg belum berhasil tab view menunya mungkin untuk alternative alamat javascriptnya bisa menggunakan kode berikut, jadi pada point 5, kodenya bisa diganti dengan kode berikut,

<script src='http://h1.ripway.com/jhaim/tabber.js' type='text/javascript'/>

Menambah Elemen multi fungsi

16.02.00

0 Komentar

Gadget html/javascript sangat berguna dalam melakukan customize atau menambah script ke blog anda. Anda hanya perlu melakukan copy script dari komponen-komponen yang akan anda masukkan ke blog kemudian script tersebut dimasukkan (paste) ke gadget html/javascript

Beberapa script yang bisa anda masukkan ke gadget html adalah:
1. script Widget Alexa Toolbar
2. Script Page Rank
3. Script Adsense
4. Script Google Translate
5. Script Page Count
6. Script Email subcribe
7. Script Google search
8. Script feed/email reader
9. Script Link
10. Dan script html atau javascript lainnya

Untk menambahkan gadget, Lakukan Langkah berikut:

1. Login ke Dashboard, pilih Tata Letak >> Elemen Halaman >> Pilih Tambah Gadget/Elemen

2. pada halaman List gadget, pilih Html/Javascript

3. Pada kotak dialog berikut, merupakan tempat memasukkan kode (script) html/javascript

4. Setelah kode Link, Gambar, dll selesai dimasukkan tekan tombol Simpan. Maka otomatis gadget/elemen baru akan muncul di blog anda sesuai script yang dimasukkan.

Dan terakhir simpan semua perubahan yang terjadi pada template/layout.

Buat Link Dengan Gambar

14.26.00

0 Komentar

Ternyata masih banyak juga ya para blogger baru yang belom ngerti cara buat link pada gambar. Ydah... daripada penasaran saya buat artikelnya neh.

Untuk membuat suatu link pada gambar, hal pertama yang harus anda ketahui adalah kode html untuk link itu sendiri. yang pertama adalah kamu harus punya gambar yang tersimpan di situs atau paling tidak tau terseimpan disitus mana gambar yang mau dipampang, kalo sudah,. ikuti kode dasar html ini untuk bikin link :

Contoh : Saya akan membuat suatu link yang menuju ke blog ini, Maka kode yang harus ditulis adalah seperti ini :

Sehingga hasil yang ditampilkan adalah :

Ok... sampai disini dulu ya.. mudah-mudahan bisa dingerti ya.

Arsip Kosong

Membuat daftar isi (arsip blog)

Pasang Emoticon di kotak komentar

Search Engine Tidak Berfungsi

Cara Ganti Tampilan Blogspot

Pasang Tools Share & Bookmark

Templates Blogspot

Cara Buat Tab View

Menambah Elemen multi fungsi

Buat Link Dengan Gambar

Kilas Artikel

Kategori

Arsip Kosong

date_replace("12.27.2011");

date_replace("12.19.2011");

date_replace("7.13.2011");

date_replace("10.31.2009");

date_replace("6.10.2009");

date_replace("6.04.2009");

date_replace("6.03.2009");

date_replace("5.29.2009");

Kilas Artikel

Kategori