![]() |
| Gambar Naga Emas |
Post title 1
Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros...More
Post title 2
Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam...More
Post title 3
Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros...More
Post title 4
Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam...More
Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts
Friday, November 23, 2012
Download Vektor Naga File Cdr
Bismillah.... rasanya sudah lama sekali saya tidak posting dan menulis di blog, pada kesempatan ini saya akan sedikit share tentang vektor naga, karna beberapa hari ini entah kenapa saya suka dengan gambar-gambar vektor.
Namanya juga manusia ingin bisa ini dan ingin bisa itu, tapi karna kebanyakan yang di pegang akhirnya ini ga bisa itu pun juga ga bisa..hehe.
Oke deh jika sobat dan suka dengan koleksi gambar naga disini saya punya file gambar naga yang formatnya masih vektor dan sobat bisa olah lagi sehingga menjadi lebih keren dan bagus, file vektor ini saya download tapi karna sudah lama jadi saya lupa lagi entah dari mana downloadnya.
File ini bisa di buka dengan software Corel Draw versi 13 ke atas, format filenya adalah .cdr, gambarnya seperti di bawah ini.
Untuk mendownloadnya silahkan sobat klik link download di bawah ini. oke deh sampai disini dulu postingan pada kesempatan ini semoga bermanfaat. Good Luck Happy Blogging
Download Vektor NagaSaturday, November 10, 2012
Beberapa Situs Penyedia CSS3 Generator
Bismillahirrahmanirrahim...di hari minggu yang cerah ini mari kita ng-blog yuk..daripada tidak ada kegiatan atau malah main-main yang tidak berguna mendingan kita buat postingan saja, oke deh sesuai dengan judul di atas yaitu Beberapa CSS3 Generator Online, bagi sobat-sobat yang masih kurang paham dan kurang dalam tentang ilmu CSS nya (seperti saya..hehe) jika ingin membuat tampilan web/blog yang bagus, saya ajak untuk menggunakan CSS Generator Online, karna dengan adanya fasilitas ini kita akan mudah membuat dan mendesain sebuah tampilan web/blog dengan CSS.
Biasanya untuk membuat tampilan website/blog yang bagus diperlukan kemahiran atau pemahaman kode-kode CSS, misalkan kita akan membuat rouded couner, CSS Animasi, atau yang lainnya, setidaknya kita mengusai bahasa CSS (Cascading Style Sheets) tapi untuk sekarang tidak perlu repot-repot karna sudah banyak sekali penyedia CSS Generator, oke sekarang kita langsung saja yuk.
CSS Portal, CSS Portal adalah sebuah situs yang menyediakan CSS Generator Online dari mulai Button Maker, Layout Generator, CSS Menu Generator,CSS Sprite Generator,Rounded Corners,CSS Bok Shadow dan yang lainnya untuk screen shotnya seperti di bawah ini jika ingin menggunakannya silahkan sobat kunjungi situsnya di alamat http://www.cssportal.com/
![]() |
| CSS Portal Generator |
Profesional CSS Menu, yaitu situs specialis CSS Menu, jika sobat ingin mempercantik tampilan menu di blog,sobat tinggal kunjungi saja websitenya, disana di sediakan beberapa menu CSS, Diantarnya CSS Menu Drop Down, CSS Menu Horizontal, CSS Menu Vertikal, CSS Tab Menu,CSS Flay Out Menu, langsung saja untuk mengunjungi alamatnya tinggal copy alamat ini (http://cssmenumaker.com/) dan masukan di Addres bar dan membuat menu untuk blog/website
![]() |
| Profesional CSS Menu |
CSS Frame Generator, yang ini yaitu untuk membuat Frame di website screen shotny seperti di bawah ini, alamatnya di http://lab.xms.pl/css-generator/
![]() |
| CSS Frame Generator |
CSS Little Box, yiatu situs Generator CSS Box, alamatnya di http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html, sobat tinggal pilih jenis box yang akan kan di buat , disana ada beberapa pilihan One Box,Touching,Theere Box dan yang lainnya. tampilan websitenya seperti di bawah ini
![]() |
| CSS Little Box |
CSS3 Generator, yang ini untuk CSS3 Generator dari mulai Font,Border Radiusm Rounded Corners,Box Resize,Text Shadow,CSS Gradien, CSS Transition dan yang lainnya. Untuk alamatnya http://css3generator.com/, tampilannya seperti di bawah ini.
![]() |
| CSS3 Generator |
Ultimate CSS Gradient Generator, yaitu Generator untuk gradien, warna warnya juga cukup bagus dan warnanya hampir mirip dengan warna yang terdapat dalam Adobe Photoshop, untuk alamatnya di http://www.colorzilla.com/gradient-editor/
![]() |
| Ultimate CSS Gradient Generator |
CSS Ribbon Generator, yaitu generator untuk membuat ribbon, ribbon itu gambar nya seperti pita lah..hehe, lihat aja screen shotnya alamatnya di http://www.css3d.net/ribbon-generator/, Tampilannya websitenya seperti dibawah ini.
![]() |
| CSS Ribbon Generator |
3D Text CSS Generator, yaitu untuk membuat bentuk text yang berbentuk 3D, alamatnya http://www.3dcsstext.com/.
![]() |
| 3D Text CSS Generator |
Sebenarnya masih banyak lagi situs situs yang menyediakan CSS Generator Online, silahkan sobat cari sendiri di Search Engine, oke deh saya cukupkan postingan tetang CSS3 nya semoga bermanfaat, Akhir kata dari saya Good Luck Happy Blogging.
Friday, November 9, 2012
Cara Membuat Fit Text To Patch Di Corel Draw
Bismillahirrahmanirahim... pada kesempatan ini saya akan sedikit share cara membuat text to path dalam Corel Draw, Text to Path seperti apa???.
Text To Path yaitu cara memasukan hurup/tulisan kedalam path atau dalam kurva, misalkan kita ingin membentuk tulisan yang melingkar, atau bentuk apa saja tegantung path tersebut.
Oke langsung saja untuk membuat tulisan melingakar atau yang bentuk lain caranya mudah sekali, sobat tinggal ikuti cara caranya seoperti di bawah ini.
Pertama sobat buat dulu dokumen atau lebar kerja baru di corel draw,
Selanjutnya sobat klik text tool atau bisa menggunakan shortcut dengan menekan tombol F8 di Keyboard
Setelah itu Tuliskan Kata yang ingin sobat buat.
![]() |
| Tutorial Corel Draw Text To Path |
Langkah selanjutnya sobat buat pathnya, bisa menggunakan garis,elips,rectangle,star atau apa saja terserah sobat.
![]() |
| Text To Path Corel Draw |
Setelah path dan textnya ada, langkah selanjutnya sobat tinggal tarik text/tulisannya dengan menggunakan mouse sebelah kanan dan dekatkan tulisan tersebut dengan pathnya, setelah itu lepas dan akan muncul beberaa pilihan, Copy Here,Move Here dll, sobat pilih Fit Text To Path.
![]() |
| Hasil Text To Path Dalam Corel Draw |
Sudah jadi deh tulisan yang mengikuti path, untuk menghapus pathnya sobat tinggal klik dua kali pada pathnya terus Delete, Selain itu ada juga cara yang seperti bisa caranya seperti berikut ini:
- Klik Objek Text
- Terus sobat klik Text dalam menu di atas
- Terus sobat klik Text to Path terus arahkan text tersbut ke dalam kurva/path nya.
- atau bisa juga menggunakan shortcut dengan menekan tombol Alt+X terus di ikuti dengan menekan tombol T
Sampai disini dulu potingannya semoga bermanfaat, Good Luck Happy Blogging
Monday, November 5, 2012
Cara Membuat Kaligrapi Di Corel Draw
Bismillahirrahmanirrahim...pada postingan ini saya tidak akan membahas tentang Tutorial Blog, tapi akan sedikit membahas Corel Draw, Sesuai dengan judul di atas yaitu cara mambuat kaligrafi di corel draw, pada kesempatan ini saya menggunakan aplikasi CorelDraw X5.
Oke sobat jika ingin mencoba membuat kaligrafi dengan corel draw caranya sangatlah mudah, tapi selain itu diperlukan kekereatipan supaya hasilnya bagus, untuk memulainya pertama sobat bukalah aplikasi corel draw, langkah selanjutnya sobat pilih Artistic Media Tool atau tekan hurup I dalam keyboard.
![]() |
| Artistic Media Tool |
Setelah Artistic Media Tool aktif langkah selanjutnya sobat pilih type Calligraphic Pen yang terdapat di atas sehingga pinsil yang digunakan menjadi pinsil untuk kaligrapi.
![]() |
| Calligraphic Type Pen |
Contoh kaligrafinya seperti di bawah ini, maklum kalo jelek karna saya kurang paham tentang kaligrafi dan saya kurang tekun dalam ilmu kaligrafi.
Oke setelah sobat pilih type pen Calligraphic langkah selanjutnya sobat tinggal membuat kaligrafi sesuai imajinasi sobat, oke deh saya rasa postingan pada kesempatan ini sampai disini dulu somoga atikelnya bermanfaat, Good Luck Happy Blogging.
![]() |
| My Calligraphi.. |
Oke setelah sobat pilih type pen Calligraphic langkah selanjutnya sobat tinggal membuat kaligrafi sesuai imajinasi sobat, oke deh saya rasa postingan pada kesempatan ini sampai disini dulu somoga atikelnya bermanfaat, Good Luck Happy Blogging.
Sunday, October 7, 2012
CSS3 Gradient Generator Online
Bismillah...jika sobat ingin membuat warna yang saling berpaduan atau istilahnya Gradient dalam background web/blog, sobat tinggal mengunakan CSS3 Gradient Generator, warna warnya cukup bagus dan hampir sama dengan warna yang terdapat pada Adobe Photoshop.
Oke deh untuk caranya mudah sobat tinggal kunjugi situs Ultimate CSS Gradient Generator sobat bisa cari melalui situs seacrh engine atau sobat juga bisa langsung mengunjungi alamatnya di http://www.colorzilla.com/gradient-editor/, disana banyak beragam warna gradien yang bagus, silahkan sobat tinggal memilih warna yang cocok dengan tampilan web/blog sobat.
Tampilan CSS3 Gradien Generator nya seperti di bawah ini
![]() |
| Ultimate CSS Gradient Generator |
Selamat mencoba semoga web/blog sobat menjadi lebih bagus dan lebih menarik para pengunjung.. Good Luck Happy Blogging
Cara Membuat Rounded Corner Dan Background Gradien
Bismillah... pada kesempatan ini saya akan tulis sedikit, Cara Membuat Rounded Corner Dan Background Gradien, dulu saya pernah posting cara membuat rounded corner, nah daripada pusing pusing memikirkan kode apalagi kalo masih pemula dan masih asing dengan yang namanya CSS (Cascading Style) seperti saya.
Oke untuk membuatnya sangatlah mudah kita cukup menggunakan CSS3 Generator By Peter, sobat tinggal kunjungi saja alamat websitenya di http://www.css3.me/, cara menggunakannya pun sangatlah mudah dan simple, sobat tinggal klik klik dan klik saja.
Screen CSS3 Generator nya seperti gambar di bawah ini.
Sobat tinggal atur atur atur saja terus setelah selesai sobat tinggal klik tombol Get Code yang berwarna biru terus copy kode CSS.
![]() |
| CSS3 Generator |
Disana sobat bisa membuat :
- Border Radius
- Box-Shadow
- Background Gradient
- Ofacity
Oke sobat sampai disini dulu postingan pada kesempatan ini semoga bermanfaat. Good Luck Happy Design
Friday, September 14, 2012
Google SketchUp Pro 8 Full SN
Remo-XP.com - walau rilis sudah agak lama , tapi tidak ada salah nya kan saya share tentang aplikasi ini, kebetulan saya belum pernah share tentang ini jadi mari kita bahas. Google SketchUp Pro 8 Full Serial Number merupakan sebuah perangkat lunak desain grafis yang dikembangkan oleh Google. Pendesain grafis ini dapat digunakan untuk membuat berbagai jenis model, dan model yang dibuat dapat diletakkan di Google Earth atau dipamerkan di Google 3D Warehouse. Software ini biasa digunakan oleh arsitek dan mahasiswa jurusan arsitektur.
Minimum System Requirements:
Password : www.remo-xp.com
(Fix 27/9/12)
Download Google SketchUp Pro 8 Full Serial Number
Read more...
Minimum System Requirements:
- 1 GHz processor.
- 512 MB RAM.
- 300 MB of available hard-disk space.
- 3D class Video Card with 128 MB of memory or higher. Please ensure that the video card driver supports OpenGL version 1.5 or higher and up to date.
Password : www.remo-xp.com
(Fix 27/9/12)
Download Google SketchUp Pro 8 Full Serial Number
Saturday, February 11, 2012
Cara Mengganti Warna Background Dengan Tombol
Kategori :
Bismillah... di hari minggu yang cerah ini semoga sobat blogger masih pada cemangat he he.. oke pada kesempatan ini saya akan tulis sedikit tentang cara mengganti warna Background Blogger sehingga para pengunjung bebas memilih warna sesuai dengan yang mereka inginkan.
Oke sobat kita langsung saja ke TKP, untuk mengganti background blogger dengan warna cukup mudah dan gampang sobat tinggal ikuti saja postingan kali ini. tapi sebelumnya sobat harus mengenal dulu java sscript di bawah ini, biar sobat lebih gampang dalam merubahnya, untuk mengganti background blogger disini saya menggunakan script JavaScript, scriptnya saya ambil dari situs ini http://www.codebelly.com/ jika sobat penasaran silahkan sobat kunjungi situsnya di alamat tadi.
Code JavaSccript untuk merubah background
<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
Nah scriptnya cuma sedikit dan gampang di hapal, terus cara penerapannya sobat bisa menggunakan seperti di bawah ini
<a haref="#" onclick="javascript:changeBG(0)"></a>
Oke sobat itu kode dasarnya, jika sobat mau kembangkan silahkan kembangkan sendiri, jika sobat mau mencoba script yang di bawah juga tidak apa apa, bebas untuk di copy paste, cara penerapan script di bawah ini cukup mudah dan gampang sobat tinggal tambahkan gadget HTML/JavaScript terus copy code di bawah dan Paste di form HTML/JavaScript. sebelum ke kode sebaiknya sobat lihat contohnya gambarnya,
![]() |
| Warna Untuk Background Blog |
<script language="JavaScript">Sobat simpan Script ini di gadget HTML/JavaScript. Oke Good Luck Happy Blogging
var backColor = new Array();
backColor[0] = '#000000';
backColor[1] = '#F0E68C';
backColor[2] = '#E0FFFF';
backColor[3] = '#008000';
backColor[4] = '#FF0000';
backColor[5] = '#87CEFA';
backColor[6] = '#FFDAB9';
backColor[7] = '#FFC0CB';
backColor[8] = '#E6E6FA';
backColor[9] = '#0C10F3';
backColor[10] = '#00FFFF';
backColor[11] = '#0000A0';
backColor[12] = '#800080';
backColor[13] = '#FFFF00';
backColor[14] = '#00FF00';
backColor[15] = '#FF00FF';
backColor[16] = '#FFFFFF';
backColor[17] = '#C0C0C0';
backColor[18] = '#FFA500';
backColor[19] = '#800000';
function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
<style>
.tomblf {
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 1px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
padding: 2em 2em 2em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tomblf:hover {
text-decoration: none;
}
.tomblf:active {
position: relative;
top: 1px;
}
.reds {
color: #000;
border: solid 1px #000;
background: #000;
}
.kuning {
color: #F0E68C;
border: solid 1px #F0E68C;
background: #F0E68C;
}
.birumuda {
color: #E0FFFF;
border: solid 1px #E0FFFF;
background: #E0FFFF;
}
.hijau {
color: #008000;
border: solid 1px #008000;
background: #008000;
}
.merah {
color: #FF0000;
border: solid 1px #FF0000;
background: #FF0000;
}
.warna5 {
color: #87CEFA;
border: solid 1px #87CEFA;
background: #87CEFA;
}
.warna6 {
color: #FFDAB9;
border: solid 1px #FFDAB9;
background: #FFDAB9;
}
.warna7 {
color: #FFC0CB;
border: solid 1px #FFC0CB;
background: #FFC0CB;
}
.warna8 {
color: #E6E6FA;
border: solid 1px #E6E6FA;
background: #E6E6FA;
}
.warna9 {
color: #0C10F3;
border: solid 1px #0C10F3;
background: #0C10F3;
}
.warna10 {
color: #00FFFF;
border: solid 1px #00FFFF;
background: #00FFFF;
}
.warna11 {
color: #0000A0;
border: solid 1px #0000A0;
background: #0000A0;
}
.warna12 {
color: #800080;
border: solid 1px #800080;
background: #800080;
}
.warna13 {
color: #FFFF00;
border: solid 1px #FFFF00;
background: #FFFF00;
}
.warna14 {
color: #00FF00;
border: solid 1px #00FF00;
background: #00FF00;
}
.warna15 {
color: #FF00FF;
border: solid 1px #FF00FF;
background: #FF00FF;
}
.warna16 {
color: #FFFFFF;
border: solid 1px #FFFFFF;
background: #FFFFFF;
}
.warna17 {
color: #C0C0C0;
border: solid 1px #C0C0C0;
background: #C0C0C0;
}
.warna18 {
color: #FFA500;
border: solid 1px #FFA500;
background: #FFA500;
}
.warna19 {
color: #800000;
border: solid 1px #800000;
background: #800000;
}
.warna20 {
color: #254117;
border: solid 1px #254117;
background: #254117;
margin-left:300px;
}
</style>
<div class="tomblf warna20" align="center">
<a class="tomblf reds" onclick="javascript:changeBG(0)"></a>
<a class="tomblf kuning" onclick="javascript:changeBG(1)"></a>
<a class="tomblf birumuda" onclick="javascript:changeBG(2)"></a>
<a class="tomblf hijau" onclick="javascript:changeBG(3)"></a>
<a class="tomblf merah" onclick="javascript:changeBG(4)"></a>
<br/>
<a class="tomblf warna5" onclick="javascript:changeBG(5)"></a>
<a class="tomblf warna6" onclick="javascript:changeBG(6)"></a>
<a class="tomblf warna7" onclick="javascript:changeBG(7)"></a>
<a class="tomblf warna8" onclick="javascript:changeBG(8)"></a>
<a class="tomblf warna9" onclick="javascript:changeBG(9)"></a>
<br/>
<a class="tomblf warna10" onclick="javascript:changeBG(10)"></a>
<a class="tomblf warna11" onclick="javascript:changeBG(11)"></a>
<a class="tomblf warna12" onclick="javascript:changeBG(12)"></a>
<a class="tomblf warna13" onclick="javascript:changeBG(13)"></a>
<a class="tomblf warna14" onclick="javascript:changeBG(14)"></a>
<br/>
<a class="tomblf warna15" onclick="javascript:changeBG(15)"></a>
<a class="tomblf warna16" onclick="javascript:changeBG(16)"></a>
<a class="tomblf warna17" onclick="javascript:changeBG(17)"></a>
<a class="tomblf warna18" onclick="javascript:changeBG(18)"></a>
<a class="tomblf warna19" onclick="javascript:changeBG(19)"></a>
</div>
Saturday, February 4, 2012
Cara Mudah Membuat CSS Dengan CSS3 Maker
Bismillah... untuk membuat web yang bagus dan enak dipandang mata bagi para programer web pemula memang sangatlah susah, apalagi jika belum mengenal yang namanya script CSS3, karena dengan menggunakan script CSS3 ini suatu web akan lebih bagus dan enak dipandang mata dan lebih fleksibel, jika sobat ingin membuat suatu web dengan tampilan yang lebih menarik dan enak di lihat oleh para pengunjung sekarang ada cara yang mudah, sobat tinggal menggunakan CSS3 maker.
![]() |
| CSS3 Maker |
Dengan CSS3 maker ini sobat bisa membuat :
- Border Radius
- Gradient
- CSS Transform
- CSS Animation
- CSS Transition
- Warna RGBA
- Text Shadow
- Box Shadow
- Tetx Rotation
- Front Face
Cara menggunakan CSS3 Maker ini cukup mudah sekali, sobat tinggal setting di panel sebelah kiri setelah selesai di setting, sobat tinggal tinggal download atau copy script CSS nya, dan terapakan di web/blog sobat. jika sobat berminat silahkan sobat kunjungi URL nya di alamat www.css3maker.com, Good Luck Happy Blogging.
Logo Facebook Dengan CSS3
Bismillah.. pada kesempatan ini saya akan share cara membuat logo Facebook dengan menggunakan CSS3, semakin berkembangnya dunia CSS dan Web Browser maka sekarang untuk menempelkan sebuah logo social networking atau logo apa saja di dalam suatu web tidak perlu lagi menggunakan media gambar, sekarang sobat tinggal berkreasi dan membuat logo sendiri dengan menggunakan CSS3.
Seperti cotoh di bawah ini logo Facebook yang tidak menggunakan media gambar, tapi dengan menggunakan Script CSS3, untuk membuat logo Facebook dengan memanfaatkan script CSS, script ini hasil kreasi Nicolas Gallagher jika sobat ingin mengetahui lebih lanjut tentang script Icon Social Media silahkan sobat kunjungi situsnya di alamat http://nicolasgallagher.com/, sebagai contoh saya ambil tampilan icon facebook secriptnya seperti di bwah ini.
<style>Terus di dalam tag body sobat masukan tag di bawah ini
.facebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
ul li a:hover,
ul li a:focus,
ul li a:active {
opacity:0.8;
border-color:#000;
}
ul {
list-style:none;
padding:0;
margin:0;
overflow:hidden;
font:0.875em/1 Arial, sans-serif;
}
ul li {
float:left;
width:66px;
height:66px;
margin:20px 20px 0 0;
}
ul li a {
display:block;
width:64px;
height:64px;
overflow:hidden;
border:1px solid transparent;
line-height:64px;
text-decoration:none;
/* css3 */
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px; /* standards version last */
}
</style>
<div class="content">
<ul>
<li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
</ul>
</div>
Terus sobat lihat hasilnya, insya allah jika web browser sobat sudah support dengan CSS3 hasilnya akan seperti di bawah ini.
Sampai disini dulu info tentang Logo Facebook menggunakan script CSS, semoga bermanfaat, Good Luck Happy Blogging .
Friday, December 2, 2011
Style CSS3 Seach Form (Kotak Pencarian)
Kategori :
CSS . Design . tutorial blog
![]() |
| Serch Form Stlye |
Bismillah... Setelah sekian lama tidak posting, Insya Allah pada kesmpatan ini saya akan tulis tentang tutorial cara membuat Search Form atau istilahnya Kotak Pencarian, apakah penting sebuah kotak pencarian dalam suatu web/blog? dan apa fungsi kotak pencarian tersebut? mungkin itu beberapa pertanyaan yang keluar dalam benak saya, setelah di pikir ulang ternyata kotak pencarian ini sangat bermanfaat dan penting sekali, khususnya bagi para visitor. kemarin lutfie tutorial blog baru saja memasang kotak pencarian yang berada dilsebelah kanan atas sidebar.
Untuk membuat kotak pencarian (serch form) seperti itu sangatlah mudah dan gampang, langkah pertama untuk membuat kotak pencarian dalam blogspot yaitu :
- Sobat login ke Blogger,
- Setelah itu sobat mauk ke area Design/Tata Letak Blog
- Selanjutnya sobat masuk ke area Edit HTML dan jangan lupa sobat Centang Expand Widget Templates,
- Setelah itu sobat cari kode </head>,
- Setelah ketemu tag </head>, sobat masukan kode CSS di bawah ini tepat di atas tag </head>.
<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
</style>
Atau sobat bisa meletakannya diatas tag ]]></b:skin>, jika sobat meletakan diatas tag ]]></b:skin> sobat buang tag pembuka style dan penutupnya (tag </style> dan tag <style> ), jika sobat meletakan di atas tag ]]></b:skin> maka kode CSS nya sebagai berikut :
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));Setelah selesai terus simpan / Save template blog sobat
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
Keterangan Code CSS
- searchform : Kode CSS untuk memberi style kotak pencarian
- searchform input : Kode CSS untuk memberi style kotak input
- searchbutton : Kode CSS untuk memberi style pada tombol
Silahkan sobat ganti warna serta beckgrounnya supaya selaras dengan blog sobat. setelah itu sobat masuk ke area Design/Tata Letak Blog dan tambahkan gadget HTML/JavaScript lalu sobat masukan kode di bawah ini
<form class="searchform" method="get" action="http://lutfietutor.blogspot.com/search" >
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="q" />
<input class="searchbutton" type="button" value="Search" />
</form>
Sebelum di save sobat ganti tulisan yang berwana merah (http://lutfietutor.blogspot.com/) dengan alamat blog sobat.
Disini saya mempunyai beberapa Style Search Form dengan Menggunaka CSS3.CSS Search Form Warna Merah
![]() |
| Search Form Merah |
<style type='text/css'>CSS Search Form Warna Hitam
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
</style>
![]() |
| Search Form Hitam |
<style type='text/css'>CSS Search Form Warna Biru
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
</style>
![]() |
| Search Form Biru |
<style type='text/css'>CSS Search Form Warna Hijau
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');}</style>
![]() |
| Search form Hijau |
<style type='text/css'>CSS Search Form Warna Orange
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}
</style>
![]() |
| Search form Orenge |
<style type='text/css'>CSS Search Form Warna Putih Abu Abu
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}
</style>
![]() |
| Search form Abu Abu |
<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#000; cursor: pointer; border:solid 1px #000; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');}
</style>
Oke sobat, sampai disini dulu postingan tentang Style CSS3 Seach Form, semoga bermanfaat, Good Luck Happy Blogging
Saturday, November 19, 2011
Cara Mengganti Komen Di Blogspot Dengan IntenseDebate
Kategori :
![]() |
| IntenseDebate Comment |
Bismillah.... pada kesempatan ini saya akan tulis tentang tutorial cara mengganti tampilan komen di blogspot dengan menggunakan IntenseDebate, tapi sebelumnya jika blog sobat sudah terkenal dan banyak yang komen maka sebaiknya template blogsobat di backup dulu, seperti apa tampilan comment IntenseDebate? tapilannya seperti gambar di pinggir atau sobat bisa lihat dibawah kotak komentarnya.
Untuk membuat kotak komentar seperti itu pertama sobat kunjungi situs http://intensedebate.com/ terus sobat register/daftar jika sobat punya akun WordPress sobat langsung saja tinggal login. langkah pertama yang harus sobat lakukan adalah
- Login ke Blogger
- Terus masuk ke area Design/Rancangan Blog
- Terus masuk Edit HTML
- Setelah itu sobat Download Full Template
- Setelah template blog sobat di download, sobat login ke akun IntenseDebate
- Terus sobat klik Site dan Pilih Add Blog/Site terus masukan URL blog sobat
![]() |
| Add Url blog/site |
Setelah itu sobat klik Next Step dan akan tampil seperti di bawah.
![]() |
| Instaling Coment IntenseDeate |
Terus Geser ke bawah dan upload template yang tadi sobat download, setelah itu klik Upload. setelah upload selesai sobat copy kode yang ada pada form
![]() |
| Copy Template Blogspot Ctrl+A untuk Select |
Tuesday, November 15, 2011
Sitemap According By Abu Farhan
Kategori :
![]() |
| Sitemap According |
Bismillah... pada kesempatan ini saya akan sedikit share cara membuat sitemap di blogspot dengan style according. sobat blogger mungkin sudah banyak yang kenal dengan yang namanya acroding.
Jika sobat mau membuat sitemap di blogspot dengan according style caranya mudah sobat tinggal kunjungi saja situs abu farhan, disana banyak sekali tutorial tentang according, disini saya akan akan membahas cara membuat sitemap dengan menggunakan Page Statis Blogspot (Contoh Sitemap Blogspot), untuk memulainya langkah pertama yang harus sobat lakukan adalah :
- Login ke Blogger
- Setelah Login sobat Klik New Post atau yang lainnya (jika sobat menggunakan bahasa indonesia)
- Setelah terbuka New Post sobat klik Edit Page
![]() |
| Edit Page Blogspot |
- Terus Sobat Klik New Page dan beri Judul Site Map atau apa saja terserah sobat.
| Create Page Statis Dalam Blogspot |
- Jika sudah sobat copy kode di bawah dan masukan pada area page
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://lutfietutor.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
Sebelum di Publish sobat ganti kode yang berwarna merah, dengan alamat blogspot sobat, jika sudah sobat Klik Publish dan lihat hasilnya. Good Luck Happy Blogging
Saturday, November 12, 2011
Cara Menampilkan Tombol Reply Comment Di Blogspot
Kategori :
![]() |
| Tombol Reply Blogger |
Bismillah... setelah saya tulis tutorial cara menyisipkan link url, pada postingan kali ini akan menulis tentang cara menambahkan atau menampilkan tombol replay comment di blogspot, sobat pernah lihat blog punya tetangga pada komentarnya ada tulisan reply/balas terutama pada blog WordPress karena pada blog WP sudah disediakan, terus untuk apa kegunaan Replay Comment ini? kalo menurut saya tombol ini berfungsi untuk membalas komen-komen yang terdapat pada blog kita dengan mudah dan simple, shingga balasan/reply dari seseorang akan lebih terarah pada pada seseorang. he he..
Oke sobat blogger, jika sobat ingin menambahkan fitur replay komen ini langkah pertama yang harus sobat lakukan adalah
- Login Ke Blogger
- Terus masuk ke area Design/Rancangan Blog
- Terus sobat masuk ke Area Edit HTML
- Setelah itu sobat centang Expand Widget
- Terus sobat cari kode <data:commentPostedByMsg/> (untuk memudahkan mencari sobat tekan Ctrl+F dan masukan kode dalam dalam kotak pencarian )
- Setelah ketemu kode tersebut sobat copy kode di bawah ini dan letakan di bawah kode <data:commentPostedByMsg/>.
Kode Comment Reply
<span>
<a expr:href='"https://www.blogger.com/comment.g?blogID=BLOGID SOBAT&postID=" + data:post.id + "&isPopup=true&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"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><p>Reply/Balas</p></a>
</span>
- Sebelum Di Save sobat ganti tulisan BlogID Sobat dengan ID Blog sobat, untuk mengetahui blog id, sobat lihat pada kotak browser ketika sobat lagi dalam design atau dalam area postingan, contoh alamat blog id
http://www.blogger.com/rearrange?blogID=517262246752329173
Setelah diganti sobat save dan lihat hasilnya, tambahan jika sobat inging mengganti reply comment tersebut dengan gambar sobat siapkan dulu sebuah gambar dan upload, setelah itu copy Url gambar tersbut terus sobat ganti kode <p>Reply/Balas</p> dengan kode dibawah
<img border="0" src='http://urlgambarmiliksobat.com/gambar.gif' />
Jadi jika sobat ingin menggunakan gambar scriptnya seperti di bawah
Comment Reply Dengan Gambar
<span>
<a expr:href='"https://www.blogger.com/comment.g?blogID=BLOGID SOBAT&postID=" + data:post.id + "&isPopup=true&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"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img border="0" src='http://urlgambarmiliksobat.com/gambar.gif' /></a>
</span>
Oke sobat Blogger.. Di cukupkan sampai disini postingan tentang cara menampilkan tombol reply pada blogspot, semoga berhasil, Good Luck Happy Blogging
Cara Menyisipkan Share Link Di Blogspot
Kategori :
| Share Link Blogspot |
Bismillah... Pada kesempatan ini saya akan tulis tentang cara menyisipkan share link di blogspot, tapi sebelum nya sobat sudah tau apa itu Share Link? jika sobat belum tau silahkan sobat geser mouse sobat ke bawah, tepatnya di bawah Langganan Tutorial Blog Via Email ada alamat url dalam text area, nah mungkin itu yang dimaksud oleh saya.
Jika sobat ingin menyisipkan url postingan sobat di bawah postingan caranya mudah sekali sobat tinggal ikuti saja tutorial blog pada postingan ini. sebelumnya saya akan memberikan gambaran apa saja yang harus sobat lakukan
Untuk menyisipkan Url postingan blogspot sobat harus tau dulu kode nya , untuk menyisipkan judul postingan sobat pakai kode di bawah ini.
<data:blog.pageName/> = Untuk Judul Postingan
kode di atas adalah kode untuk menyisipkan judul postingan. untuk kode Url nya adalah :
<data:post.url/> = Untuk URL Postingan
Nah itu kode kode yang sobat butuhkan untuk menyisipkan url di bawah postingan, jika sobat inging menyipan kode tersebut dalam Text Area sobat tinggal tambahkan secript seperti di bawah
<textarea> <data:post.url/></textarea>
Jika sobat ingin pakai auto select dalam text area tersbut, sobat tingggal menambahkan sedikit JavaSecript
onclick='this.focus();this.select()'
Cara penerapanya lihat contoh kode dibawah
<textarea onclick='this.focus();this.select()'> <data:post.url/></textarea>
Jika sobat inging menyimpan Share link tersbut di dalam postingan sobat tinggal tingga cari kode <data:post.body/> , jika sobat ingin meletakan share url di bawah postingan maka sobat tinggal sisipkan kode tersebut di bawah kode <data:post.body/> contoh
Menyisipkan kode share url di bawah postingan
<data:post.body/><textarea onclick='this.focus();this.select()'> <data:post.url/></textarea>
Menyisipkan kode share url di atas postingan
<textarea onclick='this.focus();this.select()'> <data:post.url/></textarea><data:post.body/>
Terus bagaimana jika kita ingin menyimpan setelah di klik readmore, caranya sobat tinggal tambahkan kode di bawah ini
<b:if cond='data:blog.pageType == "item"'><data:post.body/><textarea onclick='this.focus();this.select()'> <data:post.url/></textarea></b:if>
Oke sobat blogger di cukupkan sampai disini dulu tutorial cara menyisipkan Share Link dalam blogspot, semoga bermanfaat dan sukse. Good Luck Happy Blogging
Monday, November 7, 2011
Cara Membuat CSS According Slide
Kategori :
CSS . Design . gadget . tutorial blog
![]() |
| Slide According |
Bismillah.. Setelah saya posting tentang cara membuat menu according sekarang saya akan posting lagi tentang cara membuat slide according, according ini buatan Harry Robert dan saya sedikit rubah CSS nya, jika sobat tertarik dengan ini silahkan di coba coba.
Untuk membuat menu slide according ini sobat tidak memerlukan JavaScript yang diperlukan hanya CSS dan Tag HTML, dalam According ini yang dugakan adalah tag h2, tag div dan tag ul li, silahkan sobat bisa kembangkan lagi sesuai dengan kebutuhan sobat jika sobat mau lihat contohnya silahkan sobat kunjungi According Slide.
Pertama kita buat dulu Tag ul dalam editor HTML dan beri kelas (class="namakelas") sebagai contoh
<ul class="accordion"></ul>
Terus tambahkan tag li di dalam tag ul dan beri kelas <li class="namakelas"> jadi strukturnya seperti di bawah
<ul class="accordion">
<li class="slide-01"></li><li class="slide-02"></li><li class="slide-03"></li><li class="slide-04"></li><li class="slide-05"></li></ul>
Contoh di atas adalah dasar dari pembuatan menu dengan menggunakan tag ul dan li. sekarang kita langsung ke cara membuat According Slide dengan CSS. jika sobat ingin pasang slide according ini pada blogspot langkah pertama yang harus dilakukan adalah :
- Login ke blogger
- Terus masuk ke area Design/Rancangan
- Langkah selanjutnya masuk ke area Edit HTML terus sobat centang Expand Widget
- Setelah itu sobat masukan kode CSS di bawah ini di atas tag </head>, atau sobat bisa juga memasukannya dalam CSS sobat. itu terserah yang penting CSS nya bisa jalan.
CSS SLIDE ACCORDING
<style>
.accordion{
width:500px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{ padding:10px;}
.accordion:hover li{ width:10%;}
.accordion li:hover{ width:60%;}
.slide-01 { background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
color:white;}
.slide-02 { background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
color:white; }
.slide-03 { background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
color:white;}
.slide-04 { background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
color:white; }
.slide-05 { background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color:white; }
</style>
- Jika sudah sobat save template blog sobat.
- Langkah selanjutnya sobat kembali masuk ke area design/rancangan blog
- Terus sobat tambahkan Gadet HTM/JavaScript dan Copy Code di bawah dan masukan dalam gadget tersebut
CODE SLIDE ACCORDING
<ul class="accordion">
<li class="slide-01">
<div>
<h2>Slide 1</h2>
<p>Test According1</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>Slide 2</h2>
<p>Test According2</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>Slide 3</h2>
<p>Test According3</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>Slide 4</a></h2>
<p>Test According4</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>Slide 5</h2>
<p>Test According5</p>
</div>
</li>
</ul>
Silahkan sobat ganti Title atau kata Slide 1 ,2,3,4,5 dengan title blog sobat atau dengan judul postingan sobat jika sobat mau menambahkan link sobat tinggal tambahkan saja, jika belum tau cara membuat link silahkan sobat baca baca lagi, oke sobat semoga berhasil.. Good Luck, happy Blogging
Subscribe to:
Posts (Atom)




































