Widgets, Gadgets dan Add-ons Blog

Berikut widget web yang menarik dan gadget yang dapat Anda pertimbangkan  untuk ditambahkan ke Blog Anda. Widget adalah elemen yang ekstrak layanan atau konten dari situs lain. Beberapa widget yang berguna, memberikan pembaca Anda dengan berita, informasi, dan tips referensi. Lainnya mungkin hanya menyenangkan dan permainan yang membuat Blog Anda sedikit lebih menarik dan meningkatkan interaksi antara pembaca Anda.

Hati-hati saat menambahkan widget. Meskipun Anda mungkin tergoda untuk memiliki banyak widget, memiliki terlalu banyak dapat menyebabkan kekacauan Blog dan menyebabkan download halaman lebih lambat. Juga, karena banyak dari mereka bekerja pada javascripts, pembaca yang mengkonfigurasi mereka Firefox atau browser IE untuk memblokir skrip tidak dapat melihat fitur ini.

Google Gadgets

Banyak aplikasi yang dibuat oleh pengembang dan pengguna yang berbeda. Tidak diperlukan pendaftaran. Bila Anda telah memilih salah satu, klik "Tambahkan ke halaman Web Anda" dan Anda akan diminta untuk menyesuaikan judul, lebar, tinggi dan perbatasan gadget. Jika lebar dari sidebar Anda misalnya, 150 px, Anda mungkin ingin mengatur lebar gadget menjadi sesuatu yang kurang dari itu. Hal ini baik untuk memiliki lebar yang lebih besar, tapi pembaca harus gulir untuk melihat gadget secara keseluruhan. Bila Anda puas, klik "Dapatkan Kode". Salin dan sisipkan kode ke  "Elemen Halaman" anda.

Widgetbox

Menyediakan kode instalasi siap untuk TypePad, Wordpress, Blogger, MySpace dan blog lainnya, sidebars atau situs web. Daftar untuk mendapatkan akun gratis. Pencarian untuk widget yang Anda sukai. Tentukan pengaturan layar dan klik "Get Widget". Anda dapat "Get Widget Code" dan sisipkan ke layout blog Anda. Atau membiarkan mereka melakukannya untuk Anda dengan mengklik "Tambahkan ke Blogger".

Jika Anda memiliki beberapa widget, Anda juga dapat "Membuat Panel Baru" di bawah "My Widgets" dan menambahkan widget ke dalam panel. Keuntungannya adalah bahwa ketika Anda "Instal", Anda akan memiliki satu kode yang dihasilkan untuk panel daripada beberapa kode.

AddThis

Ini adalah layanan yang bermanfaat. Widget ini memungkinkan pembaca untuk dengan mudah bookmark Blog Anda, atau berlangganan ke feed. Banyak pembaca feed mendukung serta layanan bookmark sosial. Desain terlihat rapi dan menyimpan sampai banyak ruang. Mendaftar di situs AddThis. Anda dapat memiliki widget Bookmarking atau feed widget.

Jika Anda diminta untuk memasukkan URL Feed Anda, Anda bisa menggunakan URL Blog Anda dengan "/ atom.xml" atau "/ rss.xml". Jika anda ingin menempatkan di setiap posting, ikuti langkah berikut :

• Login ke glogger ---> Template
• Edit HTML
• Centang “Expand Widget Templates” 
• Berikutnya, cari baris ini: <div class='post-footer'>
• Paste kode widget yang dihasilkan Bookmarking sebelum atau sesudahnya.

Anda dapat melihat pratinjau Blog untuk melihat perbedaan posisi widget. 

Jika Anda ingin widget untuk muncul di kiri atau kanan, Anda dapat menyesuaikan dengan menambahkan tag alignment berikut ke kode widget

<div align='right'>WIDGET CODE</div>

Punkymoods

Jika Anda sedang menulis sebuah buku harian online tentang kejadian pribadi, Anda mungkin ingin membiarkan pembaca Anda mengetahui sekilas suasana hati Anda pada saat sekarang. Punkymoods cocok buat anda. Dapatkan akun gratis dan menambahkan kode mereka ke Blog Anda. Setiap kali perubahan mood Anda, login ke situs mereka dan mengatur suasana hati. Gambar atau emoticon ditampilkan di Blog Anda akan secara otomatis berubah untuk menunjukkan suasana hati Anda saat ini.

Answers.com

Apakah Anda selalu harus menjelaskan istilah-istilah yang digunakan di situs Anda? Jawaban bebas menggabungkan beberapa alat seperti AnswerTips dan AnswerBoxes dari Answers.com bagi pengunjung Anda untuk mendapatkan jawaban instan untuk kata kunci dan permintaan.

TheFreeDictionary

TheFreeDictionary memiliki alat lebih bebas bagi Anda untuk memilih. Anda bisa memiliki kotak pencarian kamus sederhana. Anda juga dapat mempertimbangkan sumber daya yang berguna lainnya seperti Word of the Day, Article of the Day, hari ini dalam sejarah, ulang tahun hari ini, Dalam Berita, Quote of the Day dan permainan seperti Spelling Bee, Match Up dan Hangman.

Vizu

Membuat polling blog untuk mengumpulkan pendapat dari pembaca Anda. Vizu Anda dapat membuat jajak pendapat menggunakan template disesuaikan dan memasukkan widget pemungutan suara ke Blog Anda. Jika Anda ingin penghasilan tambahan, mereka akan membayar Anda untuk meng-host webpolls dipilih melalui skema Jawaban Vizu mereka.

Cara Menambahkan Social Sexy Bookmark Ke Blogspot

Ini adalah "Cara Tambah Seksi Sosial Bookmark ke Blogger". Penciptanya http://www.cssreflex.com/. Anda harus menggunakan jquery. Langsung  saja.  Ikuti langkah-langkah-langkah di bawah ini.

1.Log in ke blogger anda --> dashboard--> layout- -> Edit HTML

2.Klik "Expand Widget Templates"

3.Cari kode ini  </head>

4.Copy dan pastekan kode di bawah ini sebelum  </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiY-s9wWjJB0mGeiBXua6PAc9RIhG1V8D5n24GTC89RMtCdH7CPdg6lCBNKjOfN2orZmgwh_qfWfEOodDsZrvgKuldQ_2uqW6y99PIUY_Y9CKXP-e1XgtFnjkyJ8rhSL0CqNZbgvmyKTl/&#39;) !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(&#39;http://bnote.googlecode.com/files/sexy-sprite-new.png&#39;) no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

5.Lalu cari kode ini  <data:post.body/>

6.Copy dan pastekan kode di bawah ini setelah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>

7.Simpan template anda.

Link:http://www.bloggertipandtrick.net/2010/06/add-social-sexy-bookmarks-v2-to-blogger.html

Cara Uji Kode HTML / javascripts Online

Jika Anda seorang pengembang web dan kode dalam CSS, HTML, XML atau  javascripts tips berikut ini untuk menguji coding Anda dengan cara tercepat - online! Anda tinggal  memasukkan kode ke dalam jendela web browser dan tekan tombol Edit and Click Me untuk melihat hasil instannya.

Pernah mendengar tentang w3cschools.com? Situs web tutorial terbesar untuk web developer. Di situs tersebut, ada Tryit Editor. Coba klik "Tryit Editor" - HTML / JavaScript editor online bagi pengguna yang sedang belajar. Anda dapat menempatkan kode dari halaman web secara keseluruhan atau sebagian  untuk melihat hasil instan selama pembukaan dan penutupan kode utuh. Pemula merasa sangat nyaman menggunakan editor online karena mereka tidak perlu menginstal apapun.

Anda juga bisa mencoba yang berikut ini :
http://www.jmarshall.com/easy/html/testbed.html

Cara Pasang Social Bookmark Melayang ( Float Social Bookmark )

Coba anda perhatikan gambar di sebelah, yang saya beri tanda panah merah. Mungkin anda pernah atau sering melihat di beberapa situs, blogspot maupun wordpress. Ya, itu adalah tombol-tombol social bookmark melayang yang terletak di samping blog. Biasa disebut juga dengan floating social bookmark.
Ikutin langkah berikut untuk memasang di blog anda :

1. Pertama masuk ke blogger.com
2. Klik tata letak, lalu pilih edit HTML, jangan lupa centang expand widget
3. Cari kode : </body>
4. Masukkan kode di bawah ini tepat di atas kode tadi :

<div align="center" id="floatlayer" style="background: none repeat scroll 0% 0% transparent; color: #666666; font-size: 12px; height: 198px; left: 0px; position: fixed; top: 150px; width: 71px;">

<div style="line-height: 25px; padding: 45px 5px 5px 0pt;">

<a class="addthis_button_facebook" href="http://www.facebook.com"><img alt="Facebook" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7ENJdupBZojqUO4NLIzKqmdGOxum13SPm2dL2oXee8fPClKS90EKb6L8m6NtvNTD4gvfaAAs_wwhHRBXweezHmPb4NnVc3o7RmUuhmQPF-lomuoexqB-ffdnVytu4VikoFYrs3LbNxM/s1600/facebook.png" width="25" /></a>

<a class="addthis_button_delicious" href="http://www.delicious.com"><img alt="Delicious" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0D24ijS7uc5epZw220kk-ztgXGElTN6isHE5vGO9L7RixiHlO6ge7X8ymJjJGLHJqAc7fld3GWP5PGSSqDiTZljqE9RzdZhqfRkVW6gTHeu5XsNnr-gEfhOFzacygCreU09UmdPqlU00/s1600/delicious.png" width="25" /></a>

<a class="addthis_button_email" href="http://www.email.com"><img alt="Email" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylDLWhAG-nqJpgdrTusy2ru9vFtKifBfKpmVwF0ZuHncw-YO2YJwKaPM1uBT3ZKHJYTpZa8bMPxQmoqzp5GJs7m77dAlkGIspLyrG210i41JAvgqVA9xSPQwakQol1UTwdyd_jg3ywgs/s1600/emailsmall.jpg" width="25" /></a>

<a class="addthis_button_favorites" href="http://www.favorites.com"><img alt="Favorites" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX_nFkdMbEUycqFhQDy67N4yvdtbSloVl-aI_iRlLoASkMHa7rMNsAoO90u3wpHqXQtU0tqSlnU7FQE2lcfXXG8BIzVd08TUfMpSj54j8VVZL8wqebfnZtBX5ooRbF30JTICgGsMPbi2E/s1600/favorites.png" width="25" /></a>

<a class="addthis_button_twitter" href="http://www.twitter.com"><img alt="Twitter" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKMBYF3RTxil0VjMHNzXaPwlkG_Tpdm0vJwLIBlRefPgBYvnWWQ_jKNO_reGLAEQvoxRugz6X8wqEY2rgmpeBfzY_u8ZaiLl3LD5UOM9kK8qmI2qfEVYNI75X4NzoiaHS2KL5MXvG4DuQ/s1600/twitter.png" width="25" /></a>

<a class="addthis_button_google" href="http://www.google.com"><img alt="Google" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qagMQ_VrmDPm5OoivTmWvfv3TCSs3t0Sg8_sovnmNQx0gWeXClTkelgiWUME1ax3cH4hQrgTpWD-C1oQ8iYejzqDNh4DAwMStWk5Yxx0YkoFKs6vH7LuU0CQ-3E7_exNob_ok7v0cNE/s1600/gsmall.jpg" width="25" /></a>

<a class="addthis_button_digg" href="http://www.digg.com"><img alt="Digg" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRXOhMj0dJ1cndjjrGrFq1HFaNQn75sPpO7cxb2jFRhY7Bo1hjRVY7SbzThlGue85zSo7gtF5t22A5lK0i-9Yp1IrouVJSujsJ5aFjKyMCnVZhVib2AZ0wrRGl5yuG6BlMO4guLAG71w/s1600/digg.png" width="25" /></a>

<a class="addthis_button_more" href="http://www.more.com"><img alt="More" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfz58qtCA0KwqIukNoqgcolUFJhaTupqJRkgpoAQMoW_23WBKoUNcmsnmm10iZxpGYKid2OWOGopXiy4Lr305zm2mU80Sr4X062exU0hX6OuyF0USXT1ImUtNsj4DdM2RC4ciw9IxBNPg/s1600/more.png" width="25" /></a>

</div>

</div>

5. Simpan dan lihat blog anda.

4 Blogging Desktop Software - Free

1. Perfect Journal

Perfect Jurnal adalah FrontPage / Dreamweaver dari Blogging. Buat entri jurnal Anda di PerfectJournal dan mempublikasikan langsung ke Blogger.com. Membuat, menulis, menulis ulang offline dan mempublikasikan online, mengintegrasikan blog Anda dengan semua konten lainnya dan mencari dengan cepat. Saat ini mendukung penerbitan ke Blogger.com.

2. W.Bloggar

W.Bloggar adalah sebuah aplikasi yang bertindak sebagai antarmuka antara pengguna satu atau lebih blog, dalam kata lain, ini adalah Pos dan editor Template, dengan beberapa fitur dan sumber daya berbasis blog editor. Keuntungan lain  w.bloggar adalah kompatibel dengan sebagian besar sistem weblog yang tersedia, memungkinkan pengguna lanjutan untuk menggunakan beberapa akun di-host di situs yang berbeda dan menggunakan sistem penerbitan yang berbeda.

3. Zoundry Raven

Zoundry Raven ™ adalah generasi lain yang menjanjikan blog editor WYSIWYG yang membuat posting blog Anda lebih mudah dan lebih cepat. Mudah digunakan sebagai pengolah kata, ditambah lagi alat-alat sederhana untuk menambahkan link, tag, foto, musik dan file video, dan banyak lagi. Memiliki mengedit XHTML kuat di balik UI intuitif. Hal ini memudahkan untuk menulis dan mempublikasikan ke blog.

4. Windows Live Writer

Windows Live Writer memudahkan Anda berbagi foto dan video di hampir semua layanan blog. Anda dapat melihat pratinjau semua yang Anda tambahkan ke blog Anda, font, spasi, warna, dan gambar akan terlihat, sebelum Anda mempublikasikannya. Sangat cepat dan mudah untuk memasukkan gambar dan video. Live Writer disupports oleh plugin sehingga Anda dapat menambahkan apa yang anda inginkan seperti dari Facebook, Flickr, atau situs-situs lain.

Mengkonversi Blog Ke Dalam Sebuah Buku

Punya Blog sendiri? Pernah berpikir untuk mencetak beberapa artikel Anda yang terbaik untuk memberikan kepada seseorang atau membuat buku untuk dijual atau hanya untuk penggemar atau pembaca?

Jika ya maka Anda harus berpikir, BAGAIMANA? Bagaimana cara mencetak blog saya untuk membuat sebuah buku profesional dari posting blog saya.

Gunakan Blog2Print.

Yang harus Anda lakukan adalah memberitahu mereka alamat blog Anda dan dengan beberapa klik, Anda memilih penutup, dan pesan-pesan yang ingin Anda tambahkan.

Blog2Print memiliki publishing platform buatan yang mampu mengambil semua teks dan gambar dari blog Anda dan mengkonversikannya ke format buku profesional. Anda dapat memilih nomor halaman untuk disertakan, cover, warna, desain dan alamat pos di mana buku Anda akan dikirimkan GRATIS.

Hasil konversi Andy Huang Blog :

Cara Mudah Melihat Jumlah Pengunjung Website Atau Blog Anda

• Apakah Anda memiliki situs web, blog atau profil jaringan sosial ?
• Apakah Anda ingin mengetahui jumlah pembaca yang Anda miliki ?
• Ingin langsung melihat darimana asal  pengunjung Anda ?
• Atau melihat berapa yang sedang online ?

.

Whos.amung.us dapat menjawab semua itu. Mendapatkan statistik akan menjadi lebih mudah. Widget ini free dan tidak ada pendaftaran! Cukup salin kode html yang Anda lihat di bawah ini dan paste-kan ke setiap halaman yang ingin Anda lacak.

<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('hqx0j8yno6ab', 'left-middle')</script>

 

Cara Membuat Video Embedded Ke Posting

Embedded video terkait ke blog Anda. Bekerja sangat baik dan mendukung sebagian besar sistem blog di internet. Tentu saja, benar-benar bebas untuk digunakan. Silahkan kunjungi Blinkx.

Anda dapat menanamkan widget Blinkx pada template Blogger Anda sehingga setiap posting blog yang Anda tulis akan memiliki daftar video terkait yang dihasilkan secara otomatis. Widget ini bekerja dengan cara membaca teks dari posting masing-masing individu dan menemukan video tentang topik yang sama. Jika, misalnya, Anda sudah membuat blog tentang tim olahraga favorit Anda, maka akan mencari video yang berhubungan dengan itu, jika Anda blogging tentang hobi favorit Anda, maka akan link ke video di hobby.

Untuk mengotomatisasi penambahan video disarankan untuk setiap posting di Blogger, Anda harus menambahkan kode yang benar untuk template Anda. Untuk melakukannya, ikuti petunjuk sederhana di bawah ini:

1. Masuk ke Blogger dan navigasi ke blog Anda.
2. Klik 'Customize' di sudut kanan atas layar.
3. Klik 'Edit HTML'.
4. Pastikan kotak  'Expand Template Widget' dicentang.
5. Cari kode ini :

<data:post.body/> 

kemudian ganti dengan kode berikut ini :

<div id='blinkxit-start'></div><data:post.body/><div id='blinkxit-end'></div><br/><embed type="application/x-shockwave-flash" expr:src='"http://www.blinkx.com/blinkxitswf?urlToSearch=%27" + data:post.url + "%27"' style="position:absolute;" name="blinkxit" wmode="transparent" height="300" allowscriptaccess="always" width="300"></embed><img src="http://cdn.blinkx.com/images/tv/backdrop.gif" style="border:none;"/>

6. Simpan template Anda dan lihat blog Anda. Anda dapat melihat demo di setiap postingan ini.

.

Tips Membuat SnapShots

Ini akan memungkinkan pengguna untuk melihat situs web sebelum mengunjungi link yang di tuju. Ketika  mouse anda arahkan ke atas link, maka Anda akan  melihat preview dari situs yang di tuju tanpa meninggalkan halaman yang anda lihat sekarang.

 Berikut langkah-langkah menerapkannya pada blog :

1. Log in ke blogger >> dashboard >> layout >> Edit HTML
2. Cari kode ini :

</body>

3. Tempelkan kode berikut ini sebelum kode diatas :

<script language="javascript" src="http://thumbnails.iwebtool.com/src.js?border=004891" type="text/javascript"></script>

4. Tulisan merah adalah kode warna HEX, anda dapat mengganti sesuai selera anda.
5. Simpan.

Cara Mengganti Kursor Dengan Kursor Animasi

Langsung kita praktekkan saja.
Pertama, seperti biasa masuk ke akun blogger anda.
Kedua, klik Layout >> Edit HTML.
Ketiga, cari kode ini :

Cara Menambah Form Berlangganan Email

Salah satu cara terbaik untuk menjaga pengunjung Anda datang kembali ke blog Anda, adalah dengan membiarkan pengunjung Anda tahu tentang update terbaru blog Anda dan membuat mereka merasa bahwa Anda memperbarui blog Anda secara teratur. Cara terbaik untuk melakukan ini adalah dengan menambahkan "Formulir Berlangganan Email" ke blog Anda, sehingga pelanggan Anda akan menerima konten yang baru dan posting di Inbox Email mereka. Sangat mudah untuk menambahkan email atau feed Formulir Berlangganan ke blog Anda blogger (blogspot).

 1. Anda harus sign in ke account feedburner Anda, jika Anda tidak punya atau belum memilikinya, anda dapat log in menggunakan account google Anda, atau Anda dapat mendaftarkan account Anda  (free) disini dan klik Create an Account.

Cara Membuat Kotak Komentar Blogspot Seperti Di Facebook

Exclusive, Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).

Ini adalah fitur yang paling ditunggu oleh pengguna blogger. Sekarang mari kita melakukannya, saya tahu bahwa  Anda pasti ingin mencoba menambahkannya ke blog blogger, tAnda akan melihat bagaimana cara menambahkan kotak tersebut dengan  mudah dan 100% berhasil. Tetapi harap berhati-hati dan memperhatikan semua rincian yang ada.

Langkah 1. Nonaktifkan Default Komentar.

Hal pertama yang harus Anda lakukan adalah menonaktifkan komentar default blogger  karena Anda tidak ingin memiliki 2 bentuk komentar.
Ke account blogger Anda, navigasikan ke Pengaturan>> Komentar>> pilih Sembunyikan, kemudian gulir ke bawah dan klik Simpan.

Cara Membuat Tombol Auto Social Bookmarking

.

Berikut langkah-langkah nya :

1. Login ke akun blogger anda
2. Layout >> Edit HTML
3. Cari kode berikut ini :

]]></b:skin>

Cara Menambah Tollbar Pada Blog

Saat ini tidak ada yang dapat menyangkal bahwa bookmark sosial dan berbagi adalah salah satu faktor yang paling penting untuk membuat blog Anda lebih populer dan lebih terlihat menarik untuk semua visitors. Saya yakin bahwa Anda ingin membuatnya lebih mudah bagi pengunjung Anda untuk berbagi. Kita akan berbicara tentang Toolbar Apture bagaimana untuk menambahkannya ke blogger (blogspot) blog.

Situs ini  adalah cara baru untuk memberikan informasi lebih lanjut kepada pembaca tanpa meninggalkan halaman. Pengunjung yang menggulir ke bawah pada blog Anda, bar ini akan muncul dengan beberapa fitur seperti :

• Berbagi tombol facebook dengan counter.
• Berbagi tombol dengan twitter dengan counter.
• Berbagi di email
• Cari kotak dengan jquery, dan ini berarti bahwa pengunjung tidak perlu meninggalkan halaman saat ia mencari konten lain.
• Bila pengunjung Anda dapat memilih bagian manapun dari teks posting Anda tombol kecil akan muncul
• Anda dapat menyesuaikannya dengan logo Anda sendiri.

Anda dapat menambahkannya dengan cara yang sangat mudah, silahkan kunjungi www.apture.com, isi :

• Alamat website Anda:
• Email Anda:
• Upload Logo atau  Judul
Anda dapat meng-upload logo blog Anda dari komputer Anda (jangan lupa klik upload), atau ketikkan judul blog Anda.
• Pilih warna Anda bar

Klik Get My Bar. Tunggu sampai selesai loading. Copy code tersebut.

Masuk ke account blogger Anda, navigasikan ke html Layout>> Edit HTML, lalu cari kode berikut :

</body>

Pastekan kode tadi sebelum kode diatas. 
Simpan template.
Lihat blog anda sekarang. 

Cara Mengganti Font Blogger Dengan Google Font

Google telah meluncurkan layanan baru mereka... font web Google dengan slogan - 'Membuat Web Indah!'. Layanan ini akan memungkinkan Anda untuk menggunakan font kustom pada direktori font google di blog kita / website tanpa sign-up atau apa pun. Karena dari 'Google', itu tidak memiliki komplikasi dan juga benar-benar bebas untuk penggunaan komersial dan swasta., tidak ada pembatasan.  Hal ini bisa membuat blog Anda terlihat lebih gaya dan berlaku untuk blog blogger juga. Jangan heran, saya akan menunjukkan cara untuk melakukannya dengan blogger.

1. Masuk ke akun blogger anda, dan jangan lupa backup template.
2. Buka Google Font Directory dan pilih salah satu model yang ingin anda pergunakan dalam blog.

3. Klik pada nama pilihan anda, maka jendela baru akan terbuka, lalu klik Get The Code. Disini saya contoh kan dengan model Cantarell.

4. Copy dan pastekan setelah kode :

<head>

 

Catatan :  Harap menambahkan slash Forward ("/") sebelum akhir dari (">") tag kode ini. Kode di atas harus seperti ini :

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

Simpan Template.

5. Sekarang langkah terakhir. Dalam langkah ini, Anda harus menentukan di mana Anda ingin menambahkan font dan harus menambahkan kode css untuk itu. Jika Anda ingin membuat font muncul untuk kalimat tertentu saja dalam posting blog Anda,  gunakan kode HTML ini :

<div style="font-family: 'Nama Font Anda', serif;">Jenis Text Anda</div>

Ganti tulisan berwarna hijau dan orange dengan pilihan anda.

Jika Anda ingin font muncul untuk Anda pada :

• Judul Blog
• Judul Post
• Isi Post
• Font di sidebar

cukup tambahkan kode : font - family: 'Nama Font Anda'

Contoh, bila anda ingin agar tampilan judul posting yang diganti : cari  

.post h3 atau .post-title h3

lalu tambahkan / memodifikasi baris-baris di bawah kode di atas, sehingga akan terlihat seperti ini :

.post h3 {
font-family: 'Nama Font Anda';
}

Posisi utama dan kode css umum untuk setiap posisi adalah sebagai berikut :

• Judul : h1
• Judul Post  : .post h3 or .post-title
• Isi Post  : .post-body
• Sidebar : .sidebar h2

Cara Pasang Tombol Like Seperti Di Facebook

Tombol Like atau Suka seperti di Facebook  akan memungkinkan pembaca Anda dengan cepat berbagi posting Anda dengan teman Facebook mereka. Anda juga dapat mengetahui berapa banyak orang yang menyukai posting blog anda. Lihat gambar.

  

Bagaimana membuat tombol itu di setiap posting anda ?

1. Login ke akun blogger anda, Dasboard > Edit HTML lalu ceklist “Expand Widget Templates”
2. Cari kode <data:post.body/> ( lihat gambar)  kemudian tempelkan kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></b:if>

Kode ini akan menampilkan tombol Suka hanya pada halaman Post. Jika Anda ingin menampilkan di setiap posting, hapus dua baris kode yang bertulisan  merah.

3. Simpan template.

Cara Menambah Fitur Reply Pada Kotak Komentar

Menambah fasilitas Reply pada Kotak Komentar adalah bertujuan untuk mempermudah dalam membalas setiap komentar di blog.

Cara Menambah Fitur Reply pada Kotak Komentar, sebagai berikut :

1.     Login dulu ke account Blogger Anda;

2.     Pilih Tata Letak, lalu perhatikan dulu pada Address Bar, disitu ada No. ID Blog Anda silahkan dicatat dan disimpan, karena ID tersebut nanti akan diperlukan, lihat contoh gambar di bawah:

3.     Klik Edit HTML => Download Template Lengkap untuk mengantisifasi kesalahan dalam pemasangan kode, lalu beri tanda centang pada Expan Template Widget;

4.     Cari kode ini :  

                             <dd class='comment-footer'>

       gunakan Ctrl F untuk mempermudah proses pencarian. Jika kode tersebut tidak ditemukan Anda bisa mencari kode alternatif seperti ini: 

<b:include data='comment' name='commentDeleteIcon'/>

5.     Tambahkan kode di bawah ini ke salah satu kode diatas. Berikut ini kodenya:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukan Blog ID Anda Disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='http://i977.photobucket.com/albums/ae258/SPN_photo/replay.gif'/></a>

6.     Masukan No. ID Blog Anda yang telah disimpan tadi di kalimat Masukan Blog ID Anda Disini;

7.     Simpan Template, selesai.
Sumber : blog serba tersedia

Cara Membuat Marquee Text / Text Animasi

Tutorial hari ini, saya ingin memaparkan bagaimana cara membuat text bergerak/berjalan dari kiri ke kanan, dari kanan ke kiri, dari bawah ke atas dan dari atas ke bawah. Untuk membuatnya, anda hanya perlu menambah  tag <marquee>. Ini disebut juga dengan efek marquee. Mari kita mulai dengan contoh sederhana. Tulis tulisan yang akan anda buat di antara tag <marquee> .. text anda.. </marquee>

Cara Posting File Flash SWF

Bagaimana meng-upload dan embed file Flash SWF ke dalam Blogspot ?

Langkah 1: Buat file SWF Flash dengan Adobe Flash Studio atau Flash Banner Maker, misalnya Aleo Flash Intro Banner Maker di http://www.aleosoft.com.

Langkah 2: Upload file Flash SWF ke web hosting, dan mendapatkan alamat URL dari file SWF Flash. Jika Anda tidak memiliki web host, Anda dapat meng-upload file flash anda ke Google Pages ( Gratis ).

Cara Membuat Tombol Google Buzz

Google Buzz adalah alat berbagi dari blogger mirip dengan twitter dan facebook. Anda dapat membaca lebih lanjut tentang Google Buzz resmi di Google Blog. Berikut cara memasang tombol  Buzz di blog Anda :
1. Login ke Account Blogger Anda dan arahkan ke Layout> Edit HTML dan Expand widget template.
2. Copy dan pastekan kode Google Buzz ini.  Jika Anda ingin menggunakan beberapa tombol Google Buzz, anda dapat  mengubah image link dalam kode [http://i48.tinypic.com/idyc04.png]

<div style="float:right;padding:4px;">
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>

3. Copy kode di atas dan pastekan setelah kode ini  :

<div class='post-header-line-1'/> 

4. Kalau anda tidak menemukan kode diatas coba cari yang ini :

<data:post.body/>

5. Simpan perubahan dan lihat hasilnya.