Butang Perkongsian Ringkas

Lama sudah ingin buat, cuma masa dan nafsu tidak mengizinkan. Pernah membaca di blog Mr Piratz dan tanpa berlengah lagi aku terus melayari blog beliau. Dapat juga kod untuk butang-butang yang nak di pasang tu. Aku cuba pasang, copy paste kod yang ada kat blog dia dan cuba untuk mengubah CSS. Apasal tak jadi ni. haha. Rupanya baru aku perasan, ada table disitu. Aku tulis semula kod yang aku inginkan supaya sesuai dengan tema wordpress aku dan tema blogspot. Terima kasih Mr Piratz untuk kod sebab memberi aku idea untuk dikongsikan semula.

Aku pun dapat hasil yang aku inginkan. Kod-kod diubah suai mengikut selera aku dan blog ini. Jadi, aku ingin kongsi semula kod yang aku buat. Semoga berguna untuk orang lain. Langkah yang bakal aku tunjukkan ini untuk pengguna wordpress selfhost.

Langkah pertama, sila buka header.php dalam folder tema wordpress anda dan masukkan kod dibawah sebelum </head>. Ini adalah kod untuk membolehkan Google Plus One berfungsi.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Langkah kedua, masukkan pula kod html untuk butang sosial di mana-mana bahagian anda inginkan pada single.php.

<!-- Start Butang Sosial -->
<div class="kotak-butang-sosial">
	<div class="butang-sosial">
		<ul>
			<li><div class="fb"><div class="fb-like"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186978054685234&xfbml=1"></script><fb:like layout="button_count" href="<?php the_permalink() ?>" action="recommend" send="true" width="220" show_faces="false" font=""></fb:like></div></div></li>

			<li><div class="gpone"><g:plusone size=medium></g:plusone></div></li>

			<li><div class="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div></li>
		</ul>
	</div>
</div>
<!-- End Butang Social -->

Langkah ketiga, masukkan pula kod css pada style.css

.kotak-butang-sosial {
	width: 510px;
	height: 40px;
	margin: auto;
}

.butang-sosial{
	float:left;
	width:100%;
	position:relative;
}

.butang-sosial ul {
	left:50%;
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}
.butang-sosial ul li {
	display:block;
	right:50%;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}

.fb {
	background: #ECEEF5 url(http://goo.gl/9oxyW) no-repeat right bottom;
	border: 1px solid #9DACCE;
	padding: 6.5px;
	border-radius: 4px;
	width: 220px;
}

.gpone{
	background: #F9F9F9 url(http://goo.gl/2UdHt) no-repeat right bottom;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 6px;
	width: 80px;
	border-radius: 4px;
	padding: 5px;
}

.tweet {
	background: #E8F3F9 url(http://goo.gl/dtXTI) no-repeat right bottom;
	border: 1px solid #A4CCE5;
	margin: 0 0 0 6px;
	width: 100px;
	border-radius: 4px;
	padding: 5px;
}

Pastikan save semua kerja anda. Tadaa.. sudah siap. Untuk blogspot pun sudah siap. Jika ada apa-apa masalah jangan malu bertanya.

Penerangan

• Aku menggunakan <ul><li></li></ul> bertujuan untuk ‘center‘kan butang kongsi tersebut. Jika anda semua inginkan butang kongsi itu berapa di kiri atau kanan, boleh remove <ul><li></li></ul> dan tambah float left atau right pada CSS.
• Anda boleh upload sendiri background images didalam folder tema wordpress anda, jika tidak mahu menggunakan url yang diberikan.
• Untuk memudahkan anda melakukan sebarang ubahan, aku sertakan fail untuk anda mencuba sendiri. Download ButangSocial.

Untuk wordpress :

• Semua permission folder-folder dalam wordpress  perlu 755 atau 750.
• Manakala fail-fail lain pula hendaklah disetkan kepada 644 atau 640.
• wp-config.php pula perlu setkan kepada 600 untuk mengelakkan orang lain dalam server membacanya.

Jadi, jangan sesekali tetapkan permission kepada 777 untuk mana-mana folder atau fail. Ini tips untuk hosting yang kongsi-kongsi (shared hosting). hehehe. Wordpress sebenarnya bijak, sebab ia create sendiri permission untuk anda, bergantung kepada server.

Jadi, kepada pengguna wordpress self-host, tidak perlu risau. Ubahlah permission seperti yang telah dinyatakan diatas.

Dan pesanan dari saya, “Jagalah blog anda, kerana tiada satu pun sistem server yang selamat didunia ini. Cuma kita mengambil langkah berjaga-jaga.” Cewaahh.. sedap je pesan memesan nih..

Footer Widget

Rasanya sudah lama menggunakan tema ringkas ni. Ingin menambah sedikit dibahagian footer.

* ada orang komplen, tema blog ni ringkas sangat, tak tahu nak klik mana.. (ada juga gitu eh) haha..

Berbalik kepada tajuk, aku dengan murah hatinya, ceewah. Aku memberikan secara percuma tema wordpress kepada pengguna wordpress selfhost.

Arkib ringkas

Beberapa kelemahan pada tema ini, antaranya :

• Tiada sidebar, ada sesetengah pengguna tidak selesa dengan benda ini.
• Radius tidak dibentuk dengan elok pada browser yang tidak dapat menerima CSS3. Sila update browser anda. haha..
• Menu hanyalah CSS biasa, tiada dropdown menu yang canggih-canggih. Jika inginkan juga, cuba lakukan sendiri dan itu keinginan anda.

Banyak pula kelemahan, anda carilah lagi. Silalah kritik la selagi anda mampu.

Manakala kelebihan tema ini pula

• Jika ada yang mengatakan tema ini mempunyai kelebihan, maka adalah kelebihan itu, anda yang menentukan.

Ok, selamat untuk muat turun, dan selamat mencuba free wordpress theme – Shoruha Green ini. Valid XHTML dan CSS Level 3.

Download Now!

*Update – Tema ini adalah percuma sepanjang hayat. Buatlah apa yang anda inginkan pada tema ini. Harap ianya berguna. Support hanya melalui emel. Cepat atau lambat, itu sahaja. haha.

Tema 2011 - klik untuk lebih jelas

Sebenarnya aku telah lama siapkan tema ini, hanya belum digunakan. Tema ini hanya molek ditenung menggunakan Google Chrome, Safari dan Mozilla 4 Beta. Menyokong wordpress 3.0, sesuai untuk photoblog, liveblog dan sebagainya. Oh ya, yang berwarna oren sebelah kiri itu adalah entri untuk kategori asides.

Mungkin aku akan keluarkan versi percuma, atas permintaan Aman Firdaus sempena tahun baru 2011 ini. Harap penulis blog lain boleh menerima tema yang tidak seberapa ini, akan dikeluarkan beberapa hari lagi.

Ok, aku akan tunjukkan cara yang berlainan dan mungkin agak sukar sedikit bagi yang masih baru.

Pastikan anda :

1. Mempunyai hosting sendiri.
2. Mempunyai wordpress siap dipasang.
3. Mempunyai akses hosting control panel.
4. Mempunyai talian internet yang aktif untuk telefon bimbit.

Langkah Pertama

Login ke hosting control panel, cipta emel baru, khas untuk live blogging.

Cipta Emel

Masukkan emel dan password, Create Account. Ciptakan 2 akaun email, pertama liveblog@ahmadrushdi.com dan yang kedua aku@ahmadrushdi.com.

Email pertama adalah untuk menerima dan email kedua adalah untuk menghantar.

Config Emel

Pada emel yang kita cipta tadi, klik Configure Email Client.

Paparan Emel

Paparan manual setting. Simpan untuk kegunaan langkah seterusnya.

Langkah kedua

Pasang plugin Postie pada wordpress anda, dan aktifkan plugin tersebut. Kemudian, ke postie setting. Setkan emel yang anda cipta tadi.

Set Emel

Setkan seperti yang tercatat pada paparan manual seting tadi. Port biasa untuk POP3 adalah 110.

Emel yang dibenarkan

Authorized, pastikan emel mana yang boleh menerima post tersebut. Andai kata aku menggunakan aku@ahmadrushdi.com, masukkan pada kotak Authorized Addresses. Pastikan anda setkan email ini pada langkah ketiga nanti.

Setkan Kedudukan Gambar

Pada bahagian image, setkan mengikut citarasa. Ini menentukan tataletak gambar pada entry anda.

Langkah ketiga

Setkan emel untuk telefon bimbit anda. Aku menggunakan telefon bimbit Nokia s60. Hampir semua jenis telefon bimbit mempunyai fungsi yang serupa.

Sila ke Messaging > Options > Setting > Emel > Mailboxes > New Mailbox > Mailboxes Setting. Isikan semuanya seperti contoh yang rajah ketiga diatas.

Contoh yang diisi oleh aku. Pastikan emel yang dicipta pada awal tadi. aku menggunakan contoh aku@ahmadrushdi.com

Contoh :

Mailbox name : Apa-apa sahaja

Access point in use : Maxis (Contoh – gunakan Access Point yang aktif.)

My e-mail address : aku@ahmadrushdi.com

Outgoing mail server : mail.ahmadrushdi.com

User name : aku+ahmadrushdi.com

Password : ******

Incoming mail server : mail.ahmadrushdi.com

Mailbox type : POP3

Langkah keempat

Anda sudah boleh membuat live blogging. Hanya ke Messaging > New > Email. Hantarkan ke liveblog@ahmadrushdi.com. Format yang digunakan seperti berikut. Subject adalah sebagai Tajuk post anda, seterusnya penerangan, tags untuk masukkan tag.

To : liveblog@ahmadrushdi.com

CC :

Subject : Tajuk Live Blog

hi, saya sudah berjaya mencuba ini.

tags: live blog, mobile

Yey! sudah selesai.

• Email yang digunakan untuk tutorial ini tidak aktif.
• Pastikan telefon bimbit anda mempunyai talian internet yang aktif bagi membolehkan emel dihantar. *Aku tidak menggunakan MMS, habis kredit. haha
• Anda boleh menghantar seberapa banyak attachment untuk dimuatkan didalam satu entri. Contoh Jalan-jalan Malam Ramadhan.
• Attachment adalah disimpan didalam hosting anda sendiri.

p/s : Ini adalah kaedah yang digunakan oleh aku, mungkin berbeza dengan orang lain. Kalau ada cara yang mudah sikit boleh la kongsi. hehe.

Jika ada sebarang masalah berkaitan, sila kemukakan. Jangan malu-malu..

1. Google.com
Enables users to search the Web, Usenet, and images. Features include PageRank, caching and translation of results, and an option to find similar pages. The company’s focus is developing search technology.

Top Queries from Search Traffic : gmail, google, gmail.com, google maps, google translate, adsense, translate, google.com, maps, google earth

2. Facebook.com
A social utility that connects people, to keep up with friends, upload photos, share links and videos.

Top Queries from Search Traffic : facebook, facebook login, facebook.com, face, www.facebook.com, face book, fb, facebok, facebook en español, facbook

3. Youtube.com
YouTube is a way to get your videos to the people who matter to you. Upload, tag and share your videos worldwide.

Top Queries from Search Traffic : youtube, يوتيوب, youtube videos, chat roulette, lady gaga telephone, vancouver 2010, we are the world, chatroulette, trololo, alors on danse

4. Yahoo.com
Personalized content and search options. Chatrooms, free e-mail, clubs, and pager.

Top Queries from Search Traffic : yahoo, yahoo mail, yahoo.com, yahoomail, yahoo answers, www.yahoo.com, yahoo messenger, mail, yahoo finance, yahoo groups

5. Live.com
Search engine from Microsoft.

Top Queries from Search Traffic : windows live, hotmail, windows live messenger, skydrive, live, live.com, hotmail.com, messenger, windows live mail, live messenger

6. Wikipedia.org
An online collaborative encyclopedia.

Top Queries from Search Traffic : corey haim, justin bieber, 円周率, jesse james, chile, 黒澤 明, sandra bullock, vancouver 2010, alice in wonderland, vivaldi

7. Baidu.com
Music search engine and free MP3 & video streaming for all kind of topic.

Top Queries from Search Traffic : baidu, 百度, 天安门, baidu.com, vpn, www.baidu.com, tiananmen, 美女, imax, 地图

8. Blogger.com
Free, automated weblog publishing tool that sends updates to a site via FTP.

Top Queries from Search Traffic : blogger, blogspot,blog, blogger.com, blogspot.com, blogs, bloger, free blog, google blog, blogging

9. Msn.com
Dialup access and content provider.

Top Queries from Search Traffic : msn, hotmail, msn.com, hotmail.com, msn hotmail, msnbc, msn messenger, ｍｓｎ, messenger, hotmail.fr

10. Qq.com
中国最大的门户网站，提供即时通讯、新闻资讯、网络游戏以及在线拍卖业务，业务，

Top Queries from Search Traffic : qq, qq空间, web qq, 阿凡达, 腾讯, qq邮箱, youtube, ipad, webqq, qq.com

11. Twitter.com
Social networking and microblogging service utilising instant messaging, SMS or a web interface.

Top Queries from Search Traffic : twitter, twitter.com, twiter, twitter search, fb, tweeter, twitter api, twitter logo, youtube, gmail

12. Yahoo.co.jp
有料審査制のディレクトリ。ウェブサービスの形でAPIを公開。

Top Queries from Search Traffic : yahoo, ヤフー, 天気, やほお, yahoo japan, ヤフオク, gyao, 路線, 番組表, 翻訳

13. Google.co.in
Indian version of this popular search engine. Search the whole web or only webpages from India. Interfaces offered in English, Hindi, Bengali, Telugu, Marathi and Tamil.

Top Queries from Search Traffic : google, google maps, google india, google map, google trends india, google rank, facebook, google news, maps, google translate

14. Taobao.com
包括电脑通讯、数码、男装、女装、童装、化妆品、书籍音像、运动用品、游戏装备等各种商品的买卖，还有相关的社区交流，同时提供支付宝网上交易安全保证系统、游戏装备等各种商品的买卖，还有相关的社区交流，同时提供支付宝网上交易安全保证系统。

Top Queries from Search Traffic : taobao, 淘宝, 淘宝网, 淘寶, 淘寶網, Taobao.com, 支付宝, 掏寶網, 卓越, www.Taobao.com

15. Google.de
Suche im gesamten Web, in deutschsprachigen sowie in deutschen Seiten. Zusätzlich ist eine Bilddersuche, eine Newsarchiv-Suche (ehemals dejanews) sowie ein Katalog vorhanden.

Top Queries from Search Traffic : google maps, analytics, maps, google analytics, translator, übersetzer, google street view, adwords, street view, google street view deutschland

16. Google.com.hk

Top Queries from Search Traffic : sina, 韩寒, 新浪, ipad, 天气, 阿凡达, google, 神话, 微博, 星座

17. WordPress.com
Free blogs managed by the developers of the WordPress software. Includes custom design templates, integrated statistics, automatic spam protection and other features.

Top Queries from Search Traffic : wordpress, wordpress.com, wordpress blog, wordpress login, wordpress hosting, free wordpress hosting, wordpress log in, wordpress themes, word press, blog sites

4,186,713. Ahmadrushdi.com
Hehe.. 4,186,713. Nothing need to be surprise. This is Personal blog of Ahmad Rushdi, Life Journey of a man of Allah.

Top Queries from Search Traffic : 1Malaysia, One Malaysia, Piala Thomas 1992, hidup berani untuk gagal, ahamd nisfu syaaban, ahmad nisfu syaaban, nisfu syaabanasma al husna, kes pelajar menendang guru, syarat sah puasa, orang istimewa tuhan, nisfu syaaban 2009, hi

Tulisan arab kemas pada WordPress

Seorang pengunjung blog ini bertanyakan, bagaimana hendak menulis bahasa arab pada wordpress (selfhost). Sebelum ini aku ada menulis tentang perkara ini di Infomalaya. Mungkin beliau tidak menjumpainya. Aku cuba membalas emel beliau, namun gagal (Delivery to the following recipient failed permanently : emel@dia.com) harap beliau membaca artikel ini.

Baiklah, mari kita ikut langkah mudah ini (Linux Hosting).

1. Login ke Hosting Control Panel.
2. Ke phpmyadmin.
3. Export database, simpan dalam harddisk.
4. Edit “database.sql” tersebut, tukarkan semua charset ke utf8. contoh : CHARSET=utf8
5. Di phpMyAdmin, buang database lama, guna fungsi Drop.
6. Kemudian, di phpMyAdmin tadi, klik pada import > browse (database yang diedit tadi) > go.
7. Selesai import, di phpMyAdmin tadi klik pada Operation  (jika perlu) tukarkan Collation kepada utf8_bin.
8. Selesai.

Sekarang anda boleh menulis bahasa arab dalam wordpress. Jika ada sebarang persoalan jangan segan bertanya. Kesimpulan disini, ada 2 cara nak membolehkan wordpress anda ditulis dalam bahasa arab.

1. Pertama, Dengan cara install secara manual wordpress anda. Default Charset UTF8
2. Kedua, Mengubah charset setiap table database kepada utf8.

Baik, mari kita ikut langkah mudah ini. Aku hanya menggunakan platform wordpress (selfhost), supaya mudah bagi pengguna yang masih belum mahir menggunakan tools lain. Sebenarnya cara yang ingin ditunjukkan ini boleh digunakan dimana sahaja selagi ianya menggunakan CSS sebagai pembentuk sesuatu paparan halaman web.

Langkahnya – Login ke akaun Mybloglog anda, pada bahagian My Sites and Services klik pada widget untuk blog anda. Seterusnya klik pada Looking for the old-school Recent Reader widget?

Seterusnya klik pada Looking for the old-school Recent Reader widget? Find it here.

Seterusnya anda perlu memilih warna yang sesuai untuk blog anda. Width mengikut saiz sidebar blog anda. Show screen names – no. Image size – half-size. Title terpulang kepada anda, sama ada ingin meletakkan atau tidak. Aku memilih untuk membuang. Setelah selesai, klik pada Preview and Get Code.

Kemudian, kod Mybloglog anda telah berhasil, salin (copy).

Letakkan kod tersebut dibahagian widget dalam wordpress dashboard anda. Save.

Paparan Mybloglog dari kod asal akan terpapar di sidebar blog anda.

Seterusnya, kita perlu masukkan sedikit jampi CSS pada tema blog, klik pada Appearance > Editor. Kemudian, klik pada Stylesheet (style.css) dalam template blog anda. Tambahkan kod css dibawah seperti gambar di atas, letakkan dimana sahaja anda mahu di dalam style.css tadi.

.mbl_fo_hidden,.mbl_join,.mbl_join_img {
display: none;
}

Klik Update File, pastikan file style.css anda writable. Jika tidak anda perlu melakukan dengan cara lain, seperti download dan edit di komputer anda, kemudian upload kembali. Atau anda boleh menggunakan file manager pada control panel hosting anda.

Tadaa!!  senarai rakan Mybloglog anda nampak kemas dan tersusun seperti gambar di atas. Ini hanya untuk pengguna yang gemar sesuatu yang ringkas dan kemas. Juga tidak menambah ke’serabut’an blog anda.

Sebarang soalan bolehlah dikemukakan. Jika aku boleh membantu, insyaAllah, aku cuba membantu kalian.