Tuesday 2 June 2009

Menambah Elemen Widget


http://erge32.blogspot.com Masih Seputar Kilometer Tip-Trik Blog nih .. kali ini eRGe coba berbagi mengenai Cara Menambah Elemen Widget tapi sebelum nya eRGe mo ngasih tau dulu ama sobat-sobat eRGe yang setia .. bahwa eRGe lagi sial banget neh ... Page Rank turun dari 3 menjadi 2, alexa nya juga divonis dari 90 an jadi 95 an .. waduh apes banget gak tau apa salah dan dosa ku (wakakaka..) tapi ya udah deh mau bilang apa emang nasib ku harus begitu (sabar aja ya Ge .. hiks.. hiks) awalnya seh senang banget karena PR 1 langsung Naek ke 3 hehehe .. kerenkan, tapi cuma 3 hari aja, gak disangka dan tak diduga akhirnya turun lagi .. busyet deh (wekekeke)

Ok deh kita langsung aja ke pokok bahasan mengenai Menambah Elemen Widget .. tips ini saya terapkan di Template yang saya pakai Black Brown Pop yang dibuat oleh Ipiet Blogger Template posting ini eRGe special kan buat Brother Yoyok, maap brot baru sekarang dipostingin request nya. maksud menambah elemen widget disini adalah membuat widget baru di bawah Header serperti kolom Iklan kalau di blog ini dan membuat Foother 3 kolom, nah untuk mempersingkat ocehan yang ntar bisa ngelantur .. jadi kita lansung aja.


Hal pertama yang kita membuat Widget baru untuk Kolom Iklan nah ini kode HTML nya

/* iklan Column */

#iklan {
width: 960px;
position: relative;
clear:both;
margin: 0 auto 10px;
color:#000;
float: left;
padding: 0;
border-bottom:2px solid #363636;
}
#leftiklan {
width: 915px;
float: left;
margin: 10px;
padding:10px 10px;
background:#000000;
border:1px solid #363636;
}
#leftiklan img {
margin: 7px 7px 7px 0px;
padding: 3px;
width : 100px;
height : 100px;
text-align: center;
border: 2px solid #790011;
}
#leftiklan img:hover {
margin: 7px 7px 7px 0px;
padding: 3px;
text-align: center;
border: 2px solid #C2FF0A;
}
/* Credits iklan */

Taruh Kode HTML tersebut diatas Kode yg kira-kira seperti dibawah ini

#outer-wrapper {
width: 940px;
margin: 0 auto 0;
padding: 10px 0 0;
line-height: 15px;
}


Selanjut nya kita kita akan membuat Footheader 3 kolom dan ini Kode HTML nya

/* bottom Column */
#bottom {
width: 940px;
position: relative;
clear:both;
margin-top:10px;
color:#000;
float: left;
padding: 0;
}
#leftbottom {
width: 287px;
float: left;
margin:0 0px 0;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
#middlebottom {
width: 288px;
float: left;
margin:0 0px 0 6px;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
#rightbottom {
width: 287px;
float: right;
margin:0 0px 0px 0;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
/* Credits Column */

Lalu taruh Kode diatas dibawah kode yg kira-kira seperti dibawah ini

.main .Blog {
border-bottom-width: 0;

Untuk Pengaturan .sidebar h2, .sidebar ul dan .sidebar ul li .. sobat bisa mengikuti pengaturan yang sudah ada .. tinggal menambah kode elemen yang baru dibuat misalnya seperti di bawah ini

.sidebar h2, .topsidebar h2, .iklan h2, .bottom h2, .dianasidebar h2 {

.sidebar ul, .rightsidebar ul, .leftsidebar ul, .topsidebar ul, .bottom ul, .iklan ul, .dianasidebar ul, .diana1 ul, .diana2 ul {

.sidebar ul li, .rightsidebar ul li, .leftsidebar ul li, .topsidebar ul li, .bottom ul li, .iklan ul li, .dianasidebar, .diana1 ul li, .diana2 ul li {

kalau udah selesai .... langkah selanjut nya tambahkan kode dibawah ini

<div id='bottom'>

<b:section class='iklan' id='leftiklan' preferred='yes' showaddelement='yes'/>

</div>


dibawah kode yang kira-kira seperti ini

<div id='header'>
<div class='headerleft'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
--------------
--------------
--------------
--------------
--------------
--------------
</div>

Lumayan panjang yah cara buat nya, masih ada lagi neh .. hahaha, nah tambahkan kode dibawah ini

<div id='bottom'>

<b:section class='bottom' id='leftbottom' preferred='yes' showaddelement='yes'/>

<b:section class='bottom' id='middlebottom' preferred='yes' showaddelement='yes'/>

<b:section class='bottom' id='rightbottom' preferred='yes' showaddelement='yes'/>

</div>

Tepat diatas Kode yang kira-kira seperti ini yg merupakan batas main wrap

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

</div> <!-- end outer-wrapper -->

Nah baru selesai ... save template deh, kalau nggak ada halangan dan menurut anjuran dari dokter mudah mudahan sobat akan mempunyai elemen widget baru .. hehehe

Mudah-mudahan ada mamfaatnya bagi kita semua .. amin, sebelumnya terimakasih bagi sobat-sobat eRGe yang sudah bersedia ngasih Komentar ... salam

56 Komentar: Menambah Elemen Widget


yoyok on 3 June 2009 at 02:44 said...

maksih ya....akhirnya di post juga...sukses
SALAM

brother

Terima Kasih Sob yoyok Atas Komentarnya.
aan on 3 June 2009 at 02:54 said...

nich info....

sukses selalu ya............

brother.....

Terima Kasih Sob aan Atas Komentarnya.
1-1y4n9 on 3 June 2009 at 02:58 said...

Tutor Mantaff..Siplah Kang Tukimin emang Master...

Terima Kasih Sob 1-1y4n9 Atas Komentarnya.
Bang Fajar on 3 June 2009 at 03:21 said...

info yang sangat menarik...btw mau ngikuti jejak kang rohman buat kolom tutorial????

Terima Kasih Sob Bang Fajar Atas Komentarnya.
kang dwi on 3 June 2009 at 03:43 said...

wew. mantaf broe
thank dah share

Terima Kasih Sob kang dwi Atas Komentarnya.
Unknown on 3 June 2009 at 03:54 said...

mantap sob artikelnya..thanks

Terima Kasih Sob Unknown Atas Komentarnya.
Anonymous said...

bagus sob!!

Terima Kasih Sob Anonymous Atas Komentarnya.
chempluk on 3 June 2009 at 06:24 said...

wah beralih profesi beneran neh erge,,wkwkwkwk
mau jadi penulis gokil juga gak neh,hehehehe

Terima Kasih Sob chempluk Atas Komentarnya.
kang_abeh on 3 June 2009 at 06:45 said...

wuih mo jadi KR neh, mantap brother

Terima Kasih Sob kang_abeh Atas Komentarnya.
Anonymous said...

di tunggu-tunggu dari kemaren akhirnya datang juga ...... cool men

Terima Kasih Sob Anonymous Atas Komentarnya.
neoman63 on 3 June 2009 at 07:36 said...

ikutab coment sob

Terima Kasih Sob neoman63 Atas Komentarnya.
GAMEZONE on 3 June 2009 at 07:41 said...

wah makasih lagi infonya... cool

Terima Kasih Sob GAMEZONE Atas Komentarnya.
ems on 3 June 2009 at 09:30 said...

sebelumnya, hik..hik..hik.. itu tandanya belasungkawa bro.. atas turunya pagerank kamu, tp tenang aja.. 3bulan lg langsung naek ke angka 4 deh, hehehe

oh, gitu ya caranya, ehm, kalo aku buat kolom iklan, apa ada yang mau pasang ya..hehehe
seeep
:)

Terima Kasih Sob ems Atas Komentarnya.
naputra on 3 June 2009 at 09:40 said...

bagus ni info macacih ya oom ....(he) :D

Terima Kasih Sob naputra Atas Komentarnya.
Rinto on 3 June 2009 at 11:02 said...

ini dia yg ku cari...thanks udah di kasih tau sblm aku bertanya...wakakakak...siiiippp brother

Terima Kasih Sob Rinto Atas Komentarnya.
AnJeLaNeT Palangkaraya on 3 June 2009 at 11:06 said...

ini baru baru brother namanya,ditunggu2 dr kemaren2 info yg kaya' ginian nih.
Masalah PR, aq turut berduka yaa..moga2aq gk ketularan sih he he..Trims Share-nya brother..

Terima Kasih Sob AnJeLaNeT Palangkaraya Atas Komentarnya.
affa on 3 June 2009 at 18:49 said...

ilmu baru ilmu baru lama g mampir dah banyak ilmu baru makasih bank

Terima Kasih Sob affa Atas Komentarnya.
apih yayan on 3 June 2009 at 21:20 said...

memang bang erge dunia itu berputar kadang kita ada di atas kadang di bawah, ada yang muncul dan ada yang tenggelam, begitu juga di dunia blogger ada yang naik ada yang turun, kebetulan saja bang erge lagi ketiban perputaran roda nya mbah google sama si tante sexy Alexa.. but nice posting/artikel sob, keren tuh saya juga lagi nyari cara nambah element.. thanks sob

Terima Kasih Sob apih yayan Atas Komentarnya.
asep canda on 3 June 2009 at 22:31 said...

patut di coba nih keren info nya sob mantab

Terima Kasih Sob asep canda Atas Komentarnya.
Ardhiansyam on 3 June 2009 at 23:21 said...

saya baru tahu tutorial ini, makasih, mau coba dulu

Terima Kasih Sob Ardhiansyam Atas Komentarnya.
boy on 3 June 2009 at 23:36 said...

mantab nih info nya apalagi untuk pemula seperti saya makasih ya sob

Terima Kasih Sob boy Atas Komentarnya.
Pit-Onta™ a.k.a kAnzENk™ on 4 June 2009 at 00:37 said...

bro Tukimin dan eRGe Memang mantaf dalam tutorial, salut for your new inspiration post....saya tunggu postingan berikutnya..sayang koneksiku ancur terus..heu...

Liat Profil sexy Julia Perez

salam

Kanzenk

Terima Kasih Sob Pit-Onta™ a.k.a kAnzENk™ Atas Komentarnya.
ade on 4 June 2009 at 01:35 said...

Great post bro..
kpn2 aq pasang di blog ku ah..
Thanks..

Terima Kasih Sob ade Atas Komentarnya.
Lifetheteen on 4 June 2009 at 02:30 said...

haii...haiii
kunjungan pertama gue yang berkesan
salam kenal coy!

Terima Kasih Sob Lifetheteen Atas Komentarnya.
HAPIA Mesir on 4 June 2009 at 03:48 said...

thank u tipnya sob.....yo semangat sob....

Terima Kasih Sob HAPIA Mesir Atas Komentarnya.
rae_zen on 4 June 2009 at 03:50 said...

bagus sob,,,,,terus mostingin utk berbagi ya,,,,,semangat pokoknya sob erge....

Terima Kasih Sob rae_zen Atas Komentarnya.
Belajar SEO on 4 June 2009 at 13:48 said...

alih propesi neh... hehehehe,,, dari VB ke HTML and JS... hahaha... sukses sob

Terima Kasih Sob Belajar SEO Atas Komentarnya.
imamnet on 4 June 2009 at 20:56 said...

ilmu baru, patut dicoba, thanks infonya ^_^

Terima Kasih Sob imamnet Atas Komentarnya.
The new Born on 4 June 2009 at 21:16 said...

salam kenal coy..... wah blogmu abagus juga ya...... boleh blajar dong.... salam Sukses

Terima Kasih Sob The new Born Atas Komentarnya.
jinkurakura on 4 June 2009 at 21:36 said...

wah ilmunya banyak banget,, ikut belajar pak..

Terima Kasih Sob jinkurakura Atas Komentarnya.
3ndur0 on 5 June 2009 at 07:04 said...

wah bisa dicoba ni sob RG..... sepppp deh
Sukses selalu ya...

Rgds, 3ndur0

Terima Kasih Sob 3ndur0 Atas Komentarnya.
Unknown on 5 June 2009 at 20:34 said...

Di coba dlu kang erge....

Terima Kasih Sob Unknown Atas Komentarnya.
Unknown on 6 June 2009 at 04:39 said...

mantap triknya sob..

Terima Kasih Sob Unknown Atas Komentarnya.
Unknown on 6 June 2009 at 04:40 said...

di tunggu trik blog berikutnya..

Terima Kasih Sob Unknown Atas Komentarnya.
Magazine Blog on 7 June 2009 at 02:28 said...

nice tips sob..
tetep semngat juga biarpun PR-nya turun dikit.. hehehe.. :P

Terima Kasih Sob Magazine Blog Atas Komentarnya.
budiawanhutasoit on 10 June 2009 at 02:19 said...

thanks ya utk tipsnya.
mengenai PR, nda usah terlalu dipikirin..ntar juga pasti naik lagi.
om gugel emang gitu orangnya..hehe

Terima Kasih Sob budiawanhutasoit Atas Komentarnya.
Rinto on 11 June 2009 at 11:09 said...

yg penting pengunjungnya tetap berjibun Sob....smangat truuuuussss

Terima Kasih Sob Rinto Atas Komentarnya.
kumpulan ebook indonesia - promosi ebook gratis on 11 June 2009 at 19:13 said...

makasih infonya erge... ditunggu postingan berikutnya tentang hack blogger....

Terima Kasih Sob kumpulan ebook indonesia - promosi ebook gratis Atas Komentarnya.
free blog promotion - free back link on 11 June 2009 at 19:14 said...

thank you.... makasih... matur suwun

Terima Kasih Sob free blog promotion - free back link Atas Komentarnya.
ems on 12 June 2009 at 01:03 said...

bro, minta ijin nulis lagi di kotak komen ini, coz di atas dah ada komenku , gak papa khan? pleasee... jangan marah ya, jangan dibanded.. moga panjang umur deh, mudah rejeki, cepet jodoh, dan..yang bagus-bagus deh, hihihi, komentarnya gak nyambung ya :)

Terima Kasih Sob ems Atas Komentarnya.
Moto Modding on 13 June 2009 at 05:03 said...

sepp, complete benerr, keep on shared bro

Terima Kasih Sob Moto Modding Atas Komentarnya.
Ronaldo Rozalino on 13 June 2009 at 22:46 said...

Makasih ya triksnya

Terima Kasih Sob Ronaldo Rozalino Atas Komentarnya.
Ronaldo Rozalino, S.Sn.,M.Pd on 13 June 2009 at 22:47 said...

Tahnks ya

Terima Kasih Sob Ronaldo Rozalino, S.Sn.,M.Pd Atas Komentarnya.
Wihara Satya Dharma on 14 June 2009 at 21:10 said...

wah,..bagus banget modif templatenya,...mau dong?????

Terima Kasih Sob Wihara Satya Dharma Atas Komentarnya.
Kang suroto on 15 June 2009 at 09:53 said...

Info yg aku tunggu tunggu sobat..

Terima Kasih Sob Kang suroto Atas Komentarnya.
Nur Muhammad on 15 June 2009 at 20:49 said...

gila thx ya sob... gara gara info ini skarang q jd bis nge-design blogku.....

Terima Kasih Sob Nur Muhammad Atas Komentarnya.
DEVIL DIVINITY on 23 June 2009 at 20:24 said...

Wah...CSS yag...Thankzzz

Terima Kasih Sob DEVIL DIVINITY Atas Komentarnya.
Anonymous said...

wah mantap juga nih tutorialnya sob!! terus berbagi dan share idea!!Internet Marketing Newbie For New Bie(Part 1) Internet Marketing Newbie For New Bie(Part 2)

Terima Kasih Sob Anonymous Atas Komentarnya.
Seti@wan Dirgant@Ra on 26 June 2009 at 00:02 said...

Nice info sobat,.... makasih yah. aku coba.

Terima Kasih Sob Seti@wan Dirgant@Ra Atas Komentarnya.
Anonymous said...

nuhun a

Terima Kasih Sob Anonymous Atas Komentarnya.
hidup untuk berbagi on 26 December 2009 at 04:56 said...

wah,,, informasinya menarik banget,,, makasih banyak mas atas ilmu2nya,,,

Terima Kasih Sob hidup untuk berbagi Atas Komentarnya.
mbah gendeng on 30 December 2009 at 00:49 said...

sepp,, makasih dah bagi2 tutornya

Terima Kasih Sob mbah gendeng Atas Komentarnya.
Aku Cuma Seorang Blogger Yang Cinta Seo on 7 January 2010 at 04:32 said...

nitip link monter erge

Terima Kasih Sob Aku Cuma Seorang Blogger Yang Cinta Seo Atas Komentarnya.
SERBA BLOG on 10 March 2010 at 06:29 said...

Thanx bgt tutornya...mantab....
blognya jg keren banget nih...design yg sangat menarik sekali....

Terima Kasih Sob SERBA BLOG Atas Komentarnya.
Steve on 1 February 2011 at 00:03 said...

kalo buat blog wordpress gimana ya mas?
btw, sekarang blog mas eRGe udah PR 4 lho.. ayo mas di update lagi...

Terima Kasih Sob Steve Atas Komentarnya.
SMARTPHONES on 10 April 2011 at 21:35 said...

wah bagus nih tutor nya untuk menambah elemen widget-nya ...trims ya..

Terima Kasih Sob SMARTPHONES Atas Komentarnya.

Tanggapan Sobat

Zona Bebas Komentar tapi jangan nyepam.

Kalo nyepam minta maaf nih, dengan terpaksa dilaporkan pada kantor polisi terdekat dihapus, monggo sobat silakan komentar jangan malu-malu.

ABOUT ME

Empu Blog ini

SUPPORT BLOG INI




Submit

Display Pagerank Yahoo bot last visit powered by MyPagerank.Net

IKUTI VIA EMAIL

Enter your email address:

Delivered by FeedBurner

My Blog Do Follow

5 Komentar Terbaru