Tutorial: Cara Buat Kotak Admin.

on Sabtu, Jun 02, 2012

Assalamualaikum,
Salam Sejahtera, Salam 1 Dunia.

Tiba-tiba teringin pulak nak buat Kotak Admin yang ada di bawah post. Tutorial yang aku ambil dari blog Lepak ini, aku abadikan dalam entri ini agar suatu hari nanti ia berguna untukku sendiri. Biasa la, aku ni kan rajin tukar template dan kadang-kala suka edit sana-sini. Kadang kala juga hilang habis widget yang ada. Sekurang-kurangnya, dengan tersimpannya tutorial ini di sini, tak la aku tercari-cari jika diperlukan suatu hari nanti.

Juga untuk "Manja Segamit Rindu" yang bertanyakan tentang cara nak buat Kotak Admin seperti dalam setiap single post, boleh cuba tutorial ini.



1. Buka paparan interface baru  > Template  > Edit HTML  > Procced >  Tick Expand Widget Templates.
2. Tekan Ctrl + F dan cari code  <div class='post-footer'>  
3. Copy code di bawah ini dan paste kan di atas code di nombor 2 tadi. Tukarkan url berwarna merah dengan gambar yang anda kehendaki. Tulisan berwarna biru gantikan dengan ulasan anda.

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Penerangan blog</h4>
<div class='kontainer'>
<img src='http://4.bp.blogspot.com/-aJGLVA8QmCA/TkFsqEXMgKI/AAAAAAAAAPg/naQPOENy01E/s220/AVATAR%2BKU-128.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. LETAK SEBARANG ULASAN TENTANG BLOG ANDA DI SINI.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://teratakusang.com' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
4. Cari code ]]></b:skin> 
5. Copy code di bawah ini dan paste kan di atas code yang dicari tadi.

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
5. Preview dan save jika tiada error.

Selamat mencuba.



Kredit: Lepak.com.my
Kongsikan artikel ini jika bermanfaat, terima kasih.
Ranking: 5

43 comments

2 Jun 2012 1:56 PG

salam..
nampak menarik juga nih
boleh lah dicuba nanti..
:)

2 Jun 2012 2:29 PG

kekadang takut nak usik takut hilang semua kiki

2 Jun 2012 3:48 PG

jem sikit minda awal pagi ni..hehehe..

ok jugak tu..tapi kekadang tu tak semua templet leh nak godek godek letak sebarangan kan ?

p/s : sy malas nak google..camne puan iza buat ruangan komen camni ? boleh tiru tak ?

2 Jun 2012 10:34 PG

saya ambil masa lebih dari satu hari nak buat kat blog
hehe memang pening juga laa

2 Jun 2012 1:34 PTG

panduan best utk mereka yg guna platform blogger..

2 Jun 2012 2:48 PTG

untuk blogspot ni kan?he3..

2 Jun 2012 5:10 PTG

ok gak ni kak iza ..hehe..hebat ni

2 Jun 2012 8:15 PTG

hohoho
dedulu masa guna blogger , sangat rajin buat tutorial.

Utk blog wordpress ni pun nak kena buat kotak admin gak ni. :)

2 Jun 2012 10:20 PTG

hahaha nice tutorial.... rase cam nak copy letak kat blog aku je.... muahahahaha

2 Jun 2012 11:06 PTG

Wah sudah pandai godek kod html blog. :-)

2 Jun 2012 11:26 PTG

chii xmo usik da pasal blog..x pasal2..x leh access arini..eheheh..tp ni mcm utk blogspot je..kan kan

3 Jun 2012 12:38 PG

memang bagus artikel nie,,kalau kat wordpress macammana pulak.

3 Jun 2012 2:03 PG

Salam,
perkongsian yang bagus.. ramai boleh manfaatkannya

3 Jun 2012 3:34 PTG

nampak menarik Iza...tp tah bila la nk pasang nih...

3 Jun 2012 5:03 PTG

wah..kotak admin..
lama dah nak mende ni..
TQ! kena cuba try test ni.

3 Jun 2012 8:44 PTG

Sensasi di sini ingin bertanya,
Adakah Kak Iza masih guna blogspot,
Apa yang dilihat nampak kemas dan ceria,
Walau apapun saya sentiasa support.

4 Jun 2012 11:00 PG

kotak admin tu apa ke benda ya

4 Jun 2012 1:05 PTG

@Zulkbo zulkboCom
W'salam..
Silakan..

4 Jun 2012 1:08 PTG

@pipoq
hehe..selalunya pagi2 ni la otak fresh.
Betul jugak tu.
p/s:nak tiru boleh je tapi susah sikit la nak godek benda ni. Sampai sekarang saya masih tak puas hati lagi. InsyaAllah nanti saya cari gali semula tuto nya..

4 Jun 2012 1:09 PTG

@tehr
Bab godek-menggodek ni memang kena betul2 teliti.

4 Jun 2012 1:09 PTG

@JebengOtai
Yup..

4 Jun 2012 1:10 PTG

@azman
Ya, blogspot je.

4 Jun 2012 1:11 PTG

@paan
WP bukan ke dah ada plugin?

4 Jun 2012 1:11 PTG

@Mohd Ilham
Silakan..

4 Jun 2012 1:12 PTG

@akubiomed
Pandai juga kalau ada panduan dan yang penting kena berani tanggung risiko blog hilang.

4 Jun 2012 1:12 PTG

@chii
Ya, khas untuk blogspot.

4 Jun 2012 1:13 PTG

@putera
Wallahu'alam...

4 Jun 2012 1:13 PTG

@kulanz
W'salam..
insyaAllah.

4 Jun 2012 1:14 PTG

@yastro
Bila2 free boleh la try.

4 Jun 2012 1:14 PTG

@Udinz.com
Gud luck

4 Jun 2012 1:18 PTG

@sensasi2020.blogspot.com
Alamak,
malas pulak ku nak berbalas pantun.
Ya, masih guna blogspot, terima kasih atas sokongan itu...

4 Jun 2012 1:18 PTG

@onlajer
Yang macam kat atas tu le...hehe.

4 Jun 2012 6:07 PTG

nice info.. thanks for sharing iza

4 Jun 2012 9:17 PTG

@Iza Teratak Usang Problem ngan interface baru ni selalu je error nak save html. :(

4 Jun 2012 9:19 PTG

@putera Guna plugin bro,.. kalau tak pun cuba contact tuan punta themes yang dipakai mungkin diorang ada buat.

4 Jun 2012 9:20 PTG

Bagus utk personality penulis & pemilik blog.

4 Jun 2012 10:28 PTG

@shraqs
Ada cara penyelesaiannya.
Cuba tukar ke Old Blogger Interface dulu, mesti boleh save.

4 Jun 2012 10:29 PTG

@shraqs
Harap dapat membantu,
thanks shraqs

4 Jun 2012 10:30 PTG

@azydy
sama2.

4 Jun 2012 10:31 PTG

@shraqs
Harap-harap begitu la..

6 Jun 2012 6:09 PTG

Nice tutorial :)

28 September 2012 2:38 PG

macam mana nak buat kotak komen ini

Catat Ulasan

Terima kasih kerana mengunjungi Teratak Usang serta meninggalkan komen di sini

 
© TERATAK USANG All Rights Reserved