Bagaimana cara menampilkan text yang berada dalam area tersendiri yang berbeda dengan isi postingannya? Hal ini di tanyakan oleh sobat saya Riasmaja dan saya akan mempostingnya untuk blogger mania lainnya, prinsipnya hampir sama dengan postingan saya sebelumnya silakan baca disini atau ke yang punya code aslinya di Mohamed Rias. Seperti contoh di bawah ini
Contoh (note) :
Test Menaruh Text di dalam area ini
Contoh (warning) :
Test Menaruh Text di dalam area ini
Contoh (info) :
Test Menaruh Text di dalam area ini
Contoh (alert) :
Test Menaruh Text di dalam area ini
Contoh (download):
Test Menaruh Text di dalam area ini
Mau tahu caranya?
1. Seperti biasa, login ke Blogspot , kalau sudah login masuk ke Tata Letak > Edit HTML
Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!
2. Setelah itu masukkan kode di bawah ini di atas kode ]]</b:skin>
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
.warning {
border: 1px solid #FF8888;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/warning.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.download {
border: 1px solid #C2E069;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/download.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.alert {
border: 1px solid #FFC875;
font-size: 11px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/alert.gif) no-repeat 5px 5px;
font-family: Verdana, sans-serif, "Courier New";
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.note {
border: 1px solid #FFE375;
font-size: 11px;
color: #191919;
font-family: Verdana, "Times New Roman", Times, Georgia, serif;
line-height: 125%;
background: #FFF2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/note.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
.warning {
border: 1px solid #FF8888;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/warning.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.download {
border: 1px solid #C2E069;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/download.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.alert {
border: 1px solid #FFC875;
font-size: 11px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/alert.gif) no-repeat 5px 5px;
font-family: Verdana, sans-serif, "Courier New";
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.note {
border: 1px solid #FFE375;
font-size: 11px;
color: #191919;
font-family: Verdana, "Times New Roman", Times, Georgia, serif;
line-height: 125%;
background: #FFF2BF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/note.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
Jangan lupa simpan hasil pekerjaan sobat!
3. Untuk menampilkan text di dalam area berbeda di postingan sobat harus memakai code tag
di bawah ini : <div class="note">
Text
</div>
<div class="alert">
Text
</div>
<div class="hint">
Text
</div>
<div class="download">
Text
</div>
<div class="warning">
Text
</div>
Masukkan text di antara tag
<div>tersebut, sesuaikan dengan kebutuhan blooger mania, bisa di pakai dalam Edit HTML ataupun Compose Mode. Ok sobat Happy Blogging yaks
Hooorrrayyy... terimakasih kang... waduh.. jadi gak enak ne... pake diantar sendiri langsung, masih anget lagi.. ck.ck.ck...
ReplyDeleteJadi pengin posting artikel tutorial ne... tapi apa ya..? Binggung.. soalnya saya sendiri masih butuh tutor dari para master blog kayak kang subagya gini..
Sekali lagi terimakasih banyyak kang..
Kereeeeeeeeeenn..padahal semalam aku nanyain ini...tapi kamu gak mudeng ama pertanyaanku...
ReplyDeleteakhirnya dikeluarin juga...
Horayy...kamu memang hebat..Mantap...
ALways Be The Best..!!
Good Posting fren, sangat berguna nih
ReplyDeletewah.. ini dia yg slama ini Panda cari :)
ReplyDeletetenkyu berat broth :)
@ Riasmaja > ok, sama-sama, bukan master blog aduh kang rias cuman sekadar berbagi pengalaman
ReplyDelete@ Jovie > ooo ini yang di tanyain juga yah wakakkakaka sorry sis mungkin lagi error gw
@ MR.koechel > praktekin dong bro
@ Panda > di cari? mang ada yg buang pan wkwkwkwkw
aku bingung nih... templetku mumetinnn....:((
ReplyDelete@ Lyla > simple ko mba hanya bermain di code css
ReplyDeletemenarik sekali...
ReplyDelete@ Anang > yups, betul menarik sekali, di praktekin ga mas?
ReplyDeleteini buat blogger doang ya bro?
ReplyDeletewah hebat tambah keren neh info na.. dan met Kemerdekaa
ReplyDeletemantep bisa di coba nih...
ReplyDelete@ Bayu > sayngnya iya bro :p
ReplyDelete@ blogspot > hanya mensadur dari aslinya kang :p
@ Frendli > silahkan om
selalu ada yang baru di blog ini...jadi kecanduan mampir neh ...
ReplyDelete@ gus > hehehehe makanya langganan blog saya kang :p
ReplyDeleteinfonya oke nihh..
ReplyDeletetapi pasti aku nggak bisaaa...
gaptek jayaaa...
Wah, kayaknya mantap nie.. tapi seperti mbak Tyas, saya pasti gak bisa, hahahaaa...
ReplyDeletemari mbak, sesama gaptek tukar senyum aja, heheee...
@ tyas > mbak harus bisa dong :p
ReplyDelete@ wendra > ikut-ikutan juga niih :p
wah bleh nich dicoba.. gw kopy ya, tenang gk sy publish ulang.. hehe
ReplyDeletethank clue nya broo..
@ Benny > silahkan kalau memang bermanfaat
ReplyDeletemantap boss.... ijin sedot kapan2 bos di gubuk saya. thx
ReplyDeletewaw..baru tau nih..keren bro..
ReplyDeleteuhhm..kalo bkin gambar tersembunyi gmn bro..jd yg muncul cuman kotak berisi link aj,kalo link di-klik baru muncul gambarnya...aq masi pnasaran ma yg itu..
@ dhuwuh > silakan kang , saya sudah mampir kok tadi :p
ReplyDelete@ mike > heheheheeh kemana aja mike :p sudah saya kasih linknya ke SB u bro , silahkan pilih
yupz..tengkyu bro..udah dicek jg tadi..sip deh!
ReplyDeletebtw itu cm bs di widget aj ya?gmn kalo diaplikasikan di postingan gtu bro..
@ Mike > yups nanti saya usahakan posting mengenai hal tersebut :D
ReplyDeletepengen ngikut ah..maksih bro..:D
ReplyDelete@ Erwin > silahkan kang kalau memang informasi ini bermanfaat :D
ReplyDeletePosting yang sangat bermanfaat ...
ReplyDeleteMenambah khazanah perbendaharaan pengetahuan bagi para blogger khususnya blogspot ...
Good Posting ...
Betah berlama-lama disini....
@ abang > waduh bang jadi gak enak nih , hanya mensadur ilmu dari orang aja. berabgi ilmu kan dapat pahala bang
ReplyDeletemakin jago aj niyh temen sekamar cc.. hehhehe for blogger clasic gmn tuyh?? ikssss susah banged nyari tutornya
ReplyDeletewah bisa diterapin nih di blog ak....
ReplyDeletewah info bagus ini...thanks sdh sharing....:D
ReplyDelete@ Unieq > masa sih baru tahu kamu nieq? hehehe untuk blogger classic bisa ko niq
ReplyDelete@ blog informasi > silahkan kang
@ kang boim > yup memang nice post :p
lagi lagi pelajaran tentang perkodean,saya tak mengerti sama sekali.
ReplyDeletetp saya akan terus belajar,doakan ya.om.
Kang mau tanya nee...
ReplyDeleteKalo buat kolom di antara postingan dan kolom komentar yang di dalamnya ada label, judul posting ma social bookmarking gmana caranya?
@ d'mocca > hmm... insya allah kali yak saya posting :D
ReplyDeletetaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaH anu ieu yeuh yg dakuh looking² teh kang Bos SUBAGYA...per...per...perakhir, huehueheugh (mo pertamax malu da paling bocot) *halah bocot pisan eta bahasana teh*
ReplyDeletetambah lagi, ilmu Ku bertambah banyak lagi
ReplyDeleteKeren Infonya,,, Terimakasih y!
ReplyDeleteThanks gan sudah berbagi...
ReplyDeletecontoh tampilannya sertain sekalian dong mas..
ReplyDeletemaklum q masih pemula,
hehehehe
Apa tidak merusak valid HTML dan CCS template blog kita nantinya ? dan adakah pengaruhnya untuk SEO
ReplyDelete