Showing posts with label tutorial blog. Show all posts
Showing posts with label tutorial blog. Show all posts

June 2, 2015

Tutorial : Letak Lagu Youtube Autoplay di Blog New Version (iframe)




Assalamualaikum, hai


aku tahu kebanyakan korang ada yang jenis suka letak lagu kat blog. kalau macam aku , aku ikut mood.kalau nak letak aku letak. kalau tak aku biar je kosong. Youtube sentiasa buat perubahan. sebelum ini masih boleh buat coding lama, sekarang dah tak boleh. coding dia dah short dan simple.
bermula dengan coding "iframe".


sebelum aku melalut lebih panjang lagi marilah kita terus kepada tutorial.

1) salin code di bawah. jangan malas salin je. ye, bila aku kata salin maksud dia tak boleh copy and paste la tu. sila bukak layout>add new gadget>scroll cari html/javascript and click button tambah and taip code dekat bawah ni.taip je semua sekali termasuk link youtube tu.



2)Pergi youtube dan cari video lagu yang korang letak tu. copy link youtube dia sahaja. jangan copy semua sekali embeded code tu. lihat contoh di bawah



3) dah siap salin? okay sekarang gantikan link yang warna merah tadi dengan link video yang korang nak letak." di awal dan ? di hujung link sila kekalkan. cuma link sahaja perlu ditukar ikut citarasa anda.


contoh :



 inilah final look code korang nanti. tak payah nak gatal gatal pergi copy seluruh embeded code. nanti pening jangan nak kata aku ajar salah. ikuti method mudah ni.



P/S: Nak Copy tutorial boleh tapi jangan buang credit okay?


P/S 2: kalau tak faham sila komen dekat bawah nanti i olzz reply :)

August 13, 2012

tutorial : combine 3 sidebar widget dalam satu box (tabler widget)

korang sukakan kekemasan?nak jimat space?
korang memang patut cuba benda ni sebab ianya akan memperkemaskan blog korang.
una share tutorial ni sebab una rasa mesti ramai tercari-cari cara macam mana nak kemaskan blog , kata pun dah nak raya dah takkan rumah je kemas, blog pun nak jugak kan? *angkat kening*.

-okay stop mukadimah jom kita start?-



nampak yang dah dikotakkan dengan warna merah tu?
okay macam tu lah rupanya tabler widget tu

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>



ARAHAN 

step 1) copy code di atas
step 2) pergi ke design > add gadget > pilih html java script
step 3) pastekan code tadi dan save
step 4) susun kotak yang dipastekan dengan code tadi diatas 3 sidebar widget yang kita hendak masukkan ke dalam kotak dan siapp!!! ;)






p/s: jadi tak? kalau jadi cer komen sikit, like fanpage kalau sudi, klik iklan nak beli choki2 :D 










November 24, 2011

tutorial buat header guna photoshop cs5

hai korang, so malam ni una nak ajar korang cara edit atau membuat header menggunakan photoshop, jangan risau mudah je ni.
so tanpa membuang masa jom tengok step kat bawah ni.

1) buka photoshop anda


2) klik file >new
kemudian akan keluar kotak macam bawah ni setkan ikut berapa luas dan tinggi blog korang ,kalau nak transparent header, so background tu setkan transparent


3) kemudian bila dah tekan ok akan muncul kotak macam gambar bawah ni,tekan text (simbol T) di bahagian sebelah KIri untuk masukkan text
so korang boleh tulis nama blog korang



4)tengok contoh dibawah una tulis nama blog una,highlightkan dan  klik button layer , sila cari layer style kemudian cari pula stroke ,klik pada stroke



5) dah klik? tulisan akan berubah dekat  situ  seperti dibawah ini
nampak tak kat kotak tu ade tulis inner glow, outer glow kan? itu effect untuk tulisan, so kalau korang nak tulisan tu cantik trylah effect ni :)
opss lupa nak tukar warna tulisan boleh tengok kotak sebelah kanan dalam photoshop,highlight tulisan kemudian korang tukar la warna dia sesedap rasa.




macam mana nak letak gambar? dekat header?
tekan  file cari place, klik place kemudian korang ambil gambar yang orang nak letak di header
(untuk kesan yang lebih kemas pastikan sudah diedit dan dibuang background gambar terbabit)

so jadi seperti dibawah ini



6) kemudian  seila tekan semula button "T"  untuk text,
di tepi sebelah kiri,akan keluar satu kotak kecil ,
tekan place pada kotok kecik yang keluar tu
dan image akan jadi seperti gambar bawah ini...




7) dah puas hati? maka boleh la save kan
klik file>save as
letak nama dia eh nanti dulu belum habis lagi bawah file name tu ade format betul?
format dia mestilah PNG, jangan guna format photoshop tak jadi karang.

kemudian save. :)



 p/s: selamat mencuba tak tahu sila tanya.