Opzzpinky | Lifestyle Blogger: Tutorial

Showing posts with label Tutorial. Show all posts

May 31, 2013

Cara jarakkan Post dalam blog

sHaRiNa eLyaNa May 31, 2013 4 Comments

contoh post yang masih bercantum

Assalamualaikum petang ini sha nak bagi tutorial dengan hasil carian sha sendiri, sebab waktu sha edit blog mama mia, post pada blognya bercantum, ianya sangat tidak sesuai..so akhirnya sha dapat selesaikan dengan memeriksa satu persatu kod tersebut

Tutorial

I. Dashboard > Template > Edit HTML > tick button hitam no 7

II. Ctrl + F ---> Post

III. Copy dan paste kan --> margin-top: 20px;

seperti gambar dibawah

IV. Preview dan save

contoh post yang telah dijarakkan

#sila creditkan tutorial ini kepada sha kalau korang nak buat entry tutorial baru kerana ini adalah hasil carian sha sendiri :) terima kasih..

May 26, 2013

Cara Kembalikan Widget FOLLOWER

sHaRiNa eLyaNa May 26, 2013 2 Comments

Assalamualaikum

Ada blogger yang kehilangan widget penting ini semasa edit new template..aah tak dapat dinafikan memang cemas !! apatah lagi benda sepenting ini hilang..walaupun dapat digantikan dengan widget yang menggunakan BUTTON FOLLOW tapi ada keburukannya..

So dengan hasil selidik sha, sebab pernah kehilangan widget ini, sha dapat selesaikannya..meh nak ajar sat :)

TUTORIAL

I. Dashboard > Template > Edit HTML > Tick anak panah hitam tu

II. Cari code <div id='sidebar-wrapper'>

III. Copy

<b:widget id='Followers1' locked='false' title='Friends' type='Followers'/>

#paste kan bawah code yang korang cari tu

IV. preview dan save

sha kaji menggunakan template denim, template lain kurang pasti berkesan atau tidak..so selamat mencuba ya :)

May 21, 2013

Freebies Gabungan Header - Template Meiko

sHaRiNa eLyaNa May 21, 2013 4 Comments

Assalamualaikum
alhamdulilah template meiko [ini] mendapat sambutan ramai..terima kasih pada yang dah guna template ini..cumanya nak bagi freebies gabungan header sebab tak semua yang nak guna kepala meiko itu..sob..sob hihi..bukan korang mestila nak header sendiri kan..
semacam header di atas [curik sebentar ya cik ina] sambungan header tiada dan nampak lain ja kan..so entry ini akan membantu insyallah :)

TUTORIAL

I. Save image freebies II. Buka Photoshop, Gabungkan header kamu dengan freebies sampai freebies tu di hujung kotak..

-contoh-

III. Save dan letakkan header di HTML Ctrl + F = http://i.imgur.com/35IlDUh.png dan gantikan url header korang :)
#selamat mencuba..kalau tak faham boleh komen ya :)

May 10, 2013

Cara nak buat Header berMENU

sHaRiNa eLyaNa May 10, 2013 3 Comments

Assalamualaikum hye semua..hari ini sha free sangat nak kongsikan dengan korang cara nak buat header berMENU macam sha punya header tu..kelebihan..tak semak kan..kan..hihi Tutorial
Copy kod ini dan letakkan pada atas header

<script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <div style='padding-left:0px; position: absolute; z-index: 300; margin-left:703px;margin-top: 200px; background:#;'title='TAJUK MENU'> <a href="LINK PAGE" title=""><img src="MENU BERGAMBAR" title="" alt="" /></a> </div>

NOTE : pastikan kod yang telah di Bold kan diubah termasuklah saiz menu bergambar..ubah sampai betul2 tepat di header korang Jika link menu lebih dari 1, sila copy kod diatas dan paste kan sama seperti tadi.. Freebies MENU
bagi korang yang nak kan menu bergambar dari sha..kot2 korang malas nak buat..jangan risau sha ada buat :) tapi warna pink..kalau korang tak kisah dan ngam dihati ambil lah

Freebies Tapak MENU

ini antara tapak yang korang kena masukkan dalam header..tak nak tapak pun tak apa..just letak cmtu ja..yang ni sha bagi FREE..berkenan ambil lah :)

Freebies HEADER berMENU

dan akhir sekali..sha dah buatkan header 1000x300..kot2 korang nak tukar header baru..boleh try yang ni..agak pink sikit..haha..

http://i.imgur.com/bba8VoJ.png

-CARA NAK LETAKKAN HEADER-

kalau ada kemusykilan PM ya..kot2 sha boleh bantu..insyallah :) selamat mencantikkan blog dengan usaha sendiri..dah~

February 28, 2013

Cara Masukkan FB Fan Page ke dalam sidebar

sHaRiNa eLyaNa February 28, 2013 1 Comments

Assalamualaikum
kita terus kepada tutorial ya..sebab semua dah tau rupa bentuk FB pan page kan??
Tutorial

1. Go to --> Link

2. copy url FB Fan Page korang dan paste pada tempat kosong tu..

#Saiz : adjust kat width dan height (mengikut kelebaran sidebar korang)

#Design : tick lah mana yang patut..

3. dah puas hati..klik GET CODE

4. klik IFRAME dan copy code

5. paste pada sidebar korang..

dah siap !! selamat mencuba ya...

February 27, 2013

Cara tukar home,newer dan older kepada gambar

sHaRiNa eLyaNa February 27, 2013 10 Comments

Assalamualaikum
yang atas tu sha punya la..haha..but jangan risau sha ada buat freebies lagi cute dari tu..sebelum tu meh sha ajarkan cara nak tukar home, newer dan older..
Tutorial

Dashboard > Template > HTML >tick cari kod di bawah ini

<span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></</a> </span> </b:if>
<b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

gantikan yang color merah dengan kod di bawah ya

<img src='url gambar'/>

#ambik dekat freebies dibawah ini ya done !! preview dan save :)

Freebies

maaf hanya 2 warna ja sha buat..nak amik klik kanan dan copy url image ya..

dah amik..sila komen :) nak tengok cantik ka tidak design sha ni hikhik..

February 23, 2013

Cara nak letakkan Button dan button Hover

sHaRiNa eLyaNa February 23, 2013 2 Comments

contohnya halakan cursor kat button..akan keluar button yang lain

faham tak?

or korang boleh try hover cursor kat sini (mesti keluar bunga punya :)

Assalamualaikum Tutorial Dashboard > Template > Edit HTML > Tick cari kod /* Content copy kod

li { list-style-image:url(url button) ; } li:hover { list-style-image:url(url button); }

#freebies icon comel letakkan kat bawah sekali contoh kat bawah ni pastikan sebelum /*header

dah jadik?? wahhh..jom komen :) deabak !!

February 13, 2013

Cara gabungkan widget yang guna kod

sHaRiNa eLyaNa February 13, 2013 6 Comments

Assalamualaikum kalau tadi sha buat tutorial tentang ini..so tutorial kali ini part 2 :) simple dan ianya sama jimatkan sidebar.. Tutorial

Dashboard > Layout > Add gadget > HTML copy kod ini

h5 {

font-family: trebuchet-ms, arial, tahoma;

font-size: 12px;

padding: 0 0 1em;

font-weight:bold;

color: #ffffff;

}

.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 2px 6px;

cursor: pointer;

position: relative;

background-color:#FAAFBA;

margin:1px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#FFFFFF;

}

</style>

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

</script>

<h5 class="msg_head">Tajuk 1</h5>

Text 1

</div>

<h5 class="msg_head">Tajuk 2</h5>

Text 2

</div>

<h5 class="msg_head">Tajuk 3</h5>

text 3

</div>

<br />

Notice Board

boleh edit kat sini
paste kan dan save :)
memandangkan sha suka pink..jadi semua tutorial backgground sha semua pink hihi..so..gud luck korang :)

Cara gabungkan widget bloglist

sHaRiNa eLyaNa February 13, 2013 8 Comments

Assalamualaikum
cara ini senang buat korang2 yang terlalu banyak sangat bloglist widget..means boleh jimatkan ruang sidebar..kan..kan..kan..
Tutorial

Dashboard > Layout > Add gadget > Bloglist copy kod ini

<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>

Credit: Ini
paste kannya..kemudian save
dan aturan pada layout akan jadi macam dibawah ini

tunggu beberapa minit kemudian save..dan jika tidak berhasil jangan buang kod tadi..tunggu sampai ianya bertukar ya..sabar..hihih gud luck tau :)

February 11, 2013

Freebies Code Denim - Mine design !!

sHaRiNa eLyaNa February 11, 2013 14 Comments

Assalamualaikum kalau korang ingatlah kan..sha pernah janji nak share pasal code Denim di entry ini kan? setelah sha edit template tu akhirnya jadilah dia seperti bawah ni..

means kod tu tak lah susah mana kalau korang nak edit balik..kan..kan.. sidebar, title post, post footer, layout border..itu ja yang sha mampu buat hehe..selebihnya korang yang edit mengikut kretiviti masing2..siapa peminat pink boleh copy laju code bawah ni :)

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Denim Designer: Sharina Elyana Url : www.opzzpinky.my Date: 11 Feb 2013 ----------------------------------------------- */
/* Variable definitions ==================== <Variable name="bgColor" description="Page Background Color" type="color" default="#efefef" value="#efefef"> <Variable name="textColor" description="Text Color" type="color" default="#333333" value="#333333"> <Variable name="linkColor" description="Link Color" type="color" default="#336699" value="#336699">
<Variable name="headerBgColor" description="Page Header Background Color" type="color" default="transparent" value="transparent"> <Variable name="headerTextColor" description="Page Header Text Color" type="color" default="transparent" value="transparent"> <Variable name="headerCornersColor" description="Page Header Corners Color" type="color" default="transparent" value="transparent">
<Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#ffffff"> <Variable name="borderColor" description="Border Color" type="color" default="#cccccc" value="#cccccc"> <Variable name="dateHeaderColor" description="Date Header Color" type="color" default="#999999" value="#999999">
<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color" type="color" default="#ffd595" value="#ffd595"> <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color" type="color" default="#333333" value="#333333">
<Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;"> <Variable name="headerFont" description="Page Header Font" type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" value="left"> <Variable name="endSide" description="End side in blog language" type="automatic" default="right" value="right"> */
body { text-align: center; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUbEUWrg-ib4Eyi8rhp3BKoQLw_yBEXnfrSapioKlZPiyghOJkf5o3SaOvuYhl33ihgO2oLYytVujIX8bOX70ZKnHCrIKmyksBdAM1e8VVoVVUPYpez2zvWGFxPFp64eONNmeVniqntjw/s1600/tpolkadotorange.gif); color: black; font-size:14px; font-family: 'Elsie Swash Caps', cursive; letter-spacing: 1px; }
a:link { color: $linkColor; } a:visited { color: $linkColor; } a img { border-width: 0; }
#outer-wrapper { font: $bodyFont; }
/* Header ----------------------------------------------- */ #header-wrapper { margin:0; padding: 0; background-color: $headerCornersColor; text-align: $startSide; }
#header { width: 1000px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; }
h1.title { padding-top: 38px; margin: 0 14px .1em; line-height: 1.2em; font-size: 100%; }
h1.title a, h1.title a:visited { color: $headerTextColor; text-decoration: none; }
#header .description { display: block; margin: 0 14px; padding: 0 0 40px; line-height: 1.4em; font-size: 50%; }    /* Content ----------------------------------------------- */
.clear { clear: both; }
#content-wrapper { width: 960px; margin:0 auto; padding:20px; text-align:left; font: normal normal 99% Verdana, sans-serif; background:url(http://i.imgur.com/eLgZ2es.png); border-top-left-radius: 25px 25px; border-top-right-radius: 25px 25px; border-bottom-left-radius: 25px 25px; border-bottom-right-radius: 25px 25px; }
#main-wrapper { width: 600px; margin-left: 0px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 300px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
/* Headings ----------------------------------------------- */ h2, h3 { margin: 0; }
/* Posts ----------------------------------------------- */ .date-header { margin: 1.5em 0 0; font-weight: normal; color: $dateHeaderColor; font-size: 100%; } .post { margin: 0 0 1.5em; padding-bottom: 1.5em; } .post-title { margin: 1.6em 0 .5em; padding: 4px 5px; background-color: #F781BE; font-size: 100%; border : dotted 1px #000; }
.post-title a, .post-title a:visited, .post-title strong { text-decoration: none; color: $textColor; font-weight: bold; } .post div { margin: 0 0 .75em; line-height: 1.3em; }
.post-footer { background-color : pink; text-align: center; border:2px dotted #D358F7; color:#000000; font:verdana; font-size:12px; font-weight:bold; margin:0.75em 0; }
.post-footer .span { margin-$endSide: .3em; }
.post img, table.tr-caption-container { padding: 4px; border: 0px solid $borderColor; } .tr-caption-container img { border: none; padding: 0; } .post blockquote { margin: 1em 20px; } .post blockquote p { margin: .75em 0; }
/* Comments ----------------------------------------------- */ #comments h4 { margin: 1em 0; color: $dateHeaderColor; } #comments h4 strong { font-size: 110%; } #comments-block { margin: 1em 0 1.5em; line-height: 1.3em; } #comments-block dt { margin: .5em 0; } #comments-block dd { margin: .25em 0 0; } #comments-block dd.comment-footer { margin: -.25em 0 2em; line-height: 1.4em; font-size: 78%; } #comments-block dd p { margin: 0 0 .75em; }
.deleted-comment { font-style:italic; color:gray; }
.feed-links { clear: both; line-height: 2.5em; }
#blog-pager-newer-link { float: $startSide; }
#blog-pager-older-link { float: $endSide; }
#blog-pager { text-align: center; }
/* Sidebar Content ----------------------------------------------- */ .sidebar h2 { margin: 1.6em 0 .5em; padding: 4px 5px; background-color: #F781BE; font-size: 100%; border : dotted 1px #000; }    .sidebar ul { margin: 0; padding: 0; list-style: none; } .sidebar li { margin: 0; padding-top: 0; padding-$endSide: 0; padding-bottom: .5em; padding-$startSide: 15px; text-indent: -15px; line-height: 1.5em; } .sidebar { color: $textColor; line-height:1.3em; } .sidebar .widget { margin-bottom: 1em; }
.sidebar .widget-content { margin: 0 5px; }
/* Profile ----------------------------------------------- */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; padding: 4px; border: 0px solid $borderColor; }
.profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font-weight: bold; line-height: 1.6em; font-size: 78%; }
.profile-datablock { margin:.5em 0 .5em; }
.profile-textblock { margin: 0.5em 0; line-height: 1.6em; }
   /* Footer ----------------------------------------------- */ #footer { clear: both; text-align: center; color: $textColor; }
#footer .widget { margin:.5em; padding-top: 20px; font-size: 85%; line-height: 1.5em; text-align: $startSide; } ]]></b:skin> </head>
<body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section>
<div id='outer-wrapper'><div id='wrap2'>
 <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span>
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='haniszakirahdanfaqihahhusni (Header)' type='Header'/> </b:section> </div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'/> </div>
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='Attribution1' locked='false' title='' type='Attribution'/> </b:section> </div>
 <div class='clear'> </div>
</div> 
<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
</div></div>  <b:include data='blog' name='google-analytics'/> </body> </html>

cara nak masukkan ke dalam blog

sebelum mula, korang dinasihatkan untuk backup template asal..takut ada kesalahan atau xberkenan nanti blog jadi buruk jangan salahkan sha ya hihi..

Dashboard > Template > Edit HTML > Tick
Copy code Denim
dan paste pada ruangan template
dah siap edit korang klik button save dan keep widget tengok gambar di bawah

dah siap !! now korang sendiri pun dah boleh edit blog..wah tahniah !! meh rajin2 peningkan kepala dengan HTML hihih..gud luck ya..

January 15, 2013

Cara nak letakkan top Commentators by monthly

sHaRiNa eLyaNa January 15, 2013 7 Comments

mereka yang awesome pada january ini..thankssss

ok kalau nak top Commentators widget yang ada avatar korang boleh rujuk SINI, kali ini pula tutorial cara nak letakkan top Commentators secara bulanan, ianya memudahkan blogger yang buat award top Commentators blog dia untuk setiap bulan.. Cara nak Letakkan

Dashboard > Layout > Add Gadget Copy

<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">{"pipe_id":"e4754fbed79eb700e2b80adf7541c447","_btype":"list","pipe_params":{"ExcludedNick":"Nama korang","BlogUrl":"url blog korang","RangeD":"30","NoTopCommentators":"5"},"hideHeader":true}</script>

#Bold : tukarkan seperti yang dinyatakan, 30 - untuk bulanan, kalau nak 7 hari pun boleh :) 5 - untuk nombor top commentators Kemudian paste dan save !! # dah siap !! thanks korang sebab singgah dan bagi komen..insyallah sha free nanti sha balas lagi ya :)