Semenjak dimulainya perbaikan kinerja search engine google, langkah tersebut diikuti pula penyatuan-penyatuan produk google guna efisiensi kinerja product google itu sendiri :D Membingungkan kan kata-katanya :)) Contoh jelas tampak terlihat bila sobat perhatikan produk/sarana chating milik google! Thats right http://www.google.com/talk/ google talk or google chat dimana merupakan sarana chattingan kepunyaan aku. Kenal dengan orkut, gmail, blogger, google plus or produk dimana ketika melakukan login menggunakan account google! Apalagi GTalk sekarang memang dikembangkan ke berbagai form. Mau itu Handphone, Iphone, Ipod dll yg kesemuanya itu saya tidak punya :P
Dengan integrasi berbagai google product ini, ada baiknya kita lebih mengefisiensikan gerak langkah khususnya blogger. Buka account satu biji bisa merambah kesana kemari ;) Jadi intinya nanti kita chattingan bisa ramai² gitooo loh \m/ Download & dapatkan google talk clients disini Google Talk Other IM Clients. Bagaimana dengan sobat Koben sekalian, sudahkan mengonlinekan G-Talk kalian! Jika pusing dengan feature google talk, satroni saja help forum di Google Talk Help.
<center><a title="Chat with me" href="javascript:void(0);" onclick="window.open('http://talkgadget.google.com/talkgadget/popout', 'bb3n', 'left=0, top=0, width=500, height=350, toolbar=0, resizable=1')"><img src="http://www.google.com/talk/images/gadget_popout.gif"/></a></center> Kurang source mengenai hal ini, silahkan meluncur ke Your Guide to Instant Messaging semua numplek bukan g_talk saja :)) Semoga bermanfaat :) Happy instant messaging \m/
Artikel info kali ini Koben akan membicarakan mengenai bagaimana cara membuat tampilan fan facebook berbeda alias customized. Secara default hanya terdapat pilihan opsi light & dark saja. Sekarang kita akan buat gimana menerapkan supaya tampilan fan-facebook bisa kita sisipkan background dan beberapa customize lainnya. Temanya saja sudah fans FB, ya kalian harus sudah punya dulu dong. Kalau belum punya silahkan baca cara bikin fans facebook. Sebenarnya Beben cuma mau memperjelas saja tutorial how to build custom facebook fan box :D Biarin sedikit basi juga yah bro and bri ;)) Siapa tahu penjelasan ane lebih masuk ketimbang penjelasan² yang sudah ada :D Pasti source yg aku tawarkan mumpuni punya deh.
<script type="text/javascript"> FB.init("ISIKAN DENGAN KODE App Secret KALIAN"); </script>
<fb:fan connections="10" css="https://sites.google.com/site/misstemplate88/fanboxstyle.css" height="205" logobar="0" profile_id="ISIKAN DENGAN ID PROFILE KALIAN" stream="0" width="290" class=" FB_fan FB_ElementReady"> </fb:fan>
</div>
Fokuskan perhatian pada tulisan kode berwarna. Kode External Style Sheet itulah code ramuan ajaib agar dapat melakukan hal ini :P Daleman isi coded CSS tersebut bisa kalian rubah lagi apabila warna link kurang sesuai. Ingat hanya warna dan jenis font yg boleh dirubah ya!!!
Coded CSS Facebook Fans Box
/* Created by: Miss Rinda URI: http://rindastemplates.com/ Developer by: Mr Beben URI: http://beben-koben.blogspot.com/ DO NOT REMOVE MY LINK. YOU JUST ALLOWED TO CHANGE FONT & COLOR. */
Hostingkan seluruh CSS diatas. Gantikan link CSS https://sites.google.com/site/misstemplate88/fanboxstyle.css dengan hasil karya kalian masing² :) Resource by: http://www.rindastemplates.com/2011/06/stylish-facebook-fan-page.html Bila sobat ingin tahu lebih banyak mengenai custome sekitaran facebook, silahkan mampir disini Daddy Design.
Ekstra explanation: ISIKAN DENGAN KODE App Secret KALIAN Go to Facebook Developers and look App Secret
ISIKAN DENGAN ID PROFILE KALIAN Dibawah App Secret dua jajar, ambil saja deretan angka yg paling dibelakang :D Semoga bermanfaat :) Happy FB Fanz \m/
Mumpung masih hangat para developer membicarakan tutorial CSS3, sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali tut's mengenai cara membuat Content Slider use CSS3. Before i'll have posted about this tema, you all can check from is this Slider Content use 100% CSS3. Sama trick namun berbeda hasil hayah master @gabromanato selaku owner OnWebDev Blogs kembali menggebrak dengan tutorial terbaru "Pure CSS3 content slider" Mr. Gabriele Romanato seorang web development dimana karya²nya maknyus bin yahut :x Simpel dalam menjelaskan, disertakan dengan live demo guna mendukung penjelasan postingan bagi yang jelek pemahaman bahasa inggris macam aku :"> Cekgidot...
Perhatikan kode width yg diberi warna. Sesuaikan panjang tersebut dengan dimana nanti sobat akan menyimpan code markpup HTML (dalam tag body). Jika sobat mau simpan, misalkan (outer-wrapper, main-wrapper or unik ID lainnya) maka panjang slideshow sesuaikan dengan itu!
Kode left ada 4 biji. Jumlah panjang yg kalian buat tadi, bagi saja dengan nominal 4. Tambahkan seterusnya dengan kelipatannya. Ini berfungsi agar menciptakan lebar kolom sama ;) Good luck b-)
Tutorial ringan akan Koben sampaikan mengenai cara menyembunyikan sesuatu memakai variable Document getElementById() Method. Sebenarnya bisa dilakukan dengan jQuery plugins, bagi sobat yang sudah menanamkan script jQuery didalam templatenya ;)) Tapi tidak semua blogger memasukan si-jQuery kan! Oleh sebab itu Beben Koben si bloglang anu ganteng kalem tea akan berbagi eksperimen bagaimana cara menyembunyikan embed frame komentar blog memakai trick expand check, table, plus sedikit bumbu HTML DOMObjects. Hasil korak korek sana-sini biasa sob :"> Langkah pertama yg musti dilakukan yaitu Expand Widget Templates
Screenshot After Practice
Press on kibot Alt + F or just press F3, then found it comment-editor comment-editor yg berada pada bagian iframe yaaa don't forget that!!! Setelah menemukan code yg dimaksud, ambil sebundel bagian<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>Simpan dimana dulu kode tersebut, ex: Notepad, Microsoft Word or anything else like that :P Setelah itu, sisipkan ramuan ajaib, menjadi begini penulisannya [..]
Show hide trick memang tidak ada habisnya buat postingan :)) Pernah dulu juga membahas show/hide pure use CSS for CBOX kala disorot terbukalah anunya :D Feature show-hide hampir serupa fungsi dengan slide in function, appear lost or etc yang dimana pada jQuery kita kenal dengan toggle effect ;)) Datang trik berikut dari lists of my inspiration, the great web simurai talking about toggle button. Hanya menggunakan variable CSS 3 dikombinasikan tentunya dengan kode HTML bisa menghasilkan toggle effect layaknya memakai script :x
Pada pemaparan (demo) disana terdapat pemakaian coded transform: rotate guna memberikan efek pada gambar supaya terlihat berubah/berganti saat kita klik. Beben Koben si bloglang anu ganteng kalem tea melakukan sedikit perampingan kode CSS dengan meniadakan hal tersebut. Soalnya disini menurut aku, yang penting sisi tampil & menghilangnya ketika kita click :D
Demo
demo Toggle Effect Pure Use CSS3 Klik tulisan Buku Tamu sebelah kiri yg berwarna latar belakang pink :D Seperti itulah hasil modifikasi aa oben ;)) Bila sobat berminat, kemon kita lanjutkan tut's toggel efek. Masukan semua ramuan bumbu: Dashboard ► Design ► Add a Gadget ► HTML/JavaScript
Tidak ada sangkut pautnya sama tutorial blog artikel berikut. Beben Koben si bloglang anu ganteng kalem tea cuma ingin berbagi hasil melancong tak sengaja ke web negara tetangga kita Singapore. Takjub, heran, salut, prihatin, kagum, kok bisa, serta beribu-ribu rasa lainnya merasuki benak pikiran gue jaman jadi edan begini :D Sobat pernah dengar istilah transgender? Istilah yang dipakai para ahli guna mendeskripsikan seseorang yang merasa, melakukan, berpikir, terlihat beda saat mereka dilahirkan. Pasti sudah dengar/baca siapa saja orang yg meraih "The World's Most Beautiful Transsexual Contest" !!!
Trans Gender sangat erat berhubungan dengan faktor transsexualism juga. Puyeng kelapa merenungi kasus macam gituan bisa terjadi @-) Dengan itu, Beben merasa terenyuh hati seorang yang dulu laki-laki disulap menjadi sesosok perempuan elok nan jelita x_x
Ladyboy Nong Poy from Thailand
Cantik enggak sob, eh cakep tidak, eh ~!@#$%^&*()_+| Baru 10 biji itu photonya, lanjutin sobat, masih ada 58 pic lagi :D
Silahkan buka halaman berikut kalau mau photo lanjutannya ;)) http://singaporetrends.com/sg/2011/11/68-sexy-scans-of-thai-ladyboy-nong-poy/' title='68 Sexy Scans of Thai Ladyboy Nong Poy' class='tooltip' target='new'>68 Sexy Scans of Thai Ladyboy Nong Poy by Singapore and Overseas Celebrities. Dari negara kita juga ada ternyata :(( http://hot.detik.com/read/2011/11/22/104748/1772667/230/dena-rachman-merasa-terjebak-di-tubuh-laki-laki-sejak-kecil Jaman oh jaman +_+
Mencari sesuatu di dunia maya ini bukanlah perihal mudah. Namun memerlukan sedikit trik dan tips guna mendapatkan hasil akurat, berimbang, berbobot agar hasil dari apa yang kita cari tersebut memuaskan. Beragam cara pasti dimiliki oleh setiap individu guna melakukan hal ini. Beben Koben si bloglang anu ganteng kalem tea akan berbagi dengan metode alami yaitu memakai trick searching via search engine :D Metode ini dianggap paling ampuh karena dengan mengetikan keyword target maka seketika itu pula hasil langsung kita dapatkan! Pertanyaannya kalau kita sering mencari-cari lewat search engine terkenal ex: google.com, secara tidak langsung akan menghasilkan result yang itu² saja. Begini kasus sederhana yg Koben selalu lakukan.
G U E pasti akan melakukan searching bila sudah tidak ada IDE buat artikel :D Aku hanya ngelakuin 2x search memakai target keyword "blogger hack" dan "tutorial blogger" Itu juga dibolak-balik yg depan ke belakang, yg belakang ke depanin ;) Lama-lama ternyata kesana-sana juga larinya :)) Untuk mensiasati agar tidak kesana melulu hasil searchingan yg kita dapat, Koben mau berbagi macam² search engine full stylish b-) Contoh seperti ini addictomatic search engine and kekuatan 10 search engine! Dah 11 biji tuh ;)) Silahkan mau cari apa saja, bebas tanpa batas, prikitiw. Let's get de done, cekidot
Kembali bersama Beben Koben si bloglang anu ganteng kalem tea dalam mencari-cari blogger yang secara khusus memberitakan artikel mengenai tutorial, hack, trick, tips or etc ketebelece blogspot. Koben menemukan lagi blogger stylish oke punya, please welcome Yet Another Blogger Tips Blog - YABTB. Teh great blogger and awesome article you can find there b-) Master script pemilik blog tersebut, Python script :-bd Yang menurut dia mudah, bagi saya sulitnya minta ampun =)) Kita acak-acak satu per satu postingan gaya punya dari sana. Recent comment kreasi yabtb sangat patut diperhitungkan! Karena memakai script yang berisikan auto favicon for avatar :)) Script yg dia buat banyak memakai pemanggilan +window.location.hostname+ sehingga kita tidak perlu lagi capek² pasang link ;))
var numRecentComments = 5; var numPerPost = 2; // max comments per post (to try) or 0 var maxCommentChars = 90; var maxPostTitleChars = 0; // if 0, use full post title
var txtWrote = 'wrote:'; var txtMore = 'Continue >>'; var txtTooltip = '[user] on "[title]" - [date MM/dd/yy hh:mm]'; var txtAnonymous = ''; // empty, or Anonymous user name localized // Variables [xxx] in texts: // supports [title], [user], [date], [time], [datetime], [date format] // format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec
var getTitles = true; // false faster var trueAvatars = true; // false faster var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image var urlMyProfile = ''; // set if you have no profile gadget on page // var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=16'; var maxResultsPosts = ""; // or for example "&max-results=100" var maxResultsComments = ""; // or for example "&max-results=300" // CONFIG END var urlToTitle = {}; function replaceVars(text, user, title, date) { text = text.replace('[user]', user); text = text.replace('[date]', date.toLocaleDateString()); text = text.replace('[datetime]', date.toLocaleString()); text = text.replace('[time]', date.toLocaleTimeString()); text = text.replace('[title]', title.replace(/\"/g,'"')); var i = text.indexOf("[date "); if(i > -1) { var format = /\[date\s+(.+?)\]/.exec(text)[1]; if(format != '') { var txtDate = format.replace(/yyyy/i, date.getFullYear()); txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2)); txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2)); txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2)); txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2)); txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2)); //or: txtDate = txtDate.replace("dd", date.getDate()); txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2)); //or: txtDate = txtDate.replace("hh", date.getHours()); text = text.replace(/\[date\s+(.+?)\]/, txtDate) } } return text; } if(urlMyProfile == "") { var elements = document.getElementsByTagName("*"); var expr = /(^| )profile-link( |$)/; for(var i=0 ; i<elements.length ; i++) if(expr.test(elements[i].className)) { urlMyProfile = elements[i].href; break; } } function getPostUrlsForComments(json) { for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; var href; for (var k = 0; k < entry.link.length; k++ ) { if (entry.link[k].rel == 'alternate') { href = entry.link[k].href; break; } } urlToTitle[href] = entry.title.$t; } } function showRecentComments(json) { var postHandled = {}; var j = 0; if(numPerPost) { while(numPerPost < numRecentComments) { for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(entry["thr$in-reply-to"]) { if(!postHandled[entry["thr$in-reply-to"].href]) postHandled[entry["thr$in-reply-to"].href] = 1; else postHandled[entry["thr$in-reply-to"].href]++; if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost) j++; } } if(j >= numRecentComments) break; numPerPost++; j = 0; postHandled = {}; } if(numRecentComments == numPerPost) numPerPost = 0; } postHandled = {}; j = 0; for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost) continue; if(entry["thr$in-reply-to"]) { if(!postHandled[entry["thr$in-reply-to"].href]) postHandled[entry["thr$in-reply-to"].href] = 1; else postHandled[entry["thr$in-reply-to"].href]++; j++; var href; for (var k = 0; k < entry.link.length; k++ ) { if (entry.link[k].rel == 'alternate') { href = entry.link[k].href; break; } } var hrefPost = href.split("?")[0]; var comment = ""; if("content" in entry) comment = entry.content.$t; else comment = entry.summary.$t; comment = comment.replace(/<br[^>]*>/ig, " "); comment = comment.replace(/<\S[^>]*>/g, ""); var postTitle=""; if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost]; else { postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, ""); postTitle = postTitle.replace(/-/g," "); postTitle = postTitle[0].toUpperCase() + postTitle.slice(1); } if(maxPostTitleChars && postTitle.length > maxPostTitleChars) { postTitle = postTitle.substring(0, maxPostTitleChars); var indexBreak = postTitle.lastIndexOf(" "); postTitle = postTitle.substring(0, indexBreak) + "..."; }
var authorName = entry.author[0].name.$t var authorUri = "" if(entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601 var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
Pokonya acak-acak saja semua psotingan yg ada disana. Kalau tidak mengerti tanyakan saja kepada si empunya. Ramah kok orangnya, aku saja komentar diajawab terus ;))
SAVE. Lihat berjalan tidak, kalau mulus, ya sudah sukses :D Jika belum lancar, berarti sobat harus menerapkan hack selanjutnya ;)) Lakukan Expand Widget Templates dan temukan kode<b: loop values='data: post.comments' var='comment'>Setelah ketemu, sisipkan code dibawah ini tepat dibawahnya ya
Cari kode penutup </b: loop> yg merupakan tagging penutup dari<b: loop values='data: post.comments' var='comment'>tepat diatasnya masukan kode</div>
Jangan lupa ganti YOUR-NUMBER-BLOG-PROFILE Hampir lupa, sobat harus sudah memiliki tombol replay jika memang mau memakai threade comments ini. Berikut coded reply button for blogger comments<a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR-NUMBER-BLOGID&postID=" + data: post.id + "&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' target='_blank'>[Reply]</a>Save.Sudah berjalan mulus belom! Bila belum juga, tanya saja ke yg buatnya yah =)) Happy blogging, don't forget to read article on yabtb blog :-bd Good bye \m/
Bagaimana kita bisa melihat situs yang terkait dengan blog/web kita secara transparan & gamblang! Master O-Om membuat tools search SERP buat kontes SEO, walau lagi error sekarang :P Mirip dengan itu mungkin kinerja dari java application berikut ini sob. Jadi nanti akan terlihat secara signifikan situs-situs mana saja yang terkait dengan situs kita. Terkait yang benar-benar mengkait loh ;)) "SEO Keyword Graph Visualization" Jadi sebelum memulai proses pembuktian keterkaitan blog kalian dengan situs lain, kalian harus sudah memiliki syarat² seperti berikut:
Pastikan sobat memiliki java versi terbaru, setidaknya Java 1.5
Ketik kata kunci pencarian atau URL pada kotak yg disediakan.
Bila ada konfirmasi "Run" "Do you want to trust the signed applet?" just lets go...
Nonaktifkan popup blocker.
Segitu saja kira-kira.
My Blog Result
Silahkan cek dimari...
Tunggu sampai proses selesai, dan lihat hasil dengan mengeksplore semua menu yg ada disana ;) Semoga bermanfaat :) Happy kait-kait \m/ Powered by: http://www.touchgraph.com/ Serupa namun berbeda, sobat bisa melakukan search dengan query apapun untuk melihat kesignifikanan yg dicari ;)) Joongel. Ini lagi sob MoreOfit. Stay tune to update
Sudah lama tak berkunjung ke tempat sobat amazingthings, ternyata artikel disana bertambah gaya punya bin full stylish :)) Setelah mangacak and membaca, Beben Koben si bloglang anu ganteng kalem tea mau bagi artikel keren yg tak boleh terlewatkan begitu saja:
Pasti kawan² sudah sering lihat efek 3D menggunakan CSS 3. Ada yang memakai permanen, ada juga yang memakai ketika menghover cursor hover 3D effect. Tapi sobat sudah pada tahu belom nih, bahwasannya effect 3D pada text bisa dibikin menjadi dinamis! Jadi ketika cursor mengarah/didekatkan pada sekoloni teks, maka efek 3D akan terlihat berpindah berlawanan dengan keberadaan si cursor :-/ Okelah kalo begitu, sebelum masuk ke inti permasalahan, ada baiknya sobat melihat live demo apa, bagaimana, efek 3D pada teks itu :D Ce-gi-dot-pret-cess
Ini contoh penggunaan efek 3D memakai CSS3 attribute, guna memunculkan efek menonjol gitooo LOH!!! Lihat dong tulisannya serasa menonjol or mengangkang, eh mengangkat mksdx -___-'
Terlihat efek bayangan menumpuk dan itulah yang membuat tulisan tersebut serasa terangkat. Sekarang bagaimana cara membuat effect 3D menjadi dinamis? Please look at here to cekidot-pret dynamic CSS 3D text :-bd Tanpa banyak basa basi busuk, cari kode tag </body> kemudian letakan JavaScript dibawah ini tepat sebelumnya...
<script type="text/javascript"> //<![CDATA[ var text = document.getElementById('Blog1'), body = document.body, steps = 7; function threeD (e) { var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)), y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)), shadow = '', color = 190, radius = 3, i; for (i=0; i<steps; i++) { tx = Math.round(x / steps * i); ty = Math.round(y / steps * i); if (tx || ty) { color -= 3 * i; shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), '; } } shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)'; text.style.textShadow = shadow; text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; } document.addEventListener('mousemove', threeD, false); //]]> </script>
SAVE. Lihatlah hasil akhir :))
Penjelasan
<script type="text/javascript"> //<![CDATA[ var text = document.getElementById('UNIQUE-ID'), body = document.body, steps = 7; function threeD (e) { var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)), y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)), shadow = '', color = 190, radius = 3, i; for (i=0; i<steps; i++) { tx = Math.round(x / steps * i); ty = Math.round(y / steps * i); if (tx || ty) { color -= 3 * i; shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), '; } } shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)'; text.style.textShadow = shadow; text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)'; } document.addEventListener('mousemove', threeD, false); //]]> </script>Perhatikan UNIQUE-ID!!! Dengan unik ID yang sobat buat, maka disanalah teks/kalimat harus terTAG. Misalkan kawan mau pakai unik-ID prikitiw Pemakaian HTML menjadi spt brkt<div id="prikitiw"> BLA BLA BLA BLA BLA BLA BLA </div>Jadi efek 3D dynamic tidak akan kemana-mana, hanya sebatas yang terTAG! Oleh sebab itu Koben masukan unikID Blog1 soalnya pada blogger emang itu ID unik pada sesi postingannya :)) Semoga paham lah ;)) Happy 3D effect \m/
Waktu jalan² ke perancis dapat trik membuat image agar terlihat berefekan tint model di photoshop. Gambar dilapisi warna magenta belekedek sehingga menimbulkan efek warna transparansi. Pusing neranginnya juga sob :)) Sekarang kita bisa lebih jauh menerobos trick tersebut, dengan memadukan variable CSS3 dan hover tentunya agar terlihat lebih cuamiq ;)) Please read it image tint effect with CSS3. Yang sobat perlu lakukan hanya membubuhi variabel CSS 3 berikut
Pemanggilan/pemakaian/kode HTML disini memakai attribute tag <figure> Lebih jauh kreasi yang dapat dihasilkan oleh si figure & figcaption atribut 3D photo rollover effect written by Chris Heilmann. Sehingga nanti dalam memakainya sobat hanya perlu melakukan tagging seperti berikut<figureclass="tint"> <img src="http://your-link-image.jpg" alt="" width="__px" height="__px"> </figure>
Iseng dari pada tidak ada postingan ;)) Come from Create a Right Click Function to Save Website Logo Using jQuery go there for look demo and tutorial. Jadi ketika mengklik kanan mouse pada gambar logo yang berada di header, akan muncul peringatan gito sob :D Beben Koben modifikasi, agar setiap klik kanan pada image yang berada pd tagging post template akan muncul kayak gituan juga :)) Bisa dijadikan trick agar image tidak dicuri ;)) Karena plugins maka pada template sobat sudah harus punya jQuery script. Kalau sudah ada jangan dipasang lagi, memberatkan itu namanya :D
Karena sudah dimodifikasi, Koben hanya mengambil script seperlunya saja. Maaf kalau salah, krn bukan ahlinya :">
Structure Jquery Right Click
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('.post img').bind('contextmenu',function(e) { // check if right button is clicked if(e.button === 2) { showPressModal(); e.preventDefault(); } });
Yang perlu sobat perhatikan yaitu kode .post img dan #outer-wrapper Kedua coded tersebut merupakan bagian post & image template blogger. Bila unik ID berbeda maka tinggal ganti saja kode tersebut!
Width, background color tinggal rubah² saja menurut kebutuhan ;) Customize link ancor, sobat bisa melakukan seperti berikut<a href="#" title="" rel="external"> <img src="http://link-image.png" alt="" /> </a>Dengan membubuhi variabel rel="external" maka akan terbuka new tab windows :)
Hasil membaca-baca dari artikel make animated search box use CSS3, terdapat sebuah web link di dalam jaringan CSS radar yakni WeebTutorials. Setelah membabat postingan tutorial yang ada disana, Beben Koben si bloglang anu ganteng kalem tea terpikat dengan 2 tut's menu full stylish b-) Selain itu disana cocok banget bagi kita para newbie untuk menimba ilmu buat nambah² gitooo. Koben kepincut dengan menu tersebut karena unik dan yang lebih menarik full CSS bro :-bd Sorot pada title menu dibawah berikut...
Demo Horizontal drop-down menu using CSS3
Kode CSS
#navBar1{ float: left; width: 100%; border: solid 2px #555; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: -moz-linear-gradient(bottom,#BDC7FF, #89F); background: -webkit-gradient(linear,left bottom, left top, from(#89F), to(#BDC7FF)); -moz-box-shadow: 1px 3px 3px #555; } #navBar1 ul { padding: 0; margin: 0; list-style: none; position: relative; } #navBar1 ul li { display: block; float: left; padding-top: 9px; padding-bottom: 9px; } #navBar1 ul li span { display: block; } #navBar1 ul li span a { border-left: solid #777 thin; } .headerList1 a { border-right: solid #777 thin; } #navBar1 ul li a { display: block; padding: 5px; padding-left: 13px; padding-right: 13px; color: #eee; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-size: 95%; } #navBar1 ul li a:hover { color: #333; text-decoration: underline; } #navBar1 ul ul { border-right: solid #505e58 thin; position: absolute; top: 47px; left: 2500px; background: #CCC; width: auto; border: thin solid #57F; font-size: 70%; display: none; } #navBar1 ul li:hover ul { position: absolute; left: 60px; display: block; } #navBar1 ul ul li { padding: 0; padding-top: 3px; padding-bottom: 2px; } #navBar1 ul ul li a { border: none; color: #555; }
#navWrap2 ul li:hover ul { display: block; -moz-box-shadow: 3px 3px 4px #a7a7a7; border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 0px 10px 10px 10px; } #navWrap2 ul ul { display: none; position: absolute; left: -2px; border-bottom: 2px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#CCC'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC)); /* for webkit browsers */ background: -moz-linear-gradient(top, #EEE, #CCC); /* for firefox 3.6+ */ width: 420px; padding: 20px; }
/* Styling the contents of nested list */
.navListFloat ol { padding: 0; margin: 0; } #navWrap2 ul ul li { list-style: none; } #navWrap2 ul ul li a { text-decoration: none; color: #777; padding: 4px; } #navWrap2 ul ul li a:hover { color: #456; } #navWrap2 ul ul p { font-family: Tahoma, Geneva, sans-serif; color: #414141; font-size: 14px; } #navWrap2 ul ul p b { color: #414141; font-size: 16px; } .navListFloat { float: left; width: 106px; margin: 0px 17px 17px 17px; } .navListFloat li { font-size: 13px; } .newsletter > input { margin-top: 44px; } .newsletter div { float: left; margin-right: 25px; }
<ul> <li> <a href="#">Home</a> <ul> <li> <p style="font-weight:bold;color:#333">Welcome to ABC.com</p> <img src="http://link-image-navLine.png" height="2" width="418" alt="line"/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </li> </ul> </li>
<li> <a href="#"> About</a> <ul> <li> <p style="font-weight:bold;color:#333">About us</p> <img src="http://link-image-navLine.png" height="2" width="418" alt="line"/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </li> </ul> </li>