Alfan Fazan Jr.: Tutorial Blog - Oretan tentang pendidikan di Indonesia
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
 Cara Mudah Mengunduh Google Dokumen ke Format Word 0

Cara Mudah Mengunduh Google Dokumen ke Format Word

Google Dokumen adalah layanan pengolah kata daring gratis yang disediakan oleh Google. Layanan ini memungkinkan pengguna untuk membuat, mengedit, dan berkolaborasi dalam dokumen secara daring. Google Dokumen dapat diakses melalui peramban web atau aplikasi seluler, sehingga pengguna dapat mengakses dokumen mereka dari mana saja dan kapan saja.

Salah satu fitur utama Google Dokumen adalah kemampuan kolaborasi secara waktu nyata. Pengguna dapat berbagi dokumen dengan orang lain dan bekerja bersama secara bersamaan. Perubahan yang dilakukan oleh satu pengguna akan langsung terlihat oleh pengguna lain, sehingga memudahkan kerja tim dan 1  koordinasi. Google Dokumen juga menyimpan riwayat revisi, memungkinkan pengguna untuk melacak perubahan dan mengembalikan dokumen ke versi sebelumnya jika diperlukan. 

Google Dokumen menyediakan berbagai fitur pengolah kata yang lengkap, termasuk pemformatan teks, penyisipan gambar dan tabel, serta alat pemeriksaan ejaan dan tata bahasa. Layanan ini juga terintegrasi dengan layanan Google lainnya, seperti Google Drive dan Google Formulir, sehingga memudahkan pengguna untuk menyimpan dan berbagi dokumen. Selain itu, Google Dokumen mendukung berbagai format file, termasuk Microsoft Word, PDF, dan format teks lainnya.

Dengan kemudahan akses, fitur kolaborasi, dan integrasi dengan layanan Google lainnya, Google Dokumen menjadi pilihan populer bagi individu dan tim untuk membuat dan mengelola dokumen secara daring. Layanan ini menawarkan alternatif yang kuat untuk perangkat lunak pengolah kata tradisional, dengan keunggulan aksesibilitas dan kolaborasi yang lebih baik.

Google Dokumen merupakan salah satu alat kolaborasi daring yang populer. Namun, terkadang kita perlu menyimpan dokumen tersebut dalam format Microsoft Word (.docx) untuk keperluan tertentu. Berikut adalah langkah-langkah mudah untuk mengunduh Google Dokumen ke format Word:

Buka Google Dokumen

Langkah pertama adalah membuka dokumen Google Dokumen yang ingin Anda unduh. Pastikan Anda memiliki akses ke dokumen tersebut.


Akses Menu "File"

Setelah dokumen terbuka, arahkan kursor ke bagian kiri atas layar dan klik menu "File". Menu ini berisi berbagai opsi terkait pengelolaan dokumen.


Pilih "Download"

Dalam menu "File", cari dan pilih opsi "Download". Tindakan ini akan menampilkan daftar format file yang tersedia untuk diunduh.

Pilih "Microsoft Word (.docx)"

Format muncul, pilih "Microsoft Word (.docx)". Google Dokumen akan mulai mengonversi dokumen ke format Word.


Simpan File

setelah proses konversi selesai, file akan otomatis terunduh ke perangkat yang anda gunakan. anda dapat menentukan lokasi penyimpanan file sesuai dengan yang anda inginkan.

Cara Memasang Widget 10 Top Komentator di Blogger 0

Cara Memasang Widget 10 Top Komentator di Blogger

Widget 10 top komentator menampilkan  para blogger yang selalu memposting komentarnya di blog anda. secara beruturan sesuai jumlah komentar yang telah diberikan.

Untuk yang mau memasang Cara Memasang Widget 10 Top Komentator di Blogger silahkan lihat caranya di bawah ini :

  • Login pada akun Blogger anda
  • Klik Tata Letak
  • Lalu klik Tambah Widget
  • Pilih HTML/JavaScript
  • Copas kode di bawah ini
<h4 style="text-align:center">10 Top Komentator</h4>
<script type="text/javascript">
function getYpipe(feed) {
document.write('<span style="font-family:Tahoma;font-size:12px;">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="" + feed.value.items[i].title + "";
else
var item = "<center>" + "<a href="+ href + '" target="_blank" rel="nofollow">' + feed.value.items[i].title + "</a></center>";
document.write(item);
}
document.write('</span>');}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://fauzan-zifa.blogspot.com
&ExcludedNick1=Ahmad Fawzan Rohman
&ShowHowMany=10
&_callback=getYpipe
&_id=23022d7836bf2dd3c10a329feb9be26a
&_render=json"
type="text/javascript"></script>
<h4 style="text-align:center">Terima Kasih Atas Komentarnya</h4>

  • Tulisan yang yang berwarna biru silahkan di ganti dengan alamat blog anda, tulisan berwarna merah ganti sesuai keinginan anda
  • Selanjutnya save dan lihat hasilnya

Semoga bermanfaat
Apa itu Website/Situs ? 0

Apa itu Website/Situs ?

Website/Situs

Situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi, gambar gerak, suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan link-link.

Unsur-Unsur Web Site atau Situs

Untuk membangun situs diperlukan beberapa unsur yang harus ada agar situs dapat berjalan dengan baik dan sesuai yang diharapkan. Unsur-unsur yang harus ada dalam situs antara lain:

Domain Name Domain name atau biasa disebut nama domain adalah alamat

permanen situs di dunia internet yang digunakan untuk mengidentifikasi sebuah situs atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan situs kita pada dunia internet. Istilah yang umum digunakan adalah URL. Contoh sebuah URL adalah http://www.google.com--dapat juga tanpa www-- Ada banyak macam nama domain yang dapat kita pilih sesuai dengan keinginan.

Berikut beberapa nama domain yang sering digunakan dan tersedia di internet:
  • Generic Domains(gTLDs), Merupakan domain name yang berakhiran dengan .Com .Net .Org .Edu .Mil atau .Gov. Jenis domain ini sering juga disebut top level domain dan domain ini tidak berafiliasi berdasarkan negara, sehingga siapapun dapat mendaftar.
.com : merupakan top level domain yang ditujukan untuk kebutuhan "commercial".
.edu : merupakan domain yang ditujukan untuk kebutuhan dunia pendidikan (education)
.gov : merupakan domain untuk pemerintahan (government)
.mil : merupakan domain untuk kebutuhan angkatan bersenjata (military)
.org : domain untuk organisasi atau lembaga non profit (Organization).
  • Country-Specific Domains (ccTLDs), yaitu domain yang berkaitan dengan dua huruf ekstensi, dan sering juga disebut second level domain, seperti .id(Indonesia), .au(Australia), .jp(Jepang) dan lain lain. Domain ini dioperasikan dan di daftarkan dimasing negara. Di Indonesia, domain-domain ini berakhiran, .co.id, .ac.id, .go.id, .mil.id, .or.id, dan pada akhir-akhir ini ditambah dengan war.net.id, .mil.id, dan web.id. Penggunaan dari masing-masing akhiran tersebut berbeda tergantung pengguna dan pengunaannya, antara lain:
.co.id : Untuk Badan Usaha yang mempunyai badan hukum sah
.ac.id : Untuk Lembaga Pendidikan
.go.id : Khusus untuk Lembaga Pemerintahan Republik Indonesia
.mil.id : Khusus untuk Lembaga Militer Republik Indonesia
.or.id : Untuk segala macam organisasi yand tidak termasuk dalam kategori "ac.id","co.id","go.id","mil.id" dan lain
.war.net.id : untuk industri warung internet di Indonesia
.sch.id : khusus untuk Lembaga Pendidikan yang menyelenggarakan pendidikan seperti SD, SMP dan atau SMU
.web.id : Ditujukan bagi badan usaha, organisasi ataupun perseorangan yang melakukan kegiatannya di Worl Wide Web.
Nama domain dari tiap-tiap situs di seluruh dunia tidak ada yang sama sehingga tidak ada satupun situs yang akan dijumpai tertukar nama atau tertukar halaman situsnya. Untuk memperoleh nama dilakukan penyewaan domain, biasanya dalam jangka tertentu(tahunan).

Hosting

Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di situs. Besarnya data yang bisa dimasukkan tergantung dari besarnya hosting yang disewa/dipunyai, semakin besar hosting semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam situs. Hosting juga diperoleh dengan menyewa. Besarnya hosting ditentukan ruangan harddisk dengan ukuran MB(Mega Byte) atau GB(Giga Byte).Lama penyewaan hosting rata-rata dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting yang banyak dijumpai baik di Indonesia maupun Luar Negri.

Scripts/Bahasa Program

Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam situs yang pada saat diakses. Jenis scripts sangat menentukan statis, dinamis atau interaktifnya sebuah situs. Semakin banyak ragam scripts yang digunakan maka akan terlihat situs semakin dinamis, dan interaktif serta terlihat bagus. Bagusnya situs dapat terlihat dengan tanggapan pengunjung serta frekwensi kunjungan. Beragam scripts saat ini telah hadir untuk mendukung kualitas situs. Jenis jenis scripts yang banyak dipakai para designer antara lain HTML, ASP, PHP, JSP, Java Scripts, Java applets dsb. Bahasa dasar yang dipakai setiap situs adalah HTML sedangkan ASP dan lainnya merupakan bahasa pendukung yang bertindak sebagai pengatur dinamis, dan interaktifnya situs. Scripts ASP, PHP, JSP atau lainnya bisa dibuat sendiri, bisa juga dibeli dari para penjual scripts yang biasanya berada di luar negri. Harga Scripts rata-rata sangat mahal karena sulitnya membuat, biasanya mencapai puluhan juta. Scripts ini biasanya digunakan untuk membangun portal berita, artikel, forum diskusi, buku tamu, anggota organisasi, email, mailing list dan lain sebagainya yang memerlukan update setiap saat. Khusus Jilbab Online menggunakan bahasa ASP(Active Server Pages).

Design Web

Setelah melakukan penyewaan domain dan hosting serta penguasaan scripts, unsur situs yang paling penting dan utama adalah design. Design web sangat menentukan kualitas dan keindahan situs. Design sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya sebuah web site.

Untuk membuat situs biasanya dapat dilakukan sendiri atau menyewa jasa web designer. Saat ini sangat banyak jasa web designer, terutama di kota-kota besar. Perlu diketahui bahwa kualitas situs sangat ditentukan oleh kualitas designer. Semakin banyak penguasaan web designer tentang beragam program/software pendukung pembuatan situs maka akan dihasilkan situs yang semakin berkualitas, demikian pula sebaliknya. Jasa web designer ini yang umumnya memerlukan biaya yang tertinggi dari seluruh biaya pembangunan situs dan semuanya itu tergantu ng kualitas designer.

Publikasi

Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjung internet. Karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada masyarakat memerlukan apa yang disebut publikasi atau promosi.

Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan pamlet-pamlet, selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas. cara yang biasanya dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah publikasi langsung di internet melalui search engine-search engine(mesin pencari, spt : Yahoo, Google, Search Indonesia, dsb)

Cara publikasi di search engine ada yang gratis dan ada pula yang membayar. Yang gratis biasanya terbatas dan cukup lama untuk bisa masuk dan dikenali di search engine terkenal seperti Yahoo atau Google. Cara efektif publikasi adalah dengan membayar, walaupun harus sedikit mengeluarkan akan tetapi situs cepat masuk ke search engine dan dikenal oleh pengunjung.

Pemeliharaan Web Site atau Situs

Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu sesuai yang diinginkan seperti penambahan informasi, berita, artikel, link, gambar atau lain sebagainya. Tanpa pemeliharaan yang baik situs akan terkesan membosankan atau monoton juga akan segera ditinggal pengunjung.

Pemeliharaan situs dapat dilakukan per periode tertentu seperti tiap hari, tiap minggu atau tiap bulan sekali secara rutin atau secara periodik saja tergantung kebutuhan(tidak rutin). Pemeliharaan rutin biasanya dipakai oleh situs-situs berita, penyedia artikel, organisasi atau lembaga pemerintah. Sedangkan pemeliharaan periodik bisanya untuk situs-situs pribadi, penjualan/e-commerce, dan lain sebagainya.
Cara Mengganti Template Blogger 0

Cara Mengganti Template Blogger

Cara mengganti template blogger, inilah satu hal yang mungkin dipertanyakan oleh blogger pemula, sudah pasti para blogger ingin tampilan blognya lebih keren dan profesional dari pada blog yang tampilannya berantakan, loadingnya berat ataupun tidak ramah sama sekali kepada pengunjung, ada juga yang tampilan blognya disesuaikan dengan kesukaannya contohnya template naruto dan lain-lain.

Kenapa ganti template..? mungkin ini yang terjadi pada anda yaitu bosan dengan yang itu-itu aja, pingin template yg lengkap misalnya saja anda ingin template yang mempunyai menu horizantal, menu breadcrumbs, dll sedangkan anda tidak paham dengan edit HTML, dan ada juga karna templatenya rusak karna kesalahan pemasangan widget,gadget dan kesalahan ketika mengedit HTML.

Template seperti apa yang baik dan cocok untuk blog kita ? yaitu template yang anda pilih menurut pilihan anda sendiri dan yang pas dengan hati anda baik itu melalui saran dari teman blogger yang laen ataupun tidak, karna andalah yang tau karakter blog anda.

Bagaimaina cara mengganti template ? anda bisa googling template seseuai dengan selera anda, yang mempunyai format .XML, dan biasanya template berformat .XML ini dicompress dalam format .ZIP maka kita harus mengekstraknya terlebih dahulu. dengan cara klik kanan seperti gambar dibawah ini.
File template anda sudah siap ? selanjutnya masuklah ke akun blogger anda dan arahkan kursor pada blog yang kan anda ganti templatenya klik gambar kertas kemudian pilih template.
Kemudian pilih cadangkan/pulihkan
Kemudian klik browse dan cari file .XML yang telah anda ekstrak tadi.

Kemudian klik unggah
Jika muncul peringatan widget/gadget, pilih saja pertahankan widget/gadget, agar gadget yang terpasang pada blog anda tidak hilang dan tidak susah susah tuk menambahkannya lagi.
Tips Supaya Blog Ramai Oleh Pengunjung
4

Tips Supaya Blog Ramai Oleh Pengunjung


Apakah blog anda sepi pengunjung ? ataukah blog anda ramai oleh pengunjung ? memiliki blog yang ramai oleh pengunjung merupakan keistimewaan tersendiri bagi pemilik blog, bagaimana dengan blog yang sepi oleh pengunjung ? tentunya menjadi sedikit problema bagi kita ketika blog kita sepi dan tanpa jejak sedikitpun dari pengunjung.

Ada hal yang menarik ketika blog kita ramai oleh pengunjung mungkin kita akan berpendapat bahwa blog kita sangatlah berguna bagi pengunjung, tentulah anda akan berpikir demikian karna alasan utamanya adalah ketika blog kita dikunjungi otomatis pengunjung datang karna ada hal yang menarik atau sesuatu yang dicari ada pada blog kita.

Selain itu ada beberapa hal yang harus kita perhatikan pada blog kita Supaya Blog Lebih Menarik Untuk di Kunjungi, diantaranya :

Design Blog

Pakailah template yang rapi dan ramah bagi para pengunjung, pemakaian template yang tidak sesuai akan mengakibatkan loading yang berat dan membuat pengunjung menunggu, hasilnya blog kita tidak akan lagi dikunjungi, gunakanlah widget/gadget seperlunya saja, hal ini juga mempengaruhi loading blog buanglah widget yang tidak berguna sama sekali bagi pengunjung, pasanglah widget artikel terkait, recent post, popular post dan semacamnya, jangan memasang gambar yang berlebihan, dan buatlah daftar isi dan menu pada blog anda. 

Content

Content atau entri hal inilah yang harus lebih diperhatikan, blog kita dikunjungi karna content atau entri yang menarik pada blog kita, berikut hal-hal yang perlu diperhatikan pada content atau postingan blog anda :

Buatlah entri yang menarik, aktual, uptodate, dan memiliki referensi/sumber yang jelas, ketika anda membuat suatu postingan usahakan benar-benar menarik untuk dibaca dan memiliki ketepatan waktu alias bukan postingan yang jadul, jika memungkinkan berilah referensi/sumber pada postingan anda entah itu dari buku, majalah ataupun alamat blog dimana anda mengutipnya, pakailah tanda baca yang tepat ketika menulis dan usahakan susunan yang rapi dan jelas, gunakanlah font yang terang, ukuran font, spasi dan jarak baris yang tepat dengan kata lain enak ketika dibaca, dan jika memungkinkan pasanglah gambar ilustrasi pada postingan anda.

Pasanglah tombol share social network, yaitu memungkinkan pengunjung blog untuk share artikel kita pada akun social pengunjung, contohnya dengan memanfaatkan widget addthis dan tombol like and send facebook seperti yang ada pada blog ini.

Pasanglah label dan artikel terkait, didalam membuat postingan tentukanlah label/category pada postingan anda, dan juga pasanglah artikel terkait berada dibawah postingan contohnya dengan memanfaatkan widget linkwithin yang disertai thumbnail atau memasang artikel terkait berdasarkan label/category dengan thumnail ataupun tidak.

Dalam membuat postingan pasanglah kotak komentar dibawahnya, jika anda ingin memasang kotak komentar facebook pasanglah kotak komentar Facebook yang berdampingan dengan kotak komentar blog, jangan menggunakan kode verifikasi dan moderasi pada kotak komentar anda, hal ini akan memberi keleluasaan bagi pengunjung untuk mengkritik dan memberi saran pada postingan anda.
Memasang Widget Artikel Terkait Linkwithin Hanya di Halaman Postingan 2

Memasang Widget Artikel Terkait Linkwithin Hanya di Halaman Postingan

Selamat Malam, berawal dari sebuah blogwalking pada rekan-rekan saya sesama blogger, saya menemukan beberapa blog yang pada hompagenya masih terpasang widget linkwithin, maksudnya pada halaman utama dan halaman postingan sama-sama ada, menurut pribadi saya widget artikel terkait atau widget linkwithin lebih baik dipasang pada halaman postingan saja, disamping lebih rapi optimasi loading pada homepage pun lebih ringan.

Tidak salah jika kita meletakkan pada homepage, lumayan juga yang katanya temen-temen tuk menambah nilai traffic blog, tapi menurut saya, pengunjung yang datangnya dari google kebanyakan mampir pada halaman postingan nah kalau kita meletakkannya pada homepage kan nilainya lebih kecil daripada diletakkan pada halaman postingan yang nilainya lebih besar pengaruhnya dari pengunjung.

Bagaimana cara setting widget linkwithin pada halaman postingan saja ?, anda tinggal menambahkan beberapa kode dibawah ini, bagi anda yang ingin memasang widget tersebut silahkan klik widget linkwithin.

langsung aja.
  • Pastinya login dulu ke akun blogger anda
  • Klik rancangan/tata letak >> edit HTML, kemudian centang expand widget.
  • Silahkan anda tekan CTRL+F pada broser anda dan cari Linkwithin. jika anda telah mengubah judulnya silahkan anda cari judul widget tersebut.
  • Mungkin anda akan menemukan kode berikut. ( kemungkinan berbeda, jadi cari yang hampir sama dengan kode di bawah ini )
<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<data:content/>
</b:includable>
</b:widget>
</b:section>
 </div>

  • Tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> tepat  dibawah <b:includable id='main'> dan  tambahkan </b:if> tepat diatas </b:includable> . hasilnya kira-kira seperti ini.
<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>
</b:section>
 </div>

  • Simpan template anda dan lihat hasilnya
Mudah kan? baca juga cara setting widget tampil pada halaman yang kita inginkan. Budayakan blogwalking dan saling berbagi
Memasang Widget Burung Terbang Twitter di Blog 1

Memasang Widget Burung Terbang Twitter di Blog

Widget burung terbang twitter, untuk widget ini rasanya tidak asing lagi untuk para blogger, widget ini berfungsi sebagai tombol folow pada akun twitter kita, setidaknya widget ini bisa meningkatkan follower pada akun twitter kita.
  • Login dulu ke akun blogger anda
  • Klik Rancangan / Tata Letak
  • Klik> Add Gadget
  • Klik > HTML/JavaScript 
  • Kemudian copas kode di bawah ini.
    <!-- floating twitter Bird -->
    <script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJiR6X3f_eo0Dvfon-8cj2hTe7SPhpSt3461zYQDDNS8Wp89K7BoF7pJkcnGTz-UO4OP8aJ_l_V2uoJtHYROOF4o3YouDT4GjIfpcFLwGG0UpMMUf9B6CHAZrhGCnB-o-NhgLaqidnN40/s1600/burung+twitter+terbang.png";
    var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "http://twitter.com/Username";
    var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
    tripleflapInit();
    </script>
    • Simpan dan lihat hasilnya
    Ubahlah kode yang berwarna biru dengan akun twitter sobat,Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan.

    Warna Kuning
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVS7MPqm__xPSjjXcvPSEkwVpziTls3F7yl-xH5cOZv-VJxiXGzu6Or2gZ2cj1DoH5Dpo7rqYxaqeuTpOortnvafx4Uv4ptrBOlznQpY0Mpf-8YPCSPEHuG1MfK4mNhD7Sp192TPOQaxM/s1600/yellow+bird.png
    Warna Hitam
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpyQmlv5G-H1RuGyvstPzUl78mT45IDPeIhK9vsxNET0qoRMGMN7H3GoXzFfBYMLf1bW0iROYPS3ur8fISeDGQ1lHbZ9GoR51Fp-3PQ0VDE-Oler8_X3sfJg_eW7HfHlR2Di1btE9b2g/s1600/black+bird.png
    Warna Biru
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDx8z00VMKn4F8qrGoQo_6-l8EcgPSvgkbDFaAAf55RzUcBoGwBtjCBk0l4TBbvRtUVpTC9CEdvcaycec4EWVqkYZNGfDi5fUvOvMV88K8Jm_qhmfZK9mzhADh3RtSkcaBNGtc-VmIqw/s1600/Blue+bird.png
    Warna Coklat
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjOa70W4Ds14gu1imrWgqV7EA6qumdejl2Yhsx4HlcM4YXT__bimDyZt3tTk5sFW70cHO7V2FHD7CCfSTiOyMYRWQlnwNgW6akj4vGkECu7ZwAKsjJf2nPpw6nE9szQaRbDbd3i0BOJY/s1600/brown+bird.png
    Warna Hijau

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Y5fBNw-xNsCslClYbLYr7ghjtj5Bxr8L2XqJ_Xoh1e_Vjk_kVN4mDFWnp4IiPr5nBDD3wrnkXuIIdl3IBQuMbd2d-ZMsKXxT86Z9RTJSAUaBNimyMGITfCGYrJRAUy-7L0NwhUAuCfk/s1600/Green+bird.png
    Warna Ungu

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKu2AHNFzBoLm8rODfEHIE2_PNaZ1ASu23asxAQApwQ6MqdSNPG1UK2IXTuEvmkOgnspOI2CFMpnnguHAer-3GnR5IH6lTCaAvsDWgYZr49NmXJBPPnI7I3LbClUcMr9pY7HHJzJ5JSNE/s1600/purple+bird.png
    Warna Putih
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF46tFcq2zs3pQ7mu7byysyWdQW7XyYswEdQb63w8NwG6Sp_yg5t_t1VR9G8LdE26TorDdkqS4sW2BZ2HVRhqlxpwvu8Jre3h7Yd30wbokI_VRsZTEp7xuaLlNnNZwrchSXUOYCPqivZI/s1600/white+bird.png
    Warna Merah
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD8KN5vlqYf7JC-A5aSuiCdDKV4-DtW7cEQygM45OSVMyUf7b8ay8j73ouIsOQoxtSIpNUHSQQiLkGY0SF051zmJsSG9oyEponCidnKhr4N-Wv8icxRc84tu9t665_UPkrHCDWgVSf4wE/s1600/red+bird.png
    Cara Memasang Tombol Share Social Network 0

    Cara Memasang Tombol Share Social Network

    Cara Memasang Tombol Share Social Network  yaitu untuk memudahkan bagi pengunjung blog kita jika mereka ingin menyebar luaskan artikel yang sudah mereka baca ke orang lain entah itu ke facebook, twitter ataupun jejaring sosial lainnya melalui akun pengunjung yang men-share nya. Contoh bila ada seseorang yang men-share artikel kita terus orang itu menggunakan akun facebook maka akan secara otomatis link artikel kita terkirim ke dinding orang tersebut dan terbaca pula oleh teman-teman facebook si orang tersebut. Bermanfaatkah untuk kita pemilik blog.

    Jadi, dengan memasang tombol share ini traffik blog kita akan meningkat melalui pengunjung yang share artikel kita pada akun sosial network mereka, apalagi artikel kita uptodate dan menarik untuk dibaca dan pengunjung mempunyai jejaring pertemanan yang luas.

    Membuat Tombol Share

    • visit situs addthis.com
    • Pilih tombol share yang akan anda pakai lalu klik Get Addthis
    • Setelah klik Get Addthis isilah data-data pendaftaran. Data-data untuk pendaftaran ini ada beberapa pilihan seperti pendaftaran melalui akun facebook, akun twitter, open id dan sobat juga dapat menggunakan email ataupun dengan akun google sobat. Karena kita akan  memasangnya di blog maka pilihlah dengan akun google saja. Yaitu dengan mengklik icon Google (berhubung kita akan menggunakan akun google maka untuk isian email, password dan Retype password diabaikan saja)
    Lihat gambar di bawah ini !

    • Setelah mengklik Icon Google dan jika browser sobat dalam keadaan aktif dengan akun Blogger maka akan ada konfirmasi dari Addthis.com mengenai privasi maka kliklah Izinkan.
    • Setelah klik Izinkan maka sobat akan dibawa ke halaman seperti gambar di bawah ini yang terbuka di tab baru browser, kliklah Register
    • Setelah klik Register akan ada halaman seperti gambar di bawah ini yang terbuka di tab baru lagi, kliklah Continue
    • Centang atau tandai icon Blogger kemudian kliklah Install Blogger Widget, lihat gambar di bawah !
    • Kemudian klik lagi Install Blogger Widget
    • Ini adalah tahap paling terakhir untuk mendapatkan kode dari addthis yaitu jika sesudah mengklik Install Blogger Widget maka sobat jangan mengklik Menambah Widget kalau kita tujuannya hanya untuk mendapatkan kodenya saja karena dengan mengklik Menambah Widget maka secara otomatis kode akan langsung masuk ke template blog kita. Kita akan memasang kode tersebut secara manual maka kliklah Edit Konten dan akan ada kode javascrift di bawahnya maka yang musti sobat lakukan adalah mengcopy kode tersebut dan simpanlah ke Notepad untuk catatan sobat.
    Agar lebih jelas lihatlah gambar di bawah ini !

    Meletakkan Tombol Share Addthis diatas/dibawah Postingan

    • Login ke Blogger >>  Klik Template  >> Klik Edit Html
    • Sebelum ke tahap yang lebih jauh yaitu memasang kode tersebut di template blog, sobat silahkan download atau membackup template terlebih dahulu bila takut ada kegagalan
    • Centang Expand Widget Template
    • Carilah kode <data:post.body/>  (Tekan Ctrl+F pada keyboard untuk memudahkan pencarian)
    • Tempel kode dari Addthis tersebut di atas kode <data:post.body/>  ( tombol share diatas postingan ), atau dibawah  <data:post.body/> ( tombol share dibawah postingan )
    • Jangan lupa untuk menyimpan hasil kerjaan sobat dengan mengklik tombol Simpan
    • Selesai
    Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog 6

    Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

    Cara Membuat Komentar Facebook Dan Blog Berdampingan, pada postingan kali ini saya share Mengenai kotak komentar blog dan facebook. kotak komentar ini berdampingan terdiri active tab dan inactive tab, active tab pada bagian kotak komentar facebook dan inactive tab pada kotak komentar blog tidak terbuka dua duannya, untuk demonya bisa lihat kotak komentar paling bawah postingan ini. dan inilah screenshotnya.
    Sebelum mencobanya anda harus setting dulu kotak komentar blog agar tampil dibawah postingan. klik setelan/setting >> komentar kemudian pilih tampilkan 
    dan pilih komentar tampil dibawah entri.
    sudah berhasil ? kembali ke dashbord dan klik rancangan dan kemudian klik edit HTML, backup dulu template anda untuk jaga-jaga, centang expand widget dan cari kode ]]></b:skin>, untuk memudahkan pencarian tekan CTRL F dan ketikkan kode ]]></b:skin>, uda ketemu ? copas kode dibawah ini diatas kode ]]></b:skin>
    .comments-page { }
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { color:#FFF;text-shadow: 0 0 6px darkgrey;background-image: url(http://i1106.photobucket.com/albums/h367/Nando_DeltaCyber/star.gif); }
    .inactive-select-tab {}
    Selanjutnya cari kode </head> seperti cara diatas, kemudian copas kode dibawah ini diatas kode </head>
     <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <meta content='NAMA BLOG KAMU' property='og:site_name'/>
    <meta content='166134373479622' property='fb:app_id'/>
    <meta content='ID FB ANDA' property='fb:admins'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.comments-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
    </script>
    Sesuaikan kode yang berwarna biru diatas tuliskan nama web anda ( contoh : NXNX MJ's Blog ) dan ID FB anda ( contoh : fauzan.zifa ).
    Lanjut yang terakhir cari kode <div class='comments' id='comments'> dan copas kode dibawah ini tepat di bawah kode <div class='comments' id='comments'>, jika kode <div class='comments' id='comments'> ada dua letakkan pada kode <div class='comments' id='comments'> yang ke dua
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://i997.photobucket.com/albums/af96/fauzan_zifa/1.png'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='580'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
    Kode yang berwarna diatas, 2 = jumlah komentar FB yang akan ditampilkan, 580 = ukuran dari kotak komentar, sesuaikan dengan blog anda. dan simpan template anda.
    semoga berhasil..... jangan lupa komentarnya ya...
    Total Comment dan Total Post Widget 0

    Total Comment dan Total Post Widget

    Widget Total Comment dan Total Post di Blog yaitu semacam statistik Jumlah Komentar dan Jumlah Postingan yang ada di blog kita. Dengan memasang widget ini maka akan dapat terlihat sudah berapa total jumlah komentar pada blog anda, screenshoot widget Total Comment dan Total Post silahkan anda lihat gambar di bawah ini :
    Untuk yang mau memasang widget Total Comment dan Total Post silahkan lihat caranya di bawah ini :
    • Login pada akun Blogger anda
    • Klik Tata Letak
    • Lalu klik Tambah Widget
    • Pilih HTML/JavaScript
    • Copas kode di bawah ini
    <script src="http://fauzan-zifa.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfPosts(json) {document.write('Total Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://fauzan-zifa.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script><script src="http://fauzan-zifa.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfComments(json) {document.write('Total Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://fauzan-zifa.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
    Tulisan yang yang berwarna biru silahkan  di ganti dengan alamat blog anda.
    • Selanjutnya save dan lihat hasilnya
    Semoga bermanfaat

    sumber
    Membuat Gambar Postingan Berputar dan Zoom di blog 1

    Membuat Gambar Postingan Berputar dan Zoom di blog

    Space Iklan NXNX MJ's blog
    Sebelumnya aq share cara membuat gambar di postingan berputar 360 derajat, dan untuk kali ini aq share membuat gambar dipostingan blog berputar dan membesar ketika kursor diarahkan, keren kan ? sedikit tambahan dari postinganku yang sebelumnya. bagaimana caranya ? silahkan ikuti caranya dibawah ini.
    • Login dulu ke akun blogger anda. 
    • Kemudian dari Dasbor, cari Template --> Edit HTML. 
    • Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>. 
    • Kemudian copas kode di bawah tepat di ATAS Code ]]></b:skin>.
    .post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
    • Terakhir tinggal di save dan lihat hasilnya.
    Gimana hasilnya? Silahkan tinggalkan komentar dibawah ini.

    atau anda bisa meletakkannya pada kode a img, cari kode a img pada edit HTML, kode a img pada umumnya seperti kode berikut.
    a img{border-width:0}
    karna sebagian template berbeda, carilah kode yang mirip dengan kode diatas kemudian hapus kode tersebut dan gantikan dengan kode dibawah ini.
    a img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
    Cara Setting Intuit  Untuk Blogger 0

    Cara Setting Intuit Untuk Blogger

    Setting Intuit

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzjK-p4OWsjAq6MkggkwbjHPIHx4qQR4EbQOn7BfJK7ydzjWDFNQNY-D2d5upDPIYudRhi_-T5PW31sgJyqBvq9OjWvkBTV6MnE2Jt4ZkRoXIaLRseQwxyCFKH1qZiuwl40I_hEGOSGsW/s1600/Nama+Domain.jpg
    Cara setting Domain di Intuit untuk Blogger:
    • Login ke Intuit dengan User ID dan Password Anda di sini
    • Setelah login klik menu Domain
    • Klik Advance DNS Setting
    Cara Setting Domain di Intuit untuk Blogger
      • Pada Form A Records Tambahkan kode di bawah ini
      216.239.32.21
      216.239.34.21
      216.239.36.21
      216.239.38.21
      • Pada form CNames tambahkan ghs.google.com, hasilnya akan seperti gambar di bawah ini
      Cara Setting Domain di Intuit untuk Blogger
      • Klik Submit 

      Setting Blogger

      Setting di Intuit sudah selesai. Selanjutnya setting di pengaturan Blog Anda.
      • Login ke Blogger
      • Klik Blog Anda
      • Klik Setelan => Tambahkan domain khusus
      Cara Setting Domain di Intuit untuk Blogger
      • Klik Alihkan ke setelan lanjutan
      Cara Setting Domain di Intuit untuk Blogger
      • Isi Nama domain Anda lalu Simpan
      Cara Setting Domain di Intuit untuk Blogger
      • Setelah itu klik Edit
      Cara Setting Domain di Intuit untuk Blogger
      • Centang Alihkan domainanda.com ke www.domainanda.com dan Simpan
      Cara Setting Domain di Intuit untuk Blogger
      • Selesai.
      Nah, Blog anda sekarang sudah berubah menjadi top level domain. Semoga tutorial setting domain di intuit untuk blogger ini bermanfaat.

      sumber
      Cara Mendapatkan Domain Gratis dari Intuit 3

      Cara Mendapatkan Domain Gratis dari Intuit

      Berhubung salah satu blog saya udah saya ubah ke domain .com yaitu www.fazansyl.com maka tidak ada salahnya tuk berbagi cara ubah domain ini, anda bukan hanya bisa mengubah domain anda ke .com banyak pilihan yaitu .net .name .info dan yang lainnya sesuai keinginan anda.

      Berikut caranya yang saya rasa cukup mudah.
      • Daftar untuk mendapatkan akun dari Intuit. (Daftar Disini)
      • Kemudian isi semua data yang diminta.
      • Lalu klik “Choose a domain (www.yourname.com) for your website”.
      • Masukkan nama domain yang kalian inginkan.
      • Jika Domain yang kalian inginkan tersedia klik "Get Domain".
      • Selanjutnya isi lagi semua datanya seperti Nama, Email, Nomor HP, dll.
      • Setelah itu kalian akan diarahkan ke halaman Info kontak, Jangan centang Domain Privasi (Nanti Akun Kalian Bisa Disuspend) cukup Centang Saya Setuju (I Agree) lalu klik Submit.
      • Kemudian akan muncul halaman pop out yang tujuannya untuk meminta Informasi dan alamat penagihan domain kalian (Domain yang kalian minta gratis, tapi untuk melindungi terhadap penipuan mereka membutuhkan informasi penagihan domain kalian).
      • Pada bagian credit card isi seperti dibawah :
      Nama card = Isi Terserah
      Nomer card = 4067424205414109
      Exp date = 02/13
      Security code card= 145
      Domain yang kalian inginkan akan diproses dalam waktu kurang dari 24 Jam, jadi silakan tunggu hingga domain kalian aktif, tapi biasanya hanya membutuhkan waktu 3-5 Jam saja. jika sudah aktif baca cara setting intuit untuk blogger.

      NB:

      Order hanya boleh 1 domain dalam 1 akun, nanti domain kalian bisa mati semua.

      Tips: Jika akun kalian di suspend/dinonaktifkan ada sedikit tips supaya akun kalian tidak di suspend/dinonaktifkan. Daftar di Intuit, biarkan saja itu akun jangan di otak-atik & jangan dimasukkan CC selama 1 atau 2 hari, jika sudah dilakukan cara tersebut, baru deh kalian masukkan CC dan order domain, mudah-mudahan tidak di suspend/dinonaktifkan akunnya. Selamat mencoba!  

      Sumber
      Membuat  Menu Navigasi Breadcrumbs 4

      Membuat Menu Navigasi Breadcrumbs

      Menu navigasi breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. menu ini biasanya kita lihat pada wordpress yang urutannya mulai dari Home >> Category >> Sub Category, nah bagaimana dengan Blogger ? kita bisa menggunakannya hanya dengan edit template yang saya rasa ini cukup mudah, menu breadcrumbs ini di blogger urutannya Home >> Label/Category >> Judul Postingan ( pada halaman posting ) dan akan tampil disemua halaman kecuali halaman homepage, dan katanya nih ini juga berguna buat optimasi SEO yaitu membantu memberi kepadatan keyword dan pemetaan pada search engine terutama mbah google.
      Bagaimana caranya ..?
      Login dulu ke akun blogger anda, klik pada template dan edit HTML  centang expand widget kemudian carilah code ]]></b:skin> untuk memudahkan pencarian silahkan tekan CTRL F dulu dan masukkan code yang anda cari, udah ketemu kan ? silahkan anda copas kode dibawah ini tepat diatas kode ]]></b:skin>.
      .breadcrumbs{
      padding:5px 0px 5px 0;
      margin:0;font-size:97%;
      line-height:1.5em;
      border-bottom:5px double #A4CBDF}
      Kode yang berwarna merupakan garis bawah silahkan ubah warna sesuai keinginan anda. Kemudian cari kode <b:includable id='main' var='top'> kemudian copas kode ini dibawah kode <b:includable id='main' var='top'>
      <b:include data='posts' name='breadcrumb'/>
      Tetap di kode  <b:includable id='main' var='top'> dan copas kode dibawah ini tepat diatasnya
      <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
      <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
      <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
      <b:loop values='data:post.labels' var='label'>
       &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
      </b:loop>
       &#187; <span><data:post.title/></span>
      </div>
      <b:else/>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
      </b:if>
      </b:loop>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <!-- breadcrumb for the label archive page and search pages.. -->
      <div class='breadcrumbs'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
      </div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
      <b:else/>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
      </b:if>
      </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:includable>
      Simpan template anda dan monggo dilihat hasilnya. dan jika anda anda berhasil tinggal nunggu neh google indeks blog kita, so tampilannya pada search engine akan kayak gini ( silahkan search keyword pengertian pengajaran di mbah google ) breadcrumbs tampil di pencarian google
      Breadcrumbs terindeks google
      dan ini
      Menu breadcrumbs terindeks google
      dan yang ini belum terindeks oleh google
      Breadcrumbs tidak terindeks google
      Membuat Animasi Online
      1

      Membuat Animasi Online

      Kali ini q mu share tentang situs yang membuat animasi online, banyak hal yang bisa kita manfaatkan dari beberapa situs dibawah ini diantaranya  ketika kita ingin membuat banner tukar link atau iklan sederhana.

      Ini dia 5 situs pembuat animasi GIF keren yang patut anda coba!

      1. LooGix.com

      Layanan ini memungkinkan anda membuat animasi mulai dari 2 sampai 10 frame/slide. Anda bisa mengatur ukuran, kecepatan dan preset animasi sesuai yang anda inginkan. Selain itu ada juga pilihan untuk membuat efek khusus seperti : blur, zoom, shadow, negative, black and white, radiar blur, dan banyak lagi.

      2. MakeAGif.com

      Layanan ini lebih sederhana lagi. Buat anda yang ini cepat dan instan, layanan ini bisa anda pakai untuk membuat gambar animasi. Fitur lainnya, anda bisa membagikan gambar animasi yang anda buat langsung ke Facebook, Tumblr atau pun ke Twitter.

      3. Gickr.com

      Seperti layanan pembuat animasi lainnya, layanan dari Gickr ini juga mendukung maksimal 10 frame untuk anda jadikan animasi. Tersedia juga settingan untuk mengatur ukuran animasi, kecepatan dan efek sesuai yang anda inginkan. Coba saja!

      4. Picasion.com

      Layanan ini masih mirip dengan layanan pembuat animasi di atas. Tapi tentu saja dengna fitur artarik dvanced yang berbeda. Ingin tahu? coba saja dulu…

      5. GifNinja.com

      Layanan ini memungkinkan anda untuk mengupload foto banyak sekaligus. Selain itu, anda juga bisa menyisipkan video kedalam animasi anda, asalkan file videonya tidak lebih dari 20MB. Keren bukan?
      Tertarik untuk mencobanya? Silakan saja!
      Semoga bermanfaat…. :)

      sumber
      Cara Membuat Horizontal Menu Drop Down Dengan Kotak Pencarian 3

      Cara Membuat Horizontal Menu Drop Down Dengan Kotak Pencarian

      Kali ini saya akan membahas bagaimana cara membuat menu horizontal drop down ditambah dengan kotak pencarian, sebelumnya saya pernah membahas cara membuat menu dengan kotak pencarian, nah sekarang lebih dimodifikasi lagi. Penasaran simak baik-baik cara membuatnya.
      • Login ke blog kamu.
      • Pilih Rancangan > Pilih EDIT HTML > Cari kode ]]></b:skin> 
      • Setelah ketemu, letakan kode di bawah ini tepat di atas kode ]]></b:skin>
      #imenu {
      background: #5e5e5e; /* Old browsers */
      background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
      background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      color: #fff;
      border: none;
      text-decoration: none;
      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
      overflow: visible;
      -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
      -webkit-appearance: none;
      margin-bottom: 15px;
      margin-left:0px;
      }
      #halfnav{float:right;}
      #halfnav ul, #halfnav ul li{display:inline;list-style:none;padding:0;margin:0}
      #halfnav ul li a{
      display:inline-block;
      margin: 5px;
      font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
      font-size:16px;
      padding: 5px;
      color:#fff;
      line-height:20px;
      text-decoration:none;
      background: #5e5e5e; /* Old browsers */
      background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
      background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
      -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
      border: 1px solid #666;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      }
      #halfnav ul li a:hover{border: 1px solid #222;box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
      #halfnav .current-menu-item a{border: 1px solid #000;}
      #nav{position:relative;z-index:2000}
      #nav .parent > a, #nav .parent > a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat}
      #nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat}
      #nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
      #nav ul li a{display:inline-block;font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#777 1px solid}
      #nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
      #nav .current-menu-item a{color:#ccc;}
      #nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333}
      #nav .menu > li:first-child a:hover{border-radius:0}
      #nav .menu .sub-menu li a:hover{border-radius:0}
      #nav ul li{position:relative}
      #nav li ul{display:none;position:absolute;top:27px;left:7px}
      #nav li ul a{background:#555}
      #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px}
      #nav ul li:hover ul{display:inline-block}
      #nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
      #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
      #nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#777 1px solid;margin:-1px 0 0 -11px}
      #nav ul li:hover ul li a{width:150px;padding:0 14px}
      #nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888}
      #nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa}
      #nav .children {z-index: 4000;}
      #home {float: left;border-right:#777 1px solid;margin-right:4px;margin-left:15px; height: 36px;}
      #home a:hover{opacity: .5}
      #nohome {float: left; margin-right:4px;margin-left:5px; height: 35px;}
      .searchform {
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border-radius: 15px;
      width: 160px;
      padding: 0;
      margin: 7px 5px 5px 10px;
      height: 20px;
      box-shadow:inset 0 0 1px #222;
      background: #fff;
      float: right;
      margin-right: 20px;
      }
      .center .searchform {float:none;}
      #morefoot .searchform {float:left;}
      .searchform .s{
      margin:0;
      border: none;
      margin: 3px 2px 2px 20px;
      font-size: 12px;
      height: 14px;
      width: 130px;
      color: #333;
      overflow: hidden;
      }
      #magnify {float:left;position:absolute;margin: 2px 0 0 5px;}
      #magnify {margin: 0 0 0 5px}
      .searchform .s:focus {outline:0; border:none;}
      .searchform .searchsubmit {display:none;}
      .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
      /* To fix the grid into a certain size, set max-width to width */
      .row .row { min-width: 0; }
      .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
      .column:first-child, .columns:first-child { margin-left: 0; }
      [class*="column"] + [class*="column"]:last-child { float: right; }
      .row .three { width: 21.679%; }
      .row .nine { width: 73.9%; }
      .row .ten { width: 82.6%; }
      .row .twelve { width: 100%; } 
      • Lihat kode yang berwarna merah sesuaikan lebarnya dengan blog anda.
      • Setelah selesai simpan Template. Kembali lagi ke menu awal pilih Add Gadget > HTML JavaScript. Copy kode di bawah ini.
      <div class="container">
      <div class="row">
      <div class="twelve columns" id="imenu">
      <div id="nav" class="nine columns">
      <div id="home"><a href="http://marvblues.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvtyInnwb369sc4It0bSunBseqQpS7lDYcsHfJVvPMImyIoWWz2_3y0djR-axMh-6f00YkQjBXvT0VTHpM1QuJLZVRjjQ6TlonzLiFt_mer288YLiEwZrAkbANVkHiBCdcqPjUkqNGoe3/s320/home.png" alt="home"></a></div>
      <ul id="nav_menu">
      <li><a href="#">Tutorials</a>
      <ul>
      <li><a href="#">HTML / CSS</a></li>
      <li><a href="#">JS / jQuery</a>
      <ul>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">JS</a></li>
      </ul>
      </li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">XSLT</a></li>
      <li><a href="#">Ajax</a></li>
      </ul>
      </li>
      <li><a href="#">Resources</a>
      <ul>
      <li><a href="#">By category</a>
      <ul>
      <li><a href="#">PHP</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">XSLT</a></li>
      <li><a href="#">Ajax</a></li>
      </ul>
      </li>
      <li><a href="#">By tag name</a>
      <ul>
      <li><a href="#">captcha</a></li>
      <li><a href="#">gallery</a></li>
      <li><a href="#">animation</a></li>
      </ul>
      </li>
      </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="http://www.allbloggingtips.com">Go Back To The Tutorial</a></li>
      </ul> </div>
      <div class="three columns">
      <form method="get" class="searchform" action="http://marvblues.com/">
      <div id="magnify"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREbcBxefnJrfWGnpaLUXKLqmYc9vstkS5rlnb350amV2iN5gCdHQXA2U0x1rMa0iPY2DQMpYLRmtHRdDiKe_njlIRMhk040eroAo6jk55vnRTu12iEZHyxZ5qvLSGi-N55c4HNgXb-kDP/s320/magnify.png" alt="magnify"></div>
      <div><input name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text"></div>
      <div><input class="searchsubmit" value="" type="submit"></div>
      </form> </div>
      </div>
      </div>
      </div>
      Silahkan ganti tanda # Dengan URL yang dituju

      sumber
      Membuat Menu Horizontal Drop Down Dengan jQuery 1

      Membuat Menu Horizontal Drop Down Dengan jQuery

      Cara Membuat Menu Horizontal Drop Down Dengan jQuery - Kali ini saya akan membahas tentang dunia Blogger, yaitu Cara Membuat Menu Horizontal Drop Down Dengan jQuery dalam posting sebelumnya saya sudah sering membahas bagaimana cara membuat menu horizontal drop down, tapi kali ini disini saya memakai jQuery untuk menciptakan Animasi pada Drop Down, saat di klik tanda panah yang ada pada menu nya maka menu Drop Down nya akan terbuka. Penasaran bagaimana Cara membuat nya silahkan ikuti langkah-langkah di bawah ini.
      • Log in ke Blog kamu.
      • Pilih Rancangan,
      • Pilih Edit HTML.
      • Cari kode </head> setelah ketemu letakan kode di bawah ini tepat di atas kode </head>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
      <script type='text/javascript'>
      $(document).ready(function(){
      $(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
      $(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...
      //Following events are applied to the subnav itself (moving subnav up and down)
      $(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click
      $(this).parent().hover(function() {
      }, function(){
      $(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
      });
      //Following events are applied to the trigger (Hover events for the trigger)
      }).hover(function() {
      $(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
      }, function(){ //On Hover Out
      $(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
      });
      });
      </script>
      <style type='text/css'>
      ul.topnav {
      list-style: none;
      padding: 0 20px;
      margin: 0;
      float: left;
      width: 100%;
      background: #222;
      font-size: 1.2em;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURCMLESltFBaJpAWKkiNL2tyoTA407AEEv0bQrwgAkIF2Yjd37HuC0DKua98u0DtH7QKSRoeokILUlrkK00ihXGNLS-mylcs5wSjhhpgO3Ab0O8mAI9kl0Iboo39-j9BeOz7UVrtgyFy9/) repeat-x;
      }
      ul.topnav li {
      float: left;
      margin: 0;
      padding: 0 15px 0 0;
      position: relative; /*--Declare X and Y axis base--*/
      }
      ul.topnav li a{
      padding: 10px 5px;
      color: #fff;
      display: block;
      text-decoration: none;
      float: left;
      }
      ul.topnav li a:hover{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpo4uBcu1BNUlupeVivmTPDepRfgvcFVbzX2rvigpkTrj7hz8qjMTjex163OIsQRBkaflBUYAvy-DW8PWJ77PsagHC3jIapegtoSor3NGLRwsrR6tXJmUQx-sDE3JWOn17CCFpGULCDMu/) no-repeat center top;
      }
      ul.topnav li span { /*--Drop down trigger styles--*/
      width: 17px;
      height: 35px;
      float: left;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip2wdu7uTWfjYbGmHFeYddmVGxuliESyMR7aR6kHLt5-ZCIBQK3x7URMrWBcOqVcSraMohSIpxg6XvI_voeAQTPTWqaae2GMVlEvX41ilmYJHTuVACcbHnOiEg2-0ngDq31CnIl-9MdKpn/) no-repeat center top;
      }
      ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
      ul.topnav li ul.subnav {
      list-style: none;
      position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
      left: 0; top: 35px;
      background: #333;
      margin: 0; padding: 0;
      display: none;
      float: left;
      width: 170px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      border: 1px solid #111;
      }
      ul.topnav li ul.subnav li{
      margin: 0; padding: 0;
      border-top: 1px solid #252525; /*--Create bevel effect--*/
      border-bottom: 1px solid #444; /*--Create bevel effect--*/
      clear: both;
      width: 170px;
      }
      html ul.topnav li ul.subnav li a {
      float: left;
      width: 145px;
      background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXQQzcnMxcJLP8xm0n4UBu06CLHn2LrVA08cp4XvurjAqBAPwbO1pYF9887pAkxmYAPaHTYcrLgAhMw9IGSQ41iaPn1fJ0772DEEeia5veT7g_Zi2A73zan1gooLhyQMF_LDDE87Dl_9u/) no-repeat 10px center;
      padding-left: 20px;
      }
      html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
      background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXQQzcnMxcJLP8xm0n4UBu06CLHn2LrVA08cp4XvurjAqBAPwbO1pYF9887pAkxmYAPaHTYcrLgAhMw9IGSQ41iaPn1fJ0772DEEeia5veT7g_Zi2A73zan1gooLhyQMF_LDDE87Dl_9u/) no-repeat 10px center;
      }
      #header img {
      margin: 20px 0 10px;
      }
      </style>
      • Ganti kode yang berwarna merah, sesuai kan lebar nya bisa kamu ubah dari width:100%; menjadi width:980px; dan sebagainya sesuaikan saja lebar nya dengan blog anda. 
      • Selanjutnya simpan template. 
      • Kembali kemenu awal Rancangan pilih Add Gadget > Pilih HTML/Java Script, dan copy kode di bawah ini dan letakan gadget tersebut tepat di bawah header.
       <ul class="topnav">
      <li><a href="#">Home</a></li>
      <li>
      <a href="#">Tutorials</a>
      <ul class="subnav">
      <li><a href="#">HTML Tutorials</a></li>
      <li><a href="#">CSS Tutorials</a></li>
      <li><a href="#">PHP Tutorials</a></li>
      <li><a href="#">SQL Tutorials</a></li>
      <li><a href="#">jQuery Tutorials</a></li>
      </ul>
      </li>
      <li>
      <a href="#">Templates</a>
      <ul class="subnav">
      <li><a href="#">1 Column</a></li>
      <li><a href="#">2 Column</a></li>
      <li><a href="#">3 Column</a></li>
      <li><a href="#">4 Column</a></li>
      <li><a href="#">Premium</a></li>
      <li><a href="#">Buy Now</a></li>
      </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Subscribe</a></li>
      <li><a href="#">Contact Us</a></li>
      </ul>
      Ganti tanda # dengan URL yang dituju, simpan dan lihat hasilnya.

      sumber