Tutorial Blogspot - Blog Versi Mobile. Mungkin dari Anda ada yang tidak tahu, bahwa tampilan blog akan berubah jika dilihat versi mobile / hape / android. Tanpa setting sesuai artikel berikut, tampilan blog Anda versi dekstop akan tampak berbeda jika dilihat oleh pengunjung dari perangkat seluler. Cara cepatnya dengan mengetik seperti ini http://namabloganda.blogspot.com/?m=1
Cara Modifikasi Tampilan Blog Versi Mobile
Perhatikan, bahwa situs blog Anda tampak sederhana bukan tampilannya versi mobile? widget - widget cantik yang Anda tampilkan juga tidak ada satupun yang tampak bukan!. Klik Maju makmur kopen sebagai perbandingan. Maka Anda akan mendapatkan bahwa tampilan blog situs saya versi desktop akan sama dilihat oleh pengunjung yang datang dari perangkat seluler mereka. Bagaimana cara membuatnya? berikut
Untuk menampilkan widget, klik edit HTML
Cari kode seperti ini <b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'/>
Tambahkan mobile='yes' sesudah locked='false' sehingga hasilnya menjadi <b:widget id='HTML1' locked='false' mobile='yes' title='Recent Post' type='HTML'/>
Lakukan hal sama untuk widget yang ingin Anda tampilkan. Jika Anda hanya ingin menampilkan widget tertentu yang hanya muncul pada tampilan blog versi mobile maka ganti coding seperti inimobile='only'
Setelah itu simpan dan lihat hasilnya. Maka tampilan blog Anda versi dekstop dan mobile akan sama. Kecuali script - script tertentu yang khusus dibuat oleh pembuatnya support tampilan dekstop tapi tidak support tampilan mobile (seperti featured content slider, carousel dan sebagainya)
Efek yang timbul ketika Anda menerapkan fungsi css ini adalah begitu Anda membuat widget baru di TATA LETAK, Anda tidak bisa melakukan pergeseran tempat. Kamu bisa menggesernya hanya di EDIT HTML. Saran admin, lakukan jika Anda sudah mentok dengan kosep template Anda, tidak diganti - ganti lagi.
Perhatikan, bahwa situs blog Anda tampak sederhana bukan tampilannya versi mobile? widget - widget cantik yang Anda tampilkan juga tidak ada satupun yang tampak bukan!. Klik Maju makmur kopen sebagai perbandingan. Maka Anda akan mendapatkan bahwa tampilan blog situs saya versi desktop akan sama dilihat oleh pengunjung yang datang dari perangkat seluler mereka. Bagaimana cara membuatnya? berikut
 |
- Sign in di blog Anda
- Klik tautan Template
- Klik gambar roda (logo setting) di bawah Tampilan SELULER sorot tampilan default ke TERSESUAI (letak paling bawah) kemudian simpan. (Fungsi ini akan membuat tampilan blog versi mobile sesuai dengan template yang Anda gunakan, berlaku untuk semua jenis template)
Untuk menampilkan widget, klik edit HTML
Cari kode seperti ini <b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'/>
Tambahkan mobile='yes' sesudah locked='false' sehingga hasilnya menjadi <b:widget id='HTML1' locked='false' mobile='yes' title='Recent Post' type='HTML'/>
Lakukan hal sama untuk widget yang ingin Anda tampilkan. Jika Anda hanya ingin menampilkan widget tertentu yang hanya muncul pada tampilan blog versi mobile maka ganti coding seperti inimobile='only'
Setelah itu simpan dan lihat hasilnya. Maka tampilan blog Anda versi dekstop dan mobile akan sama. Kecuali script - script tertentu yang khusus dibuat oleh pembuatnya support tampilan dekstop tapi tidak support tampilan mobile (seperti featured content slider, carousel dan sebagainya)
Efek yang timbul ketika Anda menerapkan fungsi css ini adalah begitu Anda membuat widget baru di TATA LETAK, Anda tidak bisa melakukan pergeseran tempat. Kamu bisa menggesernya hanya di EDIT HTML. Saran admin, lakukan jika Anda sudah mentok dengan kosep template Anda, tidak diganti - ganti lagi.
Hallo sobat tua dan muda dimanapun anda berada, kita jumpa lagi dalam acara Trik dan Tips :D . Dalam episode kali ini kita akan mencoba membahas tentang "Bagaimana Cara Membuat Postingan/Content Bl g Agar Lebih Expressive. Maksudnya apaan tuh?
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lh :) --> :) ...
1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>
<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>
Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D
Berikut ini adalah beberapa standar kode smile yang bisa digunakan :
:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z
Maju makmur kopen
Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium :D
http://trik-tips.blogspot.com/2007/12/cara-membuat-blog-lebih-expressive.html
Lengkapnya Dimas >>>
Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini :) , kalo tanda ini :p maka yang muncul gambar ini :p dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut. Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lh :) --> :) ...
1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin>
<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>
Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, Insya4JJI berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung. :D
Berikut ini adalah beberapa standar kode smile yang bisa digunakan :
:) --> :)
:D --> :D
:$ --> :$
:( --> :(
:p --> :p
;) --> ;)
:k --> :k
:@ --> :@
:# --> :#
:x --> :x
:o --> :o
:L --> :L
:O --> :O
:r --> :r
:y --> :y
:t --> :t
:s --> :s
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z
Maju makmur kopen
Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium :D
http://trik-tips.blogspot.com/2007/12/cara-membuat-blog-lebih-expressive.html
Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:
Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:
pertama-tama kamu harus punya gambar kayak gini (sejenis) nih:
dan
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://superinhost.com/gambar/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://superinhost.com/gambar/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://superinhost.com/gambar/redleft.gif") no-repeat left top;
background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;
background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;
Mudeng nggak ya :
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
___________________________________________________________
<div id="tabshori">
<ul>
<li><a href="http://dimas-arum.blogspot.com"><span>Home</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
<div id="tabshori">
<ul>
<li><a href="http://dimas-arum.blogspot.com"><span>Home</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://dimas-arum.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
____________________________________________________________
4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">
caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :
____________________________________________________________
____________________________________________________________
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
____________________________________________________________
terus ganti text yang berwarna hijau sihingga menjadi seperti ini:
____________________________________________________________
____________________________________________________________
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
____________________________________________________________
Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....
Lho? maksudnya apa? gini lho kalo read more yang lama, yang sudah pernah dibahas kita bahas dulu (udah baca belum?, kalo belum baca dulu gih disini ), 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?. Nha Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu berangkat jam 08.00 pagi pulang jam 16.00 WIB (emangnya PNS) :D Gini lho cara kerjanya :
Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain, contohnya disini. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan langsung ikuti trik berikut ini (langsung loncat dua baris ke bawah). Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu :D
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
11. jadi seluruh kodenya akan menjadi seperti ini :
[+/-] Selengkapnya...
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.
selesai....
Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya yaitu keseluruhan posting letakkan di antara kode dan
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:
'Read more' yang lama kan kodenya seperti ini :
Read More......
hapus text yang berwarna biru, 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.
bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya :$
Lengkapnya Dimas >>>
Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain, contohnya disini. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan langsung ikuti trik berikut ini (langsung loncat dua baris ke bawah). Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu :D
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
11. jadi seluruh kodenya akan menjadi seperti ini :
[+/-] Selengkapnya...
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.
selesai....
Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya yaitu keseluruhan posting letakkan di antara kode dan
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:
'Read more' yang lama kan kodenya seperti ini :
Read More......
hapus text yang berwarna biru, 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.
bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya :$
Anda tau dengan CopperCube ?? kalo belum tau wajar ^_^ Software ini mungkin sudah tidak asing lagi dimata orang yang suka design gambar. CopperCube ini fungsinya membuat aplikasi 3D yang berbentuk Flash, WebGL, dll. Dan katanya juga, kalian bisa membuat game dengan CopperCube ini. CopperCube ini tidak memerlukan bahasa pemrograman yang berat. Jadi semua orang mungkin bisa melakukannya. Jadi tunggu apalagi buruan download CopperCube ini gan ^_^
Screenshot :
Link Download :
- Indowebster | CopperCube 3.1.0
- Sharebeast | Patch CopperCube 3.1.0
- Password IDWS dan Sharebeast : www.koransoftware.com
Sumber: nya
Langganan:
Postingan (Atom)
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact