Widget Social Network Metro Style

Kali ini saya akan  membagikan sebuah social share network  atau tombol share ke beberapa social Network terkenal seperti facebook,twitter,pinterest, google+, linkedin ,Youtube dan bahkan feeds burner. Jika biasanya kita hanya menjumpai tombol social media yang hanya memiliki 4 tombol maka widget ini bisa memberikan kita 7 situs social media sekaligus.


Social network button ini sangat tepat jika anda gunakan pada template yang juga menggunakan style/tema Metro seperti Metro UI yang ada di btemplates.com . Sebenarnya sudah banyak sekali social media metro style ini namun sebagian besar hanya berisikan dengan facebook,twitter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang Anti main stream

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak
• Step 3  Pilih tambahkan widget lalu HTML/Javascript
• Step 4  Copy kode berikut lalu pastekan di dalam kolom  HTML/Javascript tadi

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="BloggerSpiceMS">
<br />
<li><a class="BSfb" href="http://anti-fool.blogspot.com//" rel="nofollow"></a></li>
<li><a class="BStw" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSgp" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSpi" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSin" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSfd" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
</div>
<style>
.BloggerSpiceMS{width:285px}
.BloggerSpiceMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.BloggerSpiceMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.BloggerSpiceMS .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnCJe32iog-yJBvus_YHhsiSLQ1AURHj6-5rQ_h5o77XV3PoJ3s9035wO6Wp1H3kv318EdD_TjYu-y0q3hO7escttY3B3lu-aX5xaWC_PPrIKSlqyfARH8ss1Ln5nNYgnTkr0I-EJBuI/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.BloggerSpiceMS .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDiRMTidATTQEPa9hGU5NBW7Wxzrpp5KvPlkq6KXcDf2lFA-RLligx2pgb-eRF5uUo9LtlWmZcrX5PGIX_gJI34aO8217OZMidDRrSmk3kTZp62JNdX09KLG8_wcGM5uoAN7G1RSarz8/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.BloggerSpiceMS .BSgp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wROrsIEZT_kj8X3zlBdOXql0J6uZ7lzsa2bJ_LB-O9kZIPTf8fymPbeoYMD0P97NTHaM0I8wap7M2zS1elwxFN_6a3m45INj1dOad0JsUpsRq_xbTr2netzoGqzXJRuht4crQQCMUcQ/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELuGF2Ig9l41KQ-IgZOEORvrADyad4NrmvdboT5zByOwvoiN4649slPbukSSdf55D12A955uu2BFuYclroNVEQBr3mFUEr8ImNskSwjksE2uoSEEqEP9oN968o_eAK_6K-20K8NmqDhc/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.BloggerSpiceMS .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy13R8M6mesWW-0ag86_MPtCtPvxb5my6A42RWfHHMhYmHJS1qXC0QLodMjt9Nbvv5PTxdyIPeytVIGw3Ik-xAwgF0DAsdUcLL-rgH9v-i_PXinZI7YSB4nEjXxs-qtDt7njXG7kg2y9s/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.BloggerSpiceMS .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxRfRTcYcIYjZP7qQHATEUQspT4uxmZohjSU1UGvOeOju92si8Tn8agE8Z7iBEDlgOL0SiHVHmOjTXPzAqwktGt7Q-NxA8DbwQM4r9eY0V0J4S8Shx0gwQXlbhVCvAQ-vqPgYnCZeFys/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.BloggerSpiceMS .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEJh65D6xlU1EN3ZY6dK_u9DN5KV2uGbBS5e5vqBoAfvM6AIE7PZsd3uCHhl8n8ZcNl-II5ltCWD1nfeEq5hVFr9AoIRc4SXBMYQ8e8a4R4HzV5hM6622je2lUOhIRuXnu2BvjhM48NY/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.BloggerSpiceMS li:hover .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIqiVd5l6gPDSObN-b6PU-LgXeOsRV5ARENW1GewS_V4OBGICF8xZyGmbcNyiiuVfpiwCQ1ec3vfHtQvGyPX_VbaQJB7RXPwi3f_3dZr7OdcaL0YxRWpFVEuWcXuyzbxYpCrAyva-Kp4/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfPVAp0Oz5TsCaD7ePFvRpg_i4nJlRtikIqWhma4vjaiJZ-BrwWl4uWGkSWeB6qXmzkoVp_2cx7M-lxACjLUwjE2wiBidsZagQmew2wM7EsAZ61C7yy3O-GSBbzjd_1oNAasqT0gRnzQ/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfSvwHAsBpFJ8XdsHdAOR8r9sntNSzYKBD7aYB6LUDTkf5fN5AbFFRxKK3tOJ7FGgrTPXzJ1RhV1E_ZNnS5aIJ6wZj4h3bJ4PejPCp-uxh9El83wwyq7a6xduoPipyKxaxWUub7162tU/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxMAsmfPMUwPahkcj_TZdi2vX08ZHsE0P7Pk_MQ19Hni81byFP-1OHTHZVmp5PwtnMpURtJTXF9Vkp0DSz1xGHrFbuK43i9auynEvHLTK8aLi3X9F3ICZxsVaJvCtPkKk2AfebsOWiaA/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHe9uq7pMmAhWUrXDB9WNNSI7Wr6YjH_yROQkcVG6v7VoAJ-45LJXYCg8_jKobbuEy0AfnyHxBGjYAYRbGbdls1gY9SpjHXfSYX283AA5yLkuzsAQGHWq20zf8y7SKNrBrkoQMRVujCA/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWcT3Y1Nd85wdsHgKyxwAmEOKb_sASQYO7A_rHbIS7E6mpzwzMLQEEtinUPHUSSIzXsE1fqecXrbUztIBTuTtxZkVSbsXao4h_XAzY4dEENCrX5vCZjrAzcVCMGzVozvbay-9hEH5_Gc/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_pggPPrn0lwvF9fYiV-bACRkQwhzsXIcEwp8WwsgR9h7XpsQOYQHn3qcVoPHAkCVG0J3_vG5aPx6YNYGuRA9Ilp43-rC2l2Wp_dDHGMQdrJjIr7mHLrz-2uY_7xA8NErQ8hIgBQmJDI/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

• Step 5  Ganti yang tulisan berwarna MERAH dengan alamat situs anda.
• Step 6 Simpan lalu cek bog anda untuk melihat hasilnya.

>

MENGELOLA ISI HALAMAN WEB

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan program teks editor, mulai dari Notepad hingga MS WORD. Bila anda belum tahu caranya, klik Start > Programs > Accessories lalu Notepad. 

Ketreangan : 

a) <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML 

b) <head> </head> : mendefinisikan head dalam sebuah file HTML. 

c) <tittle> </tittle> : mendefinisikan judul yang hendak ditampilkan pada browser. 

d) <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web

. 

PENGENALAN KODE HTML

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut : 

<html>

<head> 

<tittle> Belajar HTML </tittle> 

</head>

<body>

Apa kabar teman-teman? 

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html 

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox. 

MEMBUAT WARNA BACGROUND 

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut :

<html>

<head>

<tittle> Belajar Membuat Warna Bacground </tittle>

</head>

<body>

<!..Latar belakang warna biru..>

<body bgcolor="blue">

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox.

MENGATUR WARAN TEKS 

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut :

<html>

<head>

<tittle> Belajar Mengatur warna Teks </tittle>

</head>

<body>

<!-warna teks#ff0022..>

<body text="#ff0022">

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox.

*Untuk kode warna klik DISINI

MENGATUR PARAGRAF 

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut :

<html>

<head>

<tittle> Belajar Mengatur paragraf </tittle>

</head>

<body>

<p> Ini adalah paragraf pertama yang terdiri dari empat baris satu. Baris dua. Baris tiga. Baris empat</p>

<p align="center"> Ini adalah paragraf kedua yang terdiri dari tiga baris.

yaitu baris satu. baris dua. baris tiga. </p>

<p align="right"> Ini adalah paragraf keempat yang terdiri dari dua baris

yaitu baris satu. baris dua. </p>

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox.

Keterangan : 

Left = rata kiri, 

right =rata kanan, 

center =rata tengah,

justify =rata kanan kiri.

Jangan lupa sobat inget kode-kode html nya ya ..

  

MEMISAHKAN BARIS 

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut :

<html>

<head>

<tittle> Belajar Memisahkan baris </tittle>

</head>

<body>

<p> Pancasila terdiri dari lima sila yaitu : <br>Sila Kesatu Ketuhanan Yang Maha Esa. <br> Sila Kedua Kemanusiaan Yang Adil dan Beradab. <br> Sila Ketiga Persatuan Indonesia. <br> Sila Keempat Kerakyatan Yang dipimpin oleh Hikmat Kebijaksanaan dalam Permusyawaratan Perwakilan. <br> Sila Kelima Keadilan Sosial Bagi Seluruh rakyat Indonesia.

</p>

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox.

MEMBUAT HYPERLINK 

1. Buka Notepad melalui Start > All program > Accessories > notepad

2. Ketik tulisan berikut :

<html>

<head>

<tittle>  Meembuat Hyperlink </tittle>

</head>

<body>

Ini adalah hyperlink ke salah satu website :

<a href="alamat link"> NAMA </a>

<br>

</body>

</html>

3. Simpan file notepad dengan menklik file-save as-nama file.html

4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox.

>

Situs Bookmark Terakurat di Search Engine

Situs Bookmark Terakurat di Search Engine - Submit artikel di situs bookmark yang dofollow tidak hanya berdampak positif, selain mendapatkan backlink yang berkualitas dan gratis, juga dapat mendatangkan banyak pengunjung ke blog sobat. Ini sudah terbukti dari salah satu konten yang saya submit ke situs bookmark tersebut hasilnya konten tersebut mejeng di 10 besar SERP sehingga dapat melimpahkan pengunjung.

Berikut ini beberapa Situs Bookmark Terakurat di Search Engine Indonesia,
yang patut anda coba :

http://www.lintas.me/
http://infogue.com/
http://debuk.com/
http://qaafe.com/
http://www.beritasaya.com/
http://populerkan.com
http://bagikan.com/
http://bookmarkindonesia.com/
http://www.beritague.com/
http://www.plazaberita.com/
http://klowor.com/
http://jaditerkenal.com/
http://www.bagiurl.com/
http://beritapilihan.com/
http://www.myblogpost.org/
http://www.sosbok.com/
http://situsku.sumbawanews.com/
http://tunden.com/
http://lenteraseo.com/
http://dofollow.web.id/
http://www.lintasaninfo.com/

Untuk tata cara submit artikelnya lihat kunjungi situs-situs diatas, semua sudah dijelaskan secara rinci di situs tersebut. Sekian untuk pembahasan Situs Bookmark Terakurat di Search Engine, semoga bermanfaat.

SUMBER



>

Meta Tag SEO Friendly Untuk Blogger

Meta Tag SEO Friendly Untuk Blogger - Meta tag adalah elemen atau kode tag dalam bahasa pemrograman html atau xhtml yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Meta tag harus diletakan dibagian "Head". Meta tag akan menjelaskan attribut dari blog/website kita misalnya seperti, judul dan deskripsi website serta keyword yang kita pakai kepada mesin pencari, sehingga mesin pencari dapat mengenali halaman blog/website kita.

Meta Tag SEO Friendly Untuk Blogger - Dan pada kesempatan ini saya akan berbagi info mengenai meta tag SEO Friendly. Sebenarnya banyak sekali jenis meta tag SEO Friendly yang bisa kita gunakan. Tapi untuk kali ini saya akan share meta tag yang saya dapat dari blogadexme di blog tersebut saya menemukan banyak artikel yang menarik dan salah satunya mengenai meta tag ini.

Cara Memasang Meta Tag SEO Friendly :

1. Login ke akun Blogger

2. Klik "Template"
3. Klik "Edit HTML"
4. Centang "Expand Widget Template".

5. Cari kode ;

<b:include data='blog' name='all-head-content'/>

6. Kemudian hapus kode di bawahnya sampai di atas kode :

<b:skin><![CDATA[

7. Setelah itu Copy kode Meta Tag di bawah ini :

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title + &quot; | &quot; + data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title + &quot; | &quot; + data:blog.pageName' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='abstract'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.pageTitle + &quot; - ISI DENGAN DESKRIPSI BLOG ANDA &quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title + &quot; | &quot; + data:blog.pageName' name='keywords'/>
<b:else/>
<title><data:blog.pageTitle/></title>
<meta content='ISI DENGAN DESKrIPSI BLOG ANDA' name='description'/>
<meta content='ISI DENGAN KATA KUNCI BLOG ANDA' name='keywords'/>
</b:if>
</b:if>
<meta content='Index, Follow' name='robots'/>
<meta content='NAMA ANDA' name='author'/>
<meta content='NAMA BLOG ANDA' name='copyright'/>
<meta content='2 days' name='revisit-after'/>
<meta content='2 days' name='revisit'/>
<meta content='never' name='expires'/>
<meta content='always' name='revisit'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='All-Language' http-equiv='Content-Language'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='index, follow' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='all' name='spiders'/>
<meta content='all' name='WEBCRAWLERS'/>
<meta content='aeiwi, alexa, alltheWeb, altavista, aol netfind, anzwers, canada, directhit, euroseek, excite, overture, go, google, hotbot. infomak, kanoodle, lycos, mastersite, national directory, northern light, searchit, simplesearch, Websmostlinked, webtop, what-u-seek, aol, yahoo, webcrawler, infoseek, excite, magellan, looksmart, bing, cnet, googlebot' name='search engines'/>

Penting !

Ganti semua kode yang berwarna merah sesuai dengan data blog anda.

 8. Kemudian paste-kan dibawah kode berikut :

<b:include data='blog' name='all-head-content'/>

 9. Lalu simpan



>

Cara Optimasi Blog Agar Tampil Lebih Cepat

 

Siapa yang tidak ingin halaman blog-nya tampil lebih cepat,  faktor kecepatan loading page lah yang sangat besar pengaruhnya buat kenyamanan pengunjung. Sudah menjadi sifat dasar manusia dimana menunggu adalah pekerjaan yang sangat membosankan, ini yang harus kita cermati bersama, jangan sampai pengunjung kabur dan pindah ke situs lain hanya karena blog kita sangat lambat ketika dibuka.

Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat, tentunya cepat dalam batas wajar

15 Cara Optimasi Halaman Blog Agar tampil lebih cepat:

1. Aktifkan Kompresi dengan GZIP
Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. Untuk teknik dan tutorial Gzip silahkan disearch aja ya..sudah banyak sekali yang membahasnya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin WP Super Cache.

2. Buang Spasi kosong pada kode HTML
Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya  termasuk juga dalam Inline untuk kode Javascript dan CSS. Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editor seperti Notepat++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atau Delete Surplus Blank Lines.

3. Lakukan Kompresi CSS (Stylesheet)
Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js.

4. Letakan CSS (Stylesheet) di Atas
Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header.

5. Buang CSS (Stylesheet) yang tidak perlu
Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun  tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat!

6. Periksa Validasi CSS (Stylesheet)
Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations

7. Kombinasi CSS (Stylesheet) dalam file External
Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja.  (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal)

8. Lakukan Kompresi Javascript
Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor, Closure Compiler dan JSMin

9. Buang Javascript yang tidak Perlu
Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja!

10. Kombinasi Javascript dalam file External
Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja.  (untuk pengguna blogger jika memungkinkan sebaiknya panggil melalui file internal saja, silahkan baca kembali solusi hosting javasript internal)

11. Lakukan Optimasi Gambar
Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it

12. Jangan Paksa Skala Gambar dalam HTML
Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSS atau dalam tag <Img> seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah 200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya.

13. Hindari Gambar SRC kosong
Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML <img scr=""> atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja.

14. Periksa Kembali Broken link
Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dari W3C Checklink

15. Buang Widget atau plugin yang tidak Perlu
Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender.



>

Cara Praktis Membuat Menu dengan List-O-Matic

kali ini saya akan memberi info tentang cara praktis membuat menu horizontal dengan List-O-Matic.

1. Masuk situs List-O-Matic

2. Selanjutnya, misalnya sobat blogger ingin membuat menu: home, article, download, galeri, dsb... Silahkan isi Link text dan Address/URL nya yang sobat blogger inginkan (Konsepnya sama dengan membuat link MS Office). Jika ingin menambah menu, dapat di klik Add top level navigation item.

3. Setelah selesai mengisi kemudian klik "I,m done...". Akan muncul tampilan:

4. Pilih tampilan menu yang disediakan List-O-Matic sesuai dengan selera sobat blogger

5. Setelah memilih akan tampil kode CSS dan HTML nya

6. Copy kode CSS tersebut diatas kode ]]></b:skin> pada template sobat blogger dan SIMPAN

7.Copy kode HTML tersebut di tambah gadget HTML/JavaScript pada Elemen Laman

>

Cara Membuat Widget Daftar Link Di Blog

Cara Membuat Widget Daftar Link Di Blog.

1. Klik tambah gadget.
2. Pilih HTML/JavaScript
3. Lalu paste-kan kode script berikut

<div class=”widget-content”> <br /><div style=”border: 0px solid rgb(153, 153, 153); overflow: auto; width: 370px; height: 250px; text-align: left;”> <br /><div class="widgetSystem"> <div class="nama"> Blog Teman</div> <div class="kulit"> <li><br /><br /><a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a></li> <br /><br />    <style type="text/css">.widgetSystem {    width: 96%;    padding: 5px;    background: transparent url(http://bloggerbanyumas.net/about-us/selamat-datang/blogger-banyumas-logo_transparent_255/) no-repeat;    margin: 5px auto;    border: 1px solid #FFFFFF;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    webkit-box-shadow: 0 0 1px 1px #EE9304;    moz-box-shadow: 0 0 1px 1px #EE9304;    box-shadow: 0 0 1px 1px #EE9304    }.widgetSystem .nama {    text-align: center;    font-size: 1.5em;    background: #b80000;    background: rgba(255, 0, 0, 1);    padding:5px;    color: #fff;    font-family: "Arial", Arial, sans serif;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem .kulit {    background: #555555;    background: rgba(55, 22, 10, 0.1);    height: 180px;    overflow: auto;    margin-top: 5px;    border: 1px solid #000;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem a {    text-decoration: none;    margin: 5px;    background: #A2A2A2A2;    background: rgba(5, 1, 3, 0.2);    padding: 5px;    display: block;    color: #fff;    text-transform: uppercase;    font-size: 12px;    font-weight: bold;    font-family: "Arial", Arial, sans serif;    -webkit-transition: all 0.5s ease 0s;    -moz-transition: all 0.5s ease 0s;    -o-transition: all 0.5s ease 0s;    transition: all 0.5s ease 0s    }.widgetSystem a:hover {    background:#D60000;    color: #FFFFFF    }.widgetSystem li {    list-style: none;    color: #CCC;    margin: 5px    }</style></div> </div> </div> </div>            

Keterangan :
Contoh.
<a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a><br /><br />
Ganti  http://anti-fool.blogspot.com/     Dengan link yang akan di tuju.
Ganti   All About All    Dengan Nama Anda
Dan Juga Yang Lainnya Juga Sama :

>

Cara Membuat Slide Show

Cara Membuat Slide Show inilah kali ini yang akan kita bahas, Mungkin ketika anda melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir. kali ini anda juga bisa membuatnya. Caranya adalah sebagai berikut :

Masuk ke edit html blog.

1.Cari Kode </head>

2.Copy kode di bawah ini lau pastekan sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append(' <li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"> <h3> </h3> </div> </li> '); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style> <br>         

Langkah Kedua.

  Buat gadget baru (HTML/JavaScript) dan Pastekan kode di bawah ini..

<ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8QSKSdXxOtDZkFh7MzkDySDQp1g33z58aaCoFDPyt2NKh0zOuCXv3CJlAmCKpr4NY6PLpbR-UmhyphenhyphenxXGsoukprFsG3ayNS0N4E1X3NWQnw88XerbXbpixd5zeSqwvYjRqa0ofA214aw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHlkQlhdbvvZKZs9ITFNUeMTPXU2VCCMoVwsUgKjlwdMuHUhesPdLTUBwYCC4zFbNOc-vobJ1ScABoO4ZrTPihSGW0FKyrVfUcaSHnP_FEyULfCGrgJ7r_V6DakzUbJKOxD2K1DnGXw/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD9JRg0F0-KMCVfUpNQUASh5EiMwGfnciXLn3Ms6Qclq0bfAHQaqF2TR22umK4uVT3XokkIfNsYUNUf3vKk5DorYFQ3E1I9QSCCJFIT6OFMae2amlaHef9KL6uWJebR2AbrGVmg93tkA/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXI-e5_AWzC5TsHcb8p0SXBXxVRrUoEIKvCALEikSJ0GpV2wRLTWDdjYK8EySwDCw3kurllpvc8QbTGHAnn7hnQhTDPLTdDeJ6kWEAqSSbKKUr0DDUkP-BEaBkLjsi28t6ndkytIAkdg/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li> </ul>           

Ganti Tulisan warna merah URL dengan gambar anda pilih...

Terakhir Save...

>

Cara Membuat Recent Post Berjalan di Blog

Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama anda posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Anda yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog anda.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"> </script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"> </script> </ul> <small><a href="http://anti-fool.blogspot.com/2013/01/cara-membuat-recent-post-berjalan-di.html" target="_blank">:: get this widget ::</a></small>

 Ket.
1.     background-color:#1c1c1c;        Ganti Dengan warna background yang anda suka
     border:solid 1px #000000;}       Ganti  dengan arana garis yang anda inginkan
2.var speed = 1500;  Kecepatannya
    var pause = 3500; 
3.var numposts = 5;   Jumlah post yang ditampilkan
    var numchars = 0;  Jumlah karakter postingan
Untuk Kode Warna ada di widget samping.

4. Klik save dan lihat.

>

Efek Nudging

jika anda ingin menambah efek pada posting atau widget. Efek link nudging adalah efek yang membuat objek bergeser ketika mouse over (cursor diatasnya). Efek ini bisa diterapkan di gambar ataupun tulisan. Ada juga yang menerapkan efek ini pada label (biasanya daftar label yang vertikal). Link nudging yang kita buat ini tidak membuat blog anda menjadi berat jadi tidak usah kuatir dengan loading blog anda. Bagaimana menurut anda, jika tertarik untuk membuatnya langsung saja ikuti trik yang satu ini:

1. Masuk ke Rancangan --> Edit HTML
2. Tambahkan kode berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/

.nudge  {

-moz-transition: all 0.4s ease-out;

-o-transition: all 0.4s ease-out;

-webkit-transition: all 0.4s ease-out;

-ms-transition: all 0.4s ease-out;

transition: all 0.4s ease-out;

}

.nudge:hover  {

margin-left: 25px;

padding-left: 5px;

}

3. Simpan template anda
4. Untuk menambahkan link nudging pada postingan tambahkan kode berikut ini:

Link Nudging pada Text

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Link Nudging pada Gambar

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Keterangan:

- Ganti kalimat "Disini letakkan URL" dengan link anda
- Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan

>

Cara membuat author box dibawah postingan

1. Silahkan masuk ke dasbor blog anda.
2. Pilih "Template >> Edit HTML"
3. Cari kode ini : ]]></b:skin>
4. Pasang kode berikut tepat diatas kode ]]></b:skin> :

.admin-tulisan{ width:auto; background:#FEFF80; border:2px solid #000000; margin:30px 0 10px 0; display:block; font-family:"verdana"; color:#000; } .admin-tulisan .kontainer{padding:5px;} .admin-tulisan h4{ background:#680202; border:none; border-bottom:1px solid #000000; color:#fff; font-family:"verdana"; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); padding:5px 10px; margin:0 0 0 0; display:block; } .admin-tulisan h4 a{color:#000000;} .admin-tulisan img{ background:#000000; width:90px; height:100px; border:1px solid #000000; margin:3px 10px 0 0; float:left; padding:2px; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; }

5. Kemudian anda cari kode <data:post.body/>
6. Selanjutnya silahkan pasang kode berikut tepat dibawahnya :

<!-- Sangasiji Author Box --> <b:if cond='data:blog.pageType == "item"'> <div class='admin-tulisan'> <h4> Artikel ini ditulis oleh : <b><data:post.author/></b> ~ Blog SEO Ciamis</h4> <div class='kontainer'> <img alt='Nama Anda' src='https://lh3.googleusercontent.com/-4t7V-xreZrQ/AAAAAAAAAAI/AAAAAAAAADc/mW7MAPDzsvY/s250-c-k/photo.jpg'/> Terimakasih anda telah membaca : <b><a> expr:href='data:post.url'><data:post.title/></a></b> Tulisan Saya. Anda bisa menyebarluaskan artikel ini, Asalkan meletakkan link dibawah ini sebagai sumbernya <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a>

7. Setelahsemua kode terpasang silahkan disimpan dan silahkan di chek hasilnya.

NB :

• Anda bisa ubah Nama sesuai dengan Nama sahabat
• Anda bisa ubah link berwarna biru diatas dengan link foto sahabat yang ingin ditampilkan.
• Anda bisa ubah ukuran texarea pada kode berwarna merah diatas.
• Anda bisa ubah kalimat sesuai yang sahabat inginkan pada kode berwarna hijau

>

Cara Membuat Multi Slide widgate Tanpa Edit HTML

Cara Membuat Multi Slide widgate Tanpa Edit HTML - Pada postingan yang lalu bang dadan pernah membahas Cara Membuat Button Social Slide disamping Blog, nah untuk kesempatan kali ini bang dadan akan membahas artikel tentang Cara Membuat Multi Slide widgate di Blog tanpa edit HTML. Sahabat Blogger mungkin pernah atau sering melihat tutorial ini di Blog yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan tutorial ini, namun bagi yang belum pernah memasang widgate ini dan ingin memasang nya di Blog, silahkan ikuti langkah - langkah berikut: untuk DEMO sobat bisa lihat di sidebar Blog ini. atau screen shootnya seperti gambar dibawah.

Cara Membuat Multi Slide widgate Tanpa Edit HTML

---

1. Login ke akun Blog
2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy Kode dibawah ini pada HTML/Javascript

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj_DO8SpmE_eRKljOSFNF2n2Yyw7ye-hdEzJ2OmsLrnlJ3q3Hv4gn9xH8QynjIPY6cg10-NWmeHoR9jDNDgC3E5e1W3-JN79XL0JBTJnEwAH7-WKXRjb5nlNGxrwYq79xtZxVY1tU7Q/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGWTVqlDw9i_MUUg1YZOW_Y-NjmguNFpzg_xDxQYqd3LDbMDZBwfsnkPQc_Ya5o092mVg3O2br5Mad5BzcSFooOwmPj9PhplMSFqVBJfqg7S0tidlfK_dk0Pw5Vvznrl-UTJem-Q4aA/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul widgate
❞ Tulisan yang berwarna merah adalah Kode widgate
Silahkan ganti sesuai keinginan anda.

4. Klik simpan, dan lihat hasilnya.

Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy Kode yang dibawah ini:

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwzBvme3COt-8gz5c83h2YSt8a5PMtNSop4l8xnMopInWz6PQEU-iMx4n3nZRTijkJygXsGqEj2Rcykko5AB8AfyCvXyrVneyvavz53p2nPihsP4LMbN_ehzzbdfS6tH-6Wu_6vvX2Q/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZD8lIG3iDAS_0IKI8yiG0JtiWnorhjSb-ro4IDCnIHW0T5fCXgzWWomZY2FBQLDnM5-0WCCsm5ERtkshXuMCAKVbCX-aPCIiiQ1zxjdxkzJx7Z7-8qbtilan0EtWWjBlu_Y_arTUrvg/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide widgate diblog Tanpa Edit HTML



>

Cara Membuat Widget Daftar Menu Blog Otomatis

Cara Membuat Widget Daftar Menu Blog Otomatis  - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;"> <div id="cl_option"> Loading... </div> <div id="cl_content_list"> </div> <script type="text/javascript"> var jumlah_kata_dalam_ringkasan = 250; </script> <script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js"> </script> <script src="http://anti-fool.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script></div>

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.

5.       Save / Simpan.

>

Membuat Widget Popular Post Dengan Efek 3D

Huft, sudah 2 Hari tidak membuat artikel di sebabkan tidak punya uang untuk ke warnet akhirnya sekarang bisa membuat artikel lagi hehe. Pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana membuat efek Popular post namun dengan efek 3D ! wah bagaimana yah kira-kira tampilan-nya pasti akan sangat menakjubkan. Langsung saja kamu lihat caranya di bawah ini :

1. Masuk ke akun Blog kamu.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript dan kamu salin kode java script di bawah ini.

<style type="text/css"> .cube { width: 200px; height: 200px;} a img { border: none; } #linksCube img { width: 100%; height: 100%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').abupopularcube(); }); </script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

NOTE :

• Kamu bisa atur berapa lebar dan tinggi dari widget ini dengan mengubah kode yang berwarna biru, width untuk lebar, height untuk tinggi.

3. Simpan Template, Mudahkan ?

>