2011-09-25
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Text Area
Bismillah... Setelah saya posting tentang cara membuat text berjalan, sekarang lutfie Tutorial akan membahas lagi seputar kode kode HTML, yaitu tentang Text Area, sebelum melangkah jauh, alanghkah baikknya kita mengetahui apa itu Text Area? jika kita sering berkunjung ke blog orang, lain kita sering melihat ada suatu form yang putih dan ada tulisan yang bisa kita copy, dan sering digunakan untuk tukar link. text area adalah sebagian dari kode kode HTML, yang mempunyai arti dan fungsi sebagai penyimpanan text atau kode HTML/ tulisan lain, dalam area lain.

Daripada pusing melihat arti dan fungsi text area mendingan kita langsung lihat contohnya biar sobat lebih faham dan lebih mengerti, secara default kode text area adalah :
<textarea>Tulisan atau kode HTML </textarea>
  • <textarea>  : Adalah tag pembuka dari kode text area
  • </textarea>  : adalah tag penutup, untuk di ingat setiap kode HTML mempunyai kode pembuka dan penutup.

Oke! selain itu sobat bisa mengatur tinggi dan lebarnya, caranya sobat tinggal menyisipkan kode cols="lebar area text" dan kode rows="tinggi area text", sebagai contoh
 <textarea cols="50" rows="10" >area text</textarea>
Hasil dari kode text area diatas
       
Nah jika sobat mau gunakan sebagai tukaran link sobat tinggal masukan kodenya di area text sebagai contoh
<textarea cols="50" rows="5" ><a href="http://lutfietutor.blogspot.com/" target="_blank" title="Tutorial Blog">Tutorial Blog</a></textarea>
Dari kode di atas akan menghasilkan tampilan seperti di bawah ini 
Silahkan sobat coba dan atur atur lebar dan tingginya text area sesuai dengan kebutuhan. oke! sobat mungkin itu sedikit tentang cara membuat text area, Good Luck Happy Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Cara Membuat Text Berjalan (marque text)
Tutorial text berjalan
Bismillah.. pada  tutorial blog kali ini saya akan sedikit berbagi cara membuat text bejalan atau istilahnya sering di sebut marquee text, ini merupakan bagian dari kode kode HTML yang banyak, sudah berapa banyak kode HTML yang sobat pelajari dan di hapal? jika belum mulailah dari kode ini..

Untuk membuat text berjalan sangat lah mudah pertama sobat harus mengingat dan hapal kode ini (<marquee> dan </marquee>), mudahkan? dan mudah di hapal, secara default text berjalan dimulai dari sebelah kanan,

KodeStandar Marquee
<marquee>teks Area</marquee>
  • <marquee> :  Tag Pembuka untuk text berjalan
  • </marquee> : Adalah tag penutup
Contoh marquee Standar
Contoh teks berjalan
Selain itu sobat juga bisa bisa merubah arah gerakan text tersebut sesuai dengan kemauan sobat,
Contoh text berjalan dari atas ke bawah
Kodennya seperti di di bawah
<marquee direction="down">Teks berjalan dari posisi atas </marque> 
Contoh Teks Berjalan dari Atas
Teks berjalan dari posisi atas
Untuk dari bawah ke atas sobat tinggal ganti direction="down" menjadi direction="up" kode dari bawah ke atas
<marquee direction="up">Teks berjalan dari posisi atas </marque> 
Contoh Gerak daru posisi bawah ke atas,  
Teks berjalan dari posisi bawah ke atas

Selain dari posisi itu sobat juga bisa rubah yang tadinya posisi dari sebelah kanan sekarang bagaimana ingin dari sebelah kiri dulu oke ini conto script dan contoh hasilnya
Posisi dari Kiri Ke kanan
<marquee direction="right">Teks berjalan dari posisi kiri ke kanan </marque>  
Contoh Posisi text marquee Dari kiri ke kanan
Teks berjalan dari posisi kiri menuju kanan
Untuk arah sebaliknya gunakan saja yang standar atau ganti  direction="right"  menjadi direction="left" terus ada lagi sobat sekarang yang bolak balik
Marquee text bolak balik
<marquee direction="right" behavior="alternate">Text Marquee bolak balik</marquee>
Contoh hasil
Text Marquee bolak balik
Selanjutnya sobat juga bisa menambahkan kode onmouseover="this.stop()" onmouseout="this.start()" fungsinya untuk apa yah?? fungsinya jika mouse di dekatkan ke teks maka teks akan berhenti.
Contoh memakai tambahan kode JavaScript
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" >Text Marque </marquee>
Contoh hasilnya
Dekatkan Mouse Ke Text
Selain itu juga, sobat bisa memakai gambar untuk animasinya
Contoh Menggunakan gambar
<marquee ><img src="alamat gambar"/></marquee>
Contoh Memakai gambar

Oke sobat mungkin itu sedikit tentang tutorial cara membuat text berjalan silahkan sobat coba semoga berhasil, jika sobat mau buat secara online dan mungkin ini menarik buat sobat, silahkan sobat cari di google tentang marque generator, atau sobat langsung tuju ke alamat ini http://www.textspace.net/ atau disni http://www.marqueetextlive.com/ disana banyak sekali style nya, akhir kata...Good Luck, Happy blogging 
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
css hover box
CSS Hover Box
Bismillah.... setelah saya buat artikel tentang Cara Optimalisasi Gambar Di Search Engine sekarang saya akan sedikit share tentang CSS, oke pada kesempatan ini saya akan bahas CSS tentang Hover box gambar, langsung ke tutorial CSS nya yukk.

  • Langkah pertama sobat Login ke blogger
  • Terus masuk ke Edit HTML dan centang Expand Widget
  • Terus sobat cari tag/kode </head> terus letakan kode CSS di bawah ini tepat di atas tag </head>

KODE CSS HOVER BOX


<style type="text/css" media="screen">
.hoverbox
{
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}

.hoverbox a .preview
{
    display: none;
}

.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}

.hoverbox img
{
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.hoverbox .preview
{
    border-color: #000;
    width: 200px;
    height: 150px;
}
</style>
Lalu Save Template sobat
Langkah selanjutnya sobat masukan kode di bawah letaknya terserah mau di postingan, di gadget, atau di  mana terserah sobat
<ul class="hoverbox">
<li>
<a href="#"><img src="Alamat gambar1" alt="description" /><img src="Alamat gambar1" alt="description" class="preview" /></a>
</li>
</ul>
Terus lihat hasilnya untuk sample silahkan sobat lihat di sini , mungkin itu sedikit tutorial tentang CSS Hover Image Box semoga bermanfaat, Happy Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
seo image friendly
Seo Image
Bismillah... pada kesempatan ini saya akan menulis tutorial tentang cara optimalisasi gambar di mesin pencari. jika anda seorang penulis yang handal alangkah baiknya setiap artikel yang sobat buat memakai gambar karena akan membuat pembaca menjadi lebih tau dan lebi paham dengan artikel yang sobat buat. dengan adanya gambar tersbut para pengunjung akan lebih mudah paham dengan dan mudah mengerti tujaun artikel tersebut.
Oke sobat sekarang kita langsung menuju ke tutorial blog seo supaya gambar yang kita upload ke internet di kenal orang dan search engine.

Optimalisasi Gambar Dengan SEO
cara ini mungkin cuma beberapa saja dari berbagi teknik seo jika sobat ingin leih tau lagi silahkan sobat cari di search engine tentang cara Optimimalisai Gambar di mesin pencari

Pertama Optimalkan Dengan Nama
Jika sobat punya gambar misalkan dari internet dan hasil unduhan dari google secara defaultnya namanya adalah images, jika hasil dari kamera biasanya namanya Pictur1,2,3 atau apa, itu terserah settingan kameranya, untuk mengoptimalkan nya gantilah nama gambar tersbut dengan sesuatu yang menarik dan sesuai dengan isi gambar tersebut.

Kedua Gunakan Tag ALT (Alternative)
Tag alt ini cukup lumayan berguna karena dengan adanya ini search engine lebih kenal dangan gambar yang dimaksud jika tag alt tidak di isi (kosong) maka search engine pun akan bingung dalam meengindek gambar sobat,selain itu kegunaan tag ini berfungsi jika gambar sobat belum keluar karena lodaing yang berat maka akan di ganti dengan tulisan ini,  cara penulisannya adalah alt="deskripsi gambar ". cara penulisannya di bawah
<img src="http://link gambar/" alt="deskripsi gambar" /> 

KetigaGunakan Tag TITLE (Judul)
Alangkah baiknya semua gambar yang sobat masukan memakai judul dengan adanya judul tersebut pengunjung/visitor tidak bertanya tanya lagi maksud dan tujuan gambar tersbut, dan ketika mouse di dekatkan pada sebuah gambar akan muncul judul tersebut. cara penuslian tag title adalah title="isi dari judul gambar" cara penerpan di sebuah gambar sama dengan tag alt (alternativ)
<img src="http://link gambar/" titile="Judul Gambar" /> 
 Oke sobat mungkin itu beberapa cara optimalisai gambar/images di search engine mudah mudahan bermanfaat, kurang lebihnya silahkan sobat tamhakn di dalam komentar. ini bukan tutorial seo cuma saya memberikan gambaran cara optimalisasi gambar di mesin pencari jika menurut sobat ini adalah teknik seo buat saya tidak apa apa karena saya kurang tau akan hal seo, Good Luck Happy Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Tutorial Seputar Tentang SEO (Search Engine Optimation)
SEO (Search Engine Optimation)
Bismillah..... Mungkin sobat sudah bosan dan jenuh mendengar kata SEO (Search Engine Optimation), tapi mudah mudahan ketika membaca artikel ini sobat tidak lagi bosan tapi malah tambah semangat untuk untuk mempelajari ilmu SEO, saya juga lagi belajar tentang teknik SEO ini karena saya juga belum paham betul tentang mahluk yang satu ini... he he.. dulu saya pernah posting tentang Apa Arti SEO? mungkin kata katanya masih rancu dan sukar untuk di pahami dikarenakan masih tahap belajar. he he.

Secara umum SEO Adalah cara optimasi website agar bisa ditampilkan di halaman utama pada sebuah situs pencarian. Intinya adalah apabila seseorang mengetikkan kata pencarian pada kotak search engine seperti di Google, Yahoo,Bing maupun MSN maka alamat web kita bisa muncul di halaman pertama pencarian sesuai dengan kriteria kata kunci yang dicari user tersebut. terus apa Tujuan SEO tersebut?

TUJUAN SEO

Tujuannya yaitu untuk mengoptimalisasi blog/web supaya menjadi nomor satu di Search Engine (mesin pencari), jika kita mempunyai visi dan misi dalam pembuatan web/blog maka dengan teknik ini tujuan dari suatu web/blog akan mudah di capai, dikarenakan dengan secara otomatis pengunjung/visitor akan naik dan meningkat, dan kepopuleran web/produk kita akan lebih cepat. 

BEBERAPA TEKNIK SEO

Content 
Konten adalah paktor utama, karena jika blog kita jarang di update pengunjung males untuk membuka blog/web kita, dan di usahkan kontennya harus rapi dan di sukai oleh para pembaca/visitor

Back Link
Bakclink adalah sebuah link yang neglink pada blog/web kita, backlink ini sangat berpengaruh untuk kualitas web/blog karena akan meningkatkan ranking suatu web/blog semakin tinggi pagerank suatu web/blog maka akan cepat mudah di indeks dan sangat  di senangi oleh search engine.

Alamat Domain
Dalam pemilihan nama domain di usahakan mengandung unsur kata kunci (keyword) yang sesuai dengan visi misi web/blog kita.

Menambahkan Tag Title dan Meta tags 
Dari beberapa teknik seo ini kita mulai dai menyisipkan meta tah diantanya Meta tag Title, Tag description,Tag keywords,Tag robots,Tag  alternate,Tag author dan Copyright

Sitemaps sebagai peta dan daftar isi otomatis    
Adalah halaman yang menampilkan peta link pada website, sitemaps memudahkan spider dari search engine untuk menelusuri isi website dan mengupdate setiap perubahan yang terjadi di website pada database search engine. 

Natural Listing 
Natural Listing adalah kita mendaftarkan website pada search engine untuk diindex dalam database search engine tersebut agar bisa ditampilkan pada hasil pencarian melalui search engine tersebut

Oke sobat mungkin itu yang saya bisa tulis pada postingan ini, semoga sobat lebih kenal dan faham lagi dengan yang namanya SEO, Good Luck Happy Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Bismillah... di pagi yang cerah ini saya akan share Cara Pasang Opi Yahoo! Mesengger Di Blog atau istilah lainnya sering disebut pasang status offline dan online Yahoo, untuk apa kegunaannya gadget Yahoo mesenggger ini? kegunannya banyak sekali dan sangat bermanfaat bagi visitor,  jika blog sobat adalah sebuah web/blog yang di pakai untuk berbisnis online, maka seharunya dipasang gadget ini karena untuk memudahkan para pengunjung/visitor untuk menanyakan sesuatu hal yang tidak jelas dan rasa penasaran para visitor.
Style Opi Yahoo Mesengger
Style Opi Yahoo Mesengger

Sekarang kita langsung saja ke Tutorial Cara Pasang Opi Yahoo! Mesengger Di Blog,

CARA PASANG STATUS YAHOO MESENGGER

  • Langkah pertama sobat login ke blogger
  • Terus sobat masuk ke Tab Design Blog
  • Setelah itu tambahkan gadget HTML/JavaScript
  • Setelah terbuka gadgetnya, Copy kode gadget Yahoo Mesengger
  • Lalu Sobat Vaste di gadget HTML/JavaScript
  • Langkah terakhir Save. dan lihat hasilnya

Yahoo Mesengger mempunyai beberapa style, secara default stylenya menggunakan yang pertama,  kodenya adalah : <img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=1" border="0"/>

KODE OPI YAHOO! MESENGGER

Style Pertama
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=1" border="0"/>
Style Kedua
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=2" border="0"/>  
Style Ketiga
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=3" border="0"/>
Style Keempat 
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=4" border="0"/>
Style Kelima 
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=5" border="0"/>
Style Keenam 
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=6" border="0"/>
Style Ketujuh 
<img src="http://opi.yahoo.com/online?u=IDYahooKamu&m=g&t=7" border="0"/>

Untuk style opi yang selanjutnya silahkan sobat ganti angka yang berwarna merah dengan setyle yang telah disediakan lihat dalam gambar dan jangan lupa ganti IDYahooKamu dengan id yang sobat miliki. Oke sobat semoga berhasil pasang gadget Yahoo Mesengger nya, Good Luck happy Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Membuat Kaya Fitur dan Lebih Interaktif gadget
Fitur Fitur Blog Interkatif
Bismillah ... Setelah saya posting cara membuat menu horizontal, pada postingan kali ini lutfie tutorial blog akan sedikit share supaya blog kita lebih interaktif  dan kaya dengan fitur-fitur, supaya blog kita lebih bagus dan dicandu sama pengunjung tentunya blog kita harus tampil menarik dan Design template nya bagus, dalam postingan ini saya tidak akan membahas cara design template blog ataupun cara membuat blogger template, tapi disini saya akan membahas cara menambahkan gadget yang lebih interkaktif.

Oke sobat blogger, supaya blog kita lebih interaktif dengan pengunjung saya akan menggunakan gadget yang berasal dari wibiya, jika sobat tertarik dengan ini pertama sobat kunjungi situsnya di alamat www.wibiya.com, setelah itu sobat daftar (Gratis alias Free) 

CARA DAFTAR WIBIYA

  • Buka Alamat www.wibiya.com
  • Setelah itu sobat Klik Get It Now
  • Lalu isi Form yang telah di sediakan Tampilannya seperti di bawah ini
Form daftar Wibiya gadget
  • Setelah semuanya terisi dan sesuai dengan form sobat langsung klik next. 
  • Setelah berhasil daftar di wibiya sobat langsung login dan pilih toolbar yang akan di letakan di blog sobat,
Style Wibiya Toollbar
  • Setelah dipilih dan sesuai dengan style blog yang sobat, terus klik tomblo Next.
Fitur Fitur yang tersedia
  • Langkah selanjuntnya sobat pilih fitur apa saya yang akan ditampilkan dalam gadget wibiya tersebut sobat bisa memilih Facebook Pages,Twitter Dasbord,Youtube Gallery,dll..., setelah selesai klik Next, 

Select Your Blog Platform
  • Langkah tearkhir sobat pilih Platform web/blog yang sobat gunakan dan klik gambar nya. 

Jika sobat ingin mengintsal sendiri sobat pilih yang paling bawah sendiri, lalu copy code nya dan simpan di halaman/widget blog sobat. oke mungkin itu sedikit gambaran supaya blog kita lebih kaya fitur dan interaktif dengan pengunjung, Oke sobat di cukupkan sampai disini dulu Tutorial Blog nya mudah mudahan berhasil dan selalu semangat di dunia Blogging, Good Luck Happy Blogging 
     
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
Cara Membuat Menu Horizontal
Menu Horizontal
Bismillah... setelah beberapa hari saya absen dari dunia online, kini saya akan kembali lagi share tentang tutorial blog, css, Design, template dll.., maklum banyak pekerjaan offline yang harus di kerjakan. he he. sekarang saya akan sedikit membahas tentang CSS, yaitu cara membuat menu/navigasi Horizontal dengan CSS, kenapa menggunkan CSS?? karena sekarang sudah bnyak sekali cara membuat menu dengan berbagi cara misalkan dengan JQuery dan lain sebaginya,

Oke sekarang saya akan mulai dulu dari dasar cara membuat menu dengan menggunkan CSS, untuk membuat menu navigasi caranya mudah sobat tinggal mengahaplkan beberapa tag diantaranya tag ul dan tag li, oke sekarang kita langusung saja yu, pertama sobat buat script menggunkan tag ul dan li contonya penulisannya seperti di bawah
<ul></ul>
<li></li>

  • <ul>: Adalah tag pembuka yang kepanjangannya Unordered List
  • </ul>: Adalah tag penutup dari dari tag ul
  • <li> : Adalah tag pembuka yang kepanjangannya List Item
  • </li>: Adalah tag penutup dari dari tag ul

Cara penulisannya tag li harus selalu di dalam tag ul untuk contoh di bawah
<ul>
<li>text/images/etc</li>
<li>text/images/etc</li>
</ul>

Oke mungkin itu seputar tag ul dan tag li, sekarang kita lanjut ke cara membuat menu horizontal pertama sobat buat tag seperti di bawah

<ul id="menu">
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Products">Products</a></li>
    <li><a href="#" title="Services">Services</a></li>
    <li><a href="#" title="Support">Support</a></li>
    <li><a href="#" title="FAQ">FAQ</a></li>
</ul>
Setelah itu sobat beri CSS di bawah ini

Kode CSS Menu Horizontal
<style type="text/css">
    #menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu a {
    background: #333 ;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
}
#menu a:hover {
    background: #2580a2 ;
    color: #fff;
    padding-bottom: 8px;
</style>
Silahkan sobat sesuaikan backgroun warnanya seseuai dengan style menu yang sobat mau, Oke sobat mungkin itu sedikit tutorial Cara membuat menu Horizontal semoga bermanfaat.. Good Luck Happi Blogging
Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet
cara modifikasi background label blogspot
Label Blogspot
Bismillah... tutorial blog pada kesempatan ini saya akan membahas sedikit cara merubah tampilan label pada blogspot. setelah kemarin saya posting tetang cara merubah kolom label menjadi 2, sekarang saya akan share cara menyispkan gambar pada label.


Secara Default label pada blogspot tidak memakai awalan gambar/background terus bagaimana caranya? caraa merubahnya gampang, sobat tinggal menyisipkan sedikit secript CSS pada blogspot.
  • Langkah pertama Login ke Blogger
  • Next Step masuk ke area Edit HTML yang berada di tab Design Blog
  • Centang Expands Widgets
  • Terus Sobat cari Tag ]]></b:skin>
  • Setelah Ketemu sobat sisipkan kode CSS di bawah ini tepat di atas tag ]]></b:skin>

Kode CSS Tag Label
.Label .widget-content ul li { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhizxHyBatZYXBaGeE8y8T8Dv3hnpYMgveC_trgstk2ms2cOuJfDirKRfut_Xry4O_2vO1X3JhS4pwUlV98GtuEEzzeu6ULMkIzirMU-fCoTz4iNko-c02MU3xVNHMNjP6aqGGw9DF20/s368/tag.gif') no-repeat 0 2px; padding: 0 0 3px 20px; }   
Setelah selesai save dan lihat hasilnya. dan jangan lupa tampilan label blog sobat memakai Display List jangan memakau Display Cloud

CSS Label Blogspot
  • .Label : adalah tag label yang akan di modifikasi
  • .widget-content : adalah conten yang terdapat pada widget blog
  • background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhizxHyBatZYXBaGeE8y8T8Dv3hnpYMgveC_trgstk2ms2cOuJfDirKRfut_Xry4O_2vO1X3JhS4pwUlV98GtuEEzzeu6ULMkIzirMU-fCoTz4iNko-c02MU3xVNHMNjP6aqGGw9DF20/s368/tag.gif : adalah alamat/URL gambar yang menjadi bakcgroun label.
  • no-repeat 0 2px : background tidak di ulang ulang dan berada pada psosis 2 px dari sebelah kiri.
  • padding: 0 0 3px 20px; : adalah jarak sepasi dari konten label
Di cukupkan sampai disini tutorial blog cara modifikasi label pada widget conten blogspot. semoga berhasil Good Luck Happy Bloging.