Mengantisipasi pihak Google akan menyidak pengguna Blogger terutama dalam hal penggunaan dan penghilangan Navbar Blogger, maka saya mencoba mengembalikan Navbar Blogger dari CORETAN ASAL yang sejak awal saya buang.
Saya tidak tahu kepastian, apakah informasi tentang sidak oleh Google akan dilaksanakan kapan, karena saya sendiri pun mengetahui dari beberapa Blogger yang lain. Karena saya ingin menampilkan Navbar Blogger kembali pada CORETAN ASAL, maka saya mencoba memodifikasi Navbar Blogger tersebut agar tampilan backgroundnya sesuai dengan warna dasar Header, demikian juga dengan lebar dari Navbar itu sendiri.
Tampilkan postingan dengan label Tutorial Bogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Bogger. Tampilkan semua postingan
Kamis, 04 Maret 2010
Merubah tampilan Navbar Blogger
Senin, 01 Maret 2010
Menu Horizontal dengan Tags Bookmark dan Search Box
Modifikasi Menu Navigasi Horizontal dengan Tags Bookmark dan Search Box disini saya maksudkan adalah menempatkan Tags yang berisi Label dalam menu navigasi pada template Blogger.
Berikut ini, langkah demi langkah bagaimana cara membuatnya :
1. Silahkan Login dan masuk pada Tata Letak kemudian Edit HTML.
2. Tambahkan kode dibawah ini, diatas kode ]]></b:skin>
Senin, 02 November 2009
Penerapan jQuery Scroll to Top Control
Dulu saya pernah membahas bagaimana cara membuat "Back To Top" dengan methode yang saya dapatkan dari www.dynamicdrive.com. Adapun penyimpanan file scrolltopcontrol-1.js di www.geocities.com, mengingat sekarang situs tersebut sudah tidak melayani upload gratis dan saya juga tidak punya dollar untuk membayar sewanya maka saya harus mencari solusi bagaimana penerapan jQuery Scroll to Top Control pada Blogger tetap berfungsi. Mengingat penerapan kode ini telah aku terapkan pada blogku yang lain, jadi saya harus berusaha bagaimana kode tersebut tetap berjalan mulus sehingga saya tidak perlu membuangnya.
Selasa, 27 Oktober 2009
Memanfaatkan Crosscol-wrapper untuk Navigasi
Banyak cara membuat navigasi menu pada blog, namun disini saya mencoba sharing bagaimana memanfaatkan Crosscol-wrapper untuk navigasi menu. Bagi pengguna template minima, tentu tidak asing dengan Crosscol-wrapper dan biasanya sektor ini jarang dimanfaatkan.
Ketika saya memodifikasi minima menjadi sebuah template yang minimalis, maka saya mencoba memanfaatkan bagian ini. Langkah awal tentu kita harus masuk ke blogger, kemudian apabila kita ingin tahu dimana letak "crosscol", maka lihat pada dashboard >Layout > Edit HTML. Silahkan tekan ctrl + F secara bersamaan kemudian masukkan "crosscol", maka akan anda jumpai kode seperti ini :
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Pada kode diatas, maka terdapat dua bagian yang dilambangkan dengan kode : style='text-align:center' yang membuat semua widget yang kita tambahkan akan berada pada posisi di tengah dan showaddelement='no' yang menyebabkan kita tidak bisa menambahkan widget. Untuk itu kita perlu mengubahnya menjadi seperti dibawah ini :
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
Karena kita ingin menambahkan navigasi menu secara terbatas, maka sebaiknya cobalah membuat posting yang terkait dengan "Home, About atau Contact" Salinlah url dari masing-masing posting dalam notepad yang nantinya akan kita tambahkan URL tersebut sebagai link list kita.
Langkah membuat widget Link List adalah sebagai berikut : klik Layout>Page element > add a gadget pilih Link List. Pada jendela Configure Link List untuk title, number of links to show in list dikosongkan. Sedangkan untuk Sorting pilih Don't Sort. Masukkan url dari posting Home pada New Site URL kemudian ketikkan HOME pada New Site Name kemudian save. Lakukan dengan url yang lainnya.
Kita akan menambahkan kode CSS dari pada navigasi tersebut, silahkan ke Layout > Edit HTML dan tambahkan kode dibawah ini sebelum kode ]]></b:skin>.
/* Navigasi
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}
.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}
.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}
.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}
Sekarang kita perlu membuat widget Link List secara otomatis akan berubah warna pada saat T-mouse berada di atas link tersebut, untuk itu silahkan klik Layout >Edit HTML sebelumnya tandai "Expand Widget Templates" dan cari kode dibawah ini :
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Ganti dengan kode dibawah ini :
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:blog.url!=data:link.target'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
<b:else/>
<li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Simpan dan nikmati hasilnya....
Jumat, 23 Oktober 2009
Membuat Yahoo Online Status Indicator
Alternatif untuk selalu kontak dengan pengunjung blog kita dapat kita lakukan dengan beberapa cara, diantaranya dengan pemasangan shoutbox, Yahoo! Messenger Pingbox dan lain-lain. Namun disini saya ingin berbagi pengetahuan bagaimana menambahkan Yahoo Online Status Indicator dan Contac me @ Yahoo messenger.
1. Yahoo Online Status Indicator.
Saya rasa untuk Yahoo Online Status Indicator ini sudah banyak yang tahu, mengingat banyak situs yang menyediakan layanan gratis untuk menambahkan indicator ini, namun bagi mereka yang kurang puas dengan image yang telah disediakan atau ingin menambahkan image dari hasil kreasi mereka tentu ingin sekali mengetahui bagaimana cara menampilkan hasil kreasi kita pada Yahoo Online Status Indicator di Sidebar blog kita.
Dengan memanfaatkan layanan gratis dari http://www.onlinestatus.org, maka kita dapat membuat "Yahoo Online Status Indicator" dengan hasil kreasi kita. Langkah awal tentunya kita harus menyiapkan Icon "Yahoo Online Status Indicator" sebanyak 3 (tiga) icon yaitu : Icon status Online, Icon status Offline dan Icon status Unknown. Buatlah tiga icon "Yahoo Online Status Indicator" dengan menggunakan Adobe Photoshop dengan ukuran sesuai selera anda, namun saya menyarankan membuat icon "Yahoo Online Status Indicator" berukuran 128 X 128 pixel.
Dibawah ini contoh ketiga icon "Yahoo Online Status Indicator"
Setelah kita membuat icon "Yahoo Online Status Indicator", segera login di Blogger kemudian klik Entri baru (posting) dan upload ketiga icon "Yahoo Online Status Indicator". Coba perhatikan hasil upload icon "Yahoo Online Status Indicator" pada posting di Edit HTML sbb :
Contoh kode Icon Offline icon "Yahoo Online Status Indicator"
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbaa-XD9lZ3DXntT23VZ05VEr2htxLtwdGkjRJyWeud31wRWhV4bjEjyH3KvYV7rnN-3sQ99AY7eG2Yco0aEaK8TPM3zzA6q1HWKXwnrWNwD4f_chKNdBWaJoEp3OcqPXjRc9-W6PevM/s1600-h/offline-YM.png"><img style="cursor: pointer; width: 128px; height: 128px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbaa-XD9lZ3DXntT23VZ05VEr2htxLtwdGkjRJyWeud31wRWhV4bjEjyH3KvYV7rnN-3sQ99AY7eG2Yco0aEaK8TPM3zzA6q1HWKXwnrWNwD4f_chKNdBWaJoEp3OcqPXjRc9-W6PevM/s320/offline-YM.png" alt="" id="BLOGGER_PHOTO_ID_5395306350420589714" border="0" /></a>
Nah tugas anda disini hanya menyalin kode yang tercantum dibawah ini pada notepad.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbaa-XD9lZ3DXntT23VZ05VEr2htxLtwdGkjRJyWeud31wRWhV4bjEjyH3KvYV7rnN-3sQ99AY7eG2Yco0aEaK8TPM3zzA6q1HWKXwnrWNwD4f_chKNdBWaJoEp3OcqPXjRc9-W6PevM/s320/offline-YM.png
Kerjakan langkah ini pada icon "Yahoo Online Status Indicator" yang lain. Setelah tersalin pada notepad, anda tidak perlu klik "Terbitkan Entri" namun cukup klik "Simpan Sekarang" agar ketiga icon "Yahoo Online Status Indicator" tidak muncul pada halaman posting blog anda.
Setelah itu silahkan berkunjung di situs http://osi.techno-st.net:8000/, Pada Item Mesengger silahkan pilih Yahoo, kemudian pada User Id : isi Id YM anda, Pada Address to Online Icon : isi dengan url image Online, Address to Offline icon : isi dengan url icon Offline, Address to unkown icon : isi url icon unkown, untuk IRC Channel : ( disini saya kosongkan ).
Setelah itu klik tombol Get HTML maka anda akan mendapatkan kode seperti ini :
Contoh kode HTML saya :
HTML code to put on your web page:
<!-- Begin Online Status Indicator code -->
<!-- http://www.onlinestatus.org/ -->
<A HREF="ymsgr:sendIM?nataludin5">
<IMG SRC="http://osi.techno-st.net:8000/yahoo/nataludin5/onurl=2.bp.blogspot.com/_gB_64c8osAk/St_6iA6gxDI/AAAAAAAAAMk/gbd4LRWvJAM/s320/Ymonlikoe.png/offurl=2.bp.blogspot.com/_gB_64c8osAk/St_6ikc6fJI/AAAAAAAAAM0/nl9iX7ZDLtg/s320/offline-YM.png/unknownurl=3.bp.blogspot.com/_gB_64c8osAk/St_6icYgK_I/AAAAAAAAAMs/tn8k_J6PX-c/s320/unknown.png"
align="absmiddle" border="0" ALT="Yahoo Online Status Indicator"
onerror="this.onerror=null;this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtmKkmOHWzIoXgEpNgkRcOisRbPX4E9GoB1mTTh8kgkrY0Dr7aGeoC3x7rMBY6c5MBkYNF94gh_C-xrI2UZJT2Rg1QFrEVjCbXb6bvxFwjaGL7uVJCtQ0gbQOY5LBzewufZfNY7Qunkg/s320/unknown.png';"></A>
<!-- End Online Status Indicator code -->
Forum code to put in your signature in a discussion forum:
[URL=http://osi.techno-st.net:8000/message/yahoo/nataludin5][IMG]http://osi.techno-st.net:8000/yahoo/nataludin5/onurl=2.bp.blogspot.com/_gB_64c8osAk/St_6iA6gxDI/AAAAAAAAAMk/gbd4LRWvJAM/s320/Ymonlikoe.png/offurl=2.bp.blogspot.com/_gB_64c8osAk/St_6ikc6fJI/AAAAAAAAAM0/nl9iX7ZDLtg/s320/offline-YM.png/unknownurl=3.bp.blogspot.com/_gB_64c8osAk/St_6icYgK_I/AAAAAAAAAMs/tn8k_J6PX-c/s320/unknown.png[/IMG][/URL]
Alternate forum code if the above doesn't work:
[URL="http://osi.techno-st.net:8000/message/yahoo/nataludin5"][IMG]http://osi.techno-st.net:8000/yahoo/nataludin5/onurl=2.bp.blogspot.com/_gB_64c8osAk/St_6iA6gxDI/AAAAAAAAAMk/gbd4LRWvJAM/s320/Ymonlikoe.png/offurl=2.bp.blogspot.com/_gB_64c8osAk/St_6ikc6fJI/AAAAAAAAAM0/nl9iX7ZDLtg/s320/offline-YM.png/unknownurl=3.bp.blogspot.com/_gB_64c8osAk/St_6icYgK_I/AAAAAAAAAMs/tn8k_J6PX-c/s320/unknown.png[/IMG][/URL]
Silahkan copas pada notepad:
Salin kode "HTML code to put on your web page" kemudian pada Tata Letak blogger anda klik "tambah gadget" pilih HTML/Javascript dan masukkan kode tersebut. Silahkan cek hasil dari icon "Yahoo Online Status Indicator" , yaitu dengan cara anda aktifkan YM atau email anda yang terkait dengan ID YM anda. Maka secara auto icon akan menyesuaikan status anda.
2. Contac me @ Yahoo messenger.
Untuk membuat Icon Contac me @ Yahoo messenger, langkahnya sama hanya anda tidak perlu berkunjung ke situs http://osi.techno-st.net:8000/, cukup dengan upload gambar anda pada blogger (Ukuran gambar yang saya buat ukuran 125 X 125 px, lihat contoh dibawah),
copas kodenya kemudian modifikasi kode HTML seperti ini :
<div class='widget-content'>
<a href="ymsgr:sendIM?ID Yahoo Messenger Anda" title="Contact Me @ Yahoo Messenger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-FpbplTm_nPmePYJ9-7W3jRxetccmkJcPrzPqxIXd43vyNisqqJjGEV0vXj64Kec0Y16jm1IwP1fVtCM9UV-mXTNE-euEBM2FG7oaVxNCpnq469tqtOagms2YuqN7sKNm_GUQWNoapQ/s320/contact-me.png"/></a>
</div>
Silahkan masukkan Id YM anda pada "ID Yahoo Messengger anda" kemudian tambahkan gadget, pilih HTML/Javascript dan masukkan kode diatas..... jadi dech.
Nah bagi anda yang ingin tahu hasilnya silahkan lihat contohnya di Sharing Post, semoga membantu.
Kamis, 27 Agustus 2009
Update Gadget Label Pada Blogger
Blogger mulai berbenah diri, hal ini ditandai dengan perubahan terhadap gadget label yang lebih fleksibel. Gadget label ini telah diperbarui dengan adanya Label Cloud
Perhatikan gambar di samping.
Jika Anda mungkin memiliki lebih banyak label dan Anda tidak ingin menampilkan semua label Anda di widget? Pada pengaturan gadget label, anda dapat klik button "Selected label/ Label yang dipilih" untuk subset dari label yang akan ditampilkan dalam widget:
Secara default, label akan ditata agar sesuai dengan elemen-elemen lain di bagian yang sama. Semua label akan muncul dalam warna yang sama seperti link lainnya di daerah ini dan ukuran ditentukan oleh popularitas label, pada skala 1-5 (di mana 5 adalah yang paling populer).
Jika Anda ingin gaya label yang lebih profesional, Anda dapat menambahkan CSS untuk template Blogger Anda menggunakan kelas-kelas berikut:
.label-size-1 a /* ini untuk ukuran minimal
.label-size-5 a/* ini untuk ukuran maksimal
Berikut adalah contoh bagaimana cara menerapkannya dalam template anda :
Setelah anda login di blogger, silahkan menuju tata letak kemudian pilih edit HTML. Kemudian tambahkan kode dibawah ini di atas ]]></b:skin>
.label-size-5 a {color: #cd0000;
font-size: 2em;
text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}
Silahkan dipraktekkan dan tidak menutup kemungkinan anda bisa memodifikasinya.
Kamis, 20 Agustus 2009
Membuat Community Link Feed pada Blogger
Bila anda memperhatikan sidebar di blog ini, maka akan terlihat Community Link Feed. Tentu anda akan bertanya, bagaimana cara membuatnya. Nah, disini saya membuat Community Link Feed dengan memadukan layanan bookmarks Google feedburner (GF), Delicious (D) dan membuat form dengan Google Doc (GD).
Sebelum saya menjabarkan cara membuatnya, terlebih dahulu saya mengucapkan terima kasih kepada kang JALOE yang tidak marah karena kode CSS telah aku intip dan aku kembangkan dengan CS3 ( Cara Sluman Slumun Slamet ) dan mengamati "Piye kok iso, yo?", akhirnya aku beranikan mencoba koordinasi dengan GF, D, GD dan tentunya mengamati sumber kode milik kang Jalooe lewat tool VIEW FIREFOX.
Berikut ini langkah demi langkah cara membuatnya :
Langkah untuk menyiapkan Form "Community Link Feed"
Anda harus login di docs.google.com, setelah login di docs.google.com, anda akan masuk pada halaman dokumen. Kemudian pada toolbar silahkan klik "New" kemudian klik "Form". Anda akan dihadapkan pada lembar kerja untuk mengedit form.
- Ganti Untitled Form dengan judul forum anda, misal : Community Link Feed
- Pada "You can include any text or info that will help people fill this out" isikan keterangan tentang forum anda, yang didalamnya mengandung aturan dan tujuan dibuatnya forum ini.
- Pada "Quetion Title", masukkan pertanyaan misal : NAMA
- Pada "Help Text" apabila tidak penting, kosongkan
- Pada "Question Type" pilih "Text"
- Centang pada kotak "Make This a required question" untuk menandai bahwa kotak dengan judul "Nama" wajib diisi.
- Klik "Done"
- Klik "Save"
Langkah diatas adalah langkah membuat kotak input "nama"
Untuk membuat kotak input berikutnya, klik "Add Item" kemudian pilih "text", silahkan buat kotak input untuk "Judul Artikel" dengan langkah yang sama seperti diatas.
Buatlah kotak input berikutnya, yaitu : "URL Artikel" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Email" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Deskripsi Artikel" dengan langkah klik "Add Item" kemudian pilih "Paragraph Text", langkah selanjutnya sama.
Pada button "Theme:Plan" anda bisa memilih bentuk form yang sesuai selera anda.
Untuk button "See Responses" saya memilih "spreadsheet" kemudian setelah muncul jendela spreadsheet silahkan atur lebar dari kolomnya.
Pada button "More Actions" saya memilih "embed", maka akan muncul kode iframe yang nantinya akan anda pasang pada blog anda. Kodenya seperti ini :
<iframe src="http://spreadsheets.google.com/embeddedform?key=tfmdx4-LJdB9elutRhlAg7Q" width="500" height="578" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Kode diatas ditambahkan saat anda membuat posting Community Link Feed di Blogger.
Langkah kedua.
Dalam tutorial ini, saya menggunakan Delicious sebagai media bookmarks.
Silahkan login apabila anda sudah bergabung dengan Delicious, bila anda belum terdaftar pada Delicious silahkan klik "Join Nows".
Pada "Enter Details" silahkan isi data sesuai yang ada pada langkah ini, kemudian klik "Register".
Anda akan masuk ke halaman kedua dan ketiga, dalam tutorial ini saya sengaja skip sehingga anda akan dibawa ke halaman, dimana tugas anda adalah meng-copy URL halaman tersebut. contoh urlnya :
http://delicious.com/coretanasal
Pada halaman yang sama coba perhatikan kalimat dibawah Ini :
To save a bookmark, click the button you installed during the registration process. This is labeled "Tag" if you installed the Add-on or "Bookmark this on Delicious" if you added the button to your bookmarks toolbar. If you need to install the bookmarking buttons again, visit Tools.
Silahkan klik .... visit "Tools", kemudian anda akan dibawa ke halaman berikutnya lalu pilihlah "Bookmark this on Delicious" dan silahkan copy kode yang ada diatas tulisan "Blog templates" bagi pengguna blogger.
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encode URIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
Tools ini nantinya dipasang pada sidebar blog anda untuk memudahkan kita memasukkan artikel dari pengunjung anda yang mendaftar dalam Community Link Feed yang telah anda buat.
Langkah ketiga, yaitu memadukan URL delicious yang sudah copy tadi pada Google feedburner.
Silahkan anda login, kemudian masukkan URL delicious anda.
Setelah itu anda akan masuk pada jendela : Welcome! Let us burn a feed for you.
Silahkan anda ubah "feed Title" dan "feed address". Namun pada tutorial ini saya langsung klik NEXT.
Anda akan masuk pada jendela : "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?" saya langsung klik next dan akan dibawa ke jendela "Get More Gusto From Your Feed Traffic Statistics." klik "Next" dan masuk ke halaman "You have successfully updated the feed "Delicious/coretanasal"" kemudian klik "Publicize" dan klik "BuzzBoost"
Pada BuzzBoost silahkan atur : beberapa pilihan yang ada, namun saya menentukan pada :
- Number of items to display = 5
- Open links in: New Window
- Display Item Content, pilih Plain Text dan 20 words kemudian klik "Activate"
Setelah itu silahkan copy script yang ada, seperti dibawah ini.
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Delicious/coretanasal"></a><br/>Powered by FeedBurner</p> </noscript>
Script diatas nantinya akan dipadukan pada kode CSS yang akan kita pasang pada edit HTML template kita.
Sekarang kita akan membuat kode CSS pada template kita. Silahkan login di blogger, kemudian pada "Tata Letak" klik edit HTML, kemudian tambahkan kode berikut ini diatas kode ]]></b:skin> :
/* community link feed
----------------------------------------------- */
div.feedburnerFeedBlock p.date {
color: #666;
}
div.feedburnerFeedBlock ul li div {
display: block;
}
div.feedburnerFeedBlock span.headline a {
font-weight: normal;
font-size: 12px;font-family:Georgia,"Times New Roman",Times,serif;
color: #5689AB;padding-bottom:1em;
}
div.feedburnerFeedBlock ul li {
margin-bottom: .5em;background:none;
padding-left: 0;padding-bottom:1em;
text-indent: 0;border-bottom:1px solid #ccc;
}
div.feedburnerFeedBlock ul {
list-style: none;
margin: 0;
padding: 0;
}
.feedTitle { display:none; }
#creditfooter {display:none}
.submitNews a:link, .submitNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-right:4px;
margin-left:2px;
padding:4px 5px;
text-align:center;
}
.submitNews a:hover {
background:#444444;
color:#FFFFFF;
}
.subcribNews a:link, .subcribNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-left:5px;
padding:4px 10px;
text-align:center;
}
.subcribNews a:hover {
background:#444444;
color:#FFFFFF;
}
Simpan template anda, kemudian masuk elemen halaman : klik "Tambah Gadget" pada Sidebar, pilih "HTML/Javascript" lalu tambahkan kode dibawah ini :
<div class="widget-content">
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript"></script>
<span class="submitNews"><a href="http://www.casal71.co.cc/2009/08/community-feed-link.html">Submit Artikel</a></span><span class="subcribNews"><a href="http://feeds.feedburner.com/Delicious/coretanasal" target="_blank">View subcribe</a></span><br/>
</div>
Lalu bagaimana mengetahui seseorang telah mendaftar ?
Anda harus mewajibkan para pendaftar untuk memberitahukan bahwa mereka telah mendaftarkan URL artikelnya pada kotak komentar. Kemudian anda cek pada docs.google.com dibagian spreadsheets, kemudian masukkan data yang masuk ke delicious dengan jalan mengklik widget delicious yang sudah anda pasang pada bagian sidebar.
Keterangan : Untuk kode bercetak merah merupakan kombinasi link yang kita dapatkan dari Google Feedburner, sedangkan kode bercetak biru adalah url posting Community Link Feed itu sendiri.
Semoga bermanfaat dan sekali lagi terima kasih kepada kang Jaloe yang telah memberi PR buat saya untuk memecahkan sendiri bagaimana cara membuat Community Link Feed ini. Juga saya sangat menghargai arahan singkatnya.
Bila kurang jelas silahkan tanyakan pada kotak komentar yang ada.
Sebelum saya menjabarkan cara membuatnya, terlebih dahulu saya mengucapkan terima kasih kepada kang JALOE yang tidak marah karena kode CSS telah aku intip dan aku kembangkan dengan CS3 ( Cara Sluman Slumun Slamet ) dan mengamati "Piye kok iso, yo?", akhirnya aku beranikan mencoba koordinasi dengan GF, D, GD dan tentunya mengamati sumber kode milik kang Jalooe lewat tool VIEW FIREFOX.
Berikut ini langkah demi langkah cara membuatnya :
Langkah untuk menyiapkan Form "Community Link Feed"
Anda harus login di docs.google.com, setelah login di docs.google.com, anda akan masuk pada halaman dokumen. Kemudian pada toolbar silahkan klik "New" kemudian klik "Form". Anda akan dihadapkan pada lembar kerja untuk mengedit form.
- Ganti Untitled Form dengan judul forum anda, misal : Community Link Feed
- Pada "You can include any text or info that will help people fill this out" isikan keterangan tentang forum anda, yang didalamnya mengandung aturan dan tujuan dibuatnya forum ini.
- Pada "Quetion Title", masukkan pertanyaan misal : NAMA
- Pada "Help Text" apabila tidak penting, kosongkan
- Pada "Question Type" pilih "Text"
- Centang pada kotak "Make This a required question" untuk menandai bahwa kotak dengan judul "Nama" wajib diisi.
- Klik "Done"
- Klik "Save"
Langkah diatas adalah langkah membuat kotak input "nama"
Untuk membuat kotak input berikutnya, klik "Add Item" kemudian pilih "text", silahkan buat kotak input untuk "Judul Artikel" dengan langkah yang sama seperti diatas.
Buatlah kotak input berikutnya, yaitu : "URL Artikel" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Email" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Deskripsi Artikel" dengan langkah klik "Add Item" kemudian pilih "Paragraph Text", langkah selanjutnya sama.
Pada button "Theme:Plan" anda bisa memilih bentuk form yang sesuai selera anda.
Untuk button "See Responses" saya memilih "spreadsheet" kemudian setelah muncul jendela spreadsheet silahkan atur lebar dari kolomnya.
Pada button "More Actions" saya memilih "embed", maka akan muncul kode iframe yang nantinya akan anda pasang pada blog anda. Kodenya seperti ini :
<iframe src="http://spreadsheets.google.com/embeddedform?key=tfmdx4-LJdB9elutRhlAg7Q" width="500" height="578" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Kode diatas ditambahkan saat anda membuat posting Community Link Feed di Blogger.
Langkah kedua.
Dalam tutorial ini, saya menggunakan Delicious sebagai media bookmarks.
Silahkan login apabila anda sudah bergabung dengan Delicious, bila anda belum terdaftar pada Delicious silahkan klik "Join Nows".
Pada "Enter Details" silahkan isi data sesuai yang ada pada langkah ini, kemudian klik "Register".
Anda akan masuk ke halaman kedua dan ketiga, dalam tutorial ini saya sengaja skip sehingga anda akan dibawa ke halaman, dimana tugas anda adalah meng-copy URL halaman tersebut. contoh urlnya :
http://delicious.com/coretanasal
Pada halaman yang sama coba perhatikan kalimat dibawah Ini :
To save a bookmark, click the button you installed during the registration process. This is labeled "Tag" if you installed the Add-on or "Bookmark this on Delicious" if you added the button to your bookmarks toolbar. If you need to install the bookmarking buttons again, visit Tools.
Silahkan klik .... visit "Tools", kemudian anda akan dibawa ke halaman berikutnya lalu pilihlah "Bookmark this on Delicious" dan silahkan copy kode yang ada diatas tulisan "Blog templates" bagi pengguna blogger.
<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encode URIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>
Tools ini nantinya dipasang pada sidebar blog anda untuk memudahkan kita memasukkan artikel dari pengunjung anda yang mendaftar dalam Community Link Feed yang telah anda buat.
Langkah ketiga, yaitu memadukan URL delicious yang sudah copy tadi pada Google feedburner.
Silahkan anda login, kemudian masukkan URL delicious anda.
Setelah itu anda akan masuk pada jendela : Welcome! Let us burn a feed for you.
Silahkan anda ubah "feed Title" dan "feed address". Namun pada tutorial ini saya langsung klik NEXT.
Anda akan masuk pada jendela : "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?" saya langsung klik next dan akan dibawa ke jendela "Get More Gusto From Your Feed Traffic Statistics." klik "Next" dan masuk ke halaman "You have successfully updated the feed "Delicious/coretanasal"" kemudian klik "Publicize" dan klik "BuzzBoost"
Pada BuzzBoost silahkan atur : beberapa pilihan yang ada, namun saya menentukan pada :
- Number of items to display = 5
- Open links in: New Window
- Display Item Content, pilih Plain Text dan 20 words kemudian klik "Activate"
Setelah itu silahkan copy script yang ada, seperti dibawah ini.
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Delicious/coretanasal"></a><br/>Powered by FeedBurner</p> </noscript>
Script diatas nantinya akan dipadukan pada kode CSS yang akan kita pasang pada edit HTML template kita.
Sekarang kita akan membuat kode CSS pada template kita. Silahkan login di blogger, kemudian pada "Tata Letak" klik edit HTML, kemudian tambahkan kode berikut ini diatas kode ]]></b:skin> :
/* community link feed
----------------------------------------------- */
div.feedburnerFeedBlock p.date {
color: #666;
}
div.feedburnerFeedBlock ul li div {
display: block;
}
div.feedburnerFeedBlock span.headline a {
font-weight: normal;
font-size: 12px;font-family:Georgia,"Times New Roman",Times,serif;
color: #5689AB;padding-bottom:1em;
}
div.feedburnerFeedBlock ul li {
margin-bottom: .5em;background:none;
padding-left: 0;padding-bottom:1em;
text-indent: 0;border-bottom:1px solid #ccc;
}
div.feedburnerFeedBlock ul {
list-style: none;
margin: 0;
padding: 0;
}
.feedTitle { display:none; }
#creditfooter {display:none}
.submitNews a:link, .submitNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-right:4px;
margin-left:2px;
padding:4px 5px;
text-align:center;
}
.submitNews a:hover {
background:#444444;
color:#FFFFFF;
}
.subcribNews a:link, .subcribNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-left:5px;
padding:4px 10px;
text-align:center;
}
.subcribNews a:hover {
background:#444444;
color:#FFFFFF;
}
Simpan template anda, kemudian masuk elemen halaman : klik "Tambah Gadget" pada Sidebar, pilih "HTML/Javascript" lalu tambahkan kode dibawah ini :
<div class="widget-content">
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript"></script>
<span class="submitNews"><a href="http://www.casal71.co.cc/2009/08/community-feed-link.html">Submit Artikel</a></span><span class="subcribNews"><a href="http://feeds.feedburner.com/Delicious/coretanasal" target="_blank">View subcribe</a></span><br/>
</div>
Lalu bagaimana mengetahui seseorang telah mendaftar ?
Anda harus mewajibkan para pendaftar untuk memberitahukan bahwa mereka telah mendaftarkan URL artikelnya pada kotak komentar. Kemudian anda cek pada docs.google.com dibagian spreadsheets, kemudian masukkan data yang masuk ke delicious dengan jalan mengklik widget delicious yang sudah anda pasang pada bagian sidebar.
Keterangan : Untuk kode bercetak merah merupakan kombinasi link yang kita dapatkan dari Google Feedburner, sedangkan kode bercetak biru adalah url posting Community Link Feed itu sendiri.
Semoga bermanfaat dan sekali lagi terima kasih kepada kang Jaloe yang telah memberi PR buat saya untuk memecahkan sendiri bagaimana cara membuat Community Link Feed ini. Juga saya sangat menghargai arahan singkatnya.
Bila kurang jelas silahkan tanyakan pada kotak komentar yang ada.
Senin, 03 Agustus 2009
Petunjuk Install Mode H-Blogger Themes
Ditutupnya File Hosting Gratisan, membuat aku kelabakan mengingat beberapa template hasil meodifikasi minima menggunakan file Javascript yang aku simpan di Yahoo!Geocity. Untunglah aku ndak begitu lama resah, karena saat aku googling menemukan template Hybrid News yang menerapkan file Javascript pada kode templatenya.
Seperti kebiasaan sebelumnya, aku selalu tidak puas hanya sekedar menggunakan template orang kalau ndak memodifikasinya. Meskipun hasilnya tidak selalu aku gunakan untuk blogku. Kali ini saya mencoba memadukan dua template yang sangat populer baik di kalangan Blogger maupun Wordpress. Apalagi ada permintaan khusus dari rekan Herry Settings. Sebagai template utama aku menggunakan konsep Hybrid News Blogger Template dari Free Blogger Template, sedangkan modifikasinya aku menggunakan konsep pada Revolution City dari Bloganol.
Dari dua konsep template yang berbeda ini, lahirlah MODE H-BLOGGER THEME.
Mari kita belajar bersama bagaimana cara mengedit template yang telah aku modifikasi ini, berhati-hati dan gunakan CTRL + F untuk menemukan kode yang tepat untuk pencarian.
Buka Edit HTML, dan mari kita mulai .....
1. Kita mulai dari TOP Navigations, cari kode dibawah ini :
Keterangan :
- Ganti tanda # dengan masing-masing URL dari tiap menu navigasi anda.
- Ganti yang bercetak merah dengan TEXT anda.
- Kode bercetak tebal adalah menu tambahan bila anda ingin menambahkan menu yang lain
2. Untuk Navigasi yang dibawah header.
Cari kode dibawah ini :
Silahkan ubah seperti langkah pada point 1.
3. Slide Feature [Automatic update for post summary and image thumbnail]
SLIDE fitur ini bisa dikatakan sebagai recent post. menggunakan script Atom Feed dan Dinamis model. Disini, kita menggunakan 2 ATOM feed untuk dua halaman dari SLIDE SHOW. Jadi, anda dapat menampilkan dua posting terbaru anda. Namun, tidak menutup kemungkinan bisa lebih.
Langkah pengeditan :
Cari kode berikut ini :
Tugas anda hanya mengganti "namablog.blogspot.com"
Pada Script Pertama :
Pada Script Kedua :
Coba perhatikan susunannya ( aku singkat saja, terlalu panjang masalahnya ) :
pada kode :
home_page = "http://namablog.blogspot.com/feeds/posts/default";
dapat anda ubah apabila anda ingin menampilkan posting sesuai label, dengan kode berikut ini :
http://namablog.blogspot.com/feeds/posts/default/-/labelyangdikehendaki
LALU BAGAIMANA JIKA ANDA INGIN MENAMBAHKAN HALAMAN LAIN DALAM SLIDE FEATURE...?
Anda hanya menyalin kode dari <div class='feature'> hingga </div>, kemudian merubah nilai STARTPOST dan NUMPOSTS pada kode tersebut.
Dibawah ini contoh penerapannya :
4. Jika posting terbaru anda tidak menggunakan gambar, maka secara default akan muncul gambar yang telah disiapkan pada template ini. Bila anda ingin menggantinya dengan kreasi anda, silahkan cari kode URL berikut : http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png.
5. Menambahkan file feature pada masing-masing kolom CATEGORY.
Untuk dapat menampilkan penggalan posting pada Category, langkah yang harus anda kerjakan adalah sebagai berikut :
1. Untuk menambahkan gambar :
- Pada posting anda, saat anda mengupload gambar ke blogger, sebaiknya pada PILIH TATA LETAK centang Button KIRI, setelah gambar berhasil di upload masih pada posisi ruang posting, pilih edit HTML maka akan muncul kode seperti ini (saya ambil contoh sesuai yang ada di MODE H-BLOGGER THEME ):
COPAS kode tersebut dalam NOTEPAD. Kemudian buat modifikasi dari kode diatas seperti ini :
keterangan :
- http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html, ini adalah URL posting anda.
- <img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a>
kode diatas adalah modifikasi dari kode gambar yg ada pada posting yang kita COPAS tadi.
(ukuran gambar 70x70 px)
- <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
Kode diatas adalah URL posting kita yang dipasangkan pada judul posting (contoh:Dian Sastro), <br/> adalah kode agar penggalan kalimat dari posting berada dibawah judul, kemudian "Dian Sastro is an Indonesian model and actress ....." merupakan penggalan posting kita. Ingat jangan terlalu panjang, bila terlalu panjang tampilan akan berantakan.
Setelah itu, pada TATA LETAK- Eleman Halaman, anda akan menjumpai beberapa CATEGORY lengkap dengan kotak HTML/Javascript. Silahkan masukkan kode yang sudah dimodifikasi. Ingat, penambahan harus seimbang, bila CATEGORY#1 anda menambahkan 2 atau 3 kode HTML, maka pada CATEGORY#2 jumlah yang ditambahkan harus sama, Jika anda menambahkan dari masing-masing Category tidak sama, maka tampilan akan berantakan. Ini berlaku untuk yang lain.
Untuk menambahkan LINK URL pada tulisan "Read More Posts From This Category", silahkan anda Klik pada LABEL di sidebar, kemudian Copi URLnya. Lalu, masuk ke TATA LETAK - Edit HTML, kemudian cari kode seperti ini ....
Pada kode ini : <b><a href='#'>Read More Posts From This Category</a></b>
ganti # dengan URL dari Label/ kategori posting kita, sehingga akan menjadi seperti dibawah ini :
<b><a href='http://buatsobatku.blogspot.com/search/label/opini'>Read More Posts
From This Category</a></b>
Ohya, <h3>Opini</h3> silahkan ubah "Opini" sesuai dengan label posting anda.
ANDA BISA MENAMBAHKAN BEBERAPA CATEGORY, misal Category#5,6 dan seterusnya dengan cara COPAS kode
ganti : Category, HTML-nya, misal HTML101 dst yang penting belum ada di kode HTML tersebut, dan yang lain sesuai langkah diatas, kemudian tambahkan dibawah :
6. Pada DEMO MODE H-BLOGGER THEME di Sidebar terdapat recent post berdasarkan label, cara pasangnya adalah masuk pada tata letak, kemudian pada elemen halaman klik tambah gadget dan pilih HTML/Javascript. Kemudian tambahkan kode berikut ini :
Ganti http://namabloganda.blogspot.com dengan url blog anda.
NB.
- Sebaiknya terapkan pada blog baru dulu.
- Silahkan dicoba, jangan takut salah
Semoga dengan adanya tutorial ini, rekan-rekan blogger bisa menikmati template MODE H-BLOGGER THEMES.
Ingat, jangan takut untuk berexperimen, karena suatu keberhasilan tidak akan tercapai bila kita tidak berusaha untuk mencobanya.....
Anda bisa download template MODE H-BLOGGER THEME di bCOMStudio.
DEMO MODE H-BLOGGER THEMES
Seperti kebiasaan sebelumnya, aku selalu tidak puas hanya sekedar menggunakan template orang kalau ndak memodifikasinya. Meskipun hasilnya tidak selalu aku gunakan untuk blogku. Kali ini saya mencoba memadukan dua template yang sangat populer baik di kalangan Blogger maupun Wordpress. Apalagi ada permintaan khusus dari rekan Herry Settings. Sebagai template utama aku menggunakan konsep Hybrid News Blogger Template dari Free Blogger Template, sedangkan modifikasinya aku menggunakan konsep pada Revolution City dari Bloganol.
Dari dua konsep template yang berbeda ini, lahirlah MODE H-BLOGGER THEME.
Mari kita belajar bersama bagaimana cara mengedit template yang telah aku modifikasi ini, berhati-hati dan gunakan CTRL + F untuk menemukan kode yang tepat untuk pencarian.
Buka Edit HTML, dan mari kita mulai .....
1. Kita mulai dari TOP Navigations, cari kode dibawah ini :
<ul class='menu sf-menu'>
<li class='current_page_item'><a href='/'>Home</a></li>
<li class='page_item'><a href='#' title='About'>About</a></li>
<li class='page_item'><a href='#' title='Archives'>Archives</a></li>
<li class='page_item'><a href='#' title='Blog'>Blog</a></li>
<li class='page_item'><a href='#' title='Elements'>Elements</a></li>
<li class='page_item'><a href='#' title='New menu'>New Menu</a></li>
</ul>
Keterangan :
- Ganti tanda # dengan masing-masing URL dari tiap menu navigasi anda.
- Ganti yang bercetak merah dengan TEXT anda.
- Kode bercetak tebal adalah menu tambahan bila anda ingin menambahkan menu yang lain
2. Untuk Navigasi yang dibawah header.
Cari kode dibawah ini :
<ul class='menu sf-menu'>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
<li class='cat-item'><a href='#' title='Edit Title'>Edit</a></li>
</ul>
Silahkan ubah seperti langkah pada point 1.
3. Slide Feature [Automatic update for post summary and image thumbnail]
SLIDE fitur ini bisa dikatakan sebagai recent post. menggunakan script Atom Feed dan Dinamis model. Disini, kita menggunakan 2 ATOM feed untuk dua halaman dari SLIDE SHOW. Jadi, anda dapat menampilkan dua posting terbaru anda. Namun, tidak menutup kemungkinan bisa lebih.
Langkah pengeditan :
Cari kode berikut ini :
Tugas anda hanya mengganti "namablog.blogspot.com"
Pada Script Pertama :
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
Pada Script Kedua :
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
Coba perhatikan susunannya ( aku singkat saja, terlalu panjang masalahnya ) :
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
pada kode :
home_page = "http://namablog.blogspot.com/feeds/posts/default";
dapat anda ubah apabila anda ingin menampilkan posting sesuai label, dengan kode berikut ini :
http://namablog.blogspot.com/feeds/posts/default/-/labelyangdikehendaki
LALU BAGAIMANA JIKA ANDA INGIN MENAMBAHKAN HALAMAN LAIN DALAM SLIDE FEATURE...?
Anda hanya menyalin kode dari <div class='feature'> hingga </div>, kemudian merubah nilai STARTPOST dan NUMPOSTS pada kode tersebut.
Dibawah ini contoh penerapannya :
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 0;
numposts = 1;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 1;
numposts = 2;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
<div class='feature'>
<script language='JavaScript'>
bla....
bla....
bla....
startposts = 2;
numposts = 3;
home_page = "http://namablog.blogspot.com/feeds/posts/default";
</script>
<script type='text/javascript'>
//<![CDATA[
bla....
bla....
bla....
//]]>
</script>
</div>
4. Jika posting terbaru anda tidak menggunakan gambar, maka secara default akan muncul gambar yang telah disiapkan pada template ini. Bila anda ingin menggantinya dengan kreasi anda, silahkan cari kode URL berikut : http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png.
5. Menambahkan file feature pada masing-masing kolom CATEGORY.
Untuk dapat menampilkan penggalan posting pada Category, langkah yang harus anda kerjakan adalah sebagai berikut :
1. Untuk menambahkan gambar :
- Pada posting anda, saat anda mengupload gambar ke blogger, sebaiknya pada PILIH TATA LETAK centang Button KIRI, setelah gambar berhasil di upload masih pada posisi ruang posting, pilih edit HTML maka akan muncul kode seperti ini (saya ambil contoh sesuai yang ada di MODE H-BLOGGER THEME ):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s1600-h/204px-Dian_sastro_scroundbites_2007.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 143px; height: 232px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg" alt="" id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" /></a>
COPAS kode tersebut dalam NOTEPAD. Kemudian buat modifikasi dari kode diatas seperti ini :
<a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html"><img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a> <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
keterangan :
- http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html, ini adalah URL posting anda.
- <img id="BLOGGER_PHOTO_ID_5365529574420394866" border="0" style="margin: 0pt 10px 0px 0pt; float: left; cursor: pointer; width: 70px; height: 70px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZf7A-vmTi9pswl4qLECdvUhBNwgzKw3Q59aosmnBhyU5JMd5ujMZ2cNTT5_RtHJ6SDI2mt5uaA8h5M2G7CnB7uuR-W4S686iJGZHoYSqXYGjplRtn_oNk6MDw4eEWoWnnELOLrYlQaI/s320/204px-Dian_sastro_scroundbites_2007.jpg"/></a>
kode diatas adalah modifikasi dari kode gambar yg ada pada posting yang kita COPAS tadi.
(ukuran gambar 70x70 px)
- <a href="http://buatsobatku.blogspot.com/2009/08/diandra-paramitha-sastrowardoyo.html">Dian Sastro</a><br/>
Dian Sastro is an Indonesian model and actress .....
Kode diatas adalah URL posting kita yang dipasangkan pada judul posting (contoh:Dian Sastro), <br/> adalah kode agar penggalan kalimat dari posting berada dibawah judul, kemudian "Dian Sastro is an Indonesian model and actress ....." merupakan penggalan posting kita. Ingat jangan terlalu panjang, bila terlalu panjang tampilan akan berantakan.
Setelah itu, pada TATA LETAK- Eleman Halaman, anda akan menjumpai beberapa CATEGORY lengkap dengan kotak HTML/Javascript. Silahkan masukkan kode yang sudah dimodifikasi. Ingat, penambahan harus seimbang, bila CATEGORY#1 anda menambahkan 2 atau 3 kode HTML, maka pada CATEGORY#2 jumlah yang ditambahkan harus sama, Jika anda menambahkan dari masing-masing Category tidak sama, maka tampilan akan berantakan. Ini berlaku untuk yang lain.
Untuk menambahkan LINK URL pada tulisan "Read More Posts From This Category", silahkan anda Klik pada LABEL di sidebar, kemudian Copi URLnya. Lalu, masuk ke TATA LETAK - Edit HTML, kemudian cari kode seperti ini ....
<div id='homepageleft'>
<div class='model'>
<h3>Opini</h3>
<b:section class='homepageleftwidget' id='homepageleftwidget' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>
</div></div>
Pada kode ini : <b><a href='#'>Read More Posts From This Category</a></b>
ganti # dengan URL dari Label/ kategori posting kita, sehingga akan menjadi seperti dibawah ini :
<b><a href='http://buatsobatku.blogspot.com/search/label/opini'>Read More Posts
From This Category</a></b>
Ohya, <h3>Opini</h3> silahkan ubah "Opini" sesuai dengan label posting anda.
ANDA BISA MENAMBAHKAN BEBERAPA CATEGORY, misal Category#5,6 dan seterusnya dengan cara COPAS kode
<div id='homepageleft'>
<div class='model'>
<h3>Category #3</h3>
<b:section class='homepagebotleftwidget' id='homepagebotleftwidget' preferred='yes'>
<b:widget id='HTML85' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#'>Read More Posts From This Category</a></b>
</div></div>
<div id='homepageright'>
<div class='model'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>
</div>
</div>
ganti : Category, HTML-nya, misal HTML101 dst yang penting belum ada di kode HTML tersebut, dan yang lain sesuai langkah diatas, kemudian tambahkan dibawah :
<div id='homepageright'>
<div class='featured'>
<h3>Category #4</h3>
<b:section class='homepagebotrightwidget' id='homepagebotrightwidget' preferred='yes'>
<b:widget id='HTML97' locked='false' title='' type='HTML'/>
<b:widget id='HTML96' locked='false' title='' type='HTML'/>
<b:widget id='HTML94' locked='false' title='' type='HTML'/>
</b:section><div style='margin-bottom:10px;'/>
<b><a href='#' rel='bookmark'>Read More Posts From This Category</a></b>
</div>
</div>
</div>
..... tambahkan di sini......
</b:if>
</div>
6. Pada DEMO MODE H-BLOGGER THEME di Sidebar terdapat recent post berdasarkan label, cara pasangnya adalah masuk pada tata letak, kemudian pada elemen halaman klik tambah gadget dan pilih HTML/Javascript. Kemudian tambahkan kode berikut ini :
Label: <span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 5;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>
<script src="http://namabloganda.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script>
<!-- Tolong hargai dengan tidak menghapus/mengubah link di bawah -->
<div style="text-align:right; font-size:0.75em">
Widget by:
<a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html">
Info Blog
</a>
</div>
Ganti http://namabloganda.blogspot.com dengan url blog anda.
NB.
- Sebaiknya terapkan pada blog baru dulu.
- Silahkan dicoba, jangan takut salah
Semoga dengan adanya tutorial ini, rekan-rekan blogger bisa menikmati template MODE H-BLOGGER THEMES.
Ingat, jangan takut untuk berexperimen, karena suatu keberhasilan tidak akan tercapai bila kita tidak berusaha untuk mencobanya.....
Anda bisa download template MODE H-BLOGGER THEME di bCOMStudio.
DEMO MODE H-BLOGGER THEMES
Selasa, 28 Juli 2009
Recent Post Berdasarkan Label
Berbicara masalah widget untuk blogger, nampaknya semakin banyak pengembangan dari para blogger maniak. Salah satunya adalah Copycat91, yang menampilkan "Recent Post dengan Label".
Widget ini sangat menarik, dan sepertinya sulit diungkapkan sehingga saya sarankan anda cek langsung di bagian sidebar blog ini dengan judul "Recent Post Berdasarkan Label"
Saya sangat berterima kasih atas pemberitahuan dari beliau atas widget ini, dan disini saya ingin mengulas kembali bagaimana cara menambahkan widget ini di blogger.Label: <span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 5;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>
<script src="http://URLBLOGANDA.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script>
<!-- Tolong hargai dengan tidak menghapus/mengubah link di bawah -->
<div style="text-align:right; font-size:0.75em">
Widget by:
<a href="http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html">
Info Blog
</a>
</div>
Keterangan :
Sumber : http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html
Jumat, 05 Juni 2009
jQuery Scroll to Top Control
Jika anda mempunyai tampilan halaman blog/ situs yang sangat panjang, terutama bagi anda yang dalam memposting artikel tidak menggunakan Readmore atau barangkali disengaja, tentu akan membuat pengunjung blog bahkan anda sendiri akan capek untuk scrolling halaman anda kembali ke atas. Di sini saya mempunyai solusi untuk anda yang mempunyai tipe blog seperti itu. Modifikasi script jQuery Scroll to Top Control saya pelajari dari situs www.dynamicdrive.com.
Fungsi daripada script jQuery Scroll to Top Control ini adalah, menggulirkan halaman blog anda dari bawah ke atas secara Automatis hanya sekali klik pada icon anak panah yang muncul di sudut bawah kanan pada akhir halaman blog anda.
Jika anda berminat silahkan tambahkan kode script jQuery Scroll to Top Control persis dibawah kode <head> sebelum anda menambahkan kode meta.
Dibawah ini adalah kode script jQuery Scroll to Top Control.
Kode script jQuery Scroll to Top Control, sebelum saya upload di www.geocities.com sudah saya tambahkan url icon anak panah atas yang sebelumnya sudah saya upload di www.photobucket.com. Namun bila anda ingin memodifikasinya, silahkan copas di notepad script dari http://www.dynamicdrive.com/dynamicindex3/scrolltopcontrol.js, kemudian lakukan modifikasi dibagian ini :
Namun saya belum mencobanya untuk memodifikasinya. Bila anda mau mencoba untuk memodifikasi bagian tersebut, silahkan pelajari di :
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm.
Jika anda ingin melihat hasilnya dari modifikasi kode script jQuery Scroll to Top Control, termasuk gambaran pemasangan hasil modifikasi kode script jQuery Scroll to Top Control, silahkan kunjungi http://www.nataludin.com
Nah silahkan bereksperimen, semoga berhasil
Fungsi daripada script jQuery Scroll to Top Control ini adalah, menggulirkan halaman blog anda dari bawah ke atas secara Automatis hanya sekali klik pada icon anak panah yang muncul di sudut bawah kanan pada akhir halaman blog anda.
Jika anda berminat silahkan tambahkan kode script jQuery Scroll to Top Control persis dibawah kode <head> sebelum anda menambahkan kode meta.
Dibawah ini adalah kode script jQuery Scroll to Top Control.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://www.geocities.com/nataludin5/scrolltopcontrol-1.js'>
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>
Kode script jQuery Scroll to Top Control, sebelum saya upload di www.geocities.com sudah saya tambahkan url icon anak panah atas yang sebelumnya sudah saya upload di www.photobucket.com. Namun bila anda ingin memodifikasinya, silahkan copas di notepad script dari http://www.dynamicdrive.com/dynamicindex3/scrolltopcontrol.js, kemudian lakukan modifikasi dibagian ini :
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
Namun saya belum mencobanya untuk memodifikasinya. Bila anda mau mencoba untuk memodifikasi bagian tersebut, silahkan pelajari di :
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm.
Jika anda ingin melihat hasilnya dari modifikasi kode script jQuery Scroll to Top Control, termasuk gambaran pemasangan hasil modifikasi kode script jQuery Scroll to Top Control, silahkan kunjungi http://www.nataludin.com
Nah silahkan bereksperimen, semoga berhasil
Jumat, 01 Mei 2009
Maksimalkan Fungsi Kotak Pencarian
Google Adsense sampai dengan saat ini, nampaknya masih enggan untuk memberikan tempat iklan bagi blog yang menggunakan bahasa selain bahasa Inggris, termasuk didalamnya adalaha bahasa Indonesia.
Tentu saja bagi kita yang mengelola blog dengan bahasa selain bahasa Inggris, harus bersabar dan menerima kotak pencarian sebagai peluang mendapatkan dollar yang diberikan oleh pihak Google Adsense. Ya, itu memang patut disyukuri karena kita masih diberikan kesempatan oleh pihak Google Adsense.
Dengan memasang kotak pencarian yang diberikan Google Adsense pada blog kita, diharapkan pengunjung bisa mencari artikel baik yang berasal dari blog yang dikunjungi atau dari blog/ situs lain. Tentunya, ini merupakan point adsense kita bila hal ini dilakukan oleh pengunjung blog kita.
Lantas, bagaimana jika pengunjung tidak melakukannya bahkan mengabaikan keberadaan kotak pencarian tersebut di blog kita?
Nah, disini saya mencoba sharing dengan anda sebagai pengunjung saya yang sudi membaca coretan asal-asalan ini. Pada umumnya, template yang sekarang beredar saat ini sudah didesain mempunyai kotak pencarian yang biasanya diletakkan dibawah sidebar dan digabungkan dengan Navigasi toolbar dengan tujuan untuk menarik perhatian pengunjung, terlebih desain kotak pencarian dibuat dengan sentuhan seni dan aksesori yang menarik. Apabila kita ingin memasang kotak pencarian dari Google Adsense, jelas ini akan lucu mengingat akan muncul dua kotak pencarian pada blog kita. Agar hal ini tidak terjadi, mungkin langkah ini bisa membantu.
Coba perhatikan kode adsense kota pencarian berikut ini :
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-7181952237540333:wvf3bk-mcmp" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=in"></script>
Sekarang coba anda masuk pada edit html pada blog anda, misalnya pada blog saya ini. Pada body saya memasang kode kotak pencarian sebagai berikut :
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value
== "") {this.value = "Search this website...";}'
onfocus='if (this.value == "Search this website...")
{this.value = ""}' type='text' value='Search this
website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
Lalu bagaimana cara memadukan agar kedua kotak pencarian tersebut berfungsi secara bersama-sama?
Silahkan Copas kode yang ada di kotak pencarian yang diberikan Google Adsense yaitu :
<input type="hidden" name="cx" value="partner-pub-7181952237540333:wvf3bk-mcmp" />
<input type="hidden" name="ie" value="ISO-8859-1" />
Kemudian paste kode tersebut pada kode pencarian yang ada pada template kita, sehingga bila sudah tergabung akan menjadi seperti ini :
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value
== "") {this.value = "Search this website...";}'
onfocus='if (this.value == "Search this website...")
{this.value = ""}' type='text' value='Search this
website...'/>
<input type="hidden" name="cx" value="partner-pub-7181952237540333:wvf3bk-mcmp" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input id='searchbutton' type='submit' value='GO'/>
</form>
Sekali-kali kita klik sendiri kode adsense, mengingat ini merupakan langkah percobaan. Nah, bila kita memasukkan kata kunci pada kotak pencarian yang sudah kita edit lalu klik icon "GO", maka URL pada toolbar pencarian pada browser yang kita pakai akan tertulis seperti ini :
http://www.casal71.co.cc/search?q=informasi&cx=partner-pub-7181952237540333%3A5ik1h-9ygrv&ie=ISO-8859-1
Atau barangkali ada yang lebih faham tentang ini? Mari kita sharing bersama.
Semoga membantu dalam usaha anda untuk monetize blog anda.
Jumat, 13 Maret 2009
Posting Lewat Handphone
Blogger semakin mamanjakan para penggemarnya. Blogger sudah memiliki beberapa cara posting untuk dikirim melalui perangkat mobile. Dengan rilis terakhir di Blogger
Blogger in draff, memberikan kemudahan mengatur mobile posting blog kita melalui SMS, MMS, dan email.
Jika kita sudah memiliki sebuah blog atau lebih di Blogger, kita dapat mengkonfigurasi ponsel dengan membuka posting kita pada Dashboard http://draft.blogger.com.
Setelah kita login di http://draft.blogger.com, maka akan nampak icon ponsel dan e-mail didepan nama blog kita.
Untuk mengaktifkan SMS atau MMS untuk ponsel kita dengan mengklik icon telepon., maka akan muncul jendela seperti dibawah ini :
Blogger akan menampilkan kode klaim yang dapat kita kirimkan ke Blogger melalui SMS atau MMS untuk mendaftarkan perangkat kita dan link ke blog kita.
Setelah perangkat kita terdaftar , kita mengirim pesan ke BLOGGR (256.447) sehingga artikel akan diposting ke blog kita.
Catatan: SMS posting di Blogger saat ini tidak bekerja sama dengan T- mobile.
Untuk mengaktifkan Email posting blog kita, kembali ke Dashboard Blogger dan klik pada icon amplop . Kita akan melihat dialog yang akan meminta kita untuk menentukan alamat email rahasia.
Kita mengirim email ke alamat email ini, kemudian akan dikirim ke blog kita. Sertakan foto (maks 250K) sebagai lampiran. Blogger akan memasukkan foto antara judul dan posting kita. ( Jika melebihi ukuran, kita akan menerima pesan bouncing, memberitahu kita sehingga kita dapat mencoba lagi dengan gambar yang lebih kecil. Perlu diketahui bahwa ponsel (atau operator) mungkin ada batasan ukuran sendiri).
Untuk edit setting handphone , kita dapat klik pada telepon atau ikon amplop pada Dashboard Blogger, atau ke Pengaturan> Email & Mobile tab.
Jika kita jauh dari komputer, tetapi ingin membuat blog pada saat bepergian, kita juga dapat membuat blog langsung dari perangkat mobile kita.
Apakah ada biaya untuk menggunakan Blogger Mobile?
Layanan ini gratis dari Google, namun tagihan dari operator kita untuk penggunaan mungkin berlaku, jadi olah pesan/ artikel terlebih dahulu sebelum anda menggunakan layanan ini.
Sukses dan selamat mencoba
Kamis, 05 Maret 2009
Translation Widget
Sebuah blog akan dinikmati oleh para pengunjung apabila dalam blog tersebut ada fasilitas penerjemah yaitu "Translation Widget". Widget ini sangat up-to-date dengan jumlah bahasa yang tersedia, menurut Google Translate (FAQ)
Translation Widget ini adalah karya dari HOCTRO, saya hanya mencoba mengulasnya dalam bahasa Indonesia dengan harapan dapat dinikmati oleh para blogger Indonesia.
Translation Widget ini tidak menggunakan kode JavaScript, namun ia menterjemahkan semua posting (bukan hanya situs Anda), Anda akan melihat ke target bahasa terpilih.
Kita sangat berharap bahwa blog kita akan semakin populer karena dapat dinikmati oleh para pengunjung dengan bahasa selain Indonesia, diharapkan juga akan memiliki lebih banyak traffic juga, setelah memasang Translation Widget ini.
Untuk memasang kode Translation Widget ini, silahkan anda masuk pada Blogger, kemudian pada "Layout/tata letak" pilih "Edit HTML", jangan centang "Expand Template Widget".
Cari kode : <b:section class='......' id='........' preferred='yes'>
kemudian pasang kode berikut dibawah kode diatas. ( tanda .... bisa "sidebar","footer" tergantung dimana anda menambahkan kode Translation Widget). Kemudian, setelah kode Translation Widget diterima, sangat mudah bagi kita untuk menempatkan pada posisi yang tepat dengan menarik secara visual widget dari satu tempat ke tempat lain, lihat di "Elemen Halaman" .
Berikut kode Translation Widget yang dipasang.
<b:widget id='HTML200' locked='false' title='Translate to your Language' type='HTML'>
<b:includable id='main'>
<!-- Translation Widget by Hoctro - 10/2008 - This note must not be deleted -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<form action='http://translate.google.com/translate_c?'>
<table id='webtb'>
<tr><td> <select name='tl' style='width: 8em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese (Simplified)</option>
<option value='zh-tw'>Chinese (Traditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option value='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='id'>Indonesian</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option selected='en' value='en'>English</option>
</select>
<input expr:value='data:blog.url' id='url' name='u' type='hidden'/>
<input name='sl' type='hidden' value='id'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Go'/>
</td></tr></table></form>
<h6>Widget by <u><a
href='http://hoctro.blogspot.com/2008/10/new-translation-widget.html'>Hoctro</a></u></h6>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Baris di bawah ini berisi sumber bahasa. Karena saya menulis blog ini dalam bahasa Indonesia, maka kita harus mengubah ke bahasa sumber blog kita dari kode Translation Widget yang di atas. Karena kita menggunakan bahasa Indonesia maka kita pilih Value = 'id' pada kode dibawah ini :
<input name='sl' type='hidden' value='id'/>
Baris di bawah ini berisi pilihan bahasa target. Silahkan tentukan target terpilih pada tampilan awal, misal kita memilih Inggris, maka kita harus mengubah pilihan ini ke bahasa target yaitu Inggris ( 'en').
<option selected='en' value='en'>English</option>
Kita juga dapat merubah value='GO' dengan bahasa gaul tapi dimengerti:
<input style='width: auto;' type='submit' value='Go'/>
Satu hal lagi. Jika Anda tidak ingin bagian dari teks diterjemahkan, tambahkan class = 'notranslate' pada tag tersebut, seperti contoh di bawah ini:
<span class='notranslate'>This text won't be translated.</span>
Semoga Translation Widget ini bermanfaat.
Kamis, 19 Februari 2009
Tabbed Document Viewer
MEMANTAU BLOG KITA
Seberapa banyak blog yang anda punya ? Apakah anda sulit untuk memantaunya?
Saya yakin banyak diantara blogger mania mempunyai tidak hanya satu blog, mengingat layanan membuat blog gratis.
Agar kita dapat memantau blog kita dari salah satu blog kita, berikut sebuah script buatan Eric Meyer yang dapat kita fungsikan untuk memantau blog kita :
DEMO | bisa dilihat pada bagian sidebar atas.
Langkah pertama tambahkan kode CSS and DHTML script diatas kode ]]></b:skin>
/*Eric Meyer's based CSS tab*/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}
#tablist li a.current{
background: lightyellow;
}
Langkah kedua. dibawah kode ]]></ b: skin> tambahkan kode berikut ini :
<script type="text/javascript">
/***********************************************
* Tabbed Document Viewer script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var selectedtablink=""
var tcischecked=false
function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}
function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}
</script>
3. Simpan template anda, kemudian pada Layout | Page elements "add gadgets" kemudian pilih "HTML / Javascript "
lalu tambahkan kode berikut ini :
<ul id="tablist">
<li><a class="current" href="Your URL blog" onClick="return handlelink(this)">Blog Title1</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title2</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title3</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title4</a></li>
<li><a href="Your URL blog" onClick="return handlelink(this)">Blog Title5</a></li>
</ul>
<iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>
<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
Jika kita mempunyai lebih dari lima blog, maka kita bisa menambahkan sela dengan menambahkan kode :
<div style="margin-bottom: 8px"></div>
sehingga posisi nama blog pada navbarnya tidak menumpuk.
contoh :
<ul id="tablist">
<li><a class="current" href="#">Blog Title1</a></li>
<li><a href="#">Blog Title2</a></li>
<li><a href="#">Blog Title3</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="#">Blog Title4</a></li>
<li><a href="#">Blog Title5</a></li>
</ul>
Semoga bisa membantu dan bermanfaat.
Senin, 09 Februari 2009
"Latest Headlines" Widget
Anda ingin menampilkan "post terbaru" dalam bentuk widget seperti pada tampilan widget yang ada di atas posting pada blog ini ? Widget ini saya dapat dari blognya Hoctro, beliau memberi nama " Latest Headlines".
Di sini saya mencoba menulis kembali dalam bahasa Indonesia, kurang lebihnya begini :
1. Kita harus mendapatkan "API Key " dari sini : Google AJAX Feed API
Setelah anda masuk pada situs sesuai URL diatas, centang kotak yang ada di samping "I have read and agree with the terms and conditions". Kemudian isikan URL blog anda yang akan dipasang Widget ini pada kotak disamping "My web site URL:.......". Kemudian klik button "GENERATE API KEY"
Setelah itu Copy Paste Kode API yang anda dapat pada Notepad.
2. Masuk ke Blogger | Layout | Edit HTML, tanpa mencentang kotak "Expand Widget Templates", tambahkan kode dibawah ini di atas kode </head>.
<script src='http://www.google.com/jsapi/?key=YOUR KEY'type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;
}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});
<h6>Widget by <a href='http://hoctro.blogspot.com/2008/09/google-ajax-feed-widget.html'>Hoctro</a></h6>
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
3. Kemudian pada Page Elements, klik Add a Gadget dan pilih HTML/ Javascript dan masukkan kode dibawah ini ( Pada Sidebar atau di atas Postingan ).
<div id="feedControl"> Please Wait, Loading...</div>
4. Untuk modifikasi warna dan ukuran Width ( sesuai kelebaran ) silahkan anda atur pada : kode berwarna merah.
5. Untuk menampilkan jumlah posting yang akan ditampilkan silahkan modifikasi pada : {numResults : 4}); Nilai 4 bisa anda rubah sesuai dengan keinginan anda.
6. Paste Kode API Key yang anda dapat di YOUR KEY
Selamat mencoba
Jumat, 23 Januari 2009
Readmore ( Ver. 1 )
Dalam posting kali ini, saya akan mencoba mengumpulkan variasi dari readmore yang saya ambil dari beberapa sumber. Sengaja saya buat sekedar untuk perbendaharaan pengetahuan terkait usaha kita dalam mengoptimalkan blog.
Langkah-langkahnya adalah sebagai berikut :
1. Buka Dashboard | Template | Edit HTML | kemudian tandai Expand Widget Templates.
2. Cari kode </head>, dengan menggunaka Ctrl-F untuk memudahkan pencarian. Setelah ketemu kode tersebut, masukkan kode dibawah ini antara kode ]]><</b:skin> dan </head>
3. Setelah itu cari kode <data:post.body/> atau kode keseluruhannya seperti ini.
Ganti kode di atas dengan kode di bawah ini.
Kita bisa saja merubah kata " Read More..." dengan icon/ kalimat favorit kita.
4. Setelah itu save tempalate. Kemudian buka Tab Pengaturan | Format, masukan kode di bawah ke dalam kotak sebelah kanan tulisan Template Posting.
kemudian save pengaturan.
5. Cara menggunakan readmore dalam pemenggalan artikel yang praktis adalah kita menulis artikel di bagian Edit HTML. Saat membuka posting baru, pasti kode diatas muncul. Bagi pemula, silahkan hapus dulu kode tersebut. Kemudian silahkan ketik semua artikel include dengan image, termasuk memberikan kode Align, Ukuran Font dan lainnya.
Preview/ pra tinjau hasil kerja anda, untuk memperkirakan dimana tempat penggalan kalimat yang pantas. Setelah itu baru pasang kode readmore tersebut. Langkah ini untuk mengantisipasi pemasangan double secara auto.
Cara meletakkan kode tersebut :
Semoga bermanfaat.
Reff terkait : Jaloee
Langkah-langkahnya adalah sebagai berikut :
1. Buka Dashboard | Template | Edit HTML | kemudian tandai Expand Widget Templates.
2. Cari kode </head>, dengan menggunaka Ctrl-F untuk memudahkan pencarian. Setelah ketemu kode tersebut, masukkan kode dibawah ini antara kode ]]><</b:skin> dan </head>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
3. Setelah itu cari kode <data:post.body/> atau kode keseluruhannya seperti ini.
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Ganti kode di atas dengan kode di bawah ini.
<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Kita bisa saja merubah kata " Read More..." dengan icon/ kalimat favorit kita.
4. Setelah itu save tempalate. Kemudian buka Tab Pengaturan | Format, masukan kode di bawah ke dalam kotak sebelah kanan tulisan Template Posting.
<span id="fullpost">
</span>
kemudian save pengaturan.
5. Cara menggunakan readmore dalam pemenggalan artikel yang praktis adalah kita menulis artikel di bagian Edit HTML. Saat membuka posting baru, pasti kode diatas muncul. Bagi pemula, silahkan hapus dulu kode tersebut. Kemudian silahkan ketik semua artikel include dengan image, termasuk memberikan kode Align, Ukuran Font dan lainnya.
Preview/ pra tinjau hasil kerja anda, untuk memperkirakan dimana tempat penggalan kalimat yang pantas. Setelah itu baru pasang kode readmore tersebut. Langkah ini untuk mengantisipasi pemasangan double secara auto.
Cara meletakkan kode tersebut :
Semoga bermanfaat.
Reff terkait : Jaloee
Kamis, 22 Januari 2009
Optimalkan Judul Posting (SEO)
Blogger template secara default tidak optimalkan mesin pencari (SEO) pada judul tag artikel pada blog kita, ini berarti kita tidak memaksimalkan blog kita ke peringkat lebih baik di Google. Jika kita melihat pada bagian atas browsing yang digunakan, kita akan melihat bahwa blogger menampilkan nama blog pada awal deteksi, kemudian diikuti oleh judul posting kita.
Mungkin tip ini dapat membantu blog kita disetup dengan benar. Backup dulu template yang akan kita modifikasi. Coba perhatikan gambar dibawah ( dikotak merah ) yang menunjukkan identifikasi search engine sebelum kita rubah kode template nantinya :
Oke, sekarang kita akan memodifikasi kodenya :
Langkah -1
Di dashboard Blogger Anda, pergi ke "Layout" => "Edit HTML".
Langkah -2
Dalam template kode, cari kode : <title><data:blog.pageTitle/></title>
Ini biasanya pada 5-10 baris kode dalam template Anda di dekat bagian atas.
Langkah -3
Ganti kode diatas dengan kode berikut:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Langkah -4
Simpan template Anda dan kembali ke blog Anda. Klik setiap pos untuk melihat judul halaman.
Bandingkan tampilan blog anda pada browsing anda.
Semua posting anda sekarang lebih dioptimalkan untuk peringkat tinggi di Google.
Semoga bermanfaat.
Mungkin tip ini dapat membantu blog kita disetup dengan benar. Backup dulu template yang akan kita modifikasi. Coba perhatikan gambar dibawah ( dikotak merah ) yang menunjukkan identifikasi search engine sebelum kita rubah kode template nantinya :
Oke, sekarang kita akan memodifikasi kodenya :
Langkah -1
Di dashboard Blogger Anda, pergi ke "Layout" => "Edit HTML".
Langkah -2
Dalam template kode, cari kode : <title><data:blog.pageTitle/></title>
Ini biasanya pada 5-10 baris kode dalam template Anda di dekat bagian atas.
Langkah -3
Ganti kode diatas dengan kode berikut:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Langkah -4
Simpan template Anda dan kembali ke blog Anda. Klik setiap pos untuk melihat judul halaman.
Bandingkan tampilan blog anda pada browsing anda.
Semua posting anda sekarang lebih dioptimalkan untuk peringkat tinggi di Google.
Semoga bermanfaat.
Sabtu, 20 September 2008
Alternatif atasi pesan Error Blogger
Pernahkah anda menjumpai pesan BX-Errors saat anda mencoba Preview pada saat anda menambahkan komponen pada kerangka template anda atau mengupload template baru sebagai pengganti template lama anda pada Blogger ?
Pesan error tersebut juga pernah saya jumpai, untuk mengatasi hal tersebut ada langkah pemecahan yang kemungkinan bisa membantu yaitu hapus semua cookies di browser kita. Hal ini dapat menyegarkan (refresh) sistem komputer kita. Setelah anda menghapus semua cookies, cobalah kembali login ke Blogger. Saat kita mengadakan perubahan pada kerangka template sebaiknya harus diteliti dulu sebelum mengadakan preview pada kerangka template yang sudah kita rubah. Akan lebih baik bagian yang dirubah dibuat dulu di Notepad atau text editor lainnya.
Bagaimana cara untuk membersihkan cookies dari browser kita ? Tergantung dari jenis browser yang kita gunakan.
Internet Explorer 6
- Pilih "Tools" pada menu browser
- Pilih "Internet Options".
- Buka Tab General
- Klik "delete Cookies"
- Klik OK
Dari IE 7.0
- Pilih " Tools " dari menu browser
- Pilih " Internet Option "
- Buka tab "General"
- Dalam area "Browsing History" klik "Delete"
- Dalam jendela " Delete Browsing History " klik "Delete Cookies" kemudian klik "yes"
- Klik "Close" kemudian klik "OK"
Dari Firefox 2
- Pilih " Tools"
- Pilih " Options"
- Pilih "Privacy"
- Dalam "Private" klik "Clear Now"
- Dalam jendela "Clear Private Data" centang "Cookies" kemudian klik "Clear Private Data Now"
- Klik OK
Dari Firefox 3
- Pilih "Tools" dari browser menu
- Pilih "Clear Private Data"
- Centang kotak "Cookies"
- Klik "Clear private data now"
Google Chrome (Disini Install menggunakan bahasa Indonesia )
- Pada " sesuaikan dan kontrol Google Chrome" dengan icon kunci pas, klik "PILIHAN"
- Akan muncul Opsi Google Chrome, kemudian klik " Di Balik Terpal "
- Pada bagian bawah di jendella " Di Balik Terpal" ada button "Tampilkan Kuki" silahkan diklik.
- Akan muncul jendela Kuki (Cookies), silahkan klik button "Hapus Semua"
- Kemudian klik "TUTUP"
Jika anda menggunakan browser selain browser diatas, coba lakukan langkah-langkah pembersihan cookies sesuai halaman yang menerangkan metode tersebut pada menu utama browser anda.
Alternatif lain untuk menghilangkan Cookies adalah dengan menggunakan CCleaner ( bisa di download di blog ini ), yang merupakan freeware sistem optimization yang mampu menghilangkan berkas yang tidak dipakai dari sistem anda dan bisa membuat komputer anda melaju dengan cepat.
Selasa, 26 Agustus 2008
Modifikasi Template Minima Blogger
Pada kesempatan kali ini saya ingin sharing dengan rekan-rekan blogger tentang bagaimana memodifikasi template MINIMA dua kolom bawaan blogger dengan menambahkan widget Tab menu dan tiga buah kolom pada bagian footernya.
Setelah kita login di blogger, kemudian cobalah membuat blog baru dengan template minima berwarna putih.
Setelah masuk pada "tata letak" lalu ke "edit html" dan jangan dicentang pada bagian Expand Template Widget, agar tidak membingungkan.
Langkah awal yang kita lakukan adalah merubah ukuran dari pada template tersebut. Sekarang kita cari kode dibawah ini
#header-wrapper {
width:660px;
margin:0 auto 10px;
}
untuk width : 660px dirubah menjadi 990px
kemudian kita cari kode dibawah ini :
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
dan kode dibawah ini
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
untuk width : 660px dirubah menjadi 990px
kemudian kita cari kode dibawah ini
#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#tabsidebar-wrapper{
width: 400px;/*Defina a largura do seu menu*/
margin:30px 0px 5px 0px;/*Margens ? Siga o racioc nio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template*/
border: 1px none $bordercolor;
float:right; /*Aqui voc define qual o lado seu menu vai flutuar: right-direita, left-esquerda*/
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
huruf berwarna merah adalah bagian yang dirubah maupun kode yang harus ditambahkan,
langkah selanjutnya adalah cari kode dibawah ini :
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
tambahkan kode dibawah ini dibawah kode di atas.
/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide {
display:none; }
.tabber { }.tabberlive {
margin-top:1em;
}
/*------------ Tabernav=Navega o -------------------*/
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid $bordercolor;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
/*--- Judul Aktif ---*/
ul.tabbernav li a{
padding: 8px 0.5em;
margin-left:3px;
border: 1px solid $bordercolor;
border-bottom: none;
background:#D5DFE8;
text-decoration: none;
}
ul.tabbernav li a:link { color:$sidebarcolor; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{
color:#B30000;
background: #dedede;
border-color: #dedede;
}
/*--- Judul Pasiv ---*/
ul.tabbernav li.tabberactive a{
background-color: #fff;
color:#B30000;
border-bottom: 1px solid #fff;
}
ul.tabbernav li.tabberactive a:hover{
color: $linkcolor;
background: white;
border-bottom: 1px solid white;
}
/*------ Tabbertab = Conte do da Tab -----------*/
.tabberlive .tabbertab {
background:#fff;
padding:5px;
border:1px solid $bordercolor;
border-top:0; font-size:90%;
}
.tabbertab ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 0px;
}
/*----- Links Internos -----*/
.tabbertab li {
background: url("http://i8.tinypic.com/6lip3c7.gif") no-repeat;
background-position: 0px 5px;
margin:0;
padding:2px 0 3px 2px;
border-bottom:1px dotted #B30000;
text-indent:10px;
color: $linkcolor;
list-style:none;
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
kemudian cari kode di bawah ini :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Rubah nilai width:660px menjadi width:990px.
Kemudian tambahkan kode dibawah ini dibawah kode di atas,
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
Kode yang baru kita tambahkan adalah rangkaian kode untuk penambahan kolom pada bagian footer.
Langkah selanjutnya adalah cari kode ]]></b:skin>
Tambahkan kode dibawah ini di bawah kode tersebut :
<script src=' http://nataludin.googlepages.com/tabber.js' type='text/javascript'/>
Kemudian cari kode :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Tambahkan kode di bawah ini di bawah kode di atas.
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab4' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab1-->
</div><!-- End Tabsidebar-->
Selanjutnya kita cari kode :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ganti kode yang berwarna biru dengan kode di bawah ini, dengan tujuan kita menambah tiga kolom pada bagian footer.
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Sekarang coba simpan template anda. Dan apabila kita menuju ke Elemen halaman, maka akan nampak seperti gambar di bawah ini
Untuk menambahkan gadget pada masing-masing Tab, silahkan klik angka 1, lalu tambahkan gadget demikian juga dengan Tab 2 dan seterusnya. Perhatikan gambar.
Untuk melihat hasilnya coba lihat di sebelah pojok atas.
Setelah kita login di blogger, kemudian cobalah membuat blog baru dengan template minima berwarna putih.
Setelah masuk pada "tata letak" lalu ke "edit html" dan jangan dicentang pada bagian Expand Template Widget, agar tidak membingungkan.
Langkah awal yang kita lakukan adalah merubah ukuran dari pada template tersebut. Sekarang kita cari kode dibawah ini
#header-wrapper {
width:660px;
margin:0 auto 10px;
}
untuk width : 660px dirubah menjadi 990px
kemudian kita cari kode dibawah ini :
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:660px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
dan kode dibawah ini
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
untuk width : 660px dirubah menjadi 990px
kemudian kita cari kode dibawah ini
#main-wrapper {
width: 560px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#tabsidebar-wrapper{
width: 400px;/*Defina a largura do seu menu*/
margin:30px 0px 5px 0px;/*Margens ? Siga o racioc nio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template*/
border: 1px none $bordercolor;
float:right; /*Aqui voc define qual o lado seu menu vai flutuar: right-direita, left-esquerda*/
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
huruf berwarna merah adalah bagian yang dirubah maupun kode yang harus ditambahkan,
langkah selanjutnya adalah cari kode dibawah ini :
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
tambahkan kode dibawah ini dibawah kode di atas.
/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide {
display:none; }
.tabber { }.tabberlive {
margin-top:1em;
}
/*------------ Tabernav=Navega o -------------------*/
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid $bordercolor;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
/*--- Judul Aktif ---*/
ul.tabbernav li a{
padding: 8px 0.5em;
margin-left:3px;
border: 1px solid $bordercolor;
border-bottom: none;
background:#D5DFE8;
text-decoration: none;
}
ul.tabbernav li a:link { color:$sidebarcolor; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover{
color:#B30000;
background: #dedede;
border-color: #dedede;
}
/*--- Judul Pasiv ---*/
ul.tabbernav li.tabberactive a{
background-color: #fff;
color:#B30000;
border-bottom: 1px solid #fff;
}
ul.tabbernav li.tabberactive a:hover{
color: $linkcolor;
background: white;
border-bottom: 1px solid white;
}
/*------ Tabbertab = Conte do da Tab -----------*/
.tabberlive .tabbertab {
background:#fff;
padding:5px;
border:1px solid $bordercolor;
border-top:0; font-size:90%;
}
.tabbertab ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 0px;
}
/*----- Links Internos -----*/
.tabbertab li {
background: url("http://i8.tinypic.com/6lip3c7.gif") no-repeat;
background-position: 0px 5px;
margin:0;
padding:2px 0 3px 2px;
border-bottom:1px dotted #B30000;
text-indent:10px;
color: $linkcolor;
list-style:none;
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
kemudian cari kode di bawah ini :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Rubah nilai width:660px menjadi width:990px.
Kemudian tambahkan kode dibawah ini dibawah kode di atas,
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
Kode yang baru kita tambahkan adalah rangkaian kode untuk penambahan kolom pada bagian footer.
Langkah selanjutnya adalah cari kode ]]></b:skin>
Tambahkan kode dibawah ini di bawah kode tersebut :
<script src=' http://nataludin.googlepages.com/tabber.js' type='text/javascript'/>
Kemudian cari kode :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Tambahkan kode di bawah ini di bawah kode di atas.
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab4' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab1-->
</div><!-- End Tabsidebar-->
Selanjutnya kita cari kode :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ganti kode yang berwarna biru dengan kode di bawah ini, dengan tujuan kita menambah tiga kolom pada bagian footer.
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Sekarang coba simpan template anda. Dan apabila kita menuju ke Elemen halaman, maka akan nampak seperti gambar di bawah ini
Untuk menambahkan gadget pada masing-masing Tab, silahkan klik angka 1, lalu tambahkan gadget demikian juga dengan Tab 2 dan seterusnya. Perhatikan gambar.
Untuk melihat hasilnya coba lihat di sebelah pojok atas.
Langganan:
Postingan (Atom)
