Tutorial Blog for Stylish Blogger

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

Floating Menu Gelap

4 Komentar

Sebenarnya sudah mulai jenuh juga nih memosting tutorial tentang blog :-s Males cari inspirasinya :)) senior blogger dah pada menghilang :D Satu yang menjadi pertanyaan dibenak, yang blogger mana yang weber (panggilan komunitas web) mana :-/ Kalau dibilang blogger ya blogger, weber ya weber ;;) Tak ayal sekarang banyak blog tutorial malah mosting jauh dari topik ;)) Ya bebas bebas saja lah¡ Seutas pembukaan dari bloglang yg BT (bau tukul) :P

Trik kali ini berkaitan dengan CSS atribut fixed. Hampir mirip nih si fixed ini dengan absolute :D Untuk demonya sobat bisa melihat di http://inimu.com Lihat pada bagian kanan bawah pojok :-bd
Bumbu-bumbunya:

Kode CSS

]]></b:skin>

/* ========== ImFloatMenu-Gelap CSS ========== */
#imfloatdiv {
font-family:Tahoma;
position:fixed; bottom:5px; right:5px; z-index:100;
background:url(http://inimu.com/0-img/trans-hitam-1x1.png) repeat;
padding:1px 3px;
margin:0;
border:1px solid #333333;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#imfloatul {
font-size:11px;
line-height:15px;
padding:0; margin:0;
list-style-type:none;
}
#imfloatul li {
padding:0; margin:0;
display:inline;
text-align:center;
}
#imfloatul li a {
/* font-size:11px; */
line-height:13px;
font-weight:normal;
text-decoration:none;
color:#ffffff;
padding:0 3px;
}
#imfloatul li a:hover {
background-color:#cccccc;
color:#000000;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#imfloatul li img, #imfloatul li a img {
margin:0;
padding:0;
vertical-align:bottom !important;
}
a.imfmcp { color:#333333 !important; }
a.imfmdn, a.imfmup { font-size:15px !important; padding:0 !important; margin:0 !important; }
/* ========== ImFloatMenu-Gelap CSS ========== */

Kode HTML

<body>...</body>

<div id='imfloatdiv'>
<ul id='imfloatul'>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a class='imfmcp' href='#' id='imfmcp' onclick='this.blur();' target='_blank' title='Get this widget'>♥</a></li>
<li><a class='imfmdn' href='#your UniqueID' id='imfmdn' onclick='this.blur();' title='Go to bottom'>▼</a></li>
<li><a class='imfmup' href='#your UniqueID' id='imfmup' onclick='this.blur();' title='Go to top'>▲</a></li>
</ul>
</div>

Save.

N B: Untuk kode yg diwarnai berbeda itu bisa tergantung dari bawaan template. Pada point ke 1 ada gambar, upload dan hosting. Pada point ke 2 ada UniqueID, itu disesuaikan dengan ID bagian top dan bottom template sobat.
:-h

▼ ▲

Fun With HTML Area

0 Komentar

Postingan kali ini mirip-mirip dengan teknik . Dimana kita akan menggunakan satu gambar yang bisa merekrut semua link yg ada :D (gitu kali yak keterangan yg cucok) ;)) Biasanya kan satu gambar dengan satu link :-/ nah sekarang bagaimana beberapa link hanya satu gambar 8->> Hal yg perlu diketahui bila ingin menggunakan trik ini, sobat harus sudah yakin dengan gambar dan link yg akan di buatkan menjadi map.

Dengan kata lain map ini kita sebut saja area atau daerah. Cara ini sebenarnya sudah ada sih di webnya si W3 (*) Contoh...
share Gimana, itu gambarnya satu tapi ada 3 buah link yg dimana sudah sesuai dengan design gambar b-) :-bd

Hal yg perlu diperhatikan dalam menggunakannya yaitu:

UNIQUE-ID
Shape
Coords

Disini Beben si bloglang hanya mau berbagi keterangan 2 atributnya saja yah :D ;)) :">

Attribute	Nilai	Keterangan
coords	coordinates	Menentukan koordinat suatu area.
href	URL	Menentukan URL tujuan link di suatu area.
nohref	nohref	Menentukan bahwa suatu area tidak memiliki link terkait.
shape	default rect circle poly	Menentukan bentuk suatu area.
target	_blank _parent _self _top	Menentukan mana untuk membuka halaman yang terhubung ditetapkan dalam atribut href.

Nilai coords	Keterangan
x1, y1, x2, y2	Jika bentuk atribut diatur ke "rect", itu menentukan koordinat sudut kiri atas dan sudut kanan bawah persegi panjang.
x,y,radius	Jika bentuk atribut diatur ke "lingkaran", itu menentukan koordinat pusat lingkaran dan jari-jari.
x1, y1, x2, y2, .., xn, yn	Jika bentuk atribut diatur ke "poli", itu menentukan koordinat tepi poligon. Jika koordinat pertama dan terakhir pasangan tidak sama, browser harus menambahkan koordinat terakhir pasangan untuk menutup poligon.

Selamat berkreatifitas, sok sekarang buat tombol button share, save, atau bookmark dengan metode itu :) atau sobat malah bisa lebih briliant dalam hal kreatifitas b-) See you :-h
Source: .

▼ ▲

Ajax Label Reloaded

5 Komentar

Hack satu ini mungkin sudah terbilang lawas sob. Tapi gak tau nih, Beben si bloglang baru ngeuhnya sekarang :"> Pertama sih kendala bahasa ;)) dan yang kedua memang blon ada niat ngulik-nguliknya :D Pertama-tama sobat harus sudah ada Label pada template (kategori) Karena bagian ini yg akan dihacknya :p Jika mau label yg keren dan gaya sobat bisa mendatangi blog master satu ini . Kalau mau label cara cepat sobat bisa masuk ke Design ► Page Elements ► Add a Gadget ► Pilihlah yg bertitle Label

Sudah punya label baru masuk deh kesesi hacknya :)) Jika yg berkenan dan mengerti bahasa inggris, silahkan langsung ke sumber caranya Blogger Hacked. Lakukanlah langkah demi langkah pada halaman tersebut, dan perhatikan pada point...

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

Jika ada dua kode tersebut di template sobat, gantilah kedua-duanya :) dengan kode yg diberikan.

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"'><data:label.name/></a>
</b:if>

Langkah terakhir guna menjalankan hack ini yaitu ada pada point...
Click on the button below:
Apabila semua langkah telah benar dilakukan, maka hasil dari hack ini akan terlihat seperti [..]

Langkah terakhir itulah nanti tempat terbukanya label hack ini b-) Sempurna...:D Sobat tauk tidak, aku ngeuh trik ini dari sobat kita setelah membaca postingannya :)) Kaie's Blog. Bay bay :-h

▼ ▲

N E O

7 Komentar

▼ ▲

Yahoo Emoticon for Blogger

10 Komentar

Sudah searching dengan keyword "emoticom" diblog ini :D Pasti sobat menemukan ada beberapa gaya penerapan emoticon pada blog b-) Untuk mempercantik dalam postingan kan sob :x Bisa meriah dan rame gitcyuh ;)) Setelah BW ternyata banyak juga cara-cara yang dilakukan. Selain manual dengan menghafal kode-kode yg sudah ada lalu dimasukan secara sederhana dibagian postingan sobat. Pada blogger secara default ada beberapa kode yg sudah ada nich, seperti ini...
ngedip

Bagaimana kalau kode emoticonnya si yahoo! yg diadaptasinya nich ;)) Kayak di blog aku ini, tapi dengan metode yg cukup simpel. Sobat bisa memasukan sebanyak 85 lebih emoticon dan . Di tes dan berhasil loh :P

Letakan script berikut dibawah tag <head>

<script type='text/javascript' src='http://toekang.googlepages.com/DeepaSmiley.js'></script>

Click expand here to look the script

Letakan CSS berikut sebelum kode ]]></b:skin>

.post-body img#new {
margin:0px;
padding:0px;
border:none;
vertical-align:middle;
}

Save.

Semoga berhasil :) See you :-h
Source by: http://maid3n.blogspot.com and http://beta-templatetesting.blogspot.com

▼ ▲

Keyboard shortcut	Replacement text
p	<p></p>
br	<br/>
ul	<ul></ul>
ol	<ol></ol>
em	<em></em>
h1	<h1></h1>
etc...	etc...

Keyboard shortcut	Replacement text
hre	<a href="Your Pasted Text"></a>
bk	<blockquote>Your Pasted Text</blockquote>
img	<img src="Your Pasted Text"></img>
etc...	etc...

▼ ▲

Dipilih Dipilih Dipilih

2 Komentar

▼ ▲

jQuery Social Share Toolbar for Blogger

2 Komentar

Ketik share pada kotak search blog aku ini, dan lihat apa yang ada disana ;)) Share atau berbagi mungkin merupakan fasilitas yg harus dimiliki bagi pemilik web/blog. Dengan adanya feature tersebut kita dapat berbagi antara sesama :) Jangan curi-curi, gak betul itu dan dilarang sama agama ;)) Masa mau nambah ilmu dosa juga ikut nambah :)) APA KATA DUNIA!!! Dunia menjawab "capek deh" :p Capek lah wong orang yg punya usaha kok malah diembat =)) Be grow up man :-bd

Sudah dilakuin belon tadi disuruh search kata share :-/ Nah kali ini beben si bloglang ganteng kalem mau berbagi trik gaya tombol berbagi (share button) kreasi dari CSS Creator. Bisa buka web tersebut dan lihat dipojok kanan bawahnya ;) For the original posted you can visit Original posted. Disana sudah ada penjelasan bagaimana trik ini berkerja :D Kalau mau diblog sobat memakai yg begituan, maka ada syarat-syarat kecil berlaku disini, syaratnya yaitu klik tombol read more pada artikel ini :">

Letakan kode CSS sebelum/diatas kode ]]></b:skin>

#socializethis{
background:#CCC;
border:solid 1px #666;
border-width: 1px 0 0 1px;
height:15px;
width:260px;
position:fixed;
bottom:0;
right:0;
padding:2px 5px;
overflow:hidden;
/* CSS3 */
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
-moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
}
#socializethis a{
float:left;
width:32px;
margin:3px 2px 2px 2px;
padding:0;
}
#socializethis span{
float:left;
margin:2px 3px;
text-shadow: 1px 1px 1px #FFF;
color:#444;
font-size:12px;
}

Harus memiliki script jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</body>

Save.

Screenshot for blogger after i'm do practice...

PERHATIAN!!!

Dikarenakan semua script plugin ini nantinya dihosting, maka hostingan gambar harap diperhatikan dan juga link share yg akan sobat mau tambahkan/dipakai.

Pada artikel aslinya ada script cookies, dan beben tidak memasukannya. Jika sobat mau memakainya dapat diambil script tersebut di Cookie.Js TXT. Pas praktek jg tidak dipakai kok, tapi jalan sob :D bay bay :-h

▼ ▲

Look for Slideshow

5 Komentar

▼ ▲

45+ CSS Trick Must be Known

4 Komentar

▼ ▲

Large Drop Down Menu

3 Komentar

Tadinya mau meng-convert template yang masih pakai kode klasik ke kode blogspot sekarang, eh malah puyeung kepalanya ~X( gak jadi deh :D Banting setir BW ke web-web developer menemukan kembali menu yg gaya punya nih sob b-) Oh iyah sekedar ngasih tau aja nih, kalo mau search tentang artikel yg dicari diblog aku ini tinggal masukkan kata yg bersangkutan dengan artikel yg dicarinya ya sob ;) Pasti gak ada deh =)) kidding... :D Seperti keyword menu, maka akan terbuka deh kata-kata yg ada kata menunya sob :)

Artikel gaya hasil BW juga mengenai menu nih. Tidak tanggung-tanggung menu yg diciptakan ini diberi nama Large Drop Down Menu :-bd Cek ge dot brooo...

Bagaimana setelah melihat live demonya :-? ah pasti pada mau kan dg menu yg kayak itu :x Sikaaat mang...ayeh

Kode CSS letakkan diatas/sebelum kode ]]></b:skin>

ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:35px;
background-color:#09689F;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #10608E;
border-bottom:1px solid #10608E;
border-left:10px solid #09689F;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#09689F;
height:35px;
line-height:35px;
cursor:default;
padding:0px 10px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #0E5A85;
border-left:1px solid #0E5A85;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:35px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #09689F;
border-top:1px solid #10608E;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#1C5E7E;
color:#fff;
display:block;
clear:both;
padding:5px 10px;
text-transform:uppercase;
text-align:center;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #0f0;
-moz-box-shadow:0px 0px 2px #999 inset;
-webkit-box-shadow:0px 0px 2px #999 inset;
-box-shadow:0px 0px 2px #999 inset;
}
ul.ldd_menu ul{
list-style:none;
float:left;
border-left:1px solid #09f;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
text-decoration:underline;
color:#F72B25;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 2px #333;
background:#4096EE;
}

Kode HTML letakkan didalam tag <body>

<ul id="ldd_menu" class="ldd_menu">
<li>
<span>TITLE1</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
<li>
<span>TITLE2</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
<li>
<span>TITLE3</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
</ul>

Letakkan script berikut!!!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/*** the menu  */
 var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
 $menu.children('li').each(function(){
 var $this = $(this);
 var $span = $this.children('span');
 $span.data('width',$span.width());
 $this.bind('mouseenter',function(){
      $menu.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':'510px'},300,function(){
       $this.find('.ldd_submenu').slideDown(300);
 });
}).bind('mouseleave',function(){
      $this.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':$span.data('width')+'px'},300);
  });
 });
});
</script>

Save.

Pada langkah ke-3 ada script yg Beben beri warna biru. Itu script plug-in sob, jadi jika sobat sudah memiliki script yg tidak Beben birukan tinggal memasukkan saja script plug-innya :-/ Penempatannya bisa sama seperti contoh diatas, kalau tidak berhasil letakkanlah script plugin diatas/sebelum tag </body> Screenshot for my modification coded of CSS and HTML :D

Bye bye...see you, WassaLam :-h :)

▼ ▲

Eng Ing Eng

6 Komentar

Bloglang si Beben ganteng kalem is back :p Bawa oleh-oleh mantap tentang artikel gaya punya b-) :-" Eng Ing Eng =)) No gaya, no review..no unique, no share and no no no yang lainnya :)) Bagi para pecinta template, khususnya template yang belum banyak diedit-edit dalam penampilan, gambar atau default theme singkat cerita :D mungkin ini bisa menjadi acuan sobat dalam membuat template yg sesuai diinginkan, dg kode-kode berbasis blogspot ;)) Tidak hanya itu, kode yg ada didalam template ini diclaim mengikuti aturan dari . For example from author and .

Bagaimana nih apa sobat tertarik dengan templatenyo :)) Basic sekali tapi kalau dengan sentuhan kreatifitas kalian masing-masing akan menghasilkan template yg gaya punya tuh :) Kreatif itu jurus membuat blog keren kayak aku ini :D :"> Ada tiga buah template yg Beben mau share disini :)

Dari kiri ke kanan nomor 1, 2, 3 nomor urut untuk downloadnya ;))

Satu itu hasil dari BW :D Pecinta gambar yg bisa jalan-jalan macam slider :-/ Dengan gambar transparent yg lembut dan lucu-lucu :-? ada juga :-" Kembali sobat harus memasuki web berikut . Disana ada 2 buah link, link yg kedua itu template dg kode klasik!!! Sebenarnya yg beben mau kasih tauk itu gambar yg berjalan-jalan itu sob, dan ini dia kode source untuk itu :D

<iframe src="http://site.personnel.free.fr/scroller.htm" height="150" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

Simpan deh terserah mau dimana enaknya itu frame :-bd Bagi yg suka chat, nih bisa disikat...nah ini bonusnya, bagi sobat yg suka gonta-ganti warna. Untuk background cocok, untuk mempercantik gitoooh. Ada dua nih kalau emang yg berminat!

<form>
<select Size=1 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="#CDAB7D" SELECTED>???
<option value="aquamarine">aquamarine
<option value="blue">blue
<option value="cadetblue ">cadet blue
<option value="chocolate">chocolate
<option value="darkred">dark red
<option value="darkkhaki">dark khaki
<option value="darkgoldenrod">dark goldenrod
<option value="darkslateblue">dark slate
<option value="deeppink">deep pink
<option value="darksalmon">dark salmon
<option value="gold">gold
<option value="hotpink">hotpink
<option value="lime">lime
<option value="red">red
<option value="salmon">salmon
<option value="springgreen">springgreen
<option value="tan">tan
<option value="tomato">tomato
<option value="turquoise">turquoise
<option value="wheat">wheat
<option value="yellow">yellow
</select>
</form>

See you salam bloglang \m/ Wassalam :)

▼ ▲

Hover Attribute for Comments Box on Blogger

7 Komentar

Masih ingat tidak sobat dengan fungsi dari hover :-? Jika kita bisa kreatif dengan kode CSS, trik hover ini bisa dibikin menarik dan fungsional dalam menyembunyikan sesuatu ;)) (kayak koruptor ada sembunyi-sembunyi yak) :D Adapun hover itu jika kita menyorot satu buah link, dan ada efek yang ditimbulkan!!! That is i mean about the hover...prikitiwww inggrisan euy =)) Dan sekarang Beben si bloglang nuganteng kalem tea :P memadukannya dengan kotak komentar pada blogger.

Dengan menyisipkan sebuah link, yg dapat berupa gambar atau juga tulisan akan menghilangkan kotak komentar pada blog >:) Dengan menyorot link tersebut nanti akan timbul lagi deh itu si kotak komentarnyo B-) Kita tengok pada screenshot yg sudah Beben praktekan diblog uji coba ;)) :)) Perhatikan pada kotak komentar yah :)

Centang Expand Widget Templates
Kode CSS letakkan seperti biasa diatas kode ]]></b:skin>

ul#bbnbox{
float:left;
display:inline;
margin:0;
position:relative;
z-index:10;
}
ul#bbnbox li{
clear:both;
float:left;
display:inline;
}
ul#bbnbox li div{
position:absolute;
top:XXXpx;
padding-top:11px;
left:-5000px;
width:XXXpx;
height:XXXpx;
z-index:10;
}
ul#bbnbox li:hover div,
ul#bbnbox li.sfhover div{
left:0px;
}
ul#bbnbox li div iframe{
width:XXXpx;
height:XXXpx;
}

Cari kode berikut bos!

<b:includable id='comment-form' var='post'>
blah-bleh-bloh
blah-bleh-bloh
blah-bleh-bloh
</b:includable>

Gambar bisa diganti dengan tulisan, be a creative :-bd Jadi secara keseluruhan kodenya nanti akan tampak seperti berikut bos.

<b:includable id='comment-form' var='post'>
<ul id='bbnbox'><li><a href='#'><img src='HTTP://LINK-GAMBAR.JPG'/></a><div>
<div class='comment-form'>
<a name='comment-form'/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</div></li></ul>
</b:includable>

Save.

85V9C7B2EVYU

▼ ▲

Sliding Panel Using jQuery Plugin and CSS3

4 Komentar

Sobat masih ingat dengan postingan Beben yang terdahulu enggak :p Slide Out With jQuery Plug-In, atau dengan yg ini nih sob Side Bar Menu. Artikel kali ini juga tidak jauh akan membicarakan mengenai slide menu yg keberadaannya ada di pinggir kiri/kanan ;) sebuah web/blog. Sebenarnya postingan ini sudah pernah dibikin oleh sobat kita http://granoblog.blogspot.com dengan title "Shoutmix Sliding Panel dengan jQuery" Disesi postingan sobat kita entuh, pada bagian tombol slidingnya no-fixed :-?? nah disini Beben si bloglang ganteng kalem mau berbagi bagaimana versi fixed dari sumber yg sama ;)) :">

Setelah membuka sumber tutorialnya nanti akan ada 3 buah demo. Nomor 3 ini yg ingin Beben bagi pada sobat² dan followers tercintaku :x :"> Setelah aku praktekan di blog dummy :D jadinya bisa sobat saksikan di RCTI saluran televisi kejuaraan sepak bola dunia (screenshot dibawah ini) ;))

Bahan-bahan untuk membuatnya...

Letakan CSS3 berikut diatas kode ]]></b:skin>

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 15px 35px 15px 15px;
font-weight: 700;
background:#333333 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(minus.png) 85% 55% no-repeat;
}
.panel {
position: fixed;
top: 80px;
right: 0;
display: none;
background: #aaa;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #fff;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: red;
text-decoration: none;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
}

Letakan script berikut diatas/sebelum tag </head>

Masukkan kode HTML berikut didalam body sobat, bisa juga diatas tag </body>

<div class="panel">
ISIKAN KONTENNYA DISINI SOOOOBBB!!!
</div>
<a class="trigger" href="#">Your Title</a>

Save.

Juli 2010