Tuesday, May 28, 2013

Hiatus | Wechat | LiNe

Large

こんにちは, 안녕하세요 , Assalamualaikum. 

Pehhhh!! dah 2 minggu atin tak bukak blog.... sorry la semua ye... aiii maklumlah atin kan pakai brodband. Kan memang terlalu lembab. So about kpop pun atin tak tau siapa yang dah comeback .. ahhh serius atin ni dah bosan kot hmmm...


Btw. thanks ye pada awak, awak and awak yang sudi meng-tag atin nak join ape2 givway . Tapi sorry banget-banget , atin tak dapat nak join maybe atin macam dah kene banyak hiatus la kot huhu. Minggu lepas atin p Kl jab , nak shoping ngn family n jumpe kawan lama huhu;


Ohh ye. Untung la adik-adik dah cuti 2 minggu.. haha, atn pulak yang jeles huhu. Ohh ye atin maybe dah jarang nak on blog dengan tutorial ni . So atin minta maaf pd siapa yang req tu ..So atin ada cara nak jumpe dengan korang.. cehhh hahaha


Pada sesiapa yang pakai phone yang canggih2 tu meh ahh add atin . pasal atin un baru je app ni..

Photo: add atin kat wechat k huhu

Korang boleh borak2 atin kat Wechat.,,, atin un xde kawan nak borak.. so klo ade masalh tutorial ke req bole hubungi atin kat wechat .. ID "atinfatin95" . Jangan lupe ye..


Atin juga baru je app dengan LINE huhu.. So boleh la add atin kat LINE ..  ID "atinfatin95" 

Photo: LINE pulak huhu.. 
ID : atinfatin95
Jgn lupr add k

Thursday, May 16, 2013

Tutorial : Floating Navigate #3

524673_498213020226861_1401975183_n_large

こんにちは, 안녕하세요 , Assalamualaikum.

Horay~ >_< dah lama tak buat tutorial LOL >_< Ok-ok , atin tengah rajin sangat nak update jadi? jom la tengok tutorial kali ni punye pasal navigate huhu. Boleh tengok example bawah ni . Kalau tak kompm boleh click preview ok hehe ^^.  btw sorry yg font tu x nmpak


BLOGSKIN

 Dashboard > Template > Edit HTML
 Tekan Ctrl + f serentak , Cari code <head>
 Copy code kat bawah ni
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'/>
 Paste kat bawah code <head> .
 Next, Ctrl + f serentak , cari code </style> pula
 Copy code bawah ni


 Paste Paste kat bawah code </style>
 Preview and Save.




Template designer 

 Dashboard > Design > Add a Gadget > Html
 Copy code kat bawah ni

 Pastekan code tu dalam Html
 Preview and Save.
*Code http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png tukar kpd URL image korang
*LINKHERE : Letak link korang

Tuesday, May 14, 2013

Freebies : Background Part 49


こんにちは, 안녕하세요 , Assalamualaikum. 

Huhu dah satu bulan tak bagi background.. so hari ni nak bagi lah huhu..

http://i.imgur.com/D1QE52v.gif

http://i.imgur.com/Tyc7bjB.gif

http://i.imgur.com/8X83KVK.gif

http://i.imgur.com/03BjEW5.gif

http://i.imgur.com/VrBsoMk.gif

http://i.imgur.com/8nohFSl.gif


http://i.imgur.com/lJORjdb.gif

http://i.imgur.com/BqbV2Mp.gif

http://i.imgur.com/JKdhdtM.gif

http://i.imgur.com/xsOpDAg.gif

http://i.imgur.com/GEynXfU.gif

http://i.imgur.com/W6L4KEp.gif

http://i.imgur.com/G5PCUc2.gif

http://i.imgur.com/AspLLeO.gif

http://i.imgur.com/onEeC75.gif

http://i.imgur.com/lEHC4Al.gif

http://i.imgur.com/fKstXU5.gif


http://i.imgur.com/zbpvvm3.gif

Saturday, May 4, 2013

Tutorial : Navigate Hover #11

Large


こんにちは, 안녕하세요 , Assalamualaikum.

Ppuing Ppuing!! LOL huhu. Ok2 atin tak nak buat masa dengar ceramah atin hihi. Atin nak bagi korang tengok tutorial navigate untuk hover terbaru dan terkini? haha . Cer korang tengok preview bawah ni.. kalau tak perasan boleh click live preview ye..



  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>


<style>
@font-face {
font-family:tt;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.menul{ padding:3px;
width:65px;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#e1c9f3;
background:#fff;
text-align:center;
float:center;
-webkit-transition-duration: .50s;
display: inline-block;
padding:5px;
border:3px solid #e1c9f3;}
.menul:hover {
padding:3px;
height:auto; auto;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#fff;
background:#9C7FB4;
text-align:center;
-webkit-transform: scale(0.8) rotate(20deg);
border:3px solid #fff;
padding:5px;}
</style>
<center>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
</center>
</div>
merah : link
oren : title
ungu : color/background




Friday, May 3, 2013

Simple Giveaway by Nina & Hani

Assalamualaikum , Alhamdulillah akhirnya terlaksana juga nak adakan Giveaway yang simple tetapi hadiah yang lumayan . Semoga GA ini berjalan dengan lancar dan semua dijemput untuk join . GA kali ini 2 blogger berkolabrasi bersama . Diyana Hani dan Mazelina Zaini .
Syarat-syarat :
  1. Follow Blog Mazelina , Diyana Hani  &  Sponsor (diperiksa)
  2. Buat Entry bertajuk Simple Giveaway By Nina dan Hani
  3. Copy coding entry yang telah disediakan dan pastekan di ruangan HTML & publish
  4. Like -->
  5. Letakkan URL Entry GA di ruangan komen Diyana Hani sahaja*
  6. Like page INI dan like INI jugak!

credit: Kak Mia Liana

Hadiah yang bakal dimenangi ialah :


  1. 3 Top Referral daripada blog MAZELINA & 3 Top Referral dari blog Diyana Hani - TSHIRT Running Man
  2. Seorang Pemenang bertuah dengan blog yang Cantik , Kemas , Menarik akan memenangi 1 Blouse Tribal & 1 Button
  3. 24 Orang Pemenang Cabutan Bertuah akan memenangi Tshirt Running Man
  4. Hadiah Saguhati kepada 4 orang blogger 

Jumlah hadiah : 34 Hadiah ^^

Syarat yang senang kan ? Jom Promote dan menjadi Top Referral . Hadiah tentu akan menjadi milik anda !
Pastekan URL GA hanya di entry Diyana Hani !

Tutorial : Image Slide Show [Like me]

Large

こんにちは, 안녕하세요 , Assalamualaikum. 

Ok , Atin terpaksa buat tutorial awal sikit sebab malam ni ada hal sikit nak pergi dinner ngn kuaga LOL XD . Btw sorry lambat nak buat hih.. Padahal dah lama orang ni req huhu..


So untuk tutorial kali ni pulak di namakan Image Slide Show . Rasanya kalau blogskin maybe pernah jumpa kan slide show ni? huhu . Atin ambik dari blogskin yup i got boy tu huhu . So atin buat menjadi hihi . Kalau ada sesiapa yang tak tau lagi u bleh click preview bawah ni

--> LIVE PREVIEW <--


  • Blogskin/classic template : Boleh paste di mana sahaja 
  • Template designer : Paste codes ni dalam Add Gadget




<style>
/*
 * jQuery Nivo Slider v3.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * Mhel, of html-and-etc.tumblr.com tweaked the original codes given 
 */

/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:500px;
height:400px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
    font-size:14px;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
    display:block;
    width:31px;
    height:34px;
    background:url('http://static.tumblr.com/y0x5xm1/ei3mcx19v/arrows.png') no-repeat;
    text-indent:-9999px;
    border:0;
    
}

.nivoSlider .nivo-directionNav a {
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav {    left:15px;}

.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

</style>



<!-- START NIVO SLIDER -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/y0x5xm1/WdCmcx05a/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
    var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

    <script src="http://static.tumblr.com/y0x5xm1/e1gmcx29e/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- END NIVO SLIDER -->
<br />
<center>

<!-- START NIVO SLIDER -->

<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="slider">
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
<img alt="" height="" src="URL IMAGE" title="" width="" />
    
<!-- END NIVO SLIDER -->
</div>
</div>
</div>
</center>

merah : URL image
oren : width,height