BloG tUtORiaL
Utak Atik Template Blog Part 1
blog-bootel-02Jika grup band The Police mempunyai syair lagu " Message In A Bottel ". Maka tutorial ini mengajak kita untuk meredesain template minima dari blogspot, menjadi layout yang menyerupai sebuah botol atau " Blog In A Bottel ".
Tutorial ini merupakan satu teknik saja, dari sekian teknik yang bisa kita gunakan untuk meredesain template blogspot.
Tutorial sendiri di bagi ke dalam tiga tahap.
a. Tahap pertama menjelaskan sekilas tentang struktur layout Minima.
b. Tahap kedua meredesain dan menempatkan gambar-gambar yang di perlukan sebagai bakgroundnya.
c. Tahap ketiga menambah tab menu / navigasi.
View Tutorial : Utak Atik Template Blog " Blog In A Bottel "
Technorati tags: Layout Blog, Tutorial Blogger
Link : Cara membuat link pd Gambar
Untuk membuat link gambar, yakni menjadikan gambar ketika di klik membuka halaman blog atau alamat url lain. kodenya seperti ini.
< href= " Lokasi_tujuan ">< src = " alamat url gambar">
Contoh :
< href= "http://catalog-tutorial.blogspot.com/">
< src ="http://jaloee.googlepages.com/combo-box.gif">
* Lokasi Tujuan = http//catalog-tutorial.blogspot.com *
* IMG SRC ( url gambar ) = http://jaloee.googlepages.com/combo-box.gif.
Yang akan di tampilkan oleh browser adalah seperti ini.
Maka ketika kita menekan gambar tersebut, browser akan membuka alamat situs catalog-tutorial.blogspot.
Target Link
Sama seperti Link Teks. kita dapat membuat link gambar yang di tekan membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.
< href= "Lokasi_Tujuan" target="_blank">< src ="url / alamat gambar">
Tulisan Yang Rada Nyambung
cara membuat link
menampilkan gambar ke dalam postingan
Trik Membackup Daftar Link
Membuat Kotak Scroll Untuk Blogroll
Technorati tags: Link Gambar, Tutorial Blogger
Memperbaharui Judul Blog Untuk Search Engine
Dulu waktu pertama ngeblog saya terkadang heran melihat sebuah blog yang di status browser atasnya selalu berubah-rubah sesuai dengan judul postingan yang saya klik ( baca ).
Contoh. jika pada halaman utamanya menampilkan nama Judul blog-nya.
SHOTOSHOP SATU
gam-01
Maka saat saya membaca salah satu artikelnya, yang terlihat pada status browser atas, bukan menampilkan Judul Blog berikut Judul Postingan . seperti ini.
SHOTOSHOP SATU - Mengabungkan dua buah photo. ( judul postingan )
gam-02
Tapi yang terlihat hanya menampilan Judul Postingan saja . seperti ini.
Mengabungkan dua buah photo ( judul postingan ).
gam-03
Konon yang menampilkan hanya judul postingannya saja ketika seseorang membaca salah satu artikel, merupakan settingan yang benar untuk keperluan mesin pencari seperti google dll.
nah bagaimana agar blogspot kita dapat membaca dan membedakan antara judul blog dan judul postingan seperti itu ?
Dalam dasboard ( halaman template ) buka tab Edit Html - kemudian cari judul blog ( title tags ) ini.
Kemudian ganti dengan kode ini.
Setelah beres klik Simpan Perubahan. dan coba sekarang kita cek perubahannya dengan menekan salah satu judul postingan pada blog kita.
yuu selamat mencoba.
Artkel Yang Rada Nyambung
mendaftarkan blog ke search engine google
mendaftarkan blog di search engine yahoo
Technorati tags: SEO, Tutorial Blogger
Privacy Statement
www.catalog-tutorial.blogspot.com Privacy Statement
What follows is the Privacy Statement for all www.catalog-tutorial.blogspot.com websites (a.k.a. blogs) including all the websites run under the www.blogspot.com .
Please read this statement regarding our blogs. If you have questions please ask us via our contact form.
Email Addresses
You may choose to add your email address to our contact list via the forms on our websites. We agree that we will never share you email with any third party and that we will remove your email at your request. We don’t currently send advertising via email, but in the future our email may contain advertisements and we may send dedicated email messages from our advertisers without revealing your email addresses to them. If you have any problem removing your email address please contact us via our contact form.
Ownership of Information
www.catalog-tutorial.blogspot.com is the sole owner of any information collected on our websites.
Comments/Message Boards
Most www.catalog-tutorial.blogspot.com websites contain comment sections (a.k.a. message boards). We do not actively monitor these comments and the information on them is for entertainment purposes only. If we are alerted to something we deem inappropriate in any way, we may delete it at our discretion. We use email validation on most of our message boards in order to reduce “comment spam.” These email addresses will not be shared with any third party.
Cookies
Currently we assign cookies to our readers in order to save their preferences. This data is not shared with any third party. Accessing our websites is not dependent on accepting cookies and all major browsers allow you to disable cookies if you wish.
Third Party Cookies
Many of our advertisers use cookies in order to determine the number of times you have seen an advertisement. This is done to limit the number times you are shown the same advertisement. www.catalog-tutorial.blogspot.com does not have access to this data.
Traffic Reports
Our industry-standard traffic reporting records IP addresses, Internet service provider information, referrer strings, browser types and the date and time pages are loaded. We use this information in the aggregate only to provide traffic statistics to advertisers and to figure out which features and editorials are most popular.
Legal proceedings
We will make every effort to preserve user privacy but www.catalog-tutorial.blogspot.com may need to disclose information when required by law.
Business Transitions
If www.catalog-tutorial.blogspot.com is acquired by or merges with another firm, the assets of our websites, including personal information, will likely be transferred to the new firm.
Links
www.catalog-tutorial.blogspot.com websites frequently link to other websites. We are not responsible for the content or business practices of these websites. When you leave our websites we encourage you to read the destination site’s privacy policy. This privacy statement applies solely to information collected by www.catalog-tutorial.blogspot.com
Notification of Changes
When www.catalog-tutorial.blogspot.com makes changes to this privacy policy we will post those changes here.
Contact Information
If you have any questions regarding our privacy policy, please contact us.
another url / web
www.jaloee.blogspot.com
Recent Post Berdasarkan Label Artikel ( non java script )
Bagaimana cara menambahkan Post Terbaru ( Recent Post ) ke dalam blog kita ?
Sebenarnya untuk caranya sendiri banyak, namun di sini saya lebih suka mengunakan Elemen Feed yang sudah tersedia dalam dasboard , kelebihannya mengunakan elemen feed ini tidak mempengaruhi beban halaman blog ketika ngeloding. Sangat berbeda speed-nya jika kita mengunakan recent post mengunakan sebuah java-script.
Sedangkan kekuranganya mengunakan elemen feed hanya di batasi 5 post terbaru saja.
Namun tenang saja dengan sedikit trick kita akan menampilkan yang 5 post terbatas itu semenarik mungkin.Yaitu dengan cara menampilkan recent post berdasarkan label artikel. hasilnya bisa di lihat di samping blog ini. atau trick ke dua dengan cara mengatur tanggal postinganya.
Cara Pertama
Dalam Halaman Elemen tambahkan sebuah Elemen Feed.
Setelah terbuka masukan alamat feed berdasarkan label
ini contohna :
http://namablogkamu.com/feeds/posts/default/-/labelname
ganti namablogkamu dengan alamat blog kita
kemudian ganti LabelName dengan nama label yang ada di blog kita.
Note
Perlu di ketahui jika label nya mengunakan spasi biasanya penulisan na seperti ini. contoh : Blogger Bab 2 menjadi Blogger%20Bab%202 -
%20 = menunjukan spasi.
Untuk itu bagusnya alamat labelnya di copy paste dulu ke dalam program Notepad.
contoh :
http://namamu.blogspot.com/search/label/Blogger%20Bab%202
yang berwarna menunjukan nama label blog kita.
Setelah ok, klik tulisan Lanjutkan, jika tidak ada kesalahan kemudian atur jumlah feed na ke angka 5.
Setelah beres klik Simpan Perubahan.
Cara Kedua.
Trick atau Cara kedua ini saya berasumsi, kita biasanya menampilkan postingan dalam halaman blog utama kurang lebih sebanyak 5 postingan. Agar menampilkan Recent Post dengan elemen feed ini meloncat atau mundur pada postingan yang 6,7,8 dst ( yang biasanya menjadi arsip ).
caranya dengan merubah parameter atau queri seperti ini.
http://namamu.blogspot.com/feeds/posts/default/?start-index=5
?start-index=5 artinya meloncat atau mundur pada postingan 5 sebelumnya. jadi ganti angka 5 tersebut dengan yang kita kehendaki.
Ok selamat mencoba :)
Tulisan Yang Rada Nyambung
1. Menampilkan Recent Commnet
2.Menampilkan Recent Post Dengan Ajax Feed Rss
Technorati tags: Recent Post non java script, Tutorial Blogger
Link : Cara menulis Format / tag link
Link atau hyperlink merupakan sebuah navigasi dalam halaman webblog. Atau objek perantara yang menghubungkan satu situs web/blog dengan situs blog lainya, atau satu halaman blog dengan halaman blog lainya. bahkan juga bisa menghubungkan dalam sebuah artikel yang sama.
Dan objek link yang kita bisa gunakan di antaranya merupakan objek Teks, gambar, movie dan flash.
Sedangkan format penulisan dan pengunaanya sebagai berikut.
Link Teks.
Link ini merupakan link yang sederhana untuk di buat, format atau penulisannya seperti ini.
Nama Link
Contoh:
Tutorial Blogger
*Lokasi_Alamat_Tujuan yaitu : http://catalog-tutorial.blogspot.com *
*Nama Link yaitu Tutorial Blogger *
Yang akan di tampilkan oleh browser adalah nama link. seperti ini
Tutorial Blogger
maka ketika kita menekan tulisan Tutorial Blooger tersebut, maka browser akan membuka alamat situs catalog-tutorial.blogspot.
Target Link :
Format link di atas merupakan link dalam windows atau jendela yang sama. Sedangkan agar link yang di tekan membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.
Nama Link
Technorati tags: Css dan Html, Tutorial Blogger
Mengundang Teman Dengan berbagi admin
Karena beberapa hal mungkin suatu waktu kita butuh teman atau sahabat untuk di mintai bantuan-nya merapikan dan mengedit-edit blog yang kita miliki.
Untuk keperluan mengundang seperti itu, sebenarnya kita tidak perlu mengirim akun atau password mail kita. cukup yang kita lakukan.
Pertama : Buka tab/halaman Pengaturan - kemudian tab Ijin.
gam 01
Kedua : Setelah itu tekan tombol Menambah Penulis. kemudian pada kotak bawah masukan alamat email teman kita yang ingin kita undang.
internet-02
klik tombol Undang.
Ketiga : Setelah beres mengundang. kita tunggu konfirmasi dari teman kita yang di undang. Jika undanggan kita dapat respons, buka lagi tab Pengaturan - tab Ijin.
Kelima : Kemudian klik tulisan Berikan Hak istimewa Setingkat Admin.
Dengan demikian blog yang kita miliki berada juga pada Kontrol Panel sahabat kita dengan akses penuh. artinya teman yang kita perlukan bantuannya bisa mengedit-edit Html secara penuh. Dan jika sudah tidak di perlukan lagi kita bisa menghapusnya pada tab Ijin.
Kelebihan cara seperti ini, akun atau password mail kita tetap aman dan rahasiah. juga jika punya blog lebih dari satu, blog yang lainnya tetap aman.
Untuk latihan dan bagaimana cara kerjanya coba saja lakukan jika kita punya dua akun alamat mail.
Technorati tags: Berbagi Admin, Tutorial Blogger
Read More Style Ala yahoo
Apakah blog anda sudah termasang Read More ( pemengalan artikel ) ? jika bloem silahkan baca postingannya di sini. - walaupun tulisan-nya acak-acak moga saja dapat membantu.
Namun jika anda sudah memasangnya, kepikiran tidak oleh anda untuk sedikit mempercatik tulisan " Read More " -nya ?.
Jika jawabannya " Ya " silahkan lanjutkan membaca tulisan ini.
Jika " Tidak " tolong tutup saja blog ini. hehehehehe..
Ok. yang akan saya tunjukan hanyalah satu variasi saja dari sekian kemungkinan-kemungkinan yang bisa kita lakukan untuk mempercantik tulisan "read more " ini. mudahan-mudahan dari yang satu ini anda dapat membuat konsep dan desain sendiri nantinya.
Dan read more style ini mengacu atau menjiplak pada tulisan "read more"-nya ala Yahoo. - yang posisinya di samping kanan.
read 00
Pertama : Memasukan kode Css.
Buka halaman Edit Html kemudian tandai tulisan Expand Template Widget.
gam 02
Setelah itu simpan kode di bawah pada baris halaman kode Css.
.more {
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}
atau bisa juga simpan atau letakan seperti pada ilustrasi gambar.
skin
Kedua : Memasukan tag
..
pada elemen Html.Kemudian cari tulisan " Read More " ( jika tulisannya bloem di ganti ). gunakan kotak pencarian browser ( Ctrl + F ).
setelah ketemu.
Read More......
Tambahkan tag
» ..
. seperti tulisan di bawah.» Read More....
Silahkan lakukan inprovisasi pada tulisan " Read More " misalkan - "Countinue Reading" or " Baca Selanjutnya " dll.. terserah ente.
Setelah beres Simpan Perubahan.
Menambah Gambar.
Jika suka dengan gambar, kita pun bisa menambahkan gambar-nya.
read 02
Untuk melakukanya tambahkan saja properti Background:url ( alamat gambar ) no-repeat right;
.more {
background:none;url(http://i120.photobucket.com/albums/o190/jaloewig/blogger/reedmore-bg.gif) no-repeat right;
bottom:5px;
font-family:verdana;
font-size:80%;
.....
Penjelasan Yang tidak penting.
.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan fixel misal 12px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks lawannya Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan lawanya left or center
white-space:nowrap;
}
Tulisan Yang Rada Nyambung.
1. membuat-read-more-di-new-blogger
Technorati tags: Read More, Tutorial Blogger
Update label hack : Menampilkan semua judul postingan
Ini lanjutan kisah kemarin tentang " Menampilkan Judul Artikel ", yakni ketika menekan link label/categorie maka yang tampil indek judul-judul artikel saja, tidak semua content atau isi artikel.
Sedangkan pada tulisan ini merupakan lanjutan-nya, yaitu bagaimana jika ingin menampilka atau mengindek semua judul artikel atau postingan ( tampa di batasi oleh label/categorie ).
Caranya sangat mudah and gampang. kita hanya memasukan kode di bawah ini.
Blogkamu = nama blog kita.
Dan untuk penempatannya yang paling bagus di bawah list label/categorie.
gam 05
Baiklah. buka halaman Edit Html. kemudian tandai kotak kecil di samping Expand Template Widget.
Kemudian cari widget/elemen Label1. ( gunakan kotak find borwser Ctrl + F ).
Setelah ketemu masukan kode di atas pada script Label1. - hasil penambahannya seperti tulisan yang saya beri warna.
Technorati tags: Label Hack, New Blogger Tutorial
Menampilkan hanya judul artikel atau postingan
Secara default jika kita menekan sebuah label/categorie , maka yang tampil semua isi postingan ( artikel ). dan terkadang jika terlalu banyak isi postingannya maka yang terjadi di lihat dari sisi si pengunjung akan menjadi segan membacanya, apalagi jika artikel yang kita tulis tidak di penggal ( memakai read more ).
Nah sekarang bagaimana jika ketika kita menekan sebuah label/categorie, yang di tampilkan hanya judul-judul artikel-nya saja ?
Tutorial ini ( atau hack ini ) saya dapatkan dari blognya suhu ramani. sedangkan untuk menerapkanya ke dalam blog kita.
Pertama : buka halaman Edit Html . Tandai Expand Template Widget .
expand-template
kemudian cari kode ini.
Kedua : Setelah ketemu ganti dengan kode ini.
Bonus : Jika ingin menambah icon/gambar di setiap
judul yang di tampilkan kodenya ini.
Technorati tags: Label Hack, New Blogger Tutorial
Blogger in Draft
Selain halaman elemen yang biasa kita tambahakan ke blog, sebenarnya pihak blogger memiliki sejenis laboratorium untuk mengembangkan berbagai perangkat elemen terbarunya. versi elemen ini sendiri menurut para pengembangnya merupakan versi elemen uji coba atau uji kelayakan. Jika hasilnya memuaskan dan stabil maka versi ini hasilnya di patenkan. di antaranya yang lulus sensor seperti elemen poll, open id dll.
Sedangkan yang masih dalam tahapan pengembanggan blogger draft saat ini seperti.
1. Scheduled Post
2. Blog list
3. Feed subscription
4. Google gadgets ( game, communication, tool, finance, dll )
5. Search box.
Untuk menambahkan gadget ( widget/elemen ) yang masih dalam blogger draft. buka saja www.bloggerindraft.com.
Setelah terbuka klik tulisan Blogger in Draft di samping kanan, yang akan menuju dan membuka Panel Kontrol, setelah itu klik Layout.
Kemudian klik add gadget ( tambahkan gadget ). selanjutnya terserah anda mau pilih gadget yang mana. karena untuk menambahkan sebuah gadget sangatlah mudah.
Contohnya untuk menambahkan fasilitas Kotak Pencarian ( search box ) ke dalam blog , kita tinggal tekan tulisan Tambah di samping tulisan Kotak Pencarian.
aeitttt.. jangan lupa sebaiknya alamat ini kita bookmarks saja, agar kita tahu perkembangkan selanjutnya tengtang blogger in draft ini.
Technorati tags: Blogger In Draft
Tip N Trik Membackup Daftar Link
JIka anda orang yang suka mengonta-ganti template, saya tebak salah satu yang membosankan adalah membakup daftar link ( blogroll ). mungkin anda menulis ulang one by one nama dan alamat linknya. dan mungkin karena males membuat daftar link lagi, maka biasanya solusi yang tercepat anda mengunakan widget Html/JavaScript sebagai penganti.
Namun masalah datang kemudian ketika teman ngeblog anda mengajak tukeran link !.. uuukhhk malesnya karena anda harus menulis nama dan alamat blog teman anda secara manual ( atau copy paste ).
Nah di sini saya mempunyai sedikit trik cara membackup alamat daftar link, kemudian menambahkanya lagi ke dalam widget ( elemen ) daftar link.
Pertama : Membackup dan menyimpan ke dalam program notepad.
Dalam halaman muka blog kita, klik kanan mouse kemudian pilih View Page Source ( atau Ctrl + U di keyboard).
Setelah terbuka windows Source kemudian cari alamat dan nama daftar link ( gunakan kotak pencarian dengan menekan Ctrl + F di key ).
Copy paste semua ke dalam program notepad. ( yang di awali dengan tag
Kedua: Menambah ( Widget ) elemen Daftar Link baru.
Setelah kita menganti templatenya dengan yang baru. buka dan tambahkan widget ( elemen ) Daftar Link. kemudian buat link pertama sebagai pancingan. dan beri judul My link.
Ketiga : Memasukan Alamat link yang telah di backup.
Buka tab Edit Html kemudian tandai kotak kecil di samping tulisan Expand Template Widget.
setelah itu cari daftar link baru yang telah kita pasang dengan judul My Link. ( Ctrl + F kemudian pada kotak pencari tulis My Link ).
Kemudian masukan alamat link yang telah kita backup letakan posisinya , seperti contoh tulisan yang berwarna merah. ( tambahkan tag
Dan jika ingin Daftar link-nya bisa di scroll
Tambahkanlah kode dan letaknya seperti tulisan berwarna red ini.
0 Komentar:
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda