Oktober 2012

Beberapa Situs Online Text Generator Free


Beberapa Situs Online Text Generator Free - Untuk membuat sebuah tulisan/text yang bergaya dan memiliki kualitas yang bagus, selain bisa menggunakan software-software multimedia seperti CorelDraw, Adobe Photoshop, Photo Scape, dan sebagainya, kita juga bisa menggunakan jasa beberapa situs online text generator free. Artinya situs tersebut menyediakan beberapa fasilitas untuk membuat dan mendesain suatu tulisan/text yang kita inginkan supaya menjadi lebih indah dan menarik tanpa harus membayar (free).

Selain itu, bagi anda yang memang belum bisa/kurang mendalami tentang bagaimana cara membuat sebuah logo dengan tulisan yang bagus dan menarik menggunakan software multimedia seperti yang sudah saya sebutkan di atas atau mungkin anda tidak ingin repot-repot membuat sebuah logo untuk blog anda sendiri, maka tidak ada salahnya jika anda menggunakan jasa dari beberapa situs online text generator free ini. Dan berikut daftar beberapa situs online text generator free yang bisa anda kunjungi untuk membuat dan mendesain tulisan/text yang nantinya bisa anda jadikan sebagai logo blog anda masing-masing.

1. Logomatik (http://logomatik.net/)


2. Simwebsol (http://www.simwebsol.com/)

3. Cooltext (http://cooltext.com/)

4. Flamingtext (http://flamingtext.com/)

5. Thelogoshop (http://thelogoshop.info/)

Kelima situs online text generator free di atas bisa anda manfaatkan untuk berkarya dan mencoba untuk membuat atau mendesain tulisan menjadi lebih unik dan menarik. Mungkin cukup sekian postingan tentang beberapa situs online text generator free ini, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Semoga bermanfaat dan salam sejahtera by ngeposta...
19.11

Membuat Efek Zoom Image Pada Postingan di Blog


Membuat Efek Zoom Image Pada Postingan di Blog - Efek zoom image ini akan tampak seperti halnya pada tampilan zoom image di facebook atau pada pencarian gambar di google. Dan dengan adanya efek zoom image ini maka akan memberikan kesan yang lebih indah dan lebih unik.

Langsung saja bagi anda yang berminat dan ingin mencoba untuk membuat efek zoom image pada postingan di blog silahkan ikuti tutorial di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini di dalamnya :

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

<script src="https://sites.google.com/site/jombinabelogefekzoom/jombinabelog-efekzoom.js" type="text/javascript">
</script>

6. Klik save/simpan, selesai dan lihat hasilnya...

Jika efek zoom image yang telah kita buat tidak berhasil, maka kita tambahkan script kode untuk memanggil kembali script kode efek zoom image yang sudah kita save/simpan tadi. Caranya cukup mudah, yaitu tinggal kita masukkan kode berikut ini pada setiap gambar yang akan di tampilkan pada postingan blog kita.

<img src="#" class="magnify" data-magnifyby="2" style="cursor: url(magnify.cur),
-moz-zoom-in, -webkit-zoom-in, -o-zoom-in, zoom-in; height: auto; width: auto;" />

Note :
Ganti tanda # dengan alamat url gambar yang akan di tampilkan.

Nahh, untuk previewnya kurang lebih seperti gambar di bawah ini :

(Klik gambar di atas, dan lihat hasilnya)

Mungkin cukup sekian dulu postingan tentang cara membuat efek zoom image pada postingan di blog ini. Selebihnya saya ucapkan terima kasih atas kunjungan anda dan semoga bermanfaat. Mohon ma'af atas segala kekurangan yang ada. Special thanks to jombinabelog. Salam sejahtera by ngeposta...
10.55

Memasang Widget Date and Time (Waktu dan Tanggal) Ala Ngeposta

MemasangWidget Date and Time (Waktu dan Tanggal) Ala Ngeposta - Puji syukur saya panjatkan kepada Tuhan Yang Maha Esa yang telah memberikan karunia dan anugrahnya sehingga sampai saat ini saya masih bisa mengirup udara segar dan melanjutkan aktifitas kehidupan sehari-hari. Pada kesempatan kali ini saya akan share alias berbagi sebuah widget sederhana, widget ini saya beri nama "Widget Date and Time Ala Ngeposta". Pra tampil (preview) tampilan dari widget date and time ala ngeposta ini kurang lebihnya adalah seperti pada gambar berikut :

Cara membuatnya sebenarnya cukup mudah sekali, yaitu menggunakan JavaScript di kombinasikan dengan tag tertentu pada html serta menambahkan selector CSS untuk memperindah output/tampilannya.

Silahkan bagi anda yang berminat memasang widget date and time (waktu dan tanggal) ala ngeposta ini langsung saja simak dan ikuti langkah-langkah di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini : 

<div style="background: #009900; border-left: 3px solid black; color: white;
padding: 5px 5px 5px 10px; height: 17px; text-shadow: 1px 1px #000; margin-top: 0;">

Hari : 
<script type="text/javascript">
now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli",
"Agustus","September","Oktober","November","Desember")

document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script> ?

<script type="text/javascript">
 window.setTimeout("jam()",1000);
 function jam() {
 var tanggal = new Date();
 setTimeout("jam()",1000);
 document.getElementById("ngeposta").innerHTML = 
 tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
 }
 </script>

<span id="ngeposta"></span>
</div>

6. Klik save/simpan, selesai dan lihat hasilnya...

Cukup sekian dulu postingan tentang cara memasang widget date and time (waktu dan tanggal) ala ngeposta ini dan semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
18.58

Memasang Syntax Highlighter Dari Alex Gorbatchev (Current Version)


Memasang Syntax Highlighter Dari Alex Gorbatchev (Current Version) - Syntax highlighter dari Alex Gorbatchev ini memang sangat membantu sekali dalam hal penyesuaian dalam penempatan barisan kode yang akan di publish dalam postingan, karena dengan adanya syntax highlighter ini maka pembaca akan lebih mudah memahami dan membaca setiap barisan kode yang telah kita tuliskan. Dan keberadaan syntax highlighter dari Alex Gorbatchev ini tentunya akan membawa dampak keunikan tersendiri pada setiap tampilan dalam barisan blok kode yang ada kerena memang tampilannya pun sangat stylish dan elegant, serta enak di pandang mata.

Syntax highlighter dari Alex Gorbatchev yang akan saya share pada kesempatan kali ini merupakan syntax highlighter current version (versi yang tersedia sekarang/paling baru). Langsung saja bagi anda yang berminat silahkan ikuti langkah-langkah bagaimana cara memasang syntax highlighter dari Alex Gorbatchev (current version) berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode </head> dan letakkan script kode berikut ini tepat di atasnya.

<!-- SYNTAX HIGHLIGHTER BEGINS -->

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'
rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css'
rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'
type='text/javascript'/>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

<!-- SYNTAX HIGHLIGHTER ENDS -->

5. Lalu klik save, dan selesai...

Langkah selanjutnya adalah mengetahui bagaimana cara pemanggilannya agar syntax highlighter tersebut dapat di tampilkan dengan baik. Caranya sangat sederhana, yaitu anda tinggal menambahkan tag <pre> pada barisan kode yang akan di beri syntax highlighter tersebut, contohnya seperti berikut ini :

1. Untuk script kode html :
<pre class="brush:html">

Sisipkan kode html anda di sini!

</pre>

2. Untuk script kode css :
<pre class="brush:css">

Sisipkan kode css anda di sini!

</pre>

3. Untuk script kode java :
<pre class="brush:java">

Sisipkan kode java anda di sini!

</pre>

4. Untuk script kode javascript :
<pre class="brush:javascript">

Sisipkan kode javascript anda di sini!

</pre>

5. Untuk script kode php :
<pre class="brush:php">

Sisipkan kode php anda di sini!

</pre>

Dan lain sebagainya... Mungkin cukup sekian postingan tentang cara memasang syntax highlighter dari Alex Gorbatchev (current version) ini, selebihnya saya mohon ma'af dan semoga bermanfaat bagi anda. Salam sejahtera by ngeposta...
20.21

Memasang Star Rating Pada Setiap Postingan Dengan JS-KIT


Memasang Star Rating Pada Setiap Postingan Dengan JS-KIT - Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara memasang star rating pada setiap postingan dengan JS-KIT. Kode star rating ini berasal dari js-kit.com, bagi anda yang berminat untuk memasang star rating pada setiap postingan di dalam blog anda silahkan ikuti langkah-langkah berikut :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode </body> dan sisipkan kode berikut di atasnya.

<!-- JS-KIT FOR STAR RATINGS SHOW -->
<script src='http://js-kit.com/ratings.js'/>

5. Langkah selanjutnya adalah menampilkan star rating tersebut, ada dua jenis model yang bisa kita pilih. Cukup pilih salah satu dari dua kode dibawah ini dan tambahkan di bawah kode <data:post.body/>.

Kode 1 (Star Rating Model Biasa) :

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>

Kode 2 (Like / Unlike Dengan Gambar Jempol) :

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" view="score"></div>

6. Klik save/simpan template, dan lihat hasilnya...

Semoga postingan tentang cara memasang star rating pada setiap postingan dengan JS-KIT ini bermanfaat bagi anda, selamat mencoba dan semoga berhasil. Cukup sekian dulu, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
20.51

Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3


Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3 - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat efek spinning image (gambar berputar) dengan CSS3, yang intinya adalah membuat efek spinning (berputar) pada suatu gambar tertentu baik ketika gambar tersebut di lalui atau di sorot oleh cursor dan ketika gambar tersebut sudah tidak di lalui atau di sorot oleh cursor lagi. Efek ini merupakan penerapan dari unsur transform dengan menggunakan CSS3.

Untuk langkah-langkah cara membuat efek spinning image (gambar berputar) dengan CSS3, silahkan simak dengan baik langkah-langkah di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian letakkan script CSS berikut ini tepat di atas kode ]]></b:skin>.

div#spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#spinstyle1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#spinstyle2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#spinstyle3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

5. Setelah itu klik save/simpan template.

Langkah selanjutnya adalah pemanggilan dari script CSS yang telah di deklarasikan tersebut, caranya sangat mudah sekali. Anda hanya perlu menambahkan script berikut ini :

<div id="spinstyle1">
<!-- angka 1 bisa di ganti dengan angka 2 atau 3 untuk menampilkan model spinning yg berbeda -->

<a href="http://blogseokita.blogspot.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQI2U_-T2t1a6QTD0Y51OXzXGD8BtStB4t_SjKCd6tdaRztyMddMzlN1bwXswxIWDFkWgUCxg8khhiFvvfM3566tHUnf7Ua1m0HVH-3H9NylIbSB4YdAubu4pwe4VNkdy6Wo2h6Go0R7vp/s1600/rss.png" /></a>
 
<a href="http://www.delicious.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWdN4CXJLxeZWGky2g_uZSawt1yQf8mNuvuJI87FkgpuxZfr-3_4swAy7nk_y_0Ahw92qgQMnJUUOcD2b88jTigz7yRKXqOUkZMJiYvdVXmLw4wNPHgK10SePXK5dRdqmcQJywmladvLN/s1600/delicious.png" /></a>
 
<a href="http://www.facebook.com/umam.nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeaKMEKD-OF0IwI5LdA4ZQ_6tVp4R1ILZyTv9tj01pj4isWILLqYaDkZvrVi8jhQo-6U6wCiE2_-edkWU-NFWx73kyTSZh66Xhxf4NjG2YoWNg17227qE5nt59aYnIcvKgHVcFzY24myj/s1600/facebook.png" /></a>

<a href="http://www.twitter.com/#!Nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErQ0JrwjPDNIEyxsRGRnZvz-oLhsc1oDUV-MGaKde_EeUVRVDJJMD07CLhV-tc5xyAGbFNNjozvV0jOcqM56fCXvKuZmufWI8lMMzhrxIMZnlTkSeUNyVRmmkzjJPS46mPWTKhpaEjLV9/s1600/twitter.png" /></a>

<a href="http://www.yahoo.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr54pzfNhtUQZ_xjyO1oIHEenWu1S8PJM2_hnOE51hSFe5Uk4yBclAuEdylrXruA3Cf1QC4nrValc9LbPhoZK3ULnR40tQ3Jqqt9zrSDAT3H0vfXT7g7phlmAnlcG5Rih5Mwp9QaazwWEx/s1600/yahoo.png" /></a>

</div>
<div class="clear"></div>

Preview atau hasil dari masing-masing style tampilannya kurang lebih seperti di bawah ini :

 #spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */



#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */



#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */



Note :
Tulisan yang saya beri warna hijau merupakan style tampilan dari efek spinning image tersebut. Sedangkan tulisan yang saya beri warna merah merupakan keterangan dari masing-masing style tampilan dari efek spinning image tersebut. Dan barisan script yang saya beri warna orange adalah alamat url tujuan dan alamat url gambar yang akan kita berikan efek spinning image.

Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat efek spinning image (gambar berputar) dengan CSS3. Semoga bermanfaat bagi anda dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...
19.36
Langganan: Komentar (RSS)
 

Cs Support

Link Sahabat

About this blog