Sharing modifikasi Template

Black Magic Magazine Style Blogger Theme

Ini adalah hasil upaya saya dalam memodifikasi MINIMA menjadi sebuah Magazine Style Blogger Theme yang saya beri nama "Black Magic Style Blogger Theme".
Sengaja saya posting untuk menjadikan bahan sharing bagi kita dalam meodifikasi template.

Setelah saya kombinasikan beberapa CSS, javascriptnya dan sudah saya cek dibeberapa browser yang ada, alhamdulillah berhasil. Termasuk di IE8, hanya saja pada IE8 saat masuk ke ITEM pagenya pada susunan komentarnya masih amburadul.

Untuk link downloadnya belum bisa saya berikan, karena saya tidak ingin template ini membuat kecewa para blogger mania. Barangkali rekan-rekan bisa memberikan masukan tentang kode komentarnya ? Itu saya harapkan sekali demi suksesnya "Black Magic Style Blogger Theme" .

Sekilas tentang template "Black Magic Style Blogger Theme" .

1. Yang jelas murni dari MINIMA Black (Douglas Bowman) yang disediakan oleh Blogger.

2. Kelebaran template 790px, hanya terdiri dari Header, Main dan footer. Jadi tanpa sidebar.

3. Header saya buat FIXED, sementara Main-wrapper saya bagi menjadi kolom feature content, body post, kolom kanan pengganti sidebar, dua kolom untuk feature, satu kolom tambahan. Jadi intinya disini, saya bermain pada Main-wrapper.

4. Beberapa kolom feature saya kombinasikan dari template Zinmag Tribune (Feature inilah yang selama saya cari), sebagian lagi hasil dari otak-atik.

Berikut tampilannya :


Harapan saya, mohon sudi kiranya bagi rekan blogger yang sempat mampir disini memberikan masukan demi suksesnya template ini, dan nantinya bisa digunakan oleh blogger mania sebagai perbendaharaan template blogger.

DEMO

Black Magic Style Blogger Theme

Belum puas rasanya kalau sehari tidak merombak Minima. Kalau biasanya saya mencoba modifikasi template versi Magazine denga ukuran lebar, kali ini dengan ukuran 780px.

Namun kali ini berbeda dengan tampilan sebelumnya. Yang mana bagian header dan navigasinya saya buat fixed.

Masih dalam proses tentunya, masih mencari inspirasi kira-kira mau dikemanakan template ini.
Mau dihiasi dengan model pernik yang bagaimana, tentu saya masih enjoy gentanyangan bersama eyang google.

Simak DEMO-nya, dan berikan komentar yang membangun. Syukur-syukur ada yang mau ngasih donatur buat beli "123" dan permen karet.

Tuh sudah ada di bagian kanan atas pada blog demonya, bila rekan-rekan mau beliin 123 atau permen karet....he.he.he..

Dukungan, komentar berisi saran sangat saya perlukan

MINIMA Magazine Style Blogger Theme

Sesuai janji saya, setelah lulus sensor dari pihak KPU-T (Kaum Pengeditan Umum - Template) dan melalui experimen yang babak belur akhirnya dirasakan final juga dalam modifikasi MINIMA blogger kali ini.

Hasilnya saya beri nama "MINIMA Magazine Style Blogger Theme" (kira-kira begitu, maklum bahasa inggrisnya Jembret ).

Berikut adalah tampilannya :


Template ini terdiri dari dari :

• Fungsi readmore. Menggunakan <span class="fullpost"></span>
• Main ( Tempat posting ) yang dibagi menjadi empat kolom.
• 3 (tiga) kolom pada footer untuk widget feature dengan posisi gambar disamping kiri.

Cara install di blogger, saya rasa rekan-rekan sudah tahu. Disini saya hanya menekankan pada install bagian tertentu saja.

1. Setelah anda mengunduhnya (download), buka dengan notepad kemudian simpan dalam format XML. baru kemudian diupload dalam blogger (sesuai prosedur mengganti template pada blogger)

2. Menambahkan "Recent Post" di Mainright1, Mainright2 atau di sidebar.



Pada Layout | Page Elements | klik Add a Gadget pilih HTML/Javascript.

Tambahkan kode berikut :

<br/><script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
showRandomImg = true;
tablewidth = 200;
cellspacing = 2;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 60;
imgheight = 70;
fntsize = 10;
acolor = "#666";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 25;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 11;
home_page = "http://nama blog anda.blogspot.com/";
</script>
<script src="http://librarysupporter.googlepages.com/recentposts_thumb.js" type="text/javascript"></script>


3. Menambahkan Feature content atau promosi blog dengan gambar disamping kiri pada bagian footer ( tiga kolom di atas footer ) :



Pada Layout | Page Elements | klik Add a Gadget pilih HTML/Javascript.

Kemudian tambahkan kode dibawah ini :

<img id="" border="0" style="display: block; cursor: pointer; width: 100px; height: 100px;" alt="" src="http://lh6.ggpht.com/_Tj_19swNuzI/SZfRSJVn1WE/AAAAAAAAAoo/AawQnxsF2uo/s160-c/AlbumTanpaJudul.jpg"/>

<div class="fcats"><a href="http://ahn-bidikcom.blogspot.com/search/label/Modifikasi%20Minima" target="_blank" rel="category" title="silahkan diklik saja">Tip Modifikasi Minima</a></div>
<p>Tutorial Magazine Blogger...<a style="color: rgb(255, 0, 0);" href="http://ahn-bidikcom.blogspot.com/search/label/Modifikasi%20Minima" target="_" blank>[more]</a></p>

<div class="auth">bidikCOM</div>
<div class="fmeta"> POST-DATE |
<a href="http://ahn-bidikcom.blogspot.com/search/label/Modifikasi%20Minima" target="_blank" title="Comment on ">ADD COMMENTS</a>
</div>

Ganti kode warna merah dengan URL gambar anda.
Ganti kode warna biru dengan URL artikel yang anda promosikan
Ganti tulisan berwarna merah kecoklatan dengan variasi titel anda.

4. Menambahkan Rating dan recommended posts di bawah posting.

Silahkan anda Registrasi di situs Outbrain untuk mendapatkan Widget ini, dan ikuti petunjuk yang ada di situs tersebut.

Contoh tampilan widget tersebut :



Pada Layout | Page Elements | klik Add a Gadget pilih HTML/Javascript.

Kemudian tambahkan Contoh kode Widget seperti dibawah ini.

<script language="JavaScript">var OB_platformType =1;var OB_demoMode = false;var OB_langJS = "http://widgets.outbrain.com/lang_en.js";var OBITm = "1216718605358";</script><script src="http://widgets.outbrain.com/OutbrainRater.js" type="text/javascript"> </script>

Kode diatas bisa anda tanam langsung saat edit HTML pada bagian body.

Semoga bermanfaat.

DEMO LIVE | Download

(Oh,ya. Pada bagian footer ada rekomendasi dari saya, mohon jangan dihapus ya. Karena dengan tidak menghapusnya berarti anda menghargai jerih payah modifikasi ini)

Design Magazine BLogger

Setelah berhasil dalam obrak-abrik Minima yang mana tutorialnya sudah saya posting dalam 4 (empat) tahapan yaitu : Prosedure Modifikasi Minima bag I s/d IV (dapat diikuti pada Sidebar blog ini), kali ini saya mencoba obrak-abrik MINIMA Blogger lagi.

Pada modifikasi kali ini, saya mencoba membagi bagian MAIN menjadi Empat Kolom yang meliputi Main Left (bagian posting), Featured, Main Right I dan II. Pada bagian footer saya bagi menjadi tiga bagian yang saya modifikasi untuk menampilkan gadget Bloglist.

Modifikasi ini masih terus saya kembangkan, agar nantinya bisa didownload oleh rekan-rekan blogger sekaligus sumbangan saya bagi perbendaharaan Template Blogger.

Dan apabila nantinya berhasil, tentu Insya Allah saya akan mencoba membagi Tips modifikasi secara Sharing dengan membuat tuturialnya.

Dukungan dari rekan-rekan blogger saya harapkan

DEMO LIVE

Free MAGAZINE BLOGGER

Setelah saya mencoba untuk sharing bagaimana cara memodifikasi template minima menjadi sebuah template yang dapat dibilang sebagai sebuah MAGAZINE untuk blogger ( Menurut saya kali ), kali ini saya mencoba untuk memberikan perbendaharaan template EDEL2XMinima tersebut agar bisa di download oleh rekan-rekan blogger.

Saya tidak perlu panjang lebar dalam menjelaskan tentang template ini, karena dapat anda pelajari dalam Prosedur Modifikasi Minima yang sudah saya posting sebelumnya.

Silahkan anda modifikasi, dan ingat.... bila ternyata modifikasi anda lebih bagus daripada modifikasi yang saya kerjakan, jangan PELIT untuk menularkan ke saya dan rekan-rekan blogger.

Untuk Headernya silahkan anda ganti sesuai image anda, karena sudah ada tutorialnya jadi saya tidak perlu menjelaskan lagi.


LIVE DEMO / DOWNLOAD

Fulfillment overview

Fulfillment, also known as order fulfillment or product fulfillment, is the process by which a person or company to meet their obligations to send the items or products that people have been ordered, purchased, or requested from the organization.
Order fulfillment is the most complete in the sense that the investigation process from the point of sale for the product to the customer. Order fulfillment sometimes used more narrowly to describe the action or logistic distribution function, but, in the broader sense refers to the way companies respond to customer orders.

Fulfillment will usually refer to the services provided by a company that offers to store, receive orders, package, and means of transportation, such as a cargo ship to send to the end consumer.

Fulfillment companies usually will not take full responsibility for damage to the product unless they are directly responsible, and take full responsibility for product shrinkage, unless you can prove that they are directly responsible. This practice will vary depending on the acceptance of the procedure used by the fulfillment companies. Usually considered to verify if the fulfillment companies, they will accept responsibility for the larger items in their care, but if they receive the package to include an accurate list of inventory, they will not be responsible as the depreciation.

Fulfillment companies act as a shipping center for their client companies. If there are errors in the process of delivery or poor handling procedures, it will become a client company that will receive a bad reputation

Most order fulfillment service providers will make a list of "standard cartons" available to to their customers. If your product does not fit in this package, you will need to provide your own packaging, or to pay an additional charge.

Many "Fulfillment companies" that we can find on the internet, such as AMS Fulfillment. AMS Fulfillment is a leading 3rd party fulfillment services company. AMS Fulfillment offers warehousing, inventory management, and fulfillment services. Please contact the party, when you need it.

Header animation with A. Photoshop CS3

Sharing kali ini akan membahas bagaimana membuat Animasi Header pada Prosedur Modifikasi Minima yang diberi judul "Edel2XMinima". Tentu disini saya menggunakan Adobe Photoshop CS3 yang saya rasa aplikasi ini sudah banyak dikenal.

1. Buat file baru dengan ukuran 470px X 100 px dengan background transparan, sesuai kelebaran dari pada ruang Headerleft pada modifikasi Minima menjadi Magazine "Edel2XMinima" Blogger. Buat dua buah layer dimana untuk layer 1 berfungsi sebagai background transparan.

2. Kita akan sesuaikan warna dasar dari pada header dengan klik "Set Foreground Color" pada toolbar dan warna yang dipilih adalah ungu (#fe02e9). Langkah selanjutnya klik "Rectangle Tool" lalu blok Layer2 sehingga Layer2 berubah nama menjadi "Shape1". Klik kanan pada layer tersebut kemudian pilih 'Resterize Layer".

3. Buat layer baru diatas "Shape1", kemudian rubah warna Foreground dengan warna putih (#ffffff). Kemudian klik "Rounded Rectangle Tool" dan buat bidang pada layer baru tersebut sehingga secara default bernama "Shape2". Dengan menekan tombol "Ctrl" pada keyboard, seleksi layer Shape1 dan Shape2, kemudian tekan 'Ctrl E" maka kedua layer akan menyatu dengan nama "Shape2".


4. Pada toolbar, klik "Magic Wand Tool" kemudian seleksi shape yang berwarna putih lalu tekan "Del" pada keyboard sehingga shape tersebut hilang dan nampak background transparan.



5. Pada "File" klik "Open" untuk memasukkan gambar yang kita kehendaki. Setelah jendela gambar terbuka, klik "Restore Down" pada sudut kanan atas jendela kerja sehingga dua jendela sama-sama terbuka. Dengan bantuan "Move Tool" pindahkan gambar ke jendela I, kemudian ganti nama layernya dengan nama "Gambar1".



6. Pindahkan posisi layer "Gambar1" dibawah layer "Shape2", kemudian dengan "Ctrl T" atur posisi gambar sedemikian rupa sehingga pantas dan enak dipandang.

7. Ulangi langkah 5 dan 6 untuk memasukkan gambar yang lain dan ingat posisi layer gambar harus dibawah layer Shape2. Saya sarankan jangan terlalu banyak gambar.

8. Langkah selanjutnya kita akan membuat animasi pada gambar yang sudah diatur dengan klik 'Windows" kemudian pilih "Animation". Setelah muncul jendela Animasi, klik pada "Duplicat Selected Frames" untuk membuat Frame ke-2. Pada saat Frame ke-2 terseleksi, klik Icon mata disamping layer gambar5, sehingga Icon mata disembunyikan.


9. Ulangi langkah 8 untuk membuat Frame 3 (dari frame2) dan Icon mata gambar4 disembunyikan. Lakukan langkah ini hingga sampai dengan Frame5, namun pada frame5 Icon mata pada gambar1 tidak disembunyikan.

10. Atur "Delay = 0,2 Sec" pada tiap masing-masing frame. Selanjutnya seleksi Frame1, kemudian klik "Tweens Animation Frames" sehingga muncul jendela TWEEN.
Pada jendela Tween isi Tween With = Next Frame, Frames to Add = 3, tandai lingkaran "All Layers" pada Layers. Pada Parameters tandai semua lingkaran kemudian klik OK.
Langkah ini akan menambahkan 3 frame sekaligus pada Frame1.



11. Ulangi langkah 10 pada Frame5, Frame9, Frame13 dan Frame17. Silahkan klik Icon "Play Animation" untuk melihat hasilnya.

12. Setelah sesuai, silahkan klik "File" lalu "Save for Web And Devices" dan pilih GIF pada optimized file format. Kemudian upload di Photobucket. Maka hasilnya akan seperti dibawah ini :



13. Tambahkan kode html yang kita dapat dibagian ini :

<div class='headerleft'>
&lt;img src=&quot;http://i288.photobucket.com/albums/ll179/ahnning/header-CA-animasi.gif&quot; border=&quot;0&quot; alt=&quot;Photobucket&quot;&gt;
</div>

Kode dengan warna merah adahal URL dari gambar yang telah kita upload.

Semoga bermanfaat dan selamat bereksperimen.