Alhamdulillah, akhirnya selesai juga Memodifikasi Tema The Morning After Tampil Seperti Majalah di Blog irfan handi – hanya ingin berbagi, walaupun hasilnya masih berantakan. 
Sepertinya saya sudah jatuh cinta pada tema ini tapi mungkin berbeda bagi sebagian sahabat yang menyukai tampilan yang sederhana dan minimalis, tergantung selera masing-masing.
Ide untuk mengganti tema sebelumnya yaitu Modularity lite menjadi The Morning After, terinspirasi oleh thread yang pernah diterbitkan oleh Sesepuh kita Om Duto (http://omkicau.com/) di Forum Resmi WordPress.com tahun lalu, thread tersebut berjudul Blog full widget agar blog tampil seperti majalah… Berhubung topik ini telah dutup, maka saya akan mencoba berbagi untuk melanjutkan cara memodifikasi tema The Morning After di blog WordPress ini, siapa tahu dari sahabat tertarik juga untuk mencoba mengutak-atik tema keren ini. Mohon dukungannya Om Duto.
Untuk menampilkan Home Page seperti majalah pada tema The Morning After ini sebenarnya sangat mudah, Om Duto telah memberi bocoran untuk mengambil kodenya, yaitu dengan memasang firebug pada laptop atau PC Anda. Dengan firebug ini, kita bisa melihat setiap elemen halaman blog/web siapapun. Dan bahkan “bisa mencurinya” atau “menjiplaknya“. Namun jujur aja, saya tidak menggunakan firebug, saya hanya mengambil kodenya dari browser, dalam hal ini saya menggunakan Google Chrome.
Sebelum dilanjut, silahkan bikin blog untuk percobaan dan gunakan tema The Morning After. Untuk mengedit tampilan tema ini, nanti kita akan banyak bermain pada teks widget dengan memainkan posisi teks (dibikin absolut). Seluruh tampilan home page blog ini saya buat kode html nya pada teks widget, mulai dari judul pada header, gambar Page Rank yang ada dibawah tombol search, tampilan sticky pada kanan postingan terbaru, tampilan pesan Admin dibawah postingan terbaru, Cuplikan artikel pada sisi kiri sidebar sampai pada footer (mengganti tulisan pada catatan kaki).
Sekarang kita coba mulai memodifikasi temanya dengan menambahkan masing-masing widget diatas.
-
Memunculkan judul pada header, kode html nya:
<a href="http://irfanhandi.wordpress.com/"><span style="position:absolute;top:8px;left:20px;width:443px;height:115px;background:#fff url('http://irfanhandi.files.wordpress.com/2012/07/judul-blog-irfan.jpg');"></span></a>Keterangan :
- Ganti alamat url yang berwarna merah dengan alamat blog Anda
- Position Absolute adalah posisi gambar diukur dari top / atas dan kiri / left. silahkan ganti kode yang berwarna biru jika ingin disesuaikan dengan posisi gambar Anda. Kode warna ungu adalah ukuran lebar dan tinggi gambar header Anda.
- Sedangkan yang berwarna hijau adalah alamat gambar Anda
Untuk membuat gambar header anda dapat menggunakan Photoshop, Corel Draw ataupun editor lainnya.
Untuk mencoba memunculkannya seperti contoh header blog ini, copy saja kode HTML di atas, dan masukkan ke teks widget di primary sidebar, Nanti Om akan lihat sendiri hasilnya. Begitu pula untuk contoh-contoh berikut :
-
Memunculkan gambar Page Rank yang ada dibawah tombol search, kode html nya :
<a href="http://www.prchecker.info/"><span style="text-align:right;position:absolute;top:131px;right:20px;width:70px;height:20px;background:url('http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2lyZmFuaGFuZGkud29yZHByZXNzLmNvbS8=&tag=1') center center;"></span></a>-
Memunculkan footer (mengganti tulisan pada catatan kaki), kode html nya :
<div style="position:absolute;width:470px;bottom:11px;right:20px;height:27px;background:#fff;text-align:right;font-family:sans-serif;">Powered by <a href="http://wordpress.com/"><b>Wordpress</b></a> ~ Designed by <a href="http://demo.woothemes.com/tma/"><b>WooThemes</b></a> ~ Redesigned by <a href="http://irfanhandi.wordpress.com/hubungi-saya/"><strong>Irfan Handi</strong></a></div>Berikutnya, untuk memunculkan tampilan cuplikan artikel seperti contoh pada blog ini, copy saja kode HTML di bawah ini, dan masukkan ke teks widget di homepage feature widget area, dan lihat hasilnya. Silahkan disesuaikan dengan keinginan Anda.
-
Memunculkan tampilan sticky pada kanan postingan terbaru, kode html nya :
<h3 class="mast">Artikel Terlaris Pilihan Pembaca</h3>
<div class="feat_title" style="margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/02/01/cara-membuat-blog-di-wordpress/" rel="bookmark" title="Cara Membuat Blog di WordPress.com">Cara Membuat Blog di WordPress.com</a></div>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2012/02/01/cara-membuat-blog-di-wordpress/"><img src="http://irfanhandi.files.wordpress.com/2012/07/membuat-blog-wordpress.jpg" alt="wordpress" title="wordpress" width="110" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Anda ingin punya blog di WordPress.com? Caranya gampang, Syaratnya Anda harus memiliki email. Bagaimana langkah-langkah dalam Membuat Blog di WordPress.com ini... <a href="http://irfanhandi.wordpress.com/2012/02/01/cara-membuat-blog-di-wordpress/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
<div class="feat_title" style="margin:-5px 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/03/06/koleksi-widget-flash-islami-wordpress-part-5/" rel="bookmark" title="Koleksi Widget Flash Islami WordPress">Koleksi Widget Flash Islami WordPress</a></div>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2012/03/06/koleksi-widget-flash-islami-wordpress-part-5/"><img src="http://irfanhandi.files.wordpress.com/2012/07/membuat-widget-islami.jpg" alt="widget islami" title="widget islami" width="110" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Koleksi Widget Islami Terbaik hasil karya Almarhum "Bang Orido" diupload ulang ke widgipedia oleh Bang Red agar bisa ditampilkan kembali di blog WordPress.com. Terima kasih Orido… <a href="http://irfanhandi.wordpress.com/2012/03/06/koleksi-widget-flash-islami-wordpress-part-5/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
<div class="feat_title" style="margin:-5px 0 5px;"><a href="http://irfanhandi.wordpress.com/2011/12/23/koleksi-15-jam-unik-siap-dipasang-di-blog-wordpress-anda/" rel="bookmark" title="Koleksi 15 Jam Unik Untuk WordPress">Koleksi 15 Jam Unik Untuk WordPress</a></div>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2011/12/23/koleksi-15-jam-unik-siap-dipasang-di-blog-wordpress-anda/"><img src="http://irfanhandi.files.wordpress.com/2012/07/jam-untuk-wordpress-1.jpg" alt="Jam Unik Untuk WordPress" title="Jam Unik Untuk WordPress" width="110" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Saya akan mencoba berbagi beberapa penemuan jam yang unik dan keren tentunya yang saya dapat dari hasil googling hari ini. Ada 15 koleksi jam cantik dan unik yang siap Anda pasang... <a href="http://irfanhandi.wordpress.com/2011/12/23/koleksi-15-jam-unik-siap-dipasang-di-blog-wordpress-anda/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
-
Memunculkan tampilan pesan Admin dibawah postingan terbaru, kodenya html nya :
<div style="position:absolute;width:470px;top:498px;left:20px;font-family:sans-serif;background:#fff;">
<h3 class="mast">tentang tema ini</h3>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://id.gravatar.com/catatanirfanhandi"><img src="http://0.gravatar.com/avatar/469f7343455654c47e890bfcf984fdd0?s=62&d=&r=G" alt="wordpress" title="wordpress" width="62" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Blog ini memakai platform <a href="http://wordpress.com/">Wordpress</a>. Desainnya berasal dari tema <a href="http://theme.wordpress.com/themes/themorningafter/">The Morning After</a> karya <a href="http://www.woothemes.com/2010/06/themorningafter/">WooThemes</a>. Kami hanya melakukan beberapa modifikasi melalui otak-atik kode HTML. Bagaimana tanggapan Anda? ... <a href="http://irfanhandi.wordpress.com/hubungi-saya/">Silakan berkomentar »</a></p>
</div>
</div>
-
Memunculkan cuplikan artikel pada sisi kiri sidebar, kode html nya :
<div style="position:absolute;width:470px;top:609px;left:20px;font-family:sans-serif;background:#fff;">
<div style="float:left;width:190px;margin:2px 0 0;">
<div style="width:100%;height:1px;background-color:#dadada;"></div>
<h3 class="mast" style="margin:9px 0 5px;">Seputar WordPress</h3>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/06/10/panduan-tutorial-wordpress-lengkap/">Request Tutorial WordPress</a></p>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2012/06/10/panduan-tutorial-wordpress-lengkap/"><img src="http://irfanhandi.files.wordpress.com/2011/09/wordpress.jpg?w=750" alt="wordpress" title="wordpress" width="62" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Halaman khusus mengenai Tutorial WordPress yang ditujukan bagi blogger pemula agar bisa lebih fokus untuk membahas permasalahan yang dialami oleh pengguna WordPress.com... <a href="http://irfanhandi.wordpress.com/2012/06/10/panduan-tutorial-wordpress-lengkap/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/01/31/mari-biasakan-mengunjungi-id-wordpress-com-forums/">Mari Biasakan Mengunjungi id.Forums.WordPress.com</a></p>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2012/01/31/mari-biasakan-mengunjungi-id-wordpress-com-forums/"><img src="http://irfanhandi.files.wordpress.com/2012/07/id-forum-wordpress.jpg" alt="wordpress" title="wordpress" width="62" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Di sini Anda dapat bertanya masalah seputar WordPress.com, menyampaikan ide dan saran, mempromosikan blog, atau sekedar Nongkrong untuk Unjuk Blog Anda, yang kesemuanya itu dapat mendongkrak Trafict pengunjung Blog Anda... <a href="http://irfanhandi.wordpress.com/2012/01/31/mari-biasakan-mengunjungi-id-wordpress-com-forums/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/01/19/cara-membuat-flash-banner-di-wordpress-com/">Cara Membuat Flash Banner di WordPress.com</a></p>
<div class="feat_exc">
<p style="text-align:justify;"><a href="http://irfanhandi.wordpress.com/2012/01/19/cara-membuat-flash-banner-di-wordpress-com/"><img src="http://irfanhandi.files.wordpress.com/2012/07/flash-banner-wordpress.jpg" alt="Cara Membuat Flash Banner di WordPress.com" title="Cara Membuat Flash Banner di WordPress.com" width="62" height="62" class="alignleft" style="margin:5px 15px 0 0;"></a>Seperti yang kita ketahui bahwa animasi flash tidak bisa kita pasang langsung dengan mengcopy-paste script HTML yang kita dapat dari layanan penyedia animasi flash, karena WordPress tidak support dengan script tersebut. Kita ambil satu contoh, misalnya ... <a href="http://irfanhandi.wordpress.com/2012/01/19/cara-membuat-flash-banner-di-wordpress-com/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
</div>
<h3 class="mast" style="margin:9px 0 5px;">Pojok Download</h3>
<ul>
<li><a title="Free Download IDM Terbaru 2012 Full" href="http://irfanhandi.wordpress.com/2012/06/17/free-download-idm-terbaru-2012-full/">Free Download IDM Terbaru 2012 Full</a></li>
<li><a title="Download Windows 7 Loader Terbaru" href="http://irfanhandi.wordpress.com/2012/06/17/download-windows-7-loader-terbaru/">Download Windows 7 Loader Terbaru</a></li>
<li><a title="Download Gratis Passware Kit 9.3.815.zip" href="http://irfanhandi.wordpress.com/2011/10/04/download-gratis-passware-kit-9-3-815-zip/">Download Gratis Passware Kit 9.3.815.zip</a></li>
<li><a title="Download Solid Converter PDF Full" href="http://irfanhandi.wordpress.com/2011/10/04/solid-converter-pdf-full/">Download Solid Converter PDF Full</a></li>
<li><a title="Download Driver Canon Ip 2770" href="http://irfanhandi.wordpress.com/2011/10/03/download-driver-canon-ip-2770/">Download Driver Canon Ip 2770</a></li>
<li><a title="Download Gratis NetCut 3.0 untuk Windows 7" href="http://irfanhandi.wordpress.com/2011/09/29/download-gratis-netcut-3-0-untuk-windows-7/">Download Gratis NetCut 3.0 untuk Windows 7</a></li>
<li><a title="Donlot Microsoft Office Professional Plus 2010 + Activator" href="http://irfanhandi.wordpress.com/2011/09/06/donlot-microsoft-office-professional-plus-2010-activator//">Donlot Microsoft Office Professional Plus 2010 + Activator</a></li>
</ul>
<div style="border-top:1px solid #dadada;margin:1px 0;padding:1px 0;"></div>
</div>
<div style="float:right;width:260px;">
<div style="width:100%;height:1px;background-color:#dadada;"></div>
<h3 class="mast" style="margin:9px 0 5px;">Tips keren</h3>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/06/11/cara-meraup-recehan-dollar-di-wordpress-com/">Cara Meraup Recehan Dollar di WordPress.com !</a></p>
<p style="text-align:justify;margin:0 0 10px;"><a href="http://irfanhandi.wordpress.com/2012/06/11/cara-meraup-recehan-dollar-di-wordpress-com/"><img src="http://irfanhandi.files.wordpress.com/2012/07/mendapatkan-dolar-di-internet.jpg" alt="Cara Meraup Recehan Dollar di WordPress.com" title="Cara Meraup Recehan Dollar di WordPress.com" width="128" height="72" class="alignright" style="margin:6px 0 0 15px;"></a>Bisakah ini dilakukan? Bukankah di WordPress.com kita gak bisa memasang link affiliate, link referal, link ppc, link pps, link amazon, dan sejenisnya? Memang betul. Wp.com mengharamkan link-link seperti itu di dalam T.O.S mereka… <a href="http://irfanhandi.wordpress.com/2012/06/11/cara-meraup-recehan-dollar-di-wordpress-com/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2012/02/28/tips-agar-blog-banyak-dilihat-orang/">Tips Agar Blog Banyak Dilihat Orang</a></p>
<p style="text-align:justify;margin:0 0 10px;"><a href="http://irfanhandi.wordpress.com/2012/02/28/tips-agar-blog-banyak-dilihat-orang/"><img src="http://irfanhandi.files.wordpress.com/2012/07/agar-blog-banyak-pengunjung.jpg" alt="Tips Agar Blog Banyak Dilihat Orang" title="Tips Agar Blog Banyak Dilihat Orang" width="128" height="72" class="alignright" style="margin:6px 0 0 15px;"></a>Dalam sebulan terakhir ini Sahabat yang sering berkunjung ke Forum Resmi WordPress.com banyak membahas tentang bagaimana cara blog kita banyak di lihat orang ini. Seperti yang kita ketahui bahwa para senior yang sudah berpengalaman di dunia blogging menyarankan tips untuk mendapatkan banyak pengunjung dengan cara mendaftarkan blog ke google webmaster… <a href="http://irfanhandi.wordpress.com/2012/02/28/tips-agar-blog-banyak-dilihat-orang/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2011/07/14/membuat-text-berjalan-dengan-file-swfflashvortex/">Membuat Text Berjalan dengan Flashvortex</a></p>
<p style="text-align:justify;margin:0 0 10px;"><a href="http://irfanhandi.wordpress.com/2011/07/14/membuat-text-berjalan-dengan-file-swfflashvortex/"><img src="http://irfanhandi.files.wordpress.com/2012/07/text-berjalan-flashvortex.jpg" alt="Membuat Text Berjalan dengan Flashvortex" title="Membuat Text Berjalan dengan Flashvortex" width="128" height="72" class="alignright" style="margin:6px 0 0 15px;"></a>Trik yang satu ini bisa mempercantik tamapilan blog anda dan patut untuk dicoba. Anda tentu pernah melihat tulisan flash news/tulisan berjalan yang ada di stasiun televisi, nah tutorial ini akan menampilkan tulisan seperti itu pada blog Anda. Penasaran? Tertarik untuk mencobanya? Langsung saja, berikut langkah-langkah untuk membuat text berjalan ini… <a href="http://irfanhandi.wordpress.com/2011/07/14/membuat-text-berjalan-dengan-file-swfflashvortex/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
<p style="text-align:left;font-weight:bold;margin:0 0 5px;"><a href="http://irfanhandi.wordpress.com/2011/12/19/cara-pasang-histats-melayang-di-wordpress-com/">Cara Pasang Histats Melayang di WordPress.com</a></p>
<p style="text-align:justify;margin:0 0 10px;"><a href="http://irfanhandi.wordpress.com/2011/12/19/cara-pasang-histats-melayang-di-wordpress-com/"><img src="http://irfanhandi.files.wordpress.com/2012/07/membuat-histats-wordpress.jpg" alt="Cara Pasang Histats Melayang di WordPress.com" title="Cara Pasang Histats Melayang di WordPress.com" width="128" height="72" class="alignright" style="margin:6px 0 0 15px;"></a>Histats.com adalah situs yang menyediakan layanan secara real time monitor statistik untuk situs kita. Fungsi dari histats.com adalah untuk mengetahui mulai dari berapa jumlah total artikel yang di lihat, berapa jumlah total pengunjung yang datang sampai berapa jumlah pengunjung dan artikel yang dilihat per harinya. Lalu bagaimana memunculkan Histats seperti yang tampak pada pojok kiri bawah halaman blog Irfan handi-Hanya Ingin Berbagi… <a href="http://irfanhandi.wordpress.com/2011/12/19/cara-pasang-histats-melayang-di-wordpress-com/">Baca selengkapnya <span class="meta-nav">»</span></a></p>
<div style="border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:12px 0 17px;padding:12px 0 29px;"><a href="http://irfanhandi.wordpress.com/daftar-isi/" class="alignright">+ Indeks <strong>Daftar Isi</strong> »</a></div>
</div>
</div>
Silahkan explore lebih jauh lagi mengenai Tema ini dengan melihat tampilan blog yang disampaikan oleh Om Duto diatas.
Cuma sekali lagi perlu dicatat, untuk utak-atik tema apapun, jangan gunakan blog kita yang sudah jadi. Bikin blog lain, cuma isinya berupa kloningan/eksporan dari blog yang sudah jadi (dibikin private saja agar tidak mengganggu mesin pencari), baru diutak-atik. Setelah tampilan OK, barulah garapan yang sudah selesai tersebut kita terapkan ke blog kita yang sudah jadi yang akan kita ganti temanya (apapun) atau ganti tampilannya secara total.
Hal-hal lain mengenai modifikasi Tema The Morning After Tampil Seperti Majalah ini dapat kita diskusikan lebih lanjut di kotak komentar, jika nanti kita menemukan masalah, mari kita minta pencerahan kepada SESEPUH. Dibantu ya Om Duto.…
sob kode diatas hanya sebagian yah..??
mngkin karna sy online lewat hp atw bgmana..?!
Ksih penjelasan yahh sob…
Posted by multazamzam7 | Maret 29, 2013, 1:29 pmaku juga seneng bgt sama theme morning after ini mas..bahkan aku juga pernah pake dan belom ku delete dr koleksi themeku…
ntar kalo mau ku pake lagi aku pake cara mas memodifikasinya hehe
Posted by ronal | April 7, 2013, 6:00 pmMas, cara taruh kode HTML nya dimana ?
Sorry soalnya sy masih newby. Bahkan blog mas jadi bahan referensi sy buat mempercantik tampilan blognya.
Tolong d bales ya !
Dan sekalian mas, sy pengen memodifikasi gambar header kyk mas gimana?
Posted by Yani Nurhidayani | April 12, 2013, 8:44 pmuntuk header anda harus membuat gambarnya dulu , trus simpan di blogkamu , tinggal copy paste url dan masukkan seperti tutorial diatas
Posted by arman budiman | April 13, 2013, 4:22 amAssalamualaikum…saya banyak belajar dari Sdr, Alhamdulillah saya dapat ilmu tambahan tentang pengelolaan blog. tapi sekarang saya ada masalah pada wordpress saya soalnya saya tidak bisa posting. apa ya…kendalanya mohon bantuannya. trims sebelumnya
Posted by Saepudin alfakir | April 23, 2013, 12:35 amom aku masih gx ngerti gimana naronya,aku pusing nih nyari2 nya,hahaha
tolong di bantu ya….
Posted by 0098lely | April 26, 2013, 3:22 am