Lah Sangat

  • Home
  • Blog Induk
  • Contact

Sunday, 23 June 2013

Cara Buat Halaman Contact Menggunakan Widget

Pengguna Blogspot kini, sudah boleh menggunakan Widget Contact Form yang baru sahaja diperkenalkan bulan lepas… Walaubagaimanapun, seperti yang pernah aku jelaskan dalam entri “Widget Contact Form Dari Blogger.com”, widget ini hanya direka untuk diletakkan pada bahagian-bahagian yang tertentu sahaja…
Jadi, bagaimana mahu menjadikan widget ini sebagai sebuah halaman contact? Mari ikuti langkah-langkah berikut…
1. Mula-mula anda harus tambahkan Widget Contact Form ini terlebih dahulu.

Pergi ke Dashboard, pilih blog yang dikehendaki, dan masuk ke bahagian mengedit Layout… 

Cara Buat Halaman Contact Menggunakan Widget

Kemudian klik sahaja pada mana-mana “Add a Gadget”. Cari dan tambahkan Contact Form… 

Cara Buat Halaman Contact Menggunakan Widget
Cara Buat Halaman Contact Menggunakan Widget

Anda boleh ubah kedudukan widget ini ke mana-mana bahagian yang anda mahu… 
2. Seterusnya kita mahu ambil kod HTML dari widget ini dan letakkannya di sebuah halaman statik di blog.
Untuk membuat halaman statik, anda harus pilih tab “Pages”. Kemudian pada drop down menu “New page”, sila pilih opsyen “Blank page” seperti yang ditunjukkan dalam gambar di bawah…

Cara Buat Halaman Contact Menggunakan Widget

Kemudian tetingkap mengedit halaman akan dipaparkan…

Cara Buat Halaman Contact Menggunakan Widget

Salin dan letak (copy & paste) kod di bawah ini pada ruangan edit tersebut…
<div class=’form’>
<form name=’contact-form’>
<p></p>
Name
<br/>
<input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>
<p></p>
Email
<span style=’font-weight: bolder;’>*</span>
<br/>
<input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>
<p></p>
Message
<span style=’font-weight: bolder;’>*</span>
<br/>
<textarea class=’contact-form-email-message’ cols=’25’ id=’ContactForm1_contact-form-email-message’ name=’email-message’ rows=’5′></textarea>
<p></p>
<input class=’contact-form-button contact-form-button-submit’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Send’/>
<p></p>
<div style=’text-align: center; max-width: 222px; width: 100%’>
<p class=’contact-form-error-message’ id=’ContactForm1_contact-form-error-message’></p>
<p class=’contact-form-success-message’ id=’ContactForm1_contact-form-success-message’></p>
</div>
</form>
</div>
Selepas itu anda bolehlah klik “Publish”
3. Sekarang, blog anda akan mempunyai dua jenis contact form. Satu sebagai widget, manakala yang satu lagi adalah halaman statik. 
Kita hanya mahu halaman statik sahaja dan widget perlu dibuang…
Tetapi, ia tidak boleh dibuang dengan cara biasa. Ini kerana Widget Contact Form ini berperanan bukan sahaja sebagai FORM semata-mata, tetapi juga ia terhubung dengan skrip binaan dalaman Blogger.com. Senang cerita, widget ini harus sentiasa “melekat” sebagai tanda ia telah “didaftarkan” untuk blog anda… 
PERHATIAN:Contact Form tidak akan berfungsi sekiranya widget ini dibuang!
Oleh itu, untuk menghilangkan widget ini dari pandangan mata pengunjung, anda perlu meletakkan sedikit kod di bahagian CSS template
Pergi ke bahagian edit HTML dan cari kod <b:skin>. Kemudian expand bahagian kod ini dengan cara meng-klik segitiga kecil di sebelah kirinya, seperti gambar di bawah…

Cara Buat Halaman Contact Menggunakan Widget

Kemudian cari kod ]]</b:skin> dan masukkan kod berikut betul-betul di atasnya…

Cara Buat Halaman Contact Menggunakan Widget

Setelah itu anda bolehlah klik “Preview template”. Sekiranya tidak ada sebarang masalah, barulah klik “Save template”…
Siap lah sudah halaman contact di blog anda…
Selamat mencuba! Posted by Hatimi Tahirruddin at 04:36

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog, widget

Monday, 3 June 2013

Aku, Eksperimen dan WordPress

Ramai orang kata WordPress adalah penyelesaian terbaik jika mahu membuat sebuah blog yang serius. Kata-kata sebeginilah yang menyebabkan aku tidak senang duduk. Bagus dan hebat sangatkah WordPress?
Ya memang benar, apa yang lebih penting bagi sesebuah laman blog adalah isi kandungannya. Tetapi, mengapa harus ada persepsi “double standard” di antara Blogspot dan WordPress?

WordPress Logo

Jadi untuk merungkai persoalan-persoalan di atas, aku sendiri telah mula membina sebuah blog menggunakan platform WordPress. Nasib ada perkhidmatan hosting percuma dari Hostinger.my, jadi aku ambil peluang itu untuk menyiasat dan bereksperimen dengan platform yang dikatakan “hebat” tersebut… 
Pandangan Pertama Setelah Install WordPress1. Alamak, platform ini menggunakan PHP rupanya…haha. Semua Header, Sidebar mahupun Footer kini terpisah di dalam fail-fail PHP yang berbeza. Untuk mengubah kod-kod WordPress ini secara manual, tidak semudah seseorang meng-edit kod HTML di Blogspot…
2. Dashboard tidak menggunakan SSL seperti Blogger.com. Tiada “https” di bahagian address bar apabila aku berada di dalam kawasan admin…hmmm.
3. Eh? Kena update sendiri? Ya, seorang blogger harus bertanggungjawab terhadap kemaskini-kemaskini terkini di laman blog WordPress beliau. Tidak seperti Blogger.com yang senantiasa mengemaskini semua ini secara automatik… 
4. Ruang menaip entri terlalu ringkas dan tiada banyak pilihan untuk mengubah rekabentuk postingan (dari segi warna teks, saiz font dan sebagainya). Tetapi ada sedikit kelebihan dari segi penggunaan TAG yang tidak ada pada platform Blogspot…
Jadi, Apa Yang Hebatnya WordPress?Yang hebatnya tentang WordPress adalah PLUGIN! Ada beribu-ribu plugin yang boleh digunakan bagi menambah baik sesebuah laman dari pelbagai aspek seperti Security, Widget, Backup, malahan SEO, serta banyak lagi keupayaan yang tidak terjangkau dek minda pengguna Blogspot seperti aku…

Halaman Plugin WordPress

Yang lebih menariknya ialah, kebanyakan plugin sentiasa dibangunkan dan disokong dari semasa ke semasa. Oleh itu, sebarang bug boleh diatasi dengan cara mengemaskini plugin ini kepada versi yang terbaru…
Cuma masalahnya, bagaimana mahu tahu plugin mana satukah yang bagus dan plugin mana satukah yang wajib dimiliki oleh seseorang pemilik laman WordPress? Kerana ada terlalu banyak plugin… Jadi tidak hairanlah jika kata kunci “Best WordPress Plugin” sering menjadi pilihan penulis blog yang inginkan trafik dari enjin carian…LOL.

WordPress Plugin Search

Disebabkan itu, eksperimen aku dengan WordPress setakat ini lebih tertumpu kepada mencari dan mencuba pelbagai plugin…haha. Akibatnya hanya 2 sahaja entri yang sempat ditaip untuk blog berkenaan, walaupun telah bermula semenjak pertengahan bulan Mei yang lalu…Posted by Hatimi Tahirruddin at 20:20

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog

Monday, 13 May 2013

Sistem Komen Google+ Di Blog | Thread VS Reply

Sudah beberapa minggu sistem komen Google+ diperkenalkan bagi pengguna platform blogspot. Aku lihat ramai juga blogger yang telah bertukar terus kepada sistem yang baru ini. Ada juga yang masih selesa dengan sistem komen blogspot ataupun sistem komen pihak ketiga yang lain…
Di dalam entri yang lalu, aku telah menyatakan hasrat untuk bereksperimen dengan fungsi-fungsi yang ada di sistem komen Google+. Memang ada beberapa perkara yang boleh disimpulkan hasil daripada eksperimen berkenaan serta pemerhatian aku terhadap blogger lain yang turut menggunakan sistem yang sama…
Berikut ialah hasil daripada pemerhatian aku…
Apabila mahu tinggalkan komentar di blog yang menggunakan sistem komen Google+, pengunjung mempunyai 2 pilihan iaitu…a) Komen sebagai “thread” yang baru. Pilihan ini membolehkan pengunjung berkongsi komen berkenaan di halaman profail Google+ mereka (si pengomen)…b) Komen sebagai “reply” kepada “thread” yang sudah sedia ada…

Sistem Komen Google+ Di Blog | Thread VS Reply

Sejujurnya, aku berpendapat bahawa seseorang pengunjung perlulah bijak menggunakan kedua-dua pilihan di atas. Memilih dengan betul boleh membantu sesebuah entri itu berkembang dari aspek perbincangan. Jika anda gemar berinteraksi dalam mana-mana laman forum di internet, anda pasti sudah faham fungsi thread dan reply ini. 
Adalah tidak beretika (di laman forum) sekiranya seseorang pengguna membuka satu lagi thread mengenai topik yang sama. Begitu juga halnya dalam kes sistem komen Google+ di blog. Jika niat anda untuk membalas atau menambah pendapat mengenai komentar yang telah dibuat oleh pengunjung lain sebelum itu, adalah “kurang manis” untuk membuka thread yang baru… Seeloknya, jawablah di bawah thread berkenaan sahaja… 

Contoh:
Ali buat entri tentang Artis A yang suka buang sampah merata-rata…
Ahmad komen dalam thread baru, “itu lah Artis A patut pergi belajar pendidikan sivik…”
Joyah pula membuka satu thread baru, “kat sekolah dia tak belajar sivik ke?…grrrrr!!!”
John juga membuka thread baru, “mesti dia lepak dalam toilet hisap rokok masa cikgu tengah mengajar…kahkahkah”

Cuba perhatikan 3 komentar dalam contoh di atas. Semuanya bercerita tentang pendidikan dan berniat untuk menambah “garam” kepada pendapat sebelumnya. Bukankah elok jika ketiga-tiga komentar ini berada dalam satu thread yang sama dan bukannya berasingan…?
Apa masalah jika buka thread baru?Terdapat pro dan kontra dalam persoalan ini. Dengan sistem komen Google+, secara default thread baru akan turut dikongsikan di halaman profail orang yang meninggalkan komentar. Kalau si polan hanya singgah ke satu blog yang menggunakan sistem komen Google+, tidak mengapalah… Ini tidak, kadang-kadang sampai 10 thread dipaparkan di profail…
Oleh itu, ia akan mencacatkan sedikit ruang profail seseorang. Apabila ada pihak yang singgah ke halaman berkenaan, perkara pertama yang mereka lihat adalah komentar-komentar yang dikongsikan sahaja, dan bukannya blog atau laman sesawang kepunyaan pemilik profail… Akibatnya, peluang untuk pemilik profail menerima pengunjung daripada Google+ pun akan mengecil…
Hal ini walaubagaimanapun, memberi banyak kelebihan kepada blog yang dikongsikan itu (blog yang gunakan sistem komen Google+), kerana lebih ramai orang berkongsi, lebih besar juga peluang untuk mendapat trafik…
Jadi, ketidakadilan telah berlaku di sini… Orang yang rajin komen kurang berpeluang mendapat trafik, tetapi dalam masa yang sama, blog yang selalu mendapat “share” akan mendapat trafik yang lebih banyak…
Bagaimana mengawal ketidakseimbangan ini?Senang sahaja, pengunjung sesebuah blog yang menggunakan sistem komen Google+ perlulah bijak memilih samada mahu kongsi entri berkenaan ataupun tidak. Jika anda sekadar mahu menambah “garam” kepada komentar sedia ada, balaslah di bawah thread yang berkenaan sahaja. Tidak perlu membuka thread yang baru!
Jika komentar yang anda mahu taip itu terpaksa dibuat dalam thread yang baru (atas alasan-alasan tertentu), pastikan anda tidak “tick” pada kotak “Also share on Google+”… 
Namun, jika anda rasakan sesebuah entri itu memang betul-betul hebat dan perlu disebarkan, barulah anda kongsikan di halaman profail Google+ anda ataupun kongsikan sekali dengan Community atau Circle anda… 
PS: Apa-apa pun, terserah kepada individu itu sendiri. Aku hanya tulis berdasarkan pemerhatian sahaja, dan pendapat aku tidak semestinya betul… Posted by Hatimi Tahirruddin at 22:29

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog, google plus

Friday, 19 April 2013

Eksperimen Dengan Sistem Komen Google+

Google+ telah memperkenalkan sistem komen baru yang boleh dipasang di blog yang menggunakan platform blogspot ataupun blogger.com. Aku ada tulis mengenai kemaskini terbaru ini di blog timizero.my di dalam entri yang berjudul “Komen Google+ Di Blogspot”
Walaubagaimanapun, seseorang blogger itu haruslah berfikir 10 kali sebelum memutuskan samada ingin menerapkan Google+ Comment Form yang baru ini di blog mereka ataupun tidak. Ini kerana seperti yang telah aku terangkan di dalam entri berkenaan, terdapat beberapa kekurangan yang mungkin boleh menjejaskan pengalaman pengunjung ke blog anda.
Untuk mengatasi masalah ketidakpastian ini, aku mengambil inisiatif untuk mencubanya terlebih dahulu di blog ini. Memandangkan ini ialah blog eksperimen dan pembaca yang berkunjung ke sini juga agak kurang (LOL), perubahan sistem komen di sini tidak akan memberi impak yang terlalu besar.
Jika difikirkan, ada banyak juga kelebihan menggunakan Google+ Comment Form ini. Antaranya ialah dapat mengoptimumkan penggunaan profail Google+ itu sendiri. Jika anda kongsi (share) sesebuah entri di mana-mana Community ataupun Circle di Google+, perkongsian itu akan diintegrasikan dengan halaman di blog anda secara terus…
Misalnya di Community A anda mendapat 5 komen dan “+2”, di Community B anda mendapat 10 komen dan “+5”, manakala di halaman blog anda mendapat 20 komen dan “+2”, semua ini akan dicampurkan sekali menjadi 35 komen dan “+9” kesemuanya… Apa yang bagusnya ialah, semua ini boleh dilihat terus di halaman blog anda apabila seseorang pembaca membaca entri yang dikongsikan tadi…
Selain daripada itu, menulis komen di Google+ Comment Form ini sama “sebiji” seperti menulis komen atau post di laman Google+. Anda boleh tag rakan anda hanya dengan menggunakan butang “+” ataupun “@” seperti yang ditunjukkan dalam gambar di bawah… 

Tag Pengguna Google+

Mungkin ada yang bertanya ada apa dengan TAG? Apabila anda tag mana-mana pengguna Google+, secara automatik mereka akan menerima notifikasi. Jika anda tag dengan niat untuk membalas komen, secara tidak langsung pengguna berkenaan akan mendapat tahu dengan cepat tanpa perlu “Subscribe to Comments” seperti yang biasanya dipraktikkan di platform blogspot…
Para pembaca yang ingin meninggalkan komen juga boleh berkongsi komen berkenaan dengan Community atau Circle tertentu

Share Dengan Community

serta memilih samada mahu menampilkan komen tersebut di Google+ ataupun tidak

Share Di Google+

Aku belum lagi sempat bereksperimen dengan 2 fungsi di atas. Itulah sebabnya aku menaip entri khas ini (khas lah sangat…) dengan tujuan mahu bermain-main dengan sistem komen terbaru ini…
Jika anda sedang membaca entri ini, anda dijemput untuk turut bereksperimen dengan kotak komen di bawah…hehehe… Tulislah apa pun, yang penting tujuannya untuk mencuba segala fungsi yang ada… Kalau ada apa-apa fungsi yang menarik, jangan lupa untuk kongsikan di sini…  Posted by Hatimi Tahirruddin at 08:31

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog, google plus

Sunday, 31 March 2013

CSS Luaran (External Style Sheet)

CSS ataupun Cascading Style Sheet merupakan elemen penting bagi sesebuah halaman HTML. Aku yakin setiap blogger pasti sudah faham serba sedikit tentang kegunaan CSS ini serta tempat peletakan kod-kodnya di template blog.
Secara amnya, ada 3 cara yang boleh digunakan untuk meletakkan kod CSS;1. Inline atau Sebaris – Meletakkan kod sebaris dengan tag HTML2. Internal atau Dalaman – Meletakkan kod di bahagian <head>3. External atau Luaran – Meletakkan kod di luar halaman HTML
Seperti yang aku tulis dalam entri “Eksperimen Yang Tertangguh” sebelum ini, meletakkan CSS secara luaran adalah salah satu perkara yang sedang aku usahakan. Dan memang sudah berjaya pun meletakkan CSS blog ini diluar. Anda boleh tekan CTRL + U untuk melihat sendiri source kepada halaman yang anda sedang baca ini.
Mengapa Harus Letak CSS Di Luar?Mungkin soalan ini bermain di fikiran sebahagian daripada pembaca. Menurut apa yang aku perolehi di internet, meletakkan CSS di luar halaman HTML boleh memperkemaskan halaman berkenaan. Maklumlah kod-kod CSS ini sahaja sudah boleh memenuhi ruangan <head>. Tidak percaya? Jika anda pengguna blogspot, lihat sahaja CSS Dalaman anda…

Variable yang banyak dalam blogspot
Setelah guna CSS Luaran, tiada lagi variable yang banyak

Kalau anda bandingkan blog berjenama blogspot dengan laman-laman sesawang berasaskan HTML yang lain, anda akan perasan kebanyakan laman tersebut memang tiada CSS Dalaman. Lihat sahaja Source Page kepada mana-mana blog berjenama WordPress.org. Keseluruhan plugin mereka, menggunakan CSS luaran!
Kelebihan CSS Luaran Untuk Sesebuah BlogAku tidak pasti samada pandangan aku ini tepat ataupun tidak, tetapi dengan kurangnya baris-baris kod di bahagian <head>, proses perayapan Robot Enjin Carian juga dapat dipermudahkan. Dalam erti kata lain, Robot akan lebih cepat sampai ke bahagian KANDUNGAN sesebuah halaman…
Namun, itu hanyalah andaian yang tidak berasas sahaja. Tetapi apa yang pasti dengan meletakkan CSS di luar, saiz kilobyte sesebuah halaman HTML memang boleh dikurangkan.
Aku sendiri telah buat eksperimen ke atas blog eksperimen.timizero.my ini, dan gambar-gambar di bawah ini menunjukkan hampir 20kB dapat dijimatkan melalui penggunaan CSS Luaran

Sebelum letak CSS di luar
Selepas letak CSS di luar

Ya, apalah sangat 20kB itu jika dibandingkan dengan 100kB lebih saiz kebanyakan blogspot. Tetapi ini kerana template yang aku gunakan (Simple Template) tidak memiliki CSS yang panjang. Bayangkan jika template anda ada banyak kod CSS, mungkin lebih banyak kilobyte yang dapat dijimatkan
Kekurangan CSS Luaran Untuk Sesebuah BlogMenggunakan CSS Luaran pada blogspot bukanlah semudah yang disangkakan. Ada banyak kekurangan pada blogspot itu sendiri seperti;
1. Penggunaan variable dalam template blogspotOleh kerana mahu memudahkan pengguna, blogspot menerapkan “sistem variable pada CSS” di template mereka. Masalahnya ialah, beberapa kod CSS ditulis dalam bentuk variable dan bukannya nilai sebenar.
Oleh itu jika mahu meletakkan CSS di luar, seseorang perlu mendapatkan kod tanpa variable berkenaan terlebih dahulu. Walaubagaimanapun, memang ada penyelesaiannya… Mungkin aku boleh kongsikan jika ada yang berminat…
2. Blogspot tidak menyediakan hosting untuk CSS LuaranIdea asal menggunakan CSS Luaran ialah untuk memperkemaskan halaman HTML sekaligus mempercepatkan proses “loading”. Masalahnya ialah, anda terpaksa muat naik fail CSS ini secara berasingan ke “laman hosting” yang lain disebabkan blogspot tidak menyediakan tempat untuk fail CSS.
Ini sebenarnya bakal melambatkan proses “loading” disebabkan permintaan HTTP apabila mahu membuka blog anda di browser. Perkara sebegini tidak berlaku kepada laman sesawang yang memiliki hosting sendiri, kerana fail CSS tersebut boleh diletakkan di dalam folder yang sama dengan halaman-halaman HTML yang lain…
Meletakkan fail CSS pada “laman hosting” yang berbeza juga boleh mendatangkan masalah, iaitu “reliability” laman tersebut. Pemilihan laman yang betul adalah kunci dalam kes ini.
Aku sendiri sebelum ini pernah mencuba UbuntuOne untuk CSS Luaran, tetapi failnya kejap ada, kejap tidak ada. Ini boleh mendatangkan masalah kepada pengunjung jika rekabentuk blogspot anda berubah wajah (kerana kehilangan CSS) secara tiba-tiba…haha.
3. Dengan meletakkan CSS di luar, anda tidak boleh lagi edit blog seperti biasaBermakna tiada lagi penggunaan Template Designer untuk mengubah gaya penampilan blog anda. Walaubagaimanapun, anda boleh sahaja tulis kod CSS secara dalaman ataupun sebaris. Konsepnya mudah, kod-kod terbaru pada CSS Dalaman/Sebaris akan ditambahkan ke dalam CSS Luaran sedia ada. 
Ini adalah contoh yang berlaku ke atas blog ini. Lihat bagaimana Layout untuk widget sudah kelihatan pelik apabila semua CSS aku letakkan di luar…

Layout Blog Tanpa CSS Untuk Width

PS: Panjang pula entri ni…hmmm…  Posted by Hatimi Tahirruddin at 21:38

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog

Monday, 18 March 2013

Eksperimen Yang Tertangguh

Hehe…memang senyap dan sepi sahaja blog “Eksperimen Lah Sangat” ni. Maklumlah “Blog Induk” pun aku terkial-kial hendak terbitkan entri, inikan pula blog “tepian” sebegini. Ada sahaja yang aku ingin muatkan di sini, tetapi masa untuk blog ini teramatlah terhad. 
Oleh kerana kekangan yang tidak dapat dielakkan, saki baki masa aku manfaatkan dengan menulis entri di “Blog Induk” sahaja lah… Kasihan dengan pembaca yang singgah ke sini. Balik-balik ada 2 entri sahaja semenjak bulan lalu…hehe. 
Berbalik kepada tajuk di atas, memang banyak sangat perkara (eksperimen) yang aku ingin buat. Lebih-lebih lagi mengenai blog. Tetapi kebanyakannya masih tertangguh. Ada juga yang sudah siap, tetapi aku pula yang malas tulis entri…
Antara eksperimen yang sedang aku usahakan dan kaji…1. Mempercepatkan “loading” blog tetapi tidak “membogelkan” blog2. Belajar guna CSS dari Blueprint3. Sedang cuba pasang CSS luaran (external stylesheet) tetapi masih tidak berjaya
Antara eksperimen yang aku ingin sangat buat dan belajar…1. Untuk capai no.1, aku kena kaji susun atur Javascript di blog… Kalau tengok halaman sumber “Blog Induk” memang script ada di mana-mana…Kokdiang, Singapore, Sungai Petani….2. Mempelajari Javascript3. Belajar cara ekstrak JSON kepada HTML4. Dan akhir sekali setelah berpuas hati dengan reka bentuk blog, barulah CSS Sprite akan diterapkan
Eksperimen yang sudah siap…Menggayakan navigasi ala Puterikasih.com guna CSS dan imej.Posted by Hatimi Tahirruddin at 23:14

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog

Sunday, 24 February 2013

Buat Navigasi WordPress Di Blogspot

Sebenarnya beberapa hari yang lalu aku ada terperasan +Puteri Kasih menggunakan plugin navigasi WordPress untuk blog beliau di puterikasih.com. Memang amat padan dan cocok sekali susun letak widget tersebut. Selain itu pengunjung juga bebas bergerak dari satu entri ke entri berikutnya tanpa perlu naik semula ke bahagian atas blog.
Tetapi malang sekali kerana menurut +Puteri Kasih, plugin seumpama itu hanya boleh digunakan untuk WordPress. Puas beliau mencari tetapi tidak bertemu dengan kod-kod yang boleh digunakan untuk blogspot
Melihatkan rupa widget tersebut, ia tidaklah secanggih mana. Sekali imbas, aku jangkakan cara membuatnya pasti sama seperti widget “Back to Top”. Kebetulan waktu itu, aku ada terjumpa tutorial membuat bentuk objek menggunakan kod CSS sepenuhnya. Jadi, aku mencabar diri supaya mengubah suai kod-kod sedia ada kepada widget gaya puterikasih.com tersebut…
Ya, seperti yang boleh diagak, jangkaan dan ramalan aku itu tidak benar belaka…hihi. Memang mudah jika pautan luar digunakan seperti widget “Back to Top”. Tetapi pautan “Next Post” dan “Previous Post” hanya boleh diakses menggunakan skrip terbina dalam blogspot. Puaslah aku mencuba dan bereksperimen. Namun akhirnya berjaya juga aku dapatkan caranya…
Kepada yang berminat untuk mencuba, anda boleh masukkan kod-kod di bawah ini ke dalam blogspot… (sebelum melakukan sebarang perubahan sila “backup” template anda terlebih dahulu!!)
Mula-mula buka ruangan edit HTML di dashboard. Tick pada “Expand Widget Templates”.
Kemudian masukkan kod CSS berikut sebelum ]]></b:skin>

/*—–Navigasi Page CSS Mula—–*/
#sempadan1 {
position: fixed;
left: 0;
top: 40%;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
#sempadan2 {
position: fixed;
right: 0;
top: 40%;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
#segitiga1 {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-right: 40px solid #aaaaaa;
border-bottom: 35px solid transparent;
margin:20px 10px 20px 10px;
}
#segitiga2 {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-left: 40px solid #aaaaaa;
border-bottom: 35px solid transparent;
margin:20px 10px 20px 10px;
}
#segitiga1:hover {
border-right: 40px solid #0000ff;
}
#segitiga2:hover {
border-left: 40px solid #0000ff;
}
/*—–Navigasi Page CSS Tamat—–*/

Selepas itu sila cari kod <span id=’blog-pager-newer-link’>
Betul-betul di bawahnya masukkan kod ini

<!– Navigasi Kiri Mula –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
     <a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’ expr:title=’data:newerPageTitle’><div id=’sempadan1′><div id=’segitiga1’/></div></a>
</b:if>
<!– Navigasi Kiri Tamat –>

Dan akhir sekali cari pula kod <span id=’blog-pager-older-link’>
Betul-betul di bawahnya masukkan kod ini

<!– Navigasi Kanan Mula –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
     <a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><div id=’sempadan2′><div id=’segitiga2’/></div></a>
</b:if>
<!– Navigasi Kanan Tamat –>

Selepas itu bolehlah anda Preview sebelum klik “Save template”. 
PERHATIAN: Navigasi tersebut tidak akan keluar ketika Preview. Oleh itu gunakan Preview ini untuk memastikan tiada kesilapan memasukkan kod sahaja…
Jika tiada masalah, anda akan lihat widget navigasi ini muncul ketika berada di halaman post. Untuk menukar warna supaya sesuai dengan tema blog anda, sila ubah kod-kod CSS berikut:Ubah semua kod BIRU untuk warna “border”Ubah semua kod MERAH untuk warna segitigaUbah semua kod HIJAU untuk warna “hover” segitiga
Selamat mencuba…
UPDATE: Terlupa pula untuk tunjukkan demo bagaimana kod-kod di atas berfungsi. Berikut ialah gambar yang diambil dari “blog private” aku…

Buat Navigasi WordPress Di Blogspot

Sekiranya berjaya memasukkan kod dengan betul, anda akan lihat dua segitiga muncul di kiri dan kanan halaman post… Anda juga boleh gantikan kod CSS di atas dengan imej supaya nampak lebih cantik lagi…Posted by Hatimi Tahirruddin at 20:19

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Labels: blog, widgetOlder PostsHomeSubscribe to: Posts (Atom)

Blog Archive

  • ▼  2013 (8)
    • ▼  June (2)
      • Cara Buat Halaman Contact Menggunakan Widget
      • Aku, Eksperimen dan WordPress
    • ►  May (1)
    • ►  April (1)
    • ►  March (2)
    • ►  February (2)
About MeHatimi Tahirruddin 
View my complete profile

Iklan