Archive for Juli 2013

Cara Membuat Label Cloud Keren di Blog

Selasa, 23 Juli 2013
Posted by Unknown
0 Comments
Tag :
+

Sekedar Sharing - Cara Membuat Label Cloud Keren di Blog. Salam blogging sobat-sobat ku semua, kali ini saya sedikit share tentang cara membuat label berputar-putar di blog, cara ini sudah banyak di bahas oleh master-master blog terdahulu.

Disini saya hanya mengulas ulang, siapa tahu ada sobat blogger yang belum mengerti, ataupun sudah pernah melihat dan ingin mempraktikkan di blog sobat. Dengan menggunakan cara ini tampilan widget label akan lebih ringkas, dan tidak terlihat terlalu panjang ataupun terlalu lebar, karena lebar dan panjangnya bisa sobat sesuaikan sendiri.
Saya kira cukup sekian saja penjelasan saya, mari kita menuju ke pokok pembahasan yaitu cara membuat label berputar-putar di blog.

Berikut ini langkah-langkah cara membuat label berputar-putar di blog:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode berikut:

    Untuk template lama cari kode ini: <b:section class='sidebar' id='sidebar' preferred='yes'>

    Untuk template baru cari kode ini: <b:section-contents id='sidebar-right-1'>

5. Setelah ketemu sobat copy paste code berikut ini tepat di bawah kode yang sobat cari tadi


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<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>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "300", "200", "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:

    Kode berwarna kuning adalah lebar widget, bisa sobat sesuaikan sediri.
    Kode berwarna hijau adalah tinggi widget, bisa sobat sesuaikan sendiri.


6. Klik save / simpan template

Catatan:

Apabila label belum muncul sobat setting secara manual dahulu seperti gambar di bawah ini.
Semoga Bermanfaat !

Cara Membuat Cbox Keren di Blog

Posted by Unknown
0 Comments
Tag :
+
Sekedar Sharing - Cara Membuat Cbox Keren di Blog. Bagi anda para blogger pastinya menginginkan buku tamu bukan? Apakah anda tertarik dengan buku tamu di blog saya? Jika iya maka saya akan share cara membuat buku tamu keren di blog.



1. silahkan anda daftar dulu di cbox untuk mendapatkan script buku tamu anda di http://www.cbox.ws/getone.php

2. Isi data tersebut dengan benar






3. Setelah kalian isi datanya, jangan lupa centang "i have read and...." lalu klik "create my cbox!"

4. Masuklah ke akun email anda untuk memverifikasi akun cbox anda

5. Klik tautan dari cbox yang ada di kotak masuk yahoo anda

6. Kini akun cbox anda aktif. Sekarang coba kalian cari script cbox anda atau lewat sini

7. Nah copy ke notepad script diantara tulisan

<!-- BEGIN CBOX - www.cbox.ws - v001 --> dan <!-- END CBOX -->


Text "begin.." dan "end.." tidak usah dicopy, cukup copy script yang ada diantara "begin..." dan "end.." saja.

8. Selanjutnya masuk ke blogger anda -> tata letak -> tambah gadget -> html/javascript

9. Masukkan script berikut

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6NTpDKaWTQhFowtGnGfvxHpUlEGjuNF3iq7DAffgFG5xDH6OynOuifUBKNOfpjNFOauPF6NIRyPKDzq_my2v0KXPcjL80trIzzZdMIEB-RGELF6Rjv_8LwG8NhN5P0agb3EnCsv0mnJl/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> script cbox kamu <br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://sekedarsharin9.blogspot.com/2013/02/cara-membuat-buku-tamu-di-blog.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

10. Edit text yang berwarna merah dengan script cbox anda yang sebelumnya sudah disimpan notepad

11. Anda juga bisa mengedit text yang berwarna oranye dengan url gambar yang lain

Contoh:





http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png





 http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png






 http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png





 http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png



http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png






2. Klik "simpan"

Semoga Bermanfaat !

Cara Membuat Energy Saving Mode Keren di Blog

Selasa, 02 Juli 2013
Posted by Unknown
0 Comments
Tag :
+

Sekedar sharing - Cara Membuat Energy Saving Mode Keren di Blog. pada postingan kali ini Sekedar sharing akan berbagi tips yaitu bagaiman cara membuat energy saving mode keren di blog. di dalam tutorial ini tidak menggunakan javascript hanya menggunakan css3. tutorial ini dapat dibuat dengan memanfaatkan pseudo elemen ::after, ::before, <span>, dan transition untuk memperhalus gerakan. kemudian <span> digunakan untuk membuat garis dari atas dan dari bawah yang seolah-olah akan mengunci layar. Tanpa basa-basi langsung aja ikuti langkah-langkah berikut.

- Pertam Login dulu ke blog sobat
- Kemudian Klik Template >> Edit HTML.
- Kemudian masukan kode css dibawah ini di atas kode ]]></b:skin>

/* Opening Element By ZTO
Creation by ZTO.blogspot.com
ESM by sekedarsharing2.blogspot.com
*/
body::before, body::after {
position: absolute;position:fixed;
content: "";
background: #000;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 9999
}
body::before {border: 10px solid #ccc;border-left:none;
top: 0;
left: 50%;
right: 0;
bottom: 0;
}
body::after {
top: 0;
left: 0;border: 10px solid #ccc;border-right:none;
right: 50%;
bottom: 0;
}
body:hover::before {
left: 100%
}
body span.sekedar {
position: absolute;position:fixed;right:0;
left: 0;
top: 48%;
border: 5px solid #ccc;
margin: 0 0 0 -1px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body span.ssblog {
position: absolute;position:fixed;
right:0;
left: 0;
top: 48%;
border: 5px solid #ccc;
margin: 0 0 0 0px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover::after {
right: 100%
}
body:hover::before, body:hover::after {
visibility: hidden
}
body:hover span.sekedar {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 0;
}
body:hover span.ssblog{
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 100%;
}
body span.ss {width:35%;border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;padding:10px;background:#000;
font-size:25px;color:#fff;
text-align:center;
position: absolute;position:fixed;
left: 32%;right:45%;
top: 40%;
bottom: 45%;
margin: 0 0 0 0px;
z-index: 123455543123445556888;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover span.ss {
visibility: hidden;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
-webkit-transition: all .7s ease-out;
transition: all .7s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
right: 0;z-index:99999999
}


- Langkah terakhir masukan kode HTML di bawah ini di atas </body>

<span class='sekedar'/>
<span class='ss'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Gerakan Mouse untuk melihat halaman</span></span>
<span class='ssblog'/>


- Kemudian simpan dan lihat hasilnya.

Semoga Bermanfaat !!
Selamat Datang Di Blog Saya
English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Flag Counter

Statistik

Diberdayakan oleh Blogger.

Copyright © 2013 Sekedar Sharing - Edited By |Imam Ainudin Firmansyah | 12.12.6815