Clean your messy desktop!

Hey y'all~! I've got good tips for ya~!!

Does your PC or Lappy desktop messy like this??

=A=||| errrk~!!??

Well, fear no more!!!! You can clean your desktop from that to THIS!!

Creative, right? =D This is my desktop =) Try out now~!!

You can take this picture below for your desktop wallpaper! =)
Or Google search "Office Wallpaper"
Have fun!!

Credits to : Nizarazu

Thanks for your time reading my blog.^^

Sorry for no post at this moment

Sorry for no post at this moment ^^"

Hello, everyone. I would like to apologize for no post this lately.
I have to finish update my blogshop before I'll further my study in the city.
If I'm not mistaken, this September. 


I'm also bz cooking for fasting season and more other activities.
=o= (What?? Memey cooks?)
Eeaayup~! =) Oh!!

I would like to wish all Muslim friends, families and my blogshops' customers.
Salam Ramadhan Al-Mubarak~

Make sure you set your record to have a full fasting this time! =)

I will keep up to date A.S.A.P. 

Do visit my blogshops, too.

For contact lens' lovers - ~Purplelicious Passion~ Online Shop
For bags, accessories, clothings etc - ~Lavender Love~ Online Shop
See you soon~ =D

Thanks for your time reading my blog.^^

Tutorial : How to share your "Grab Me Button"

Hello, everyone~ I would like to share with you today is how to share your 

"Grab Me Button"

What is "Grab Me Button" you ask?

This button will help you increase your sale rate (if you open a blogshop) by spread your blogshop or increase more readers of your blogs to any bloggers who visit you =)

They just copy the link and paste at their blog, so whenever there's bloggers who visit their blogs,  they will saw your interesting button, then click! They'll go visit your blog! =D

It's easy as ABC!!

FIRST!

Create your own button first!

If you've already made one, that's good! If you're not, then I'll just show you the simple one.

 If you didn't like the simple logo, you can just photoshop your own button to your creativity. 

Go HERE to create one!

After you've created to your desire, click CREATE LOGO

It'll show you the result of your logo, then click DOWNLOAD IMAGE

Upload your download image and get the URL.

NEXT!!

The moment you've been waiting for, COPY THE CODE! xP 

COPY START HERE

-------------------------------------------------------------

<br/><center><div dir="ltr" style="text-align: center;" trbidi="on">

<a href="WEBSITE LINK"><img alt="" src="IMAGE LINK" title="CAPTION HERE (will appear when mouse hover)" /></a></div></center><br/>

<center><input type="text" onclick="this.focus();this.select()" readonly value="&lt;a WEBSITE LINK&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;IMAGE LINK&quot; title=&quot; CAPTION HERE &quot; /&gt;&lt;/a&gt;" />

</center>

-------------------------------------------------------------

END HERE

As usual,

YOUR WEBSITE LINK - So that, when the visitors click your button, they will directly to your website

IMAGE LINK - your uploaded image LINK of your LOGO/BUTTON/BADGE 

CAPTION HERE - this will appear when you mouse over the button (HOVER) on the image before you click the image.

AFTER THAT,

Go to your Blogger

Then to Design Tab (the red circle)

Then to Layout

Add GADGET

Then choose HTML/JavaScript

And thats it! Paste your code on HTML/Javascript.

You can look a sample at my blogshop

Good luck! Hope you got it!
Thank you for your time reading my blog^^

Busy.. busy.. busy...

-Hello, everyone!
Sorry not a post about tutorial today..
Been busy promoting my blogshops.. So please do visit them^^
You can look at them on My Links at the sidebar on your right~~ =)
If you can't find it; then I'll give you here..
Contact Lens Shop --> ~Purplelicious Passion~ Online Shop
Clothings, Bags, etc --> ~ Lavender Love~ Online Shop

Now I'm currently searching for the best drop-down menu for my blogshop!

Fortunately, I've made 2 drop-down menus for one of my blogshop..

Sadly, for me, I'm in dilemma in between choosing between those two!!! >.<

If you look at my blog, it's a bit messy.. Sorry about that.. >.<
If you read this 2 or 3 years after the post date, then my blog probably different than before..
Anyway..

You can leave a comment below on which Tab you like~
The most like, I'll put it as my Tab Menu on my blogshop^^

These drop-down menus, I was going to put it on  ~Purplelicious Passion~ Online Shop
So, which one is the best?? =D

Dropdown Menu 1

Dropdown Menu 2

So, leave me a comment on which one you like ^^
I'll put up the tutorial for both dropdown menus soon~~ =)

Thank you for reading my blog =D

Tutorial : Breadcrumbs Navigation for Blogger

Hi, everyone! Today I would like to show you,
how to make breadcrumbs!

Nope, not this BREADCRUMBS =x=

This breadcrumbs~

What is 'breadcrumbs' you ask?
Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (You're HERE : Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.

The tutorial a bit tricky for newbie, but I'll try my best to show you step by step slowly~~

So, Let's Start!

First!

Go to your Blogger

Then to Design Tab (the red circle)

Then to Template

Then Edit HTML

*be sure to copy your template for precaution!



1. The first thing you need to do, find this highlight code;

<b:includable id='main' var='top'>

Found it? Okay! Copy the code below and paste it above the highlight code! 

Like so~~

COPY START HERE

----------------------------------------------------------------

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->

<b:if cond='data:blog.pageType == "item"'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:post.labels'>

You are here:

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>

</b:if>

</b:loop>

<b:if cond='data:post.title'>

&gt; <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>

<!-- End of Breadcrums Hack -->

</b:includable>

----------------------------------------------------------------

END HERE

* This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, DELETE THE HIGHLIGHT CODE

So, it'll look like this,

BEFORE DELETE  HIGHLIGHT CODE

AFTER DELETE  HIGHLIGHT CODE

NEXT,

2. Find this HIGHLIGHT code

<b:if cond='data:post.dateHeader'>

Then add the CODE BELOW above those HIGHLIGHT CODE

COPY START HERE

---------------------------------------------------------

<b:include data='post' name='breadcrumbs'/>

---------------------------------------------------------

END HERE

Like so, 

Next,

3.  Find this HIGHLIGHT CODE

]]></b:skin>

Then paste the code below above the HIGHLIGHT CODE

COPY START HERE

---------------------------------------------------------

.breadcrumbs {

border-bottom:1px dotted #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}

---------------------------------------------------------

END HERE

Like This,

(Feel free to modify the first & third parameters of the last two lines (in bold) to expand/shorten the top & bottom heights.)

And DONE! Save it!!

Thank you for your time to read my blog^^

I hope you get it! Gudluck~~ ^_~



cr : hoctrointro.blogspot.com & Helperblogger.com

Tutorial : Image Slider for Blogger II

Hello, everyone. Okay, this one I'm gonna tell you how to change the slider's

the border color

the ribbon

the caption font
the shadow box color behind caption

You see what I've changed my slider? =D

BEFORE

AFTER

So, LET'S START!
Here's how you do it!!


STEP 1 : The Ribbon

Open your LAST HTML/Javascript 
WHERE U INPUT IMAGE SLIDER BLOGGER CODE

Go to this PART of the CODE or CTRL+F (the word I bold)
----------------------------------------------------------------------------------

#ribbon {

width: 111px;

height: 111px;

position: absolute;

top: -4px;

left: -4px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVknrJTyHPfhRWenVpvOhpXxEM2aBZnddFeBk3b0sxICKcT9KDPF94L1qoocRxhs0L1VeUVoUCIysRc0_WJwZ0WiEqK_IfDyzTpULjb0uPyhlhdgWNQAEs5I33wT6gm5cgjrA6eWx2Npc/s1600/helperblogger.com-ribbon.png) no-repeat;

z-index: 7;

}

------------------------------------------------------------------------------
REPLACE the HIGHLIGHT words with your own image URL,
u either google the ribbon or edit your own.

I edit my own. Then I changed it.

From this ---> 

Since my blogshop in PURPLE color, I google the purple corner ribbon  and edit it ^^

The picture size is 109x109 pixels for that code, so make sure it'll fit perfectly!

Done for the ribbon! NEXT!




STEP 2 : The border/The Frame


Go to this PART of the CODE  or CTRL+F (the word I bold)
------------------------------------------------------------------------

#sliderFrame {

position: relative;

width: 500px;

margin: 0 auto;

border:5px solid #000;

}

------------------------------------------------------------------------------

You change the HIGHLIGHT word to any colors you want!
Go here to get the HTML COLOR CODE

I choose #611745 for my border colour =)

Next!



Step 3 : The Caption Font & Shadow Box

 
Go to this PART of the CODE
-------------------------------------------------------------------------------------

div.mc-caption-bg {

background-color: black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color: #EEE;

z-index: 4;

padding: 10px 0;

text-align: center;

}

--------------------------------------------------------------------------

Caption background-color aka the shadow box HERE

The font Size & Style HERE

Font Color HERE


And THAT'S IT!

Save then YOU'RE DONE! =)


Thanks for your time reading my blog. =D

Tutorial : Image Slider For Blogger I

Hello, everyone. I got a good thing for you!
I'm now trying to update my blogshop into more interesting this lately.
For hours, I've searched for the best slider for my blogshop. Then, EUREKA! I found it!!

And now I would like to share with you guys!^^

It will look like this~~

Or, you want to look at it live, go to my blogshop HERE
or HERE


Isn't it exciting?! =D

Now, let's get start it!!


FIRST!

Go to your Blogger

Then to Design Tab (the red circle)

Then to Layout

Click on Add a Gadget

Choose HTML/Javascript

Then Copy And PASTE the Code Below!

COPY START HERE

------------------------------------------------------

<style type="text/css">

/* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVknrJTyHPfhRWenVpvOhpXxEM2aBZnddFeBk3b0sxICKcT9KDPF94L1qoocRxhs0L1VeUVoUCIysRc0_WJwZ0WiEqK_IfDyzTpULjb0uPyhlhdgWNQAEs5I33wT6gm5cgjrA6eWx2Npc/s1600/helperblogger.com-ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUN92mPKWgTx3rtHVqrWius7N-WBdjSV-NXwDNj-VPVZBuLFIr-Rj2pA0OCy3NXnXFQprUyLBC26-ideA2HkrGGKD27wyF6K_ewsoV3oZ2wi5r6rdoq8Rj7HfzskMkDXxD-rA3tstAQUU/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNz77wS3IdqL68uf2TrAT2lnzZfu-JNHNKtzhKDd4ZJ9nqeRWop72VDth4CzxwQzKNNdZBMUzl_kbniC003N5BII96xwyMZSkqt5ZIgzfrnx_ylAdJ11IRBdjvRv1me3vdEK6T2eVddIg/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Caption Here"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Here"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="Insert Caption"/></a>
</div></div>

------------------------------------------------------
ENDS HERE

I know you're curious about the highlight words.

Let me explain for ya! ;)

IMPORTANT : Before adding images to slider, resize all of them to same size. HOW?

#slider {

width: 500px;

height: 218px;

 As you look at the size of the slider [LIKE THIS part of code ABOVE], Make the picture this SIZE!



RECOMMENDATION: I suggest you didn't change the slider width & height, or it'll turn UGLY!
Trust me, I'VE BEEN THAT =.=


Color code info:

Width Slider
Set the width of slider according to your image width also use the images of same width and same heights.

Height Slider
Set the height of slider according to images height also use images of same width and height.

Your URL/website link
If you want to add any link to image then replace # with your own image URL.

Image URL
 Replace all highlighted image URL's with your own images URL.

Image Caption
 Here you can add your image caption.


Make sure you
Grab your HTML/Javascript widget and put it under your Header

SAVE, THAT'S IT!

=)


If you want to add more pictures in your slider, just copy and paste this code

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Caption Here"/></a>


Don't worry with the bullet button below slider, it will automatically available as you add on.
Ok? =)


Yeah!
Thank you for your time to read my blog^^
Good Luck~

My next post is on how to change the slider color! =)

cr : Helper For Blogger