Tutorial : Remove Attribution

 Assalamulaikum guys, hari ni aku nak kongsi dengan korang semua tutorial mcam mana nak remove Attriution dalam template blog or dalam theme blog. 

1. Log in blogger > Theme > Edit HTML, bila dah pergi HTML tu, korang CTRL + F dan cari kod kat bawah tu

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

2. Bila dah jumpa kod yang kat atas tu, korang cari pula code yang di bawah ni, then code yang kat bawah ni korang delete ye berserta dengan code yang kat atas.

<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>

        <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

          <b:widget-settings>

            <b:widget-setting name='copyright'/>

          </b:widget-settings>

          <b:includable id='main'>

    <div class='widget-content' style='text-align: center;'>

      <b:if cond='data:attribution != &quot;&quot;'>

       <data:attribution/>

      </b:if>

    </div>

    <b:include name='quickedit'/>

  </b:includable>

        </b:widget>

      </b:section>

3. Lepas korang dah delete code tu, cuba korang preview dulu samada jadi atau tak jadi, if menjadi korang save la. So simple. 

4. Mungkin aku punya penerangan agak memeningkan tapi harap korang boleh cuba faham ye dan baca betul2 apa yang aku terangkan kat atas tu.

Semoga berjaya tau. .

Tutorial : Letak scroll box dalam entry

Sroll box dalam entry ni bagus jugak sebab dapat jimat kan ruang dan kemas kan blog. Mana lah tahu kalau korang nak buat tutorial nak bagi free template yang korang dah design atau edit tu, code dia kan panjang. so senang sikit kalau ada scroll box ni, jum tengok cara nye..

1. New post > HTML
2. Copy code bawah ni dalam ruangan HTML tadi.

 <div style="border-color: 000000; border-style: solid; border-width: 2px; height: 100px; overflow: auto; width: 426px;">CONTENT KORANG</div>

3. Lepastu korang just masukkan je apa yang korang nk taip tu..
4. Dah siap publish macam biasa .


Credit : Zatie Salim

simple template : comment box styling

Assalamualaikum,


Pergi ke Dashboard > Setting > Post and Comments > Comment location > Pilih Embedded
Pergi ke Blogger Dashboard > Template > Edit HTML
Cari code .post {
Paste codes yang saya bagi ni dekat ATAS .post{ tadi.

.comment-content{
background:#FFE2E2;
padding:13px;
border-radius:30px;
color:#666;}
h4{
background:#D1F4FE;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;}

@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}
.comment-block{background:#FEF3F3;
padding:10px;
border-radius:30px;
border:3px dashed #FEE8E8}
.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}

.datetime{
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}
.secondary-text{
padding:8px;
background:#fff;
border-radius:30px;
float:right;
border:2px solid #FEE8E8;
}

Letak MP3 Player di Blog

Assalamualaikum..anyone yg datang blog aku ni kalau nampak tuto ni boleh la follow ye..aku nak buat tuto macam mana nak letak MP3 Player kat dalam blog..mudah dan tersangatlah senang..just ikut step di bawah ye..


⋆ Dashboard > Design > Add a Gadget > Html/JavaScript

⋆ Lepas tu copy kod yang kat bawah ni

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="130" height="15">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//media.irondj.net/mix/file/31676/B.A.P_-_Rain_Sound.mp3&amp;autoplay=1&amp;bgcolor=ffffff&amp;loadingcolor=f7f7f7&amp;buttoncolor=9CBCCB&amp;slidercolor=9CBCCB" />
</object>

⋆ Yang tulisan merah kau boleh pilih url untuk lagu yang korang suka..

⋆ warna oren tu pula korang boleh lah pilih warna bakground untk mp3 yg korang suka tu...

⋆ Then, lepas dah buat semua, korang save and maka jadilah..

tu jelah, mudah bukan?..so simple..hehe..korang boleh dapatkan lagu dekat SINI

Tutorial : Scroll Box For Blog Archive

1. Log In > Dashboard > Design > Edit HTML > Tick Expand Widget Templates

2. Tekan Ctrl F dan cari kod yang ini :

<div id='ArchiveList'>

3. B4 korang jumpa kod yg kat atas ni , korang akan jumpa kod yang ini dulu :


<div class='widget-content'>

 4. Gantikan kod ini  <div class='widget-content'> dengan kod yang ini

<div class='widget-content' style='overflow:auto; height:200px'>

p/s : Korang boleh tukar Size Height 200px mengikut kesesuai blog ;)


5. Korang PREVIEW dulu . kalau menjadi , terus SAVE ok ? :))

=SELAMAT MENCUBA=

crdit to Lyssa Faizureen

Automatik New Tab 2

1. Log in > Dashboard > Design > Edit Html

2. Cari kod ini : (Ctrl F untuk mudahkan pencarian)

<head>

3. Dah jumpa kan ? Bagus !! Copy kod ini pulak dan paste di bawah kod yang korang carikan tadi tu.


<base target='_blank'/>

4. kalau dah siap then SAVE la..

Tutorial : Marquee Bergambar..

1. Dashboard > Design > Add a Gadget > Html/JavaScript

2. Copy kod di bawah and paste di ruangan Html/JavaScript tersebut :

<div style="background-image: url(&quot;http://dl.glitter-graphics.net/pub/303/303771ob8r4r0z04.png&quot;); border: 3px double #FF3399; height: 300px; overflow: auto; width: 190px;"></a><center>
</center>
<marquee onmouseover="this.start()" onmouseout="this.start()" scrollamount="7" direction="up" align="center">
<center><img style="width: 143px; height: 204px;" src="URL GAMBAR DI SINI" /></center>
<center><img style="width: 143px; height: 265px;" src="URL GAMBAR DI SINI" /></center>
<center><img style="width: 144px; height: 245px;" src="URL GAMBAR DI SINI" /></center>
<center><img style="width: 142px; height: 213px;" src="URL GAMBAR DI SINI" /></center>
<center><img style="width: 138px; height: 234px;" src="URL GAMBAR DI SINI" /></center>
</marquee>
<center></center><center></center></div>

3. Ok , URL GAMBAR boleh Upload DI SINI (Korang boleh Copy "DIRECT LINK")

Tutorial : image becomes grey when hover

Salam..how are you today?.. ok?...jangan banyak cakap, jom kita mulakan tutorial ini. Tutorial macam mana nak bagi image dalam blog kita tu nampak warna grey. So, kita step2 nya


first: open your template;
second:  search code </style>;
third: paste this code in ABOVE/ATAS </style>;

/*------ IMAGE ANIMATION------*/
img, a img {
filter: none;
-webkit-filter: grayscale(0);}
.photo img {
opacity:1;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}
img:hover, a:hover img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;}

cuba buat k..kalau dah jadi tu ok la tu... Kalau yang use design template tu korang boleh letak  di mana2 je. Just letak bawah a:hover..

credit to zara nerd

Tutorial : Favicon

putri nak teach korang mcm mane nak uat tutorial favicon..hehe..sory xder contoh nak tnjuk kat korang..ni pun putri bljr cara2nye kat blog lyssa..tq lyssa...just share je...klau nak tau jgk try buat dahulu ok!!!...

mudah and senang je...

cuba ikut langkah di bawah :)

1. Dashboard >Design >Edit HTML >Tick expand widget template .

2. tekan CTRL+F , search code dekat bawah ni ok :)

</head>

3. dah jumpa dah ? ok good . then copy code kat bawah ni .

<link href='URL gambar' rel='shortcut icon' type='image/x-icon'/>

<link href='URL gambar' rel='icon' type='image/x-icon'/>

    paste kan dekat atas code </head> tu ok :)

4. lepas tu preview , kalau jadi save jela terus :)

*Letak URL gambar dekat Warna Merah ! :)

Tak tahu nak caru URL gambar mcm mana ? LIHAT SINI !!


credit by : lyssasecret

Tutorial : Effect Senget Bila Cursor Menyentuh Blockquote

salam....Tapi , hari ni , putri nak ajar korang maca mana nak buat blockquote senget macam putri punya tuh . hehe .oklah . Jom tngk and lihat .  tahu tak apa yang putri maksudkan ? msti ader yg tau kann..kann..dan ader yang xtau....kan..kan...if xtau biar putri tunjukkan.. tengk step2 kat bawah tau!!!!...

Macam dalam gambar di atas tu la, Ok, Let's start.

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak dan search kod ini :

.post blockquote {  ATAU   blockquote:hover {

3. Dah jumpa ? Copy kod ini pulak :

blockquote:hover {

     -webkit-border-radius: 36px 12px;

    -moz-border-radius: 36px 12px;

    -webkit-transform: skew(1.deg,1.5deg);

    -moz-transform: rotate(3deg);

    -webkit-transform: rotate(3deg); }

    border:2px dashed #000000;

    -moz-border-radius-topleft: 10px;

    -moz-border-radius-bottomright: 10px;

    }

4. Paste di bawah kod yang korang cari tu ok ?

5. Then , SAVE lah . Jadi tak ? Jadi Tak ? =) 

Perhatian yea !!! tutorial di atas hanya akan jadi apabila korang guna design/layout !

If sesiapa yang guna template tu , harap maaf ! Maybe , tak kan jadi lah :)

credit by : lyssasecret.. 

Buat Tab Menu yang Comel

Assalamuailaikum semua, hari ni nak share tutorial buat tab menu..ok aku xnak ckp banyak mula buat

1.Dashboard> Posting> Edit pages

edit page yg ada kat atas tuu..

2. tulis la apa2 dkt ruangan edit page tu..

3.kalau da siap..tekan Publish Page..

4.pastu dia akan bagi 3 bahagian kan..macam dlm gmbr ni

korang tekan NO GADGET.. jangan tekan yg lain..tekan no gadget..

lepas dah tekan no gadget..tekan save and publish..lepas tu akan pergi ke (mcm dalam gmbr)

tekan view page..kemudian korang amik link page tuu..link yg atas tu..mcm dalam gmbr

ok paham kan..ok korang jgn buang page tu..

korang pergi

Dashboard>design>Add Gadget>Html Javascript

then copy code bawah ni and paste dekat ruangan html.javascript

<a href="LINK KORNG""><img src="URL GMBA KORNG" /></a>

LINK KORANG: Korang letak URL page mcm dlm gmbr atas tuu..

URL IMAGE: tukar dengan url gmbr la..mcm aku punya..tpi kalau korang nak guna icon..boleh2...

kat bawah ni aku bagi sikit url gmbr..kalau buruk buat la sendiri...oh yee, kalau korang nak ada banyak tab menu, korang tambah je kod atas ni..

contoh:

<a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a><a href="LINK KORNG""><img src="URL GMBA KORNG" /></a>

paham ?..ok nah freebies die

korang tekan right click..tekan copy image url..ok paham..kalau x paham baca banyak kali..kalau paham buat..kalau xtahu baca tuto orng lain..haha ok...

credit by Des Fleurs Amour

Tutorial : Tambah Comment Di Blogskin

Tambah Comment Di BlogskinHy3!!...Putri nk ajar  

cara mcm mane nak tambah Comment Di Blogskin. huhuhuhu.

. korang ikut je step di bawah ye 

Dashboard >> Template

Cari code di bawah :

</Blogger> 

Kalau dah jumpa, Copy n pastekan code ni di ATAS code tadi :

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;"><$BlogItemCommentCount$> comment(s) <img src="URL ICON ANDA"/></a></BlogItemCommentsEnabled>

Biru : Blog ID Korang

Merah: Ayat Korang

Coklat : Url ICon Di Sebelah Comment

PREVIEW & SAVE TEMPLATE CHANGES

Credit by : nurin

k~la Babai   Happy Blogging

Tukarkan Home, Older + Newer Post kepada Icon Comel

 

1. Log in > Dashboard > Design > Edit Html

2. Kemudian tick pada Expand Widget Templates .

3. Then , tekan Ctrl + F and cari perkataan :

<data:newerPageTitle/>

4. Tukarkan kod diatas ni dengan kod ni :

  <img src="http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png"/>

 * Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) Itu Lyssa kasi contoh je ^^

5. Then , Tekan Ctrl + F lagi sekali dan cari perkataan :

<data:olderPageTitle/>

6. Gantikan kod di atas dengan :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

  * Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) Itu Lyssa kasi contoh je ^^ 

7. Last sekali , untuk buttom home pulak , korang cari : 

expr:href='data:blog.homepageUrl'><data:homeMsg/>

8. Gantikan kod yang berwarna merah tu dengan kod di bawah :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png'/>

  Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) Itu Lyssa kasi contoh je ^^

9. If sudah siap , korang try preview dulu taw. kot2 lah tak jadi ke , susah pulak kang .! HAHA!

  If dah belek and menjadi , terus je SAVE :)

Credit Lyssa Faizureen

Tutorial : Cara Letak Comment Platform

 

Assalam..hari Putri nk share satu tutorial untuk blogskin..untuk spe2 yg guna blogskin tu bleh tngk ye... tutorialnye ialah comment platform. korang tau tak bntuk comment platform?.Kalau tak tau bentuk comment platform tu macam mana tengok gmbar kat bawah ni..

kalau nak buat comment platform kena ader cara-caranye...kita tngok step2 dibawah tu. 

1. Setting > Comment > Tick embedded below the post

2. Then , kalau dah korg pergi kat template korg , pastu cari perkataan kat bawah ni

  </style>

3. Kalau dah jumpa korg copy code kat bawah ni pastu pastekan sebelum code </style> 

/* Comments----------------------------------------------- */#comments h4 {margin:1.8em 0; font-size:10px; text-transform:uppercase; color: #FFFFFF; line-height:10px; border-bottom: 2px solid #dedede; background:#F7819F ; font-weight:normal;}#comments h4 strong {font-size:8pt smiley monster;}#comments-block {background: ; font:normal 8pt arial; line-height:1.2em; padding:4px;}#comments-block dt { margin:.5em 0;}#comments-block dd { margin:.25em 0 0;}#comments-block dd.comment-timestamp {margin:-.25em 0 2em; font:5pt tahoma; text-align:right; text-transform:normal; letter-spacing:.0em;}#comments-block dd p {margin:0 0 .75em; padding:4px; background:#fff1f3; border:2px solid #dedede; border-radius:2px;}.deleted-comment { font-style:italic; color:black;}.paging-control-container { float: right; margin: 0px 0px 0px 0px; font-size: 80%;}.unneeded-paging-control { visibility: hidden;}

4. Dah kan pastu korg cari plak code <$BlogItemBody$>

5. Dah jumpa kan , korg gantikan code tu dgn code kat bawah ni.

<$BlogItemBody$>
> <$BlogItemCommentCount$>comment (s) | >Jom comment (s)

6. Kalau ada dua code   <$BlogItemBody$>  korang gantikan dua dua sekali. okay..tu jela...klau korang bt tak jadi, cuba buat lagi...sampai menjadi..hehehe.

Credit To  Aina

JQuezy Top Button

Assalamualaikum...sy nak share tutorial untuk awk semua...iaitu scroll top button...awk semua tahu tak apa tu scroll top tu button..nk tahu awk cuba bt dulu ok...Let's do it.

1. Dashbord > Design > Edit HTML
2. CTRL + F search kod

</body>

 3. Copy kod kat bawah ni. Kemudian, pastekan dibawah kod </body> tadi..

<a href='#' id='toTop'><img src='URL IMAGE TOP BUTTON?t=1292762029' style='border:0;'/></a>

4. Ehhhh. If Previeww, Memang la tak naik lagi. Korang CTRL + F search kod ini pulak

 ]]></b:skin> 

5. Pastekan kod ini DIATAS/SEBELUM  ]]></b:skin>.

/* to top */

#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; } 

 

Kalau gamabr korang terpotong/tak nampak semua, Tukarkan 100px tu ok?

6. This is LAST STEP. CTRL+F Search kod ini pulak 

7.Pastekan kod ini diatas kod </head> tadi

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*----------------------- 

* jQuery Plugin: Scroll to Top 

* by Craig Wilson, Ph.Creative (http://www.ph-creative.com) 

* Bring to you by Zen from http://zenplate.blogspot.com 

* Copyright (c) 2009 Ph.Creative Ltd. 

* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. 

* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx 

* Do not delete these infomation 

* Version: 1.0, 12/03/2009 

-----------------------*/ 

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); 

$(function() { 

$("#toTop").scrollToTop(); 

}); 

</script> 

8. Preview dulu, Kemudian..SAVE TEMPLATE

credit faqihah husni