Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.
Cara memasang widget menu horizontal menu di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari) Kode CSS:
ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeTxMeI3T4u5vGclNsTzhaY6FIXG3JkvfWhGxanMFpB66FG4iwpyC5EQ6OUnUX1RiPTPb4n3j8oaVN8m3_2kp5_kXQ5DW4QTRCKHYEkb5-VfqRvmVNtQW19FMEesa8DC4-5SrTG_aZfE/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;} ul#menu li {display: block;float: left;margin: 0 0 0 5px;} ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;} ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhluAw7YtOLm5lYWoqekmxf4A5WL_XKEmg2Cwh00J9rNBdufwqBSFtwyJ4jabRBg7Tgzpqyzyo8X5nZx6HTshE5FhuRh-TMP3ODEdanHT974W8vbzyLpqiYOMo9DSCvjf_KHyUsWIUZqRY/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan. Kode HTML:
Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog. Apakah karena BloggerTM sudah merubah tampilannya (redesaign), maka Optimasi Blog ikut-ikutan berubah? Tidak, karena redesaign di blog ini telah lebih dulu dilakukan sebelum BloggerTM. Kalau tidak salah release tampilan baru site BloggerTM in draft dimulai pada hari ini (July 8, 2011).
Template yang Optimasi Blog gunakan sekarang (mencoba) menggunakan “liquid layout”—untuk mengetahui sedikit pengertiannya, silakan buka kembali posting sentuhan magic dalam blog—dan masih terkesan minimalis. Font yang digunakan full dari keluarga ‘serif’, berukuran 1em&line-height:1.5em, serta sedikit ditambah bumbu word-spacing& amp;letter-spacing.
Ngga perlu dikupas lebih dalam, ntar malah m’bosenin. Cukup diliat tampilan sekarang aja, gan. :)
‘Emang’ beda dengan yang dulu? Silakan baca sekelumit ulasan tentang ‘bunglonisasi’ templateOptimasi Blog dari masa ke masa berikut ini.
Default Template (pixed layout)
Pertama sekali Optimasi Blog menggunakan default template “Minima”, kemudian sedikit demi sedikit di modifikasi, sampai ke bentuk “blogger copy template”. Template tersebut lama digunakan dari 2009–Maret 2011.
Minimalis Template (elastis layout)
Hanya ingin mencoba yang minimalis & hasilnya tidak mengecewakan. Kalau tidak salah digunkan dalam waktu yang sebentar dari Maret 2011–Juli 2011.
Template sekarang digunakan (liquid layout)
Yah, sekedar trial & error dengan layout yang berbeda. Template ini mengadopsi banyak alternatif untuk menanamkan widget/gadget, mungkin di atas, di kanan, atau di bawah.
Seperti kata saya di atas bahwa mungkin perubahan itu diperlukan untuk suatu revolusi. Kira-kira perubahan seperti apa yang dimaksudkan oleh kalimat tersebut? Dan sampai kapan template ini digunakan oleh Optimasi Blog?
Terimakasih atas kunjungan anda isi kolom komentarnya
Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya. Jadi saya pingin berbagi cara pembuatannya disini. Dan yang saya bagikan hanya kode CSS & HTML saja, saya anggap kalian tahu penempatannya dimana Oke....
Markah HTML
Pertama kita buat dulu markah HTML sebagai berikut :
Sampai tahap diatas sebenarnya amplop sudah jadi, tapi saya akan menambah sedikit pemanis dengan box-shadow agar amplop ada kesan timbul serta atribut untuk font.
Amplopnya sudah jadi, sekarang tinggal kita membuat perangko biar bisa dikirim via Pos...he...he...he... Sebenarnya nggak usah memakai perangko juga bisa, dengan memanfaatkan Kilat Khusus tapi demi menghemat biaya perangko bisa jadi alternatif.
CSS untuk Perangko
Untuk perangko sebaiknya kita cari dulu gambar yang sesuai, kalau sudah ketemu baru kita buat pinggirannya.
Untuk perangko ini belum sempurna dibuat karena hanya bagus jika dilihat dengan menggunakan brower Chrome, kalau dilihat menggunakan FireFox masih kurang bagus...he..he...he...
Nah, udah jadi deh Amplop + Perangko yang siap dikirim lewat Pak Pos...he...he...he... Tapi kira-kira Pak Posnya nerima nggak ya karena semuanya dibuat dengan CSS3... wkwkwkwkwkwkwk.....
Terimakasih atas kunjungan anda isi kolom komentarnya
Satu lagi usaha sederhana meningkatkan pengunjung ke blog hingga 200%. Yaitu dengan menggunakan layanan traffic exchange Plipeo.
Dengan layanan traffic exchange Plipeo ini sobat bisa meningkatkan jumlah pengunjung ke blog sobat dengan cara kerja yang sederhana. Sobat cukup pasang widget yang berisi artikel-artikel blog lain dan sebaliknya blog lain juga memasang widget yang berisi artikel sobat. Pengunjungnya rata-rata dari blog yang memasang widget tersebut.
Sistem ini sangat adil, jika ingin mendapatkan traffic kita juga harus memberi traffic melalui widget yang kita pasang tadi. Jika kita tidak memasang widget ini maka traffic kita nol.
Jika sobat masih bingung tapi penasaran silahkan coba dengan langkah-langkah berikut :
Mendaftarkan blog ke Plipeo :
1. Masuk ke situsnya http://plipeo.com >> klik Register
2. Lalu masukkan alamat website, nama , email, jumlah traffic hariannya.
3. klik 'add'
4. Selesai.
Terimakasih atas kunjungan anda isi kolom komentarnya
caranya mudah sekali, sobat hanya memerlukan beberapa langkah saja.
Random post, random artikel, atau artikel secara acak,
adalah istilah yang sering kita baca pada blog-blog sobat kita yang lain. Salah tujuannya adalah untuk menampilkan artikel-artikel lama kita pada halaman blog secara acak, dengan demikian kemungkinan artikel yang terpendam tersebut dibaca oleh pengunjung.
Nah, berikut cara membuat random post (artikel acak) :
1. Login ke blog sobat >> rancangan >> add gadget >> lalu pilih HTML/JavaScript
2. Lalu masukkan kode berikut dalam kotak HTML/JavaScript :
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
Note: Ganti angka 10 (jumlah posting) dengan angka yang sobat inginkan.
3. SAVE dan lihat hasilnya,
Demikian cara membuat random post, have fun..
Terimakasih atas kunjungan anda isi kolom komentarnya
3. Centang "Expand Template Widget", lalu Download full template ini cara agar menjaga-jaga anda dalam melakukan kesalahan.
4. Cari kode </head> dan Copy kode di bawah ini lalu Paste tepat di atas </head>.
<!--Related Posts with thumbnails Scripts and Styles Start--><b:if cond='data:blog.pageType == "item"'> <style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{ font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;} #related-posts a{color:black;} #related-posts a:hover{color:black;}#related-posts a:hover {background-color:#d4eaf2;}</style><script src='http://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
5. Setelah itu cari kode <div class='post-footer-line post-footer-line-1'>, lalu Copy kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
<!-- Marquee Serbablog Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop> <h3><b>Related Posts</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://celoteh-galang.blogspot.com/2011/04/membuat-artikel-terkait-thumbnails.html' style='display:none;'>Thumbnail Related Post</a> </b:if> </b:if> <!-- Marquee Serbablog Related Posts with Thumbnails Code End-->
6. Save template anda dan lihat hasilnya.
THANKS SUDAH BACA ARTIKELNYA SEMOGA BERMANFAAT ISI KOMENTARNYA YAH :)
Ada cara praktis untuk menemukan artikel pada blog secara singkat.Bagi yang sudah tergabung dalam Google Adsense,pasti sudah tahu ya masalah ini.
Tapi bagi anda yang belum tergabung,tapi ingin menampilkan form pencari untuk blog anda sendiri,ada kode praktis yang ga ada salahnya anda coba. Hasilnya nanti akan seperti di bawah ini :
Kode yang berwarna hijau;http://bonek-candi.co.cc/search,gantilah dengan halaman blog anda sendiri,tapi jangan lupa tambahin kode/search ya.. Sedangkan Value "Search"anda bisa ganti menjadi "Go" atau "Cari" atau yang lain.
Sebelum-nya saya sudah pernah membahas tentang Membuat Related Post With Thumbnails di Bawah Postingan, tapi kali ini saya akan membahas Related Post di bawah postingan tampa thumbnails. Ini sala satu pilihan jika Blog anda terasa berat ketika di buka. Tampa panjang lebar langsung saja ikuti langkah-langkah di bawah ini.
1. Log in ke account blogger anda.
2. Pada dashboard klik "Design" lalu "Edit HTML" dan Centang "Expand Template Widget".
3. Untuk berjaga-jaga terjadi kesalahan silahkan klik Download Template lengkap.
4. Cari kode <p><data:post.body/></p>, untuk mempermudah pencarian silahkan tekan Ctrl + F.
Ket: jika anda tidak menemukan kode di atas silahkan perhatikan <p> setelah itu ada beberapa kode Script, baru <data:post.body/> kode Script lagi baru <p>.
5. Jika sudah dapat, Copy kode Script di bawah ini lalu paste tepat di bawah <p><data:post.body/></p>.
<b:if cond='data:blog.pageType == "item"'> <H2>Artikel Terkait:</H2> <DIV class='rbbox'> <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <DIV id='albri'/> <SCRIPT type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if>
6. Anda bisa mengganti Artikel Terkait dengan kata lain yang ingin anda gunakan, setelah itu save dan lihat hasilnya.
kali ini membahas tentang cara membuat Recent Post dan Recent Comments. ada beberapa cara untuk membuat widget ini dari mulai menggunakan widget creator, alamat feed, maupun java script. tutorial blogspot kali ini akan menggunakan alamat feed, untuk menghindari loading page yang terlalu berat jika menggunakan javascript.
Cara membuat Recent Comments atau Komentar Terbaru
Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments
Pilih Layout (tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.
Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/feeds/comments/full, kemudian pilih continue/lanjutkan, jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda
Jika Muncul pop up window, Isikan title/judul : label widget anda (misal : komentar terbaru, recent comments dll,) Show : jumlah komentar yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author
Klik Save dan lihat hasilnya.
Cara membuat Recent Post atau Artikel/Posting Terbaru
Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments
Pilih Layout (tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.
Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/atom.xml, kemudian pilih continue/lanjutkan, jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda
Jika Muncul pop up window, Isikan title/judul : label widget anda (posting terbaru, recent post dll,) Show: jumlah posting yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author
Dulu sebelum kotak komentar blogger/blogspot bisa muncul dibawah postingan, banyak yang menganti kotak komentarnya dengan commentbox dari pihak ketiga, misalnya dari haloscan. Namun setelah blogger merilis kotak komentar yg dibawah postingan maka kini banyak yg berbondong beralih ke kotak komentar original dari blogspot ini. Tapi bagi yg sudah terlanjur memakai haloscan dan sudah terlanjur mengobrak-abrik templatenya tentu akan sayang jika harus mengganti templatenya demi mendapatkan kotak original blogspot ini. Nha berikut ini akan aku ulas bagaimana cara mengembalikan kotak komentar haloscan menjadi kotak komentar original dari blogger. Ikuti tutorial berikut: 1. Login ke blogger, kemudian pilih menu"Layout--> Edit HTML" 2. Beri tanda centang pada kotak "Expand widget template" 3. Kemudian cari kode berikut :
Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain . Contohnya bisa dilihat di blog ini. Untuk komentar pemilik blog akan ada bordernya dan ada efek lainnya. Nha berikut ini akan aku beberkan cara untuk membuat Highlight Author Comment ini. Dah siap semuanya ? OK lets dance togather :D
1. Login ke blogger trus ke menu "Layout --> Edit HTML" 2. Beri tanda centang pada kotak "Expand Widget Templates" 3. Copy script berikut ini sebelum kode ]]></b:skin> atau copy ke dalam kode CSS.
4. Kemudian cari kode2 seperti berikut. Mungkin kode yg ada di HTML kamu akan beda, tp walaupun beda usahakan semirip mungkin dengan kode berikut ini :
5. Kode yang berwarna merah adalah kode yang harus kamu tambahkan di HTML kamu. Posisinya harus benar, ingat itu. 6. Kalo sudah terus disave template kamu.
Comment author ini berdasarkan profil dari pemilik blog tsb. Jadi supaya efeknya muncul sebelum memberi komentar kamu harus login dulu di blogger. OK. Oh ya ini bukan untuk komentar dari haloscan lho. Tapi hanya untuk kotak komentar yg dari blogger murni
Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?
Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.
Emoticon Yahoo :
Emoticon Kucing :
Gini nih cara membuatnya :
1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML " 2. Beri tanda centang pada kotak "expand widget template" 3. Lalu letakkan script berikut sebelum kode </body>
6. Kalo sudah trus di "save" dan coba lihat hasilnya
Tambahan * Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.
21.28
andhy9
Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog. Apakah karena BloggerTM sudah merubah tampilannya (redesaign), maka Optimasi Blog ikut-ikutan berubah? Tidak, karena redesaign di blog ini telah lebih dulu dilakukan sebelum BloggerTM. Kalau tidak salah release tampilan baru site BloggerTM in draft dimulai pada hari ini (July 8, 2011).
Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya.
