Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Membuat Tombol Keren Untuk Blog

Membuat Tombol Keren Untuk Blog
Membuat Tombol Demo dan Download-Sebelumnya saya minta maaf baru bisa muncul kembali untuk mengurus blog berkarat ini :D. Pada kesempatan kali ini saya mencoba untuk berbagi mengenai membuat tombol keren untuk blog, tombol ini bisa kita gunakan untuk apa saja mulai dari tombol untuk demo, download dan lain sebagainya. Untuk demo dari tombol tersebut seperti dibawah ini.
Simpan kode dibawah ini diatas ]]></b:skin>.
/* Button */
.button{ text-align:center;color:#fff; display:inline-block; white-space:nowrap; background-color:#00aaff;background: linear-gradient(#00aaff,#0994d9); border-radius:2px 2px 2px 2px; cursor:pointer; font-family:Coda; font-size:14px; padding:3px 8px 1px; position:relative; text-shadow:0 1px 0 rgba(0,0,0,0.3); top:-1px; transition:none 0s ease 0s; border:1px solid #888;box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #bbb;}
.button:hover { background: linear-gradient(#0994d9,#00aaff)}
.button:active { background: #00aaff;top:0; box-shadow:inset 0 2px 0 rgba(255,255,255,0); }
Untuk penggunaannya tambahkan kode dibawah ini saat membuat postingan (gunakan mode HTML).
<a href="URL Disini" target="_blank"><span class="button"><b>DEMO</b></span></a>
Previous
Posting Lama

53 Komentar

avatar

Bagus mas ... masnya pakai highlighter apa sih ?

BalasHapus
avatar

SyntaxHighlighting biasa mas, ini juga saya dapat dari blog Mas Agit, cuman saya modifikasi agar tidak persis seperti aslinya. :D. SyntaxHighlighting ini juga sudah di share oleh mas Fian di www.fianetmu.com/2013/07/syntax-highlighter-ringan-dan-keren.html. :)

BalasHapus
avatar

lain kali saya coba mas kayaknya nggak terlalu sulit, mohon maaf lahir dan batin juga mas

BalasHapus
avatar

Bisa dicoba ini untuk blog baru kelihatannya menarik.

BalasHapus
avatar

Saya ingin coba sih, tapi nanti saja.

BalasHapus
avatar

hehehhe... admina ka blok :)

BalasHapus
avatar

gan mau nanya kalau jquery letak yg bagus dimana ya? saya meletak kan di ?

BalasHapus
avatar

emang keren gan :D
udah lama nih ga mampir, makin eksis aja blognya :)
ditunggu nih kunjungan baliknya :)

BalasHapus
avatar

Iya mas admin kena blok tuh .... :D

BalasHapus
avatar

blognya makin keren dan mantap mas :-d

BalasHapus
avatar

iya nih, soalnya masih belum bisa manipulasi script ini.
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
content[i].className = "spammer-detected";
}
}
}
blockLinks('comment_block', 'p');

Masih bingung. :D

BalasHapus
avatar

blog saya masih jelek mas bagusan punya mas.:)

BalasHapus
avatar

wach tidak juga mas biasa saja kok..

BalasHapus
avatar
avatar

gan cara bikin post author gimana ?

BalasHapus
avatar

Maksudnya infonya gan ?
Kode CSS nya.
.infox { -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s }
.infox{ position:absolute; background-color:#00A8FF; background-position:6px 4px; background-repeat:no-repeat; background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAj9JREFUOI1lUzFrVEEQ/mb3vb3LXYrTEK5Jp02qoKYQrUQICaT1T6QWW63TGisrbW0lKEHRLiBiSCUBUQwoKWICyb137+3OfBa5e9wls3zFMt98zDc7C1wKkhsk35jqmZlSVakpRY3xnWp8cpk/WThH8q2pkqYclgXLYsBYVxyWBVOsGOuKdVV+Irk4rpNxMYA9AAtlcQ4QEOdA8kyA9wQeisg1ksjzHJpSrcS9brf71Y2EXgFYGJyfwwwwAt5nIPhypjv7qNVufxcRmBFVVcN5HwTcAgAhuWGqL8piAIg0lrz3SCn96XRnvwBYL4uBn7QcQkCs47MMwAOSMAIgL3yJIKVUE/hRDYc9M6tIdDjKA0BKCqOuO1VdLcoSJBtAADP+/rn7a22m09nI8vwfwSlOjBEifjkDMKuapl7EwYFgtbSyNCB5C+B1M8NkBwBgyeBIwzjZwAgaqxHvRgiho6rTnBEyEglENqXuAVM9HN06mhQgrnTgvYdT1Q9ZnoETR5wADt8AwMxuDorCCF7hxBQPnHPuIyAgCbMLXOwXd0cCt0XkdZ7nTd6MCCGAxLZrtVqbAD57nzW+zAwx2rWRwJqZabs908zKe4fBoNgXkc3xKi8eHx/viUhIKcI5BzMe9nq95yGE+yml1ZOTk5aZIcsy5HmOlIYrc3P9nWb1Tk9P79R1veW9vzueeAgB3nsURQERQavVQlmW+865x/1+f6f5TJNxdHT0VFXXvffLqtpM28wOSG7neb45Pz//d8z/Dx+AujAbXgdkAAAAAElFTkSuQmCC&quot;); width:30px; height:24px; min-height:24px;margin-top:-2px; margin-left:0; text-indent:-9999px; z-index:10; overflow:hidden; padding:0; color:white; -moz-border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0; border-radius:0 3px 3px 0; -moz-box-shadow:0 1px 1px rgba(0,0,0,0.63); -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.63); -o-box-shadow:0 1px 1px rgba(0,0,0,0.63); box-shadow:0 1px 1px rgba(0,0,0,0.63); cursor:help; font-size:0 }
.infox div{font-size:11px}
.infox:hover{background-position:-20px 4px;width:100px;height:auto;text-indent:0;padding:5px}
.infox a{display:block;color:white;padding:2px;margin:2px 0;font-size:100%}
.post-author.vcard span,.d-header span{cursor:default}
.infox a:hover{color:#000}
.post-author.vcard,.d-header,.d-kmtr{padding:2px 0 2px 16px}
.infox:hover .post-author.vcard{ background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVhJREFUKJGtkTFrVUEQhb+z7+6+gJLKVkQi6V6KSLAyYBobIdj6LwT/h70/IJ2FvWUKK4vYBUHB0lZ4e2ff22Nzr0R5hYKnmt35ZnZmD/xv1VrPaq1P/qmotXYaEW6tudb6dBeTdl323h/Zvuy9X0o62sUIICJWKaX7vfcvwGvgbs75cHr9GvgGvJyZUsonrdfreymlz6WUISIugENJzfYWQNLCdgauSykvImLTe3+giFjlnK9aa9jeAGtJARiQbUmy7X1JOedMa+0oTQCSAL7bfmP7dkrpju1bkpLtQdIP2zGt6GFedhgGWmsXy+Xy1TiOp4vF4mS73X7svX8AhmmK58ABwK/CSc9qre+B1XRepJTKzGka6zc7IuJqHMfHkk6AhxExAtn2nqQlsHeTH2ZLJO2XUt5O8ZntTSnlGDjeZePs4zvbB38kN/PH3VCS9LWUcr6j2d/pJ2TZqOiL/ugWAAAAAElFTkSuQmCC&quot;); background-position:0 50%; background-repeat:no-repeat }
.infox:hover .d-header{ background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVtJREFUKJGVkDFrFFEUhb87M/sei6YRwSDY2oRokUawUxCxsDD/IX9BUMtUYv6ApYK9ta12FiJsI2ijblIljWb33nkzx8Igw8SNeLp37vle8cEgkjIrMpvN0qobEfHd3d+Oe3d/7+5fhl0jqY6Id8AnSZfN7Ke7vwGuA5jZB0mXgItt277o+/5qSummRcTmZDL5GBGHwB5QAY/qup4CdF23AJ4Cx8DDlNKFtm2vEREb+s9ExEYDpIg4AnbM7PxKAb/l/QCem1kiIrbcfX4WMBI1j4it5kTA0OwusC3plaRDM9sBXuacnw23zfjHlNKT5XL5raqqOznnBxFxV9K58e4UWEq53ff9/ZTSvZPqs5lt/hPsuu6xma1HxJ6kI0k3gNenwFJKVdf1nyLnfGu02R0+JNF1XdUA+8Cau8+Hkv4WSQBrwL4BLBaLK5LWm6bpzwJLKZWZHUyn06+/AJMu26P2Y5ymAAAAAElFTkSuQmCC&quot;); background-position:0 50%; background-repeat:no-repeat }
.infox:hover .d-kmtr{ background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAALpJREFUOI3FkMsRwjAMRFeOcaiJ4U4DdACVQQu0wIVyuCSyPVouOJPwCSEHeBdpRr9dAf9GStK27UZEdgDSh5kFgENd16fBAjOjiIDk+EWREgUAfL8QY5wkO4TQ5f6x6L1HUfIqpjR02FkgSTNDzvlYvDrnopnVABTA0jl3rapqLyKdhcGCGOMkBSGE5x8Ucs6T/lBwX3WPoapn3lFVqirfoaqX0WW9xu0sNSTZNM161jAApJRWs4d/zg3EqIeiKZ3YfwAAAABJRU5ErkJggg==&quot;); background-position:-1px 50%; background-repeat:no-repeat }
.d-kmtr a{padding:0;margin:0}

BalasHapus
avatar

Kemudian tambahkan ini pada template sobat.
Kalau saya memasangnya diatas gambar posting.
<div class='infox'>
<div class='post-author vcard'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='Admin'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</div>
<div class='d-header'><span class='timestamp-link'><abbr class='published updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span></div>

<div class='d-kmtr'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div>
</div>

BalasHapus
avatar

baru tau blog ini dari kang ismet, keren sob tutorialnya, ntar saya coba :D
salam kenal sob http://yoga-tc.blogspot.com/

BalasHapus
avatar

ini dia yang aku cari-cari ternyata ada di sini ya, haha dicoba dulu ahh, keren banget, tapi klo di blogku bagusnya ditempatkan dimana yahh ?
http://yoga-tc.blogspot.com/

BalasHapus
avatar

Wah Keren Sob... Ini yang saya cari cari..
Soal nya Pendek Css nya..

Visit back . www.center60.com

BalasHapus
avatar

aduh sob saya bingung dengan kode itu sob, jadinya seperti ini sob :
http://i.imgur.com/kEKFJhW.png

BalasHapus
avatar

Coba kode CSS nya dipindah diatas CSS Responsive. :D

BalasHapus
avatar

makasih sob.

Salam kenal juga. :)

BalasHapus
avatar

Terima kasih sob, kalau menurut saya lumayan panjang sob. Kode CSS nya sudah saya compress jadi panjang ke samping. (ada scroll kiri kanan ). :bd

BalasHapus
avatar

sob saya hapus kode top dan leftnya, dan hasilnya kurang sempurna saat di hover, dan infoxnya bertumpukan dengan gambar postnya, solusinya gimana ya ?
coba dilihat sob http://demokrizeer-bt.blogspot.com/

BalasHapus
avatar

saya sudah menemukan solusinya sob, tingaal hilangkan kode opacity nya, satu masalah lagi sob, saat di hover munculnya tidak sempurna kaya gk ada efeknya gitu, jangan lupa dicek ya di http://demokrizeer-bt.blogspot.com/

BalasHapus
avatar

Sobat lupa tambahkan efek hovernya.
.infox { -webkit-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s }

BalasHapus
avatar

Sya lihat sudah sempurna sob, tinggal mengatur posisi infox sesuai keinginan. :)

BalasHapus
avatar

xV setelah selang waktu kurang lebih 2 jam 30 menit akhirnya selesai juga infox nya \o/ sekarang sudah sempurna 100% sob, wah makasih banget sob, hati saya jadi gk karuan liat infox keren banget 7:( haha :rolled:

BalasHapus
avatar

misi saya 1 lagi sob, itu lho kode pre nya bisa berwarna gitu ?, otomatis ya ?, ajarin ya, haha :D

BalasHapus
avatar

keren banget tutorialnya..sederhana tapi mudah dipahami...luarbiasa :-)

BalasHapus
avatar

Lapor, blog sobat sudah saya follow back, haha atas nama "Yoga Pratama"
http://yoga-tc.blogspot.com/

BalasHapus
avatar

Lumayan makan waktu ya modifikasinya :D. Saya pakai Syntax Highlighter sob. Untuk Syntax Highlighter kayak blog ini, nanti saya share di blog ini. :)

BalasHapus
avatar

Foto saya yang di atas ilang yah ??
Hahahaha

BalasHapus
avatar

iya mas, kenapa tuh ? Akun yg lama dihapus ya ?.

BalasHapus
avatar

bagus gan, hampir sama dengan yang saya pake cuman dibikin agak simpel aja hehe \o/

BalasHapus
avatar

gan coba lihat blog saya? cara pasang infox di blog saya gimana yah?
letak nya taruh dimana?

BalasHapus
avatar

Mau dipasang sebelah mana gan ?. Kalau pada gambar coba pasang HTMLnya dibawah kode <h2 class="post-title entry-title> yg terdapat JS auto readmore. :D

Saran : Sebaiknya lakukan ujicoba pada blog percobaan dulu.

BalasHapus
avatar

kalau diapasang di samping nama author gimana?

BalasHapus
avatar

kalau letak nya di samping kanan judulu posting blog saya gimana gan???????

BalasHapus
avatar

HTMLnya simpan diatas kode <h2 class="post-title entry-title> dan atur CSS nya agar sesuai keinginan.

BalasHapus
avatar

wah mantap banget nih, kayaknya perlu saya coba :)

BalasHapus
avatar

thanks mas bro... keren abiess...

monggo di lihat di rieztoshare.blogspot.com

BalasHapus

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved