Pages

Showing posts with label Triks Blogger. Show all posts
Showing posts with label Triks Blogger. Show all posts

Cara Mempercantik Tampilan Feedburner Di Blog


Cara Mempercanti Tampilan Feedburner - pada postingan kali ini saya akan membuat tutorial tentang mempercantik tampilan form berlangganan. Sebelumnya feedbuner sendiri menyediakan form berlangganan dengan tampilan yang simple, nah kali ini saya akan memberikan script dengan tampilan form berlangganan yang lebih keren dan menarik.

Sekarang bagaimana cara memasangnya ?

  • Pertama, Log-in ke blogger kalian,
  • Kedua, pilih Rancangan,
  • Ketiga, pilih Tata Letak,
  • Keempat, pilih Tambah Gadget,
  • Kelima, pilih Javascript/Html,
  • Selanjutnya, sobat copy script di bawah ini ke dalamnya,
<style>
.form {
border:1px solid #ccc; 
background: #ffffff 
padding:3px;
width:300px;
height:150px 
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6e_isZ0_DVh_xqM-23fFvqu20apQzZ9MddjOkBHjlfwElM46wRqeO6_vuAIGklh08Qq2dQh7Dw9F-KDa526o7PuamdVxDjBbdE1yrSbOynQVpMK7XkuK_MUKdsYVmmLcsQDY_SzZ_NLwz/s400/feedreader_2.jpg")repeat-y right;
}

.button {
background: #006699;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin-left: 5px;
border: 1px solid #234B69;
padding:3px 5px 3px 5px;
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:0x 5px 5px 10px;"><div style="padding-left:10px"><p><a href="http://feeds.feedburner.com/_deejayHan_" rel="alternate" type="application/rss+xml"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmE8GhxfOXN8sMUQKZfvV9EMptRVwiVo3DGmngkz5j9dYyzVNfCpTzQIwUkQZanRH4CrNxdnegB3R6w8UGmV6UkHvoep2GGj1mLtx588kx-I-QcArPBd9AsNDgLa3wQG26wnZ6_tsKZDZ/s200/feed-c.png" alt="" style="vertical-align:middle;border:0"/></a><a href="http://feeds.feedburner.com/_deejayHan_" rel="alternate" type="application/rss+xml"> Gratis berlangganan artikel via RSS</a></p></div></div>

<div style="padding-left:10px"> Anda bisa berlangganan FEED via email</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=_deejayHan_', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:170px; height:16px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Tulis email anda disini&quot;;}" onfocus="if (this.value == &quot;Tulis email anda disini&quot;) {this.value = &quot;&quot;}" type="text" value="Tulis email anda disini" /> <input type="hidden" value="DeeJayHan" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Subscribe" /></div></form>

<div style="padding-left:10px"><a target="_blank" href="http://feeds.feedburner.com/Koisine"><img
border="0" alt="ads" src="http://feeds.feedburner.com/~fc/_deejayHan_?bg=8a8a8a&fg=444444&anim=1"/></a></div>
</div></div>
  • Note : Ganti _deejayHan_ dengan nama Feedburner kalian.
  • Terakhir, Simpan.
Ganti sekarang juga dengan tampilan feedburner yang lebih keran.
Description: Cara Mempercantik Tampilan Feedburner Di Blog
Rating: 4.5 4.5

Cara Membuat Tooltip Otomatis di Blog

Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat kursor mouse mengarahkan pada suatu link. dan pada posting kali ini, saya akan membagikan langkah - langkah membuat Tooltip Otomatis di blog.





Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)
Kedua, Masuk ke Rancangan - Edit HTML
Ketiga, Centang Expand Template Widget.
Keempat, Paste Kode Berikut di bawah kode <body>.
<script src='http://hanjs.googlecode.com/files/wb-tooltipdeejayhan.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Muhammad Hanafi (DeeJayHan) </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://hanjs.googlecode.com/files/wb_tooltips.js'/>
<script src='http://hanjs.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
 Kelima, Paste Lagi kode berikut di atas kode </body>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>
Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.
Description: Cara Membuat Tooltip Otomatis di Blog
Rating: 4.5 4.5

Memasang Permalink Tag Di Blogger

DeeJayHan-Blog -Permalink adalah singkatan dari permanen link yang mana maksud dari permalink ini adalah URL suatu halaman pada web atau blog. Jika sobat ingin melihat permalink ya gampang saja, tinggal lihat address bar pada browser maka itulah yang dinamakan permalink.

Nah,berikut Memasang Permalink Tag di Bawah Posting :

1. Masuk ke akun Blogger.

2. Klik   →  .

3. Klik   untuk membuat salinan template. Hal ini untuk memudahkan mengembalikan template ke kondisi terakhir sebelum diedit jika nanti terjadi kesalahan.
4. Beri tanda centang pada "Expand Template Widget".
5. Cari kode 
6. Letakkan kode css di bawah ini di atas kode tadi.
.permalinktag{margin-top:5px;border:1px solid #eff0f1;color:#424242;padding:5px;background:#fbfbef}.permalinktag a{background:0}img.float-right{margin:5px 0 0 10px}img.float-left{margin:5px 10px 0 0}#mn2{width:100%;height:28px;background:#1e90ff;border-top:1px solid #666;border-bottom:1px solid #666;margin-top:0;margin-left:0}
7. Selanjutnya carilah kode 
8. Setelah ketemu, letakkan kode berikut di bawah kode tersebut.
<div class='deejayhan_permalink' style='border:2px dashed red;background:#FFF9B4;padding:10px 5px 5px 10px;text-align:justify'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:post.title/></u></strong> dan anda bisa menemukan artikel <data:post.title/> ini dengan url <strong><data:blog.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:post.title/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</small></center></div>
 9. SIMPAN TEMPLATEDescription: Memasang Permalink Tag Di BloggerBlogger
Rating: 5.0

Membuat Super Navigation Dengan CSS3

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya?  Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.


View Demo

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmn_9gPA5bW75RHdSrw9Co1iUwMVKxUsKEU70CV0N2OUE4E1kOGt0fa9ImvnZ-jsFETt0eymVSGdD63w2MI7lZLjOnoIA8KjHUBIDDxcQv4fh0UqwLvli8K5vU19-ZW8Lte2eClZBkIo/s400/view-blogger-tutorial-demo.png


Bagaimana ? Bagus tidak ?
Mau buat seperti itu ?
Cara Membuat Super Animated CSS3 Navigation Menu
Langkah 1
  1. Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
  2. Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
  3. Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
  4. Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
  5.  
.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
        width:599px;
        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}  
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
} 
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
} 
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}  
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}
       5. Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS  di atas
       6. KLIK SAVE Template (Simpan Template).
Langkah 2 
<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://deejayhan.blogspot.com">Tutorial Blogger<br /><br /><span>Tutorial Blogger</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://google.com">Google<br /><br /><span>Google</span></a></li>
<li><a class="anima" href="http://facebook.com">Facebook<br /><br /><span>Facebook</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
<li><a class="anima" href="http://deejayhan.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>
  1. Simpan xHTMl melalui penambahan widget. Sampeyan ikuti seperti langkah di atas (login), hanya setelah masuk di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript". Copy x-HTML dan pastekan di box penambahan widget.
  2. KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
  3. Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
  4. Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
  5. Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.
Keterangan :
  1. Yang teks berwarna Merah adalah link / url anda 
  2. Yang teks berwarna Kuning adalah teks sesuai anda inginkan
Semoga Bermanfaat :)
Description: Membuat Super Navigation Dengan CSS3
Rating: 4.5 4.5

Membuat Scroll Pada Kotak Komentar Di Blog

Membuat scroll kotak komentar pada blog berguna untuk memperpendek kotak komentar, sangat diperlukan, dalam rangka menghemat ruang template anda agar tidak terlalu panjang kebawah, dimana banyak kasus yang terjadi halaman web kita akan menjadi sangat panjang jika komentar pada suatu postingan kita sudah sangat banyak. Hal ini tentu saja mengganggu jika kita atau pembaca blog ingin mengetahui widget ata hal - hal penting dalam blog kita yang terletak di footer blog kita, karena kita/pembaca harus melakukan scroll halaman blog begitu panjang ke bawah. Jika anda ingin menghemat/ memperpendek halaman blog anda karena adanya list komentar dari rekan blogger yang sudah terlalu banyak, inilah solusinya yaitu dengan cara membuat scroll kotak komentar menggunakan CSS.
Hasil akhirnya adalah kotak komentar anda akan tampil sesuai keinginan anda dalam menentukan ketinggian kotak kolom komentar sesuai dengan kebutuhan. Kotak komentar dengan scroll ini juga bermanfaat jika ada yang ingin submit komentar ke dalam postingan anda tidak terlalu repot untuk melakukan scroll terlalu panjang kebawah karena tombol "post a comment" tepat berada di bawah kotak/kolom komentar yang anda buat nanti.

Tidak usah berpanjang lebar lagi, dibawah ini adalah langkah-langkah bagaimana cara menambahkan/membuat scroll pada kotak komentar :
1. Login ke dashboard blogger anda.
2. Pilih Design/rancangan, kemudian pilih Edit HTML, lanjutkan dengan memberi tanda centang pada 'Expand widget template'.
3. Kemudian silahkan carilah kode CSS #comments-block{
4. Tambahkan kode CSS dibawah ini stelah kode CSS di atas.
max-height:300px;border:1px solid #eee;overflow:auto;
5. Berikut ilustrasi kode CSS pada kotak komentar blog ini SEBELUM dan SESUDAH dilakukan perubahan.

Kode CSS kotak komentar SEBELUM dirubah :
#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

Kode CSS kotak komentar SESUDAH dirubah menjadi seperti ini :
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

6. Sedangkan ukuran tinggi kotak komentar 300px, jenis border 1px solid serta warna border #eee tentunya dapat dirubah sesuai selera anda.
7. Jika sudah selesai, lakukan saving template anda.
8. Buka blog anda, kemudian klik salah satu artikel postingan anda, silahkan cek kolom komentar anda...walllaaa..kotak komentar anda sudah rapi jali terkurung dalam kotak komentar sesuai ketinggian yang anda inginkan. Halaman posting menjadi rapi, simple dan enak dipandang, karena tidak terlalu panjang.

Silahkan mencoba semoga bermanfaat pls try without error :)
Description: Cara membuat Scroll Kotak Komentar 
Rating: 4.0 4.0

Membuat Recent Post Efek Slide Plus Thumbnails V2 With Jquery

Recent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya.Dan sebelumnya saya juga udah share tentang Recent Post Thumbail . Dan kali ini saya share Recent Post Thumbail V2 . Adanya animated recent post widget, dapat menambahkan lagi 'seri' bagi senarai recent post anda.

 View Demo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUT2we8-ogkRoeztu4xOApesJgwJypVC_J-5F_F4luzVnegzh8Mo97Dp03uupP6rTpF9nkZIb6vvghGSzyfb9YHcpH-FQ8DstvYTvQ-ek6k5sHdwWPC5R2E-grs3I-5_AJhH-6sAhf7yYq/s1600/view-blogger-tutorial-demo.png 
Tutorial untuk membuat animated recent post ini adalah seperti berikut.

1. Dari Dashboard > Design > Add a Gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hanjs.googlecode.com/files/recentpostv2.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://deejayhan.blogspot.com/2012/04/membuat-recent-post-efek-slide-plus.html" target="_blank">get this widget here</a></small>
Sekian terimakasih . 
Semoga Bermanfaat

Description: Membuat Recent Post Efek Slide Plus Thumbnails V2 With Jquery
Rating: 4.5 4.5

Membuat Lebih Style Fan Page Di Blogger

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Tutorial kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.




Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

1. Login Ke Akun Blogger Anda
2. Lalu Pilih Rancangan ===> Tambah Gadget ===> HTML / Java Script
3. Lalu Copy & Paste Kode di bawah ini :


<center><iframe style="height:250px; width:85%; " scrolling="no" frameborder="0"href="URL PAGE"src="http://www.facebook.com/plugins/fan.php?id=NO ID PAGE&width=292&height=250&connections=25&stream=false&header=false&logobar=false&css=https://sites.google.com/site/unwanted86/javascript/fblike.css" ></iframe></center><center><iframe src="http://www.facebook.com/plugins/like.php?href=URL PAGE&send=false&layout=standard&width=292&show_faces=false&action=like&colorscheme=light&font&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:40px;" allowtransparency="true"></iframe></center><p align="right"> <small><a href="http://deejayhan.blogspot.com/2012/04/membuat-lebih-style-fan-page-di-blogger.html">Get This</a></small></p>




4. Setelah Anda Copy & Paste Lalu Simpan.
5. Dan Lihat hasil nya
  •  Yang Berwarna  Biru di ganti dengan Fan Page Anda
  •  Yang Berwarna  Orange di ganti dengan ID fan page anda 
 Note :
Untuk yang sudah mengubah ID fan page dengan teks anda bisa di lihat dari Foto Fan page anda
di klik Kanan Pada gambar dan Lihat Gambar Pada foto Fanpage
Screen Shot :
Nah ID fan page saya adalah : 201758876517562
Terakhir di save saja . dan jadilah :D
Cukup di mengerti ?
Kalau tidak mengerti tanya jawab saja di komentar bawah .
Terimakasih .
Description: Membuat Style Fan page Di Blog
Rating: 5.0 5.0

Membuat Email Subscription dengan Icon Bergambar Di Blogger

Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript3. Masukan kode dibawah ini:

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdi96cODAR49-f6dyufNH2k6Mv4shQ4HQ-T0vt1kI5OpzMERSE-J99BpwtqDCCi9k4Z7MYi3oe_LRTKI7G79rTxyVJ5tl1v9afZ5tN1lFzF7Mcd6ExywU1eQl4Ro2s1lwOHbQDr3n51ynJ/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYukI4gDBPRs1b8QvSd8opm0zVZkYfSKs6ut0TYobMd-g2pyEqQliPaLHcDbZMV0o99Png_GXFe-DlMxJyWAMcjbmwJ4xm16AZATLN9ngVdbKWY8LhyphenhyphenMZEHBZuEiVzcJasjFLTwDj5Z7lu/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYS79xJVpK5jmuUBMWLdsFzByV4UTW1EeNYfUbQgKirIfuhyl29VXdjfH3DTTZMpKm8E39VuLAaaQQAItg8y3IiaDPdYZssqwOFUe8xHlc3QoFXpgbuUhjhwIFCN3NxRqRB22LraIAkzUq/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_flhPODDZGaa6d-w1zM3J4nOi6koVkHE1d1gJOUs6ixZf3t3vflRBrblDeR9e-Tt9W2_WcOIvcVBoxhc_qT-pHN8Ratqxu93xgmgijEk9q-eP7LXeR4kGjvDrSIyGmAPtIAYYbSsYvJ4/s1600/google-48.png" /></a></td>
</tr></table>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/blogtrikdantips"><img src="http://feeds.feedburner.com/~fc/blogtrikdantips?bg=FF6600&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.blogtrikdantips.blogspot.com">Blogger Widgets</a>
</div>

4. Gantilah kode berikut ini:

http://www.facebook.com/DeeJayHan-Blog dengan fanpage facebook anda.
http://twitter.com/DeeJayHan1dengan halaman twitter Anda.
http://feeds.feedburner.com/_deejayHan_dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
blogtrikdantips (dari bagian bawah kode di atas) dengan id feedburner Anda.

5. Klik simpan.

Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!

Description: Membuat Email Subscription dengan Icon Bergambar Di Blogger
Rating: 4.5 4.5

Cara Membuat Lightbox Slideshow di blogger

Jika selama ini kita selalu terpancang untuk menggunakan jQuery untuk membangun desain blog dengan segala pernak-perniknya, kini cakrawala coba kita kembangkan dengan mencoba beberapa desain menarik image preview (lightbox) dari prototype.js dan scriptaculous.js. Setelah pada posting sebelumnya kita buat sebuah lightbox cantik, kini satu lagi lightbox yang sudah dilengkapi dengan slideshow bisa menjadi pilihan alternatif bagi anda. Prototype-1.6.0.2.js dan scripttaculous.1.8.1.js mampu memberikan suguhan menarik dalam sebuah bentuk lightbox slideshow.

Silahkan klik pada salah satu thumbnail di demo dan tunggu beberapa saat. Ketika image dengan ukuran yang jauh lebih besar terlihat, maka secara otomatis slideshow akan bekerja dan demi satu image (berukuran besar) ditampilkan di halaman blog sesuai dengan banyaknya thumnail. Untuk menghentikan slideshow silahkan klik "Stop Slideshow" dan klik "Start Slideshow" untuk mengaktifkan kembali slideshow. Jika ingin mengoperasikan secara manual klik "Stop Slideshow", kemudian gunakan fungsi "Nex" dan "Previous".

Cara Membuat Lightbox Slideshow
  1. Simpan link kode css dan javascript di atas kode </head> / di bawah code <head> .
Kode CSS dan Javascript
<link rel="stylesheet" href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/GR_lightbox-slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://hanjs.googlecode.com/files/deejayhan_lightbox-slideshow.js"></script>
    2.. Jika lightbox tak dapat berfungsi dengan sempurna, download kode css dan simpan di atas kode ]]></b:skin>, dengan bentuk sebagai contoh di bawah.
 #lightbox{position:absolute;top:20px;left:0;width:100%;z-index:100;text-align:center;line-height:0;color:#151410;}
#lightbox a, #lightbox a:hover{border-bottom:none;color:#151410;text-decoration:underline;}
#lightbox a img{border:none;}
#outerImageContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;}
#imageContainer{padding:10px;}
#loading{position:absolute;top:32%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#loadingLink{display:block;margin:0 auto;padding:0;width:75px;height:75px;background:url("http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif") center center no-repeat;text-indent:-9999px;}
#hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#imageContainer>#hoverNav{left:0;}
#hoverNav a{outline:none;}
#prevLinkImg, #nextLinkImg{width:49%;height:100%;background:transparent url("http://lightbox-slideshow.googlecode.com/files/blank.gif") no-repeat; /* Trick IE into showing hover */display:block;text-indent:-9999px;}
#prevLinkImg{left:0; float:left;}
#nextLinkImg{right:0; float:right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/prevlabel.gif") left 15% no-repeat;}
#nextLinkImg:hover, #nextLinkImg:visited:hover{background:url("http://lightbox-slideshow.googlecode.com/files/nextlabel.gif") right 15% no-repeat;}
#imageDataContainer{font:10px Verdana, Helvetica, sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;}
#imageData{padding:0 10px;}
#imageDetails{width:70%; float:left; text-align:left;}  
#caption{font-weight:bold;}
#numberDisplay{display:block; clear:left;}
#detailsNav{display:block; clear:left; padding:0 0 10px 0;}  
#prevLinkDetails{margin:0 8px 0 0;}      
#nextLinkDetails{margin:0 8px 0 0;}
#closeLink{display:block;margin:0;padding:0 0 10px 0;text-decoration:none;float:right;width:66px;height:28px;background:url("http://lightbox-slideshow.googlecode.com/files/closelabel.gif") no-repeat;text-indent:-9999px;overflow:hidden;}  
#overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;background-color:#151410;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix{display:inline-block; width:100%;}
* html .clearfix{height:1%;}    
   3. Cara Pembuatan gambarnya copy script / kode di bawah ini ke dalam Posting , Enti Baru , Klik Edit HTML di Entri Edit . Berikut Kode nya :

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;">
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
<a href="Gambar Thumbail.jpg" rel="grsslightbox[gallery-1]" title="Teks Anda Disini"><img src="URL Gambar Anda" width="120" height="90" style="margin:10px 10px 0 0;padding:4px;border:1px solid #888;background:#ddd;" /></a>
</div>
Keterangan :
  1. Yang teks berwarna Kuning adalah gambar thumbailnya untuk di perbesar gambarnya 
  2. Teks yang berwarna Biru Adalah Title / Teks yang ada di gambar . Sesuai Keinginan anda
  3. Teks yang berwarna Merah adalah gambarnya yang di perlihatkan di posting 
Sekian Terimakasih .
Semoga Bermanfaat bagi semuanya 
Description: Cara Membuat Lightbox Slideshow di blogger 
Rating: 4.5 4.5

Membuat News Sticker dengan Jquery

DeeJayHan-Blog News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide. Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut. Kita akan menggunakan script jquery untuk membuatnya news sticker ini. Ingin tau caranya ikuti tutorial berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode kode ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>
/* News Sticker by www.deejayhan.blogspot.com
---------------------------------------------*/
.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}
5. Selanjutnya letakkan kode berikut ini di atas kode </head>

<!-- News sticker by www.deejayhan .blogspot.com -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

6. Kemudian kita akan meletakkan news sticker tersebut diatas posting dan sidebar seperti posisi news sticker milik saya, caranya yaitu cari kode <div id='outer-wrapper'>


7. Setelah itu paste kode berikut diatas kode <div id='outer-wrapper'>
<div style='clear:both;'/>

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://deejayhan.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
8. Ganti kode berwarna merah dengan url blog anda
9. Simpan template anda dan lihat hasilnya

Demikian cara membuat news sticker di blogger. Semoga dengan tampilan news sticker halaman anda semakin senang dibaca oleh pengunjung. Selamat mencobanya....!



Description: Membuat News Sticker dengan Jquery

Rating: 5.0 5.0

Tombol Up dan Down Di Pojok



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmn_9gPA5bW75RHdSrw9Co1iUwMVKxUsKEU70CV0N2OUE4E1kOGt0fa9ImvnZ-jsFETt0eymVSGdD63w2MI7lZLjOnoIA8KjHUBIDDxcQv4fh0UqwLvli8K5vU19-ZW8Lte2eClZBkIo/s400/view-blogger-tutorial-demo.png

Lihat dipojok kanan anda , letakkan kursor mouse anda diatasnya !.




Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatan kode HTML dan JavaScript
tepat disamping sebelum </body>
 
<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0ftefGt3_jSw_FG6RgHRn1BwdW2vRkIAVj2HKp0Pmf09c2zrRV7HUujruXccKdsMplBPuaJ8DEe3ecKSiTXGpS3SeQphjEr_1ezr6Buk1JZ-2_SFl-EXpnOS7bxwsUKuiY2YVILt4Z87/s1600/deejayhan-up.png" border="0" /></a><br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLms5Z2EW5MsTsX_StTm94XhRXSbD9orM9Qtmlqoayjp7CYgD6d_-l7I7uKv824mw5ZhZO837RCNUaf5NhmMPGHUE8v9ha425BdLjLB9puX5pQG1zbz50jwCit1eVH7Urpcrf-HuP7lmxK/s1600/deejayhan-down.png" border="0" /></a>
</div>

<script type='text/javascript'>
//<![CDATA[

//Script Tombol turun dan naik By Dynamic Drive
// (www.dynamicdrive.com/dynamicindex2/pagescroller.htm)
//This credit MUST stay intact for use

var Hoffset=60
var Voffset=60
var thespeed=3 //Kecepatan

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

//]]>
</script>
Terakhir klik Simpan / Save .
Nah Simple kan ?
Saya ucapkan Selamat Mencoba .
Description: Tombol Up dan Down Di Pojok
Rating: 4.5 4.5

Membuat “Outside the Box Navigasi” Dengan Jquery


Akhirnya Update Lagi . Sekarang saya mau share tentang Membuat “Outside the Box Navigasi” Untuk Blogger .Untuk lebih jelas silahkan
View Demo :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmn_9gPA5bW75RHdSrw9Co1iUwMVKxUsKEU70CV0N2OUE4E1kOGt0fa9ImvnZ-jsFETt0eymVSGdD63w2MI7lZLjOnoIA8KjHUBIDDxcQv4fh0UqwLvli8K5vU19-ZW8Lte2eClZBkIo/s400/view-blogger-tutorial-demo.png


Boleh tau, setelah jadi, jadi kepikiran, bisa gak dipasang pada blogger?? dan ternyata bisa. OK langsung saja berikut cara memasangnya pada blogger :

Masukkan Script Jquery ini di atas code <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascriptcuss.googlecode.com/files/stack-1.js' type='text/javascript'/>
<script src='http://javascriptcuss.googlecode.com/files/fisheye-iutil.min.js' type='text/javascript'/>
Lalu Pasang kode CSSnya yaitu sebelum kode ]]></b:skin>
/************** START:CUSSTACK-CSS *****************/
#stacksNav {
    width: 145px;
    height: 25px;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 45px 7px 0 0;
    background: #333;
    color: #f5f5f5;
    text-align: center;
    border-top-right-radius: 14px;
    -webkit-border-top-left-radius: 14px;
    -moz-border-radius-topleft: 14px;
    opacity: .65;
    filter: alpha(opacity = 65);
}
.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
    font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
    display:block;
    height: 14px;
    position:absolute;
    top: 17px;
    right:60px;
    line-height: 14px;
    border: 0;
    background-color:#000;
    padding: 3px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    color: #fcfcfc;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
    opacity: .85;
    filter: alpha(opacity = 85);
}

/* IE Fixes */
#stacksNav { _position: absolute; }
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }
Lalu isikan juga kode HTMLnya untuk bisa tampil di blog, yaitu setelah   </head>
<!-- BEGIN CUSSTACK HTML -->
<div class='stack'>
        <img alt='stack' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4Wi2OX-IAQAXPD5o1VL7llC8R_jdUV5s_a-D6MYe01PFHbr8KXqpViKPUqRvdn_AZtpLNi0ZRa6KsPagtTwlHkM4BgiH3dPubYnfGHIYRKxM841otm59EALJM1MgWs4OBi2PVO4mPO2Y/s800/stack.png'/>
        <ul id='stack'>
            <li><a href='http://feeds.feedburner.com/_deejayHan_'><span>Subscribe</span>
            <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9e0ADo6K1jHsR2mWDENKMpnvxTCsc-vrUGpljxffrDljmtZSC5wV_BJc4sXu4OP8FLJNpOFVVm8mhgYbRO3HOMk5advr_IG0sIOpdz3wPdRMzNYnflBlwT-b3O09unTU14VLuPZSW6mjf/s800/CoffeeCup_Feed_Add_64.png'/></a></li>
            <li><a href='https://plus.google.com/110787383199450518048'><span>buzz</span>
            <img alt='google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoAh4yInNpj25xWhi_QLOonP_1jZkz-1hOICD1ZZ-fzGBjeAC2BPACA14PCJchmSQeCUDzkdGini5WrujvWN1dtXNbu46SJhv8xk9IEDx_KY4SQxSQ2054KpMACx7N_XqWPKQNKbn03gTo/s800/buzz_9.png'/></a></li>
            <li><a href='ymsgr:sendim?deejayhan'><span>yahoo</span>
            <img alt='yahoo' src='http://opi.yahoo.com/online?u=supercuss&amp;m=g&amp;t=9'/></a></li>
            <li><a href='http://www.facebook.com/DeeJayHanBlog'><span>Facebook</span>
            <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uAnSUszIJFHUvykJWfLW26ModvlYhwB_vbYATG7t_86jWl0WpP6n_wpM-7pjo7zJQ57JURtTbzSEPzX0-hhszzsjn6O7TrxXmmtyFllqolslWj1cPUgsCLuudeyepJgaUOI4mxw0mu-k/s800/facebook.png'/></a></li>   
            <li><a href='http://twitter.com/DeeJayHan1'><span>Twitter</span>
            <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDrNijdCu7C3tQWKhyphenhyphenkltcps3SELwlB_Yexup3mvNlLu3qxqGcqTTpnHXlHdo1sTUDtS9sF_EVqXkXhvU6cX1XZHHOFoZ769Ug8B5ua6YQC1Hsq2WVXSY5Xqlw649ouBAYhAD__6_MuJN/s800/Twitter.png'/></a></li>           
        </ul>
</div>
<!-- end:cussstack-html -->
 Pada kode yang diberi warna merah, Silakan ganti alamat Feed, Google Buzz, Yahoo id, Facebook dan Twitter kalian. atau bisa juga menambahi dengan social bookmark yang lain sesuai selera, atau jika ingin merubah gambar, maka silakan isikan kode gambar setelah kode src=
Untuk Merubah icon YM bisa diganti dari t=9 menjadi t=1, atau 2 dst... (untuk list icon default YM akan ditulis nanti - Insya Allah)
Selesai, silakan disave dan dilihat.
Selamat Mencoba.

Description: Membuat “Outside the Box Navigasi” Dengan Jquery
Rating: 4.5 4.5

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya kepincut. Pada versi awal dari menu Rocking Rolling ini hanya menggunakan efek sliding seperti yang dapat sobat lihat di ViewDemo Namun dalam versi yang saya share kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!




VIEW DEMO HERE


Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.
<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.
#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.
<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>


5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

Referensi tulisan :
http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
http://tip-triksblogger.blogspot.com/2011/03/rocking-rolling-rounded-menu-with.html
http://blogcunayz.blogspot.com/2011/12/menu-rocking-rolling-rounded-dengan.html


Description: Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3
Rating: 4.5 4.5

Efek round hover pada image apabila dilalukan cursor






View Demo :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmn_9gPA5bW75RHdSrw9Co1iUwMVKxUsKEU70CV0N2OUE4E1kOGt0fa9ImvnZ-jsFETt0eymVSGdD63w2MI7lZLjOnoIA8KjHUBIDDxcQv4fh0UqwLvli8K5vU19-ZW8Lte2eClZBkIo/s400/view-blogger-tutorial-demo.png


Klik gambar yang ada disana dan Lihat efek gambarnya sob :D
Lanjut ke pembuatannya :
Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari kod 

/* Headings
atau

/* Header

Copy kod di bawah dan paste SEBELUM kode /* Headings atau /*Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

/*Header


4) Save dan lihat hasilnya.

Selamat mencoba! :)
Description: Efek round hover pada image apabila dilalukan cursor 
Rating: 4.5 4.5