Secret's: 2011

Sabtu, 12 November 2011

cara buat label berputar untuk blog

Diposting oleh Unknown di 22.56 0 komentar

cara membuat Label berputar

Anda tertarik memasang Label berputar pada blog anda seperti terlihat pada link berikut ( Klik : Label ).. ikuti petunjuk di bawah :

Pilih Design >> Edit Html

Centang Expand Widget Template

Klik ctrl + F

Cari kode :

<b:section class='sidebar' id='sidebar' preferred='yes'>

harap di sesuaikan saja karena tidak semua template memiliki kode yang sama..

Copy kode dibawah dan letakkan di bawah kode diatas ( ingat letakkan di bawah )

<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>

<b:includable id='main'>

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

</b:if>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Keterangan :

Untuk megganti Tinggi dan Lebar silahkan di ganti angka yang berwarna merah

Untuk mengganti warna Background silahkan di ganti kode yang berwarna hijau, dengan kode warna yang anda inginkan

Untuk mengatur besar - kecil tulisan TAG ganti angka yang berwarna merah jambu/pink

Selasa, 08 November 2011

Cara memasang widget follow tersembunyi

Diposting oleh Unknown di 01.37 0 komentar

Follow...follow...mungkin tak asing lagi kata-kata ini bagi sobat-sobat blogger, tapi trik yang satu ini mungkin masih jarang ditemukan...hohoho..mungkin yaa...

Baiklaah...kali ini akan saya share bagaimana cara membuat widget follower melayang dengan mode show/hide. Postingan ini merupakan permintaan dari beberepa sobat blogger (hehehe..sebenarnya saya sudah berniat memposting sebelumnya).

Trik ini merupakan pengembangan dari Script untuk membuat show/hide Cbox, hehe..Cbox lagi Cbox lagi,,yasudahlah yang penting Follownya bisa show/hide. Mau tau caranya?? mari ikuti langka langkah berikut :

1. Pastinya login Blogger terlebih dahulu
2. Masuk ke Perancangan>>Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :
----------------------------------------------------------------------------------------------------------------------------

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvKH3_E3_vkemUjyZlx1R4Fo_FD5-XEHQX1Mr97NpwCMrBtRuK8JOnt-xoUixsFiUF_rlyBa_rELGROLlAqnWFLB-bDpvKD2AXAZ-L4Nm7Si2NGABLBc-C8G80-TOeG-hzhm9DH0-yylos/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

Kode Widget Follow Disini

<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://exeloph.blogspot.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

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

Eits..jangan disave dulu, mari lanjut ke langkah selanjutnya

6. untuk mengambil kode widget follownya silahkan masuk ke link ini
http://www.google.com/friendconnect

-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya

8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)

9. Save..
hohoho...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi

10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.

11. Cari kode <body> dan Paste code berikut tepat diatas kode <body>
-----------------------------------------------------------------------------------------------------------------------------

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQOmd-ZIHBqdpoYoFsDLdO42N6W_2kRtTNkZIBkImqWPuSZT2xMDJaPFg_n9mXhmQY4ebmMUZimp7s38GIIaOxYHKznOrGyhUilMk7q_cEa93OzJR_eAOYrw6xXMDLuEyGhHpjDhCNzXv/'/></a>

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

NB : rubah tulisan yang berwarna merah bisa dirubah sesuai keinginan sobat,
12. Simpan template
good luck

Sabtu, 05 November 2011

Diposting oleh Unknown di 06.47 0 komentar

Website Speed Test
- a free website tool from Website Goodies.

Diposting oleh Unknown di 00.22 0 komentar

Jumat, 04 November 2011

Cara membuat spoiler show hidden pada blog

Diposting oleh Unknown di 08.55 0 komentar

Spoiler atau disebut juga show hidden sering digunakan para bloger untuk meminimalis menu pada blog begitu [ula saya juga sering menggunakan spoler show hiden agar tidak terlalu banyak menu yang di tampilkan. Saya akan memberikan tips untuk sobat bloger tentang cara membuat spoiler show hidden pada blog. Caranya:
Copy codenya dibawah ini

<div><div style="margin-bottom: 2px;"><i><b><small>Klik untuk melihat </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" /></div>
<div style="border:inset ; margin: 0px; padding: 6px;"><div style="display: none;">

TEXT ANDA LETAKAN DISINI

</div></div></div>

Hasilnya

Klik untuk melihat

Agar kotak tidak muncul hapus code yang berwarna biru
Hasilnya

Klik untuk melihat

silahkan dicoba semoga bermanfaat

http://madiuncool.blogspot.com/

Rabu, 02 November 2011

Cara Membuat Kolom Scroll Down Untuk Blog

Diposting oleh Unknown di 02.07 0 komentar

Postingan ini saya buat khusus untuk salah satu sobat blogger terbaik saya Ladida dan umumnya teman-teman blogger lainnya, karena barusan saja dia bertanya tentang ini.  Fungsi dari Kolom Scroll Down Untuk Banner/Foto/Widget di Blogspot adalah untuk menghemat tempat, sehingga akan tampil rapi di dalam blog. 

Cara untuk membuatnya juga cukup mudah dan bisa langsung teman-teman praktekkan. Ok, ikuti langkah-langkah di bawah ini:

1.  Copy paste kode di bawah ini (bisa teman-teman taruh di kotak add a  gadget (HTML/Javascript)/edit HTML/halaman postingan blog teman-teman):

------------------------------------------------------------------<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 60%; height: 300px; background-color: #FFFFFF;"> ISIKAN KODE SCRIPT BANNER/WIDGET dan FOTO teman-teman di sini (bisa berurutan) </div>------------------------------------------------------------------ 
2. Sesuaikan ukuran lebar (width) dan tinggi (height) nya sesuai dengan templates blog teman-teman,

3. Tulisan yang berwana merah silahkan teman-teman ganti dengan kode script banner/widget atau foto teman-teman semua,

4. Jika sudah maka tinggal di save dan lihat perubahannya. Selesai dan selamat mencoba Membuat Kolom Scroll Down Untuk Banner/Foto/Widget di Blogspot !

Contoh lihat pict

Sabtu, 29 Oktober 2011

Heading Tag With Drop Shadow and Mouse Hover Effect

Diposting oleh Unknown di 22.01 0 komentar

Blogger blogs has the free option of editing the style sheet. Fortunately you can play around the codes to give your blog any look you want. Last year I shared various ways of customizing the heading tags i.e. H3. We use H3 tags inside posts to write headlines and important sections of the posts. Today we would learn how to create a custom headline that will change colour on mouse hover. We will use CSS3 effects to produce a drop shadow effect along with mouse hover effect. This will give your headlines a neon look. So lets do it!

Create Post Heading Tags In Blogger

Go To Blogger > Design > Edit HTML
Backup your Template
Search for this,

]]></b:skin>

4. Just above it paste the following code,
-------------------------------------------------------------------------------------------------------------

/*----MBT Heading Tag----*/

h3{
font-family:veranda !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666; padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;

}
.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F; box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F; }

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

Note:- Delete any code inside your template that may look like .post h3
Make these changes:

To Change font type edit verdana and replace it with any font family you like.
To change font style replace italic with either normal or bold
To change text color and left/right border colors in active mode then change #666 and replace it with a color of your choice
To replace text and border colors on mouse hover then change #FF133F
To change box shadow color in active mode change #666
To change box shadow color on mouse hover mode change #FF133F

5. Save your template and you are almost done!

How to use Heading Tags inside Posts?

Create a new post as you normally do
Now use the following code wherever you want to add a headline

<h3>Write Headline Text here</h3>

3. When you publish the post, you will find the magic working just perfectly. Enjoy!
I hope this little trick helps you in better writing quality posts. More variation will be introduced soon. Do let me know if you needed any help.

Beautiful New Page Navi For Blogger With Scroll

Diposting oleh Unknown di 08.30 0 komentar

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didna’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.
To make it beautiful I used New Pugin from WP Paginator
This Plugin call Paginator 3000
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
To see the result open This
Demo
Paginator3000

Step 1 : Apply Style

Login to Blogger Dashboard and navigate to Layout > Edit Html
Dona’t click the checkbox which says “Expand Widget Templates”
Find this

]]></b:skin>

and replace it with

--------------------------------------------------------------------------------- 
.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/

tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]></b:skin>
---------------------------------------------------------------------------------

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

---------------------------------------------------------------------------------
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/

paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/

paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>
----------------------------------------------------------------------------------

Change based on your blog setting :
-------------------------------------------------------------------------------------------------------------
var postperpage=7;
var numshowpage=6;
-------------------------------------------------------------------------------------------------------------
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this

'data:label.url'

and Replace with this

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page
only That, I hope it can work and make your blog easy to navigate, amiin

For All My Page Navi Can read from Read this :

Pages

Secret's

Lorem ipsum dolor sit amet

widgeT Follow Blogger

Popular Posts

Blog Archive

Mengenai Saya

Pengikut

Partner

Buscar

HorizCantik