Tutorial Blog for Stylish Blogger: Agustus 2010

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.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

Sprites or Hover

4 Komentar

Supaya paham dengan apa artinya sprites, maka postingan kali ini diangkat dari ide tersebut. Trik yang hampir-hampir mirip map area dengan trik sprites ini makin meramaikan dunia persilatan web sekarang ini :)) Ide aslinya mah dari sini kok sob ;)) Codepal :D Coba scroll paling bawah pada web tsb, maka akan ada contohnya ;)) Jika dalam bentuk screenshot akan tampak seperti ini:

Pasti sudah ngeuh lah yah :D Dibutuhkan gambar dan beberapa kode CSS dan HTML guna mau memakai trik ini sob b-) Didalam paket gambar sudah ada 1 buah gambar (skin) guna apabila sobat mau menambah link! ==> skin picture Ini gambar yg harus sobat miliki dan lalu dihosting terlebih dahulu gambarnya.

Kode CSS

Letakan kode CSS diatas kode ]]></b:skin> (kalau yg berbau CSS internal, semuanya selalu begini meletakannya)

#account {
position: relative;
width: 340px;
float: left;
}
#account ul {
padding: 0px;
margin: 0px;
position: relative;
list-style-type: none;
}
#account ul li {
position: relative;
float: left;
}
#account ul li a{
width: 56px;
height: 61px;
display: block;
text-indent: -9999px;
}
#account ul li a:hover{
background-position: center bottom;
}
#blog {
background-image: url('blogspot.jpg');
background-position: center top;
}
#fb {
background-image: url('facebook.jpg');
background-position: center top;
}
#linkedin {
background-image: url('linkedin.jpg');
background-position: center top;
}
#orkut {
background-image: url('orkut.jpg');
background-position: center top;
}
#twitter {
background-image: url('twitter.jpg');
background-position: center top;
}
#yahoo {
background-image: url('yahoo.jpg');
background-position: center top;
}

Kode HTML

Karena link yg dibuat menunjukan account yg kita miliki, maka letakan sesuai selera sobat (Add a Gadget ► HTML/Javascript)

<div id="account">
<ul>
<li><a href="http://address-link.com" id="blog">Blogspot</a></li>
<li><a href="http://address-link.com" id="fb">Facebook</a></li>
<li><a href="http://address-link.com" id="linkedin">Linked-in</a></li>
<li><a href="http://address-link.com" id="orkut">Orkut</a></li>
<li><a href="http://address-link.com" id="twitter">Twitter</a></li>
<li><a href="http://address-link.com" id="yahoo">Yahoo!</a></li>
</ul>
</div>

Sudah beres deh ;)) save dan lihat hasil kreasi kalian. Jika sobat mau berkreasi menjadikan link share, maka kode link yg dibutuhkan:

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Del.icio.us</a>
<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a>
<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>StumbleUpon</a>
<a expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Reddit</a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Google Bookmarks</a>
<a expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a>
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Facebook</a>
<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Mixx</a>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a>
<a expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Linkedin</a>
<a expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>DesignFloat</a>
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Technorati</a>
<a expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a>
<a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>MySpace</a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Blinklist</a>
<a expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>FriendFeed</a>
<a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Newsvine</a>

Pilih deh yg mau dipakainya ;)) Selamat berkreasi :-h

▼ ▲

Prozine and Magazine Premium Template Blogger

5 Komentar

▼ ▲

Make Short Link on Blogger

7 Komentar

Postingan gaya kali ini...hmmm...bertemakan memendekan (membuat pendek) ;)) Kalau menyangkut urusan mendek memendekkan pasti tidak jauh dengan link :D Yes thats right...:) Sebenarnya artikel ini Beben (si bloglang ganteng kalem) awali sejak membaca postingan dari salah satu web template for blogger BTemplates. Jika sobat memasuki halaman tersebut, maka akan mendapatkan cara memperpendek link pada post satu halaman penuh berdasarkan bit.ly API google project.

Karena trik tersebut tidak jalan pada blog aku ini, maka aku meneruskan bertualang tanpa menyerah, tidak kenal lelah, penuh harapan dan semangat Ramadhan menyertai :-" Ternyata harapan itu muncul pada seorang sobat berkenegaraan India (Baruva) :-bd Engineer, Programmer, Designer dan juga pecinta web :x Tanpa ragu 9lessons.info mengeluarkan trik "Create Bit.ly Short URLs Using Jquery and Ajax" ;) Disana sudah jelas sekali bagaimana untuk membuat semua link yg panjang menjadi pendek dengan basis jQuery and Ajax terintergrasi pada Bit.ly.

Sign up dulu nih To use the bit.ly javascript client library, you must pass your login and apiKey in the URL instead of the sample ones above. If you do not have an apiKey, sign up for a bitly account and go to your Account page to get your apiKey. Kalau urusan sign up dah beres baru perhatikan deh pada script yg telah dibuat oleh teman kita dari india :P "Project Hosting on Google Code"

Keterangan warna pada script diatas:

Biru / Blue
Merah / Red
Hijau Terang / Greenlight

Masukan seluruh script tersebut dengan melakukan on Dashboard ► Design ► Page Elements ► Add a Gadget ► HTML/Javascript :D Kalau sobat bisa memadukan script diatas yg dari india dengan keluaran btemplates, mungkin akan lebih gaya tuh :)) dan jangan lupa untuk melapor sama bloglang kalo berhasil yak ;)) :">

Jika sobat pusing dan mau cara yg instant dalam memendekan link postingan sobat untuk blog tersayang :x ada juga. Trik ini Beben buat sendiri setelah melakukan semedi 100 tahun sob :D Untuk meletakannya sobat tinggal atur saja sendiri deh yah!!! Kalau bisa dibagian category setelah readmore! terserah!!!

<a expr:href='"http://ggl-shortener.appspot.com/?url=" + data:post.url' target='_blank'>Short URL this page</a>

Salam bloglang GAYA!!! :-bd
Wassalam :-h

▼ ▲

Interest with Pluralink

6 Komentar

Benar-benar repot mencari artikel gaya, unik, dan nyentrik :-s Pas emut gi mending sih gak apa², nah ini pas gak ada ide dan moodnya gi ngedown fiuhhh...#-o Kalau bukan demi followers tercinta dan pengunjung setia blog Beben si bloglang ganteng kalem ini, mungkin sudah ;)) :D Setelah melakukan pengubekan di web orang, dan postingan gaya & unik kali ini jatuh pada Pluralink :D Secara singkat adapun pengertian dari pluralink yaitu membuat beberapa link dengan hanya menggunakan penulisan hanya satu link. Jadi ketika kita menulis satu syntax link, bisa ada 2 atau 3 link yg menyertainya :-bd Seperti biasa screenshot demonya ;))

Bagaimana sobat? gaya bukan... Jika memang tertarik silahkan kunjungi link berikut ini guna mendapatkan kode-kode dan script yg memang sudah tersedia. Jadi sobat mah tinggal masukin saja itu ramuan kedalam template sobat click here. Jika sudah mendapatkannya silahkan enced-enced readmore... Disana sebenarnya sudah jelas sih, dan disini Beben cuma membantu meletakannya saja ;)) :"> Kalau saya mah tidak terlalu mengurusi SEO dan browsingan yak sob, jadi kode yg cukup dimasukan ke template sbb:

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />

Letakan kode tersebut setelah tag <head> dan save. So didalam menuliskan linknya nanti akan ada perubahan menjadi kawas kieu sob :D
<a href="http://firstlink.com/||http://secondlink.org/" title="First link description||Second link description">Title Link</a>
Kalau mau tiga yaaa tinggal ditambah kalii yak :-"
<a href="http://google.com/||http://yahoo.com/||http://bing.com/" title="Google||Yahoo||Bing">Search Engines</a>
Beres deh, eit tunggu dulu sob, kalau dengan begitu saja pasti si pluralink akan terbuka sama di tempat sob. Bagaimana jika membukanya open tab!!! Masukin saja script berikut diatas tag </body>
<script type="text/javascript">
pluralink.pluralinkOptions.blank = true;
</script>
Wassalam :)

▼ ▲

Ngabuburit

9 Komentar

▼ ▲

New Related Articles Widget

6 Komentar

Diawali dengan percakapan hangat sehangat mentari pagi dikala itu aku Beben si bloglang ganteng kalem dengan salah satu master blog kita Kang Rohman berbicara kecil mengenai para master dari luar negeri.
Beben: "Kang kamana nyak master tutorial blog anu ti luar teh!!! (celoteh aku dalam bahasa jerman sedikit perancis)"
Kang Rohman : "Oh para master pro toh, ya mungkin mereka sudah tidak aktif lagi dan mungkin sudah tidak mengupdate blognya lagi (bosan)"
Beben: "Hmmm...(desahan sedikit menahan kecewa)
Begitulah kira-kira sepenggal percakapan diantara salah satu master dengan si bloglang :D

Tanpa sengaja mentok alias jalan-jalan booo, ke salah satu master dari luar yang pro pro b-) Ternyata eh ternyata...edan dong coy, gile cut, wah mantap punya, ayeh ayeh eh eh eh Master Hoctro dooooong...!!! Sobat kita ini mengeluarkan hack lagiii. Super sekali (Mario Teguh style) :-bd Hack tersebut dinamakan dengan "Testing of the new Related Articles Widget" :D Walau kayaknya belum final tapi sobat mungkin akan mempertimbangkan hack related post karya master kita ini (eh master orang deng) ;)) :"> Sepenggal petikan kinerja hack related post...

...Widget bentuk permintaan dari semua kata kunci "(dalam hal ini "label") dalam satu posting, query, dan mendapatkan daftar yang dihasilkan untuk tulisan paling relevan dari blog kita. Ini seperti query sobat daftar istilah dan mendapatkan hasil dari pencarian google di http://www.google.com/. Hasilnya adalah, sebuah "benar-benar artikel yang terkait yang paling" yang relevan link, tidak seperti yang sebelumnya - di mana hanya posting terbaru dari tiap label muncul. Kali ini, kami menggunakan algoritma yang terkenal peringkat Google untuk melakukan hal yang "istimewa" bagian untuk hasil...

:-/ :-? Jadi simpelnya master Hoctro membuat related articles yg kinerjanya dan tampilan seperti algorithm google.

Penerapannya sangat mudah kok sob Dashboard ► Design ► Page Elements ► Add a Gadget ► pilih yang HTML/Javascript Masukan kode berikut ini...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

//var website = "YOUR-NAME.BLOGSPOT.COM";
var website = getBaseURL();
var hoctroRelated = "site:" + website + " ";

function OnLoadRelated() {
// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root

var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("searchHoctroRelatedForm"));

// populate with searcher
var blogSearch = new google.search.WebSearch();
blogSearch.setUserDefinedLabel("Related Articles");
var options2 = new google.search.SearcherOptions();
options2.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
searchControl.addSearcher(blogSearch, options2);
searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);
searchControl.execute(hoctroRelated);
}

// Copied from http://www.gotknowhow.com/articles/how-to-get-the-base-url-with-javascript
function getBaseURL() {
var url = location.href; // entire url including querystring - also: window.location.href;
var baseURL = url.substring(0, url.indexOf('/', 14));
if (baseURL.indexOf('http://localhost') != -1) {
// Base Url for localhost
var url = location.href; // window.location.href;
var pathname = location.pathname; // window.location.pathname;
var index1 = url.indexOf(pathname);
var index2 = url.indexOf("/", index1 + 1);
var baseLocalUrl = url.substr(0, index2);
return baseLocalUrl + "/";
}
else {
// Root Url for domain name
return baseURL + "/";
}
}

// Callback main function
$(document).ready(function() {
var labelArray = new Array();

$('div.post-footer-line span.post-labels a').each(function(idx, el) {
var test = 0;
var textLabel = $(el).html();
for (var i = 0; i != labelArray.length; i++) {
if (labelArray[i] == textLabel.toString()) test = 1;
}
if (test == 0) {
labelArray.push(textLabel.toString());
hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
}
}); // each
}); // function

// Important, this has to be called here, otherwise main var is not yet created
google.load('search', '1.0');
google.setOnLoadCallback(OnLoadRelated, true);

//]]>
</script>

<style>
//#searchHoctroRelatedResults a.gs-title, a.gs-title * { color : brown; }
//#searchHoctroRelatedResults .gs-webResult .gs-snippet { display : none; }
#searchHoctroRelatedResults .gs-webResult .gs-visibleUrl { display : none; }
//#searchHoctroRelatedForm { display : none; }
</style>

<div id="searchHoctroRelatedResults">Loading...</div>
<div id="searchHoctroRelatedForm">Loading...</div>
<h6>Related Articles Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u></h6>

Lihat kode yg diberi warna biru, pilih salah satu var yg mau dipakainya! Ganti kode yg berwarna merah dengan nama blog sobat. Kalau urusan penempatan Beben tidak akan menjambarkannya, tapi kalau mau cara cepat pada halaman Page Elements drag saja itu widget related postnya (mudeung sukur gak mudeung usaha lagi) :)) Screenshot my demo...Screenshot. UPDATE
Byeee...selamat menunaikan ibadah di bulan Ramadhan :)

▼ ▲

Kemarin siapa yak yang menanyakan "gimana cara bikin CBox bisa gitu" ;)) :D lupa namanya :"> :p Karena alamat link cara buatnya lupa yaa jawab ajah lupa gimana cara bikinnya :)) Sekarang mah sudah ketemu nih Codelifter, silahkan kalau sobat mau membaca versi aslinya ;) Kalau mau yg sudah dirombak macam kayak aku Beben si bloglang ganteng kalem, ya tinggal ngikutin ajah postingan berikut ini. Bagaimana cara membuat amazing glider menu ;)) yg dimodif jadi Cbox :))

Kode CSS

Letakkan diatas/sebelum kode ]]></b:skin>

#menuShow{
border:none;
position:fixed;
margin-top:33px
}
#menuSelect{
border:3px solid #f60;
background-color:#F7DFB5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
position:fixed;
width:auto;
height:auto;
padding:5px;
}

Setelah itu cari kode </body> dan letakkan script berikut ini diatasnya...read more dulu ;))

Script

Setelah itu untuk kode HTML, letakkan didalam tag
<body>
blah
bleh
bloh
</body>
Yang penting jangan sampai bentrok dengan penutup tag yg lainnya yah ;)

Kode HTML

<div id="menuSelect">
<center><a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="http://LINK-GAMBAR-CLOSE.jpg" width="" height="" border="0"></a></center>
ISI
KONTENT
LETAKKAN DISINI
</div>

<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="http://LINK-GAMBAR-ENGSEL.jpg" width="" height="" border="0"></a>
</div>

Gantilah link gambar dengan selera sobat masing²...dan gantikan tulisan ISI KONTENT LETAKKAN DISINI dengan kontent yg mau :) Mau menu, Cbox, kommentar dan bla-bla :))
See you and good luck :-h

▼ ▲

Be a Creative

5 Komentar

▼ ▲

Screensaver for Web or Blog

9 Komentar

Postingan kali ini bermula dari penasaran pada salah satu blog sobat. Ketika lama ditinggal kok pada layar monitor Beben si bloglang ganteng kalem berubah menjadi hitam semua gitoh ;)) Eh pas mouse digerakin ada lagi blognya ;)) keyen cekali yak sob bisa begituh. Ternyata ini dinamakan dengan screensaver. Dengan berupa javascript yg sudah jadi, kita tinggal mencomotnya saja nih sob :D Keluaran dari Online Leaf web yg merupakan penggerak makes a much Greener Web :-/ :D

Cari tag <head> pada template blog sobat, lalu letakkanlah script berikut sesudahnya...

<script language="javaScript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

Bagaimana hasilnya... Mari kita lanjut pada sesi advanced ;) Jika sobat perhatikan dengan seksama ketika efek screensaver keluar ada beberapa tulisan samar-samar!!! Produk ini support pada 13 macam bahasa termasuk bahasa kita tersayang Indonesia.

Kalau waktu keluar efek dirasa kurang cepat, sobat bisa melakukan pengeditan dalam penulisan script diatas tadi.

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=id&time=90"></script>

Perhatikan tulisan yg dibedakan warnanya itu??? Adios...:-h

▼ ▲

Bloggers de Buffalo State

2 Komentar

Beben sang bloglang tidak bisa berkata apa-apa lagi nih sob :-bd Dari sekian para tutorial blog yg sudah pensiun, ternyata masih ada yang aktif [-O< Keuletannya, rajin, kreatif, pintar dan tetek bengek lainnya patut kita berikan kepada sobat blogger kita ini (*) Tidak tahan lihat tutorial-tutorialnya, mantap booo...:-bd Yang sobat perlukan tinggal satu saja dalam mengambil ilmu yg sudah dia berikan ini :D Translate dari bahasa spanyol ke bahasa masing-masing =)) Inilah si bloglang yg melanglang buana kesana kemari sampe menclok ke negara matador :)) Baca-baca artikelnya sampe :-j ngabisin ~O) dan tentunya rokok ;)) Satu kata dah buat sobat blogger kita ini sob...GAYA Introduce...
Loseasi
Nos vemos de nuevo con la bloglang ... bye bye :)) :-h

Kalau Beben sih tertarik dengan menu fixed yg ada disana sob ;)) Yang bergambar icon RSS di pojok kanan atas itu tuh :p Kalau mau kayak beginih inih ramuannya...

Kode CSS

/* VkuMenu */
#nav a:link{color:#999999}
#nav a:visited{color:#FFFFB3}
#nav a:hover{
color:#fff;
text-decoration:none;
}
#nav a:focus{
color:#fff;
text-decoration:none;
}
#nav a:hover{
color:#fff;
text-decoration:none;
font-size:100%;//font-size:95%
}
#nav ul a:hover{
background:#555555;
text-decoration:none;
}
#nav a{text-decoration:none;
display:block;
padding:2px 10px;
background:#000;
-moz-border-radius:7px;
-webkit-border-radius:7px; margin:0;
color:#777;
font-size:100%;//font-size:95%;
}
#nav li li a{text-align:left}
#nav ul{
-moz-border-radius:8px;
-webkit-border-radius:8px; right:0; border:1px solid #000; background:#000;
}
#nav, #nav ul{
padding:5px;
list-style:none;
line-height:25px;
}
#nav li{
display:block;
list-style:none;
position:relative; //width: 100%;
}
#nav{
display:block;
position:fixed;
list-style:none;
z-index:5;
top:100px; //jarak tombol dari atas layar monitor;
right:-10px;
text-align:left;
z-index:99999;
width:auto;
}
#nav li li{float:none}
#nav li li a{position:relative; float:none}
#nav li ul{
position:absolute;
margin-right:-500px;
width:129px;
}
#nav li:hover ul ul{margin-right:-500px}
#nav li:hover ul{
margin-right:5px; // margin-right:10px; margin-top:0; //margin-top:0px;
}
#nav li li:hover ul{margin-right:80px}
/* END VkuMenu */

Kode HTML

<div id='nav'>
<li><a href='#'><img alt='' border='0' src='http://link-gambar-resolusi-30x30.png' title=''/></a>
<ul>
<li><a href='http://your-link.com' title=''>Your Title</a></li>
<li><a href='http://your-link.com' title=''>Your Title2</a></li>
<li><a href='http://your-link.com' title=''>Your Title3</a></li>
<li><a href='http://your-link.com' title=''>Your Title4</a></li>
<li><a href='http://lyour-link.com' title=''>Your Title5</a></li>
</ul>
</li>
</div>

Save.

▼ ▲

CSS3 Menu DropDown

4 Komentar

Melihat postingan Kang Rohman mengenai CSS 3 Menu jadi ajah ngebloglang cari-cari menu CSS3 juga :D Walaupun ada generator untuk itu, tidak ada salahnya sobat mengetahui bagaimana membuat menu dengan CSS3 ini secara lebih dekat ;)) Datang dari web design hebat Web Designer Wall, disana dijabarkan secara rinci how we can do it b-)

Bagaimana...Mungkin ini cocok bagi yang akan membangun template dari awal kali yak ;)) Jadi bisa punya menu yg begitu indah dan menawan :-" Untuk melakukannya dibutuhkan satu buah gambar:
http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png
Grab link gambar tersebut simpan di address bar lalu enter, dan save lalu hosting.

Kode CSS3

Letakkan seperti biasa sebelum kode ]]></b:skin>

#nav {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(http://.../img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(http://.../img/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff url(http://.../img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
display: block;
}

/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://.../img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}

#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}

* html #nav {
height: 1%;
}

Kode HTML

Untuk ini letakkan didalam tag <body>...</body>

<ul id="nav">
<li class="current"><a href="http://www.your-title.com">Home</a></li>
<li><a href="http://www.your-title.com">Title1</a>
<ul>
<li><a href="http://www.your-title.com">N.Design Studio</a>
<ul>
<li><a href="http://www.your-title.com/portfolio">Portfolio</a></li>
<li><a href="http://www.your-title.com/wp-themes">WordPress Themes</a></li>
<li><a href="http://www.your-title.com/wallpapers">Wallpapers</a></li>
<li><a href="http://www.your-title.com/tutorials">Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href="http://www.your-title.com">Web Designer Wall</a>
<ul>
<li><a href="http://jobs.your-title.com">Design Job Wall</a></li>
</ul>
</li>
<li><a href="http://your-title.com">IconDock</a></li>
<li><a href="http://your-title.com">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Title2</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Title3</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Save.

Bye...bye...:-h

▼ ▲

Can All Be Random

2 Komentar

Seiring mendekati bulan suci Ramadhan, ada kalanya kita berintropeksi diri ya sob :) Begitu juga dengan template atau yang menghiasinya ;)) Harus semarak dengan hawa-hawa religi :"> Nah...supaya tidak bosan dan lebih impressive dengan artikel yg akan Beben si bloglang sampaikan ini, bagaimana supaya bisa rubah-rubah (random) gitu :P Pada urutan pertama, bagaimana cara menampilkan tulisan/pesan/kata-kata bijak setiap kali reload/refresh akan berganti-ganti :-/ Trik ini aku dapet dari BlogU. Untuk ini Design ► add a gadget ► pilih yg HTML/Javascript :D

<i><center>
<script type="text/javascript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "Stet clita kasd gubergren, no sea takimata.";
quotes[3] = "Duis autem vel eum iriure dolor in hendrerit.";
quotes[4] = "Nam liber tempor cum soluta nobis eleifend.";
quotes[5] = "At vero eos et accusam et justo duo dolores et ea rebum.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>
</center></i>

Perhatikan pada kode script yg diberi warna merah? Jika ingin menambahkan kata-katanya harap itu juga diganti dan ini kode script yg ditulisnya...
quotes[NEXT-NUMBERS] = "blah-bleh-bloh-dut-pret.";
Bagaimana dengan gambar pada header jika memang bisa!!!

Trik ini Beben dapatkan dari http://freeyasoul.blogspot.com Jika ingin melakukan trik ini, sobat harus membuat gambar yg sesuai dengan lebar dan tinggi header/top sobat. Heres of the script...

Letakkan script tersebut setelah kode <body> Jika mau menambahkan gambar kodenya
banner[NEXT-NUMBER]="http://link-gambar.jpg"
dan perhatikan pada script pada bagian angka yg diberi warna merah!!! Perhatikan juga pd script yg diberi warna kuning UniqueID!!! Gantilah dengan ID yg ada pada template sobat. Biasanya sih bisa header, top, atau apapun.

Beres kalimat dan gambar yg bisa berubah-rubah saat reload, saatnya masuk pada sesi selanjutnya. Kalau menurut blog ini, keterangan (option) pada header bisa dirubha-rubah juga sob ;)) Kalau memang berminat silahkan deh sob Blog Immeria. Untuk yg ini Beben gak bisa coba, soalnya aku sudah ngilangin option pada headernya sob =)) ya ke sumbernya aja deh yah :D

Random Background Image for Body

<script type="text/javascript">
//<![CDATA[
var banner= new Array()
banner[0]="http://3.bp.blogspot.com/_-EN6_RPvgck/TFUnprXBWZI/AAAAAAAAEak/g3SOF8cQ86Y/sashagrey2.jpg"
banner[1]="http://2.bp.blogspot.com/-ZeGm8tSo2vQ/Td01F0wrhlI/AAAAAAAACwY/otdZPtsrazI/hotpants55.jpg"
banner[2]="http://4.bp.blogspot.com/-TfNq8fnGh-8/TcQ1AmgbLII/AAAAAAAACkg/Kg1h2tTwTRE/peta2.jpg"
banner[3]="http://2.bp.blogspot.com/-UuTqTMz28lM/TYA10Jt3pzI/AAAAAAAACMk/c6qLhEv4ev8/ola1.jpg"
banner[4]="http://3.bp.blogspot.com/-6QsWTLTeXLc/TYA2ZCTkSnI/AAAAAAAACM8/KMK4XTjedck/ola4.jpg"
banner[5]="http://1.bp.blogspot.com/_TXpuMXTxysc/St2pB2G6gTI/AAAAAAAAAXI/4haOwVyRWJ8/Pevita++Pearce.jpg"
banner[6]="http://3.bp.blogspot.com/_NOdEQKztDvs/TO8kOQCkL6I/AAAAAAAAErc/-bJF83l4ZWw/s1600/nurul%252Bsyuhada%252Bseksi.jpg"
banner[7]="http://3.bp.blogspot.com/_-EN6_RPvgck/TFUnprXBWZI/AAAAAAAAEak/g3SOF8cQ86Y/sashagrey2.jpg"
banner[8]="http://2.bp.blogspot.com/-ZeGm8tSo2vQ/Td01F0wrhlI/AAAAAAAACwY/otdZPtsrazI/hotpants55.jpg"
banner[9]="http://2.bp.blogspot.com/-1KoE6EOlWwE/Td02ZD4yS_I/AAAAAAAACwo/M0SjTThxm0s/anakkost4.jpg"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write('background:#f4f4f4 url("' + banner[random] + '") repeat left top;');
document.write(" }");
document.write("</style>");
//]]>
</script>

Wassalam...:)

▼ ▲

Look for Template Para Blogger

4 Komentar

▼ ▲

Make Image More Fancy With RGBA Effect

4 Komentar

Kali ini si bloglang Beben ganteng kalem mau sedikit berbagi mengenai memberikan efek shadow pada gambar yang ada di bagian postingan template sobat :) Disini sobat bisa nemuin property dari dasar apa-apa saja yg dapat dipakai untuk sebuah image w3.org. Kali ini tepatnya Beben mau membahas pada level ini w3.org. Yah pada sesi shadows dengan sentuhan lainnya agar efek pada gambar terlihat fancy b-)

Dalam keadaan normal gambar tanpa embel-embel apapun akan tampak sebagai berikut...
prodigy of head
Dengan sedikit sentuhan efek CSS3, sobat akan bisa menghasilkan yg kayak beginih...

prodigy of head
So...fancy bukan :))

Cari kode gambar (img) pada template sobat! Ini bisa berbeda pada setiap template. Biasanya menggunakan kode img, post img, body img atau apapun. Pokoknya img yg ada pada bagian body post. Setelah ketemu kodenya tambahkan kode CSS berikut ini [..]

img {
padding:8px;
background: #FFFFCC;
border: 1px solid #c8c8c8;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Jika efeknya tidak muncul, berarti browsingan sobat belum support :D Untuk mengetahui lebih jelas mengenai efek RGBA ini, sikat brooo:

▼ ▲