Mengatur Lebar Content dan Sidebar Themes Wordpress

Ditulis Pada : September 9th, 2008 , 12:48 am | Kategori Tutorial Membuat Theme Wordpress | Author: Nias zalukhu

Masih merupakan artikel dari rangkaian seri Membuat dan Memodifikasi Wordpress Themes. Jika pada artikel sebelumnya, saya telah berbagi tentang bagaimana mengetahui lebar (width) dari sebuah themes serta lebar content dan sidebarnya, maka pada artikel kali ini saya akan mencoba berbagi bagaimana cara mengatur lebar content dan sidebar pada sebuah wordpress themes. Saya tidak menggunakan sebuah themes sebagai contoh, namun saya akan berbagi secara umum sehingga teman-teman bisa langsung mencoba pada themes pilihan masing-masing.

Ada beberapa poin penting yang harus diketahui dalam mengatur lebar content dan sidebar, tiga di antaranya telah saya bagikan pada artikel sebelumnya yakni: lebar blog secara umum (wrapper), lebar content (container) dan lebar sidebar (sidebar). Selain ketiga hal tersebut, ada satu hal lagi yang harus diperhitungkan yaitu lebar lapisan kiri dan kanan yang dideklarasikan dalam statement padding.

Ukuran padding dibuat untuk menyatakan posisi sebuah bagian (yang dinyatakan dalam tag

dari sebuah halaman situs atau blog. Ada 4 jenis ukuran padding yaitu: padding-top, padding-left, padding-right dan padding-bottong yang diyatakan dalam satuan pixel (px). Namun ada juga yang menyatakan ukuran padding dalam satu statement yakni padding saja. Untuk statement padding perlu kita ketahui letak-letak dari komposisi statementnya.

Padding memiliki bentuk umum yaitu: padding : Toppx Rightpx Bottompx Leftpx; Jadi jika kita menemukan statement pada file style css yang berbunyi: padding : 5px 10px 0 15px; itu sama artinya dengan: padding-top: 5px, padding-right: 10px, padding-bottom: 0, padding-left:15px. Yang artinya bahwa bagian yang dideklarasikan mulai diletakkan pada koordinat 5pixel dari atas, 10pixel dari kanan, rapat dari bawah dan 15 pixel dari kiri.

Namun jika kita tidak ingin mendeklarasikan salah satu sudut maka lebih bagus jika menggunakan bentuk yang terpisah. Misalkan kita hanya ingin menyatakan bahwa bagian yang diberi sesuatu label dalam file css diletakkan 5 pixel dari kiri dan 10 pixel dari atas, maka perintah yang bisa kita pakai adalah: padding-left:5px; padding-top:10px; . Karena kita membicarakan lebar maka hal yang perlu kita ketahui adalah padding-left dan padding-right.

Sekarang kita mencoba hitung-hitungan untuk mengatur lebar content dan lebar sidebar.

Pertama-tama carilah elemen variabel global dalam label Wrapper. Ambil angka width pada statement css, kita misalkan kasih contoh 950px.

Nah sekarang kita bisa mengatur lebar content dan sidebar sesuka hati kita hahahaha. Caranya sederhana saja, tinggal masukkan berapa pixel yang kita inginkan sebagai lebar content kita dan angka tersebut kita kurangkan dengan angka lebar global yang kita dapatkan tadi yakni 950px untuk menjadi lebar sidebar.

Namun ingat bahwa jika jumlah antara width content dan width sidebar pas sama dengan jumlah width global, maka pastikan nilai padding left dan rightnya adalah 0. Namun jika pada statement container yang mengatur content kita ingin baris huruf pada content tidak terlalu rapat maka berikanlah angka seadanya namun tetap harus diperhitungkan. Pada umumnya perintah padding pada content hanya mencakup padding-top dan padding left, sedangkan pada sidebar umumnya mencakup padding-top dan padding-right.

Misalnya: pada content kita ingin jarak antara garis kiri dengan baris kalimat sejauh 10px , serta pada sidebar kita juga ingin jarak antara garis pembatas kanan adalah 10px maka jumlahnya adalah 20px. Jadi jumlah lebar content dan sidebar tidak boleh lebih dari:

Width Global (950px) - Hasil Penjumlahan Padding (20px) = 930px

Nah itu artinya jumlah lebar content dan sidebar tidak boleh lebih dari 930px. Jika lebih maka bisa jadi sidebar akan terletak berada di bawah content.

Perlu diketahui juga bahwa sebisa mungkin ketika menulis sebuah artikel, hindari memasukkan gambar yang lebarnya lebih dari ukuran lebar content. Jika ada kejadian yang mengakibatkan sidebar terletak tidak pada tempatnya atau terletak di bawah content maka periksa dulu lebar content apakah sesuai dengan yang saya sebutkan di atas.

Jika masih bermasalah, itu artinya di dalam artikel kita terdapat perintah-perintah yang terbawa dan menambah lebar content. Ini terjadi jika kita mengcopy sebuah artikel dari blog lain atau dari Microsoft Word dan langsung mempastekan ke dalam layar editor. Cara mengatasinya adalah cut isi artikel tersebut (jangan dari window HTML tetapi dari window Preview) lalu pastekan ke NOTEPAD. Setelah itu copykan lagi artikel yang ada di notepad tersebut ke dalam layar editor.

Selanjutnya saya akan mencoba berbagi tentang pengaturan sidebar, baik itu menambah jumlah sidebar, maupun memodifikasi sidebar seperti yang terlihat pada sidebar blog ini.

Hargailah karya orang lain, dengan hanya memodifikasi themes yang designernya telah memberi ijin untuk dimodifikasi. Walaupun begitu, tetaplah membaca aturan bagian mana saja yang boleh dan yang tidak boleh dimodifikasi.

Manfaatkan Wordpress Offline untuk melakukan percobaan pada saat membuat dan memodifikasi wordpress themes.

Postingan Tutorial Wordpress Themes sebelumnya :

7 komentar:

  1. Rada riet pemahamannya...apa sayanya yang belet..heheh .. makasih banyak ilmunya,salam
    http://mayherbal.blogspot.com

    BalasHapus
  2. mana artikelnya bro..
    mampir ya ke http://numpangnonton.com

    BalasHapus
  3. hadeh,.. malah tambah bingung bro,..www.iki-informasi.com

    BalasHapus

Please write your comments here.Thanks.

Kategori

055CXPRO3 100Hz 1024x768 1080ip 1080p 10MP 10xOptical 121megapixel 121Megapixels 121MP 12Channel 12Ounce 141MP 165LBS 18Volt 19YearOlds 23Inch 240ml 25quot 2746 27Inch 2Pack 30Inch 3255 3265 3265Inch 32Inch 37Inch 37LV3500 3Inch 412Inch 46G310U 46Inch 46Inches 46LA45RQ 46PFL5706F7 46quot 46SL412U 46SL417U 47Inch 5460Inch 55Inch 58Inch 5Piece 60Watt 6by9Inch 732YB482K 800x600 812Inch 998864 accept Accessory Add-ons Mozilla Adsense Advertising Advice Affect Affordable ALAMPLB Alexa American Amplifier Android Annies Antenna Anti Virus Antivirus Antivirus Update Aperture Appetite APTMM2B Aquapac Articulating ATHM50 Attic AudioTechnica Automatic Available awning Backlink Backpack Backrest Bamboo Basics Bathroom Batteries Battery Battle BC12062 BDPS570 Bedding Bedroom Bedrooms Beechwood Before Beginners Benefits Berita Berita Terbaru Better Between Bicycle Binoculars Birthday Bisnis Internet Black Blackberry Blanket Blog Blossom Blue BlueSilver BluRay BoltOn Bose Boyfriend Bracket Brackets Brand BRAVIA Breakfast Brightess Bringing Brother BRPK3AN Bubble Building Bundle Burning Butter Buyers Buying Cabinet Cabinets Camcorders Camera Cameras Capacity Cara Bisnis Online Cara Recovery Data Cara Self Test Printer Cara Service Elektronik Cara Service Harddisk Cara Service Jaringan Cara Service Komputer Cara Service Laptop Cara Service Monitor Cara Service Ponsel Cara Service Printer Cara Service TV Cara Service UPS Carbide Carbon Carved Castings Castle Ceiling Celebrate Celtic Chairs Changeable Changing Charger Charlie Chatbox Cheapest Cheetah Cherry Chocolate Choose Choosing Chopsticks Christmas Cinderblock CINNAMON Cleaning Closer Coaxial Coffee Collapsible Collection College Color Column Combination Comforter Compact Companies Company Compare Compared Comparing Compatible Computer Concept Concrete Consider Consumer Contemporary Control Convertible Cooker Cooler Coolpix Cordless Corner Cotton cpu Crafting Creating Creative Crochet Crocheter Css Cubbies Cutting CX3800 CX3810 CX4200 CX4300 CX4600 CX4800 CX5000C CX7400 CX7800 Cybershot Danica Dawson DC91802 Decorate Decorating Definition Delight Deluxe Design Designer Development Device DEWALT Dietary Difference Different Digital Digital Camera Canon Digital Camera Canon Powershot Digital Camera Fujifilm Digital Camera Lens Digital Camera Nikon Digital Camera Panasonic Digital SLR Camera Discover Display Displays Distressed Distribution DMCLX5 DMCS1 DMCS3 DMCTS2 DMCTS3 DMCZS5 DMCZS9 Dofollow Dollars Domain Dreams Drilling Drills Driver Drivers Drives DSCH70 DSCT10 DSCT90 DSCW310BLDB Dumbbell Dymatize E-book Gratis E370VA E470VLE EA8080 Earthquake EasyShare Ebook ECES80 ECST65 Edition Effective Egyptian ELPLP49 Emoticons Entertainment Ericsson Espresseria Espresso Essentials Ethernet Everyone Everything Excellent Exchange EXFH20 Exilim Experience Explained Extended Extremely EXZ75 Facebook Family Fantastic Fashionable Fashions Faucet Features Fermented Fibromyalgia Finding FinePix Finish Firmness Follow Format Formula Foundation foursquare Freaks Free Software Freeware Fujifilm Function Furniture Future Game Gratis Keren Gaming Generation Getting Girlfriend Glasses Goggles Google Adsense Google Friend Connect Google Translate Google+ GoPro Camera Grey Grinder Hacking Halloween Handheld Handlebar Handset Headboard Headphones Headset heello HighPerformance Hitachi Hollywood Homemade Homework Housing HTML Husks Ilmu Komputer Images Imageshack Importance Important Includes Infant Info Aksessoris Komputer Info Software Information Integrated Intelligent Interface Interlock International Internet Networking Internet Business iPhone Istilah-Istilah Komputer - TI Jacquard KDL46BX420 KDL46EX403U KDL46EX500 KDL46NX810 KDL46S5100 Kegerator Kidkraft Kikkerland Kitchen Ladies Lain-lain Laptops latex LBOAS LC46D78UN LC46LE830U LCDDLP LCDDVD LCDNotebook Leather LEDLCD Lenovo Lensbaby Lenses LHB976 Lightning Lights Limited Linux Lipper Literature Lithium LithiumIon Little LN32B360 LN32D450 LN46A650 LN46B550 LN46B650 LN46B650T LN46C530 LN46C630 LN46C750 LN46D503 LN46D550 LN46D630 LNS4695D Lumens M1924A Magnesium Magnetic Maintenance Management Manfrotto Mansion Marketplace Matte Mattress mattresses Measurements MegaPixel Megapixels memory Menu Horizontal Menu Vertical MF607B MFC8670 Microwave MinoHD Minolta Mobile Model Models Modern Modulator Module Monitor Monitors Motion Mountable Mounting Mounts Movies Moving MP248B MPEG124 MultiPurpose Multiroom MultiSpeaker Muscle Muscles MustHave MX1260 Natural Nautical Newborn Nintendo Nobodys NonFerrous Notebook Novice NSX46GT1 Nursery Nutrition Nutritional Olympus Opened Optical Optimum Optimus Options Optoma Organic Original Ottoman Ottomans Outing Outstanding Overhead Pagerank Painting Pair Panasonic Panduan Service Monitor I Panduan Service Monitor II Pastures pc Personally Philips Phones Photographers Photographs Photography Picking Pictures Pieces Pillows Pink Pinpoint Pixels Plasma Plastic Platinum Player PlaySport PlayStation Pleasure Pocket Polaroid Popular Possible Posters Pounds Powder Powered Powerful PowerShot PreCharged Preparations Presentations Pressure Preview Princess Principle Printer Printers Prints Processor Product Product Review Products Professional Profile Projector Projectors Protector Protein Psyllium Public Pumpkin Purchase Purple Quality Quattron Quickly Quilted Rayovac Reader Really Reasons Rectangle RedCyan Reduction Reference Refresh Release Remote Replace Replacement Reports Research Resetter Canon Resetter Epson Resetter HP Resolution Results Reticle Review Reviews Riding Riflescope Rimfire RoomWithAView RoundAndRound RSS FEED RTB1100 RuggedWaterproof Safety Sakura Samsung Satisfactory Screen Screens Scrutiny SD780IS SDSDHCMMC Seating Seatpost Secrets Section Seniors Sensational Sensor SEO Series Serious Service Elektronik Service Komputer Laptop Service Printer Canon Service Printer Epson Service Printer HP Service Printer Laser Jet Sharpener Sheets Shelved Shelves Shelving Should Silicone Silver Sitemap Slender Software Gratis Pilihan Soldering Solutions Sooner Sourcing Spacesaver SPDIF Speakers Speaking Sports Squeeze SS1000 SSeries Stabilized Standard Standing Stands Staying Steady Stools Storage Streaming Strict Stripe Stripes Students Studio Stylish Subwoofer Suggestions Summer Suncast Supplements Suppress Surround Susan Swivel Swiveling SX10IS SX130IS SX20IS SX210IS SX230HS System T90dvfdblack Tables Tablet TBS421601 TCP46S30 TechFuel Technology Teens Television Televisions Templates Terminology Theater Themed Therapy Think Thinkpad Timelines Tip Trik Internet Tip Trik Windows Tipped Tips and Tricks Tips Blogger-Blogspot Tips Blogging Tips Blogspot Tips dan Trik Tips HTML dan JavaScript Tips Keamanan Komputer Tips PHP Tips Visual Basic Tips Windows Vista Tips Windows XP Tips-Tutorial Photoshop Toddler Toilet Toppers TopSelling Torpedo Toshiba Touchscreen Transcend Transmitter Travel TraysTables Treatment Tripod troubleshouting TS8GSDHC6E Turtle Tutorial Blogspot Tutorial Wordpress TVProtectorTM TwinFull Twitter Twitter Stuff tx1000 Ukur Komponen Elektronika UltraHD UM720S UN46B6000 UN46D6000 UN46D6400 UN55B8000 Understanding Underwater Universal V13H010L49 VariAngle Vaulted Vibration Video VideoSecu Viewing Vision Vitamin WAH1111BA0850 Wallet Walls Warta Terkini Waterproof Wave Website Weight Weller WellOrganized Western Whats White Wholesale WideAngle Widgets Windows Windows Tips Winsome Wireless Within Without Wooden Working WPS18MP X500BK ZoomNikkor