KrishnaVandanu

Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Untuk urusan SEO blog khususnya blogger, terkadang kita harus melakukan uji coba(eksperimen). Dari hasil uji coba pemilik blog <a href="http://blogseotest.blogspot.com/">Blog SEO Test</a> pemilik blog menulis tips memasang <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">meta tag deskripsi & keyword otomatis</a> buat SEO Blogger yg telah mereka terapkan untuk berbagi ilmu, pengalaman juga pengetahuan dengan teman-teman blogger agar blog kita semakin baik dalam peringkat search engine dan bisa bersaing (persaingan sehat) dgn blog/situs yg lebih dulu/lama melakukan blogging.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Tidak bisa dipungkiri, bahwa meta description atau meta keyword blog sangat penting untuk di pasang agar bisa memberikan penjelasan detil tentang misi, tujuan dan target dari blog kita kepada bot/crawler.</div> <div style="text-align: justify;"> Tetapi yg seringkali dilupakan adalah - bahwa meta deskripsi / kata kunci blog juga untuk membantu pengguna internet yg melakukan pencarian di mesin pencari agar mendapatkan penggalan informasi yg melengkapi sebuah judul posting blog lebih relevant, sehingga mereka akan melakukan klik untuk masuk dan melihat isi keseluruhan dari judul dan deskripsi(penjelasan) di search results.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Seringkali blogger hanya berfikir bagaimana cara blog berada pada posisi halaman pertama paling atas di mesin pencari, tapi sebenarnya tanpa didukung meta deskripsi yg relevan dan benar, itu tidak akan mengundang mereka (pengguna iternet) melakukan klik utk mengetahui sumber posting dari judul dan deskripsi yg di tampilkan search engine results.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Ok, mari kita pelajari lebih lanjut bagaimana meta description / keyword agar bekerja dgn baik pada blog. Berikut adalah contoh meta tags description/keyword yg sy gunakan pada awal membuat blog, pernah di posting <a href="http://blogseotest.blogspot.com/2012/02/cara-terbaik-memasang-meta-tag-blog-seo.html">cara terbaik memasang meta tag blogger SEO friendly</a>, di asumsikan, anda sudah tau & menggunakannya.</div> Kemudian kita tambahkan meta tags description / keyword menjadi seperti berikut : <blockquote class="tr_bq">     <b:include data='blog' name='all-head-content'/>      <b:if cond='data:blog.pageType == &quot;item&quot;'>     <title><data:blog.pageName/> | <data:blog.title/></title>     <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>     <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>     <b:else/>     <title><data:blog.pageTitle/></title>     <meta name='DESCRIPTION' content='DESKRIPSI UNTUK BLOG ANDA'/>     <meta name='KEYWORDS' content='KATA KUNCI/KEYWORD BLOG ANDA'/>     </b:if>  </blockquote> Maka hasilnya di search result seperti ini : Untuk halaman posting : <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfnPDJZy5-P8wPjHE2souMf6n4GIAwm1CW_Zhh5Co-gxY_B8R2m7XhHhczm6xNuvlSnBRyPrBPRHFj6kvG_tvhzBb1QlG6f_HuBgrklIgo60xEAKsS0YBLMJ9Vh3t9H2Db4g8z0d_unw/s1600/meta+6.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Deskripsi" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfnPDJZy5-P8wPjHE2souMf6n4GIAwm1CW_Zhh5Co-gxY_B8R2m7XhHhczm6xNuvlSnBRyPrBPRHFj6kvG_tvhzBb1QlG6f_HuBgrklIgo60xEAKsS0YBLMJ9Vh3t9H2Db4g8z0d_unw/s400/meta+6.jpg" title="Meta Tags Deskripsi" width="400" /></a></div> Untuk halaman Beranda / Home : <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMa71L1GdcvB4I27my9YyQxUeerJMi3ITQrYOI4xs_5doQO4z87L7plHl-fjyL5L2RCyiP2eJTtfpZQpPtI3sSrNiIIDrvQ4a5mLy-fYUcZMS1jsENBLXLZq1v7F0J2jzoXrRAsdJ3MAA/s1600/meta+5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Keyword Otomatis" border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMa71L1GdcvB4I27my9YyQxUeerJMi3ITQrYOI4xs_5doQO4z87L7plHl-fjyL5L2RCyiP2eJTtfpZQpPtI3sSrNiIIDrvQ4a5mLy-fYUcZMS1jsENBLXLZq1v7F0J2jzoXrRAsdJ3MAA/s400/meta+5.jpg" title="Meta Tags Keyword Otomatis" width="400" /></a></div> <div style="text-align: justify;"> Nah, saat meneliti hasil dgn meta tags di atas, agaknya kurang cocok/sesuai dengan yang kita inginkan. Karena berdasarkan optimasi SEO, hasil di atas kurang memberi deskripsi yang bisa melengkapi judul posting. Kecuali hanya menampilkan judul + nama blog diulang 2 kali. Dan hasilnyapun kurang bagus di posisi search engine juga kurang mengundang klik pengguna internet. Maka, penulis mencari alternativterbaik dgn menghilangkan meta deskripsi untuk halaman posting - <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>, kenapa begitu ? :</div> <div style="text-align: justify;"> Alasannya karena walaupun tanpa meta description, Blogger sudah menyediakan fasilitas otomatis mengambil deskripsi dari paragraf awal dan paragraf akhir dlm setiap posting artikel, kemudian megambil setiap keyword/kata kunci dari keseluruhan artikel berupa snippet yg kita beri tanda dgn sengaja (huruf tebal/huruf miring) atau bot/crawler sendiri yg akan menentukan apa adanya.</div> <div style="text-align: justify;"> Lalu, setelah penulis mencoba hilangkan meta deskripsi utk halaman posting tapi masih tetap mempertahankan meta keyword otomatis (kata kunci berbeda pada setiap posting, menyesuaikan dgn judul) - <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>, maka hasilnya seperti ini :</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0Kz0tU8UHzi8O2RXKMy-CUS7PNImrIaUHIiV6FBNXIfd3D5IMAkkel3Ulr-0zZxW0oZ64mFLIASClhIsBqfC7OMQolN_ab6v7eMg_RTQNLUeS34SD2YJrFdt7ohpBApCpx9FiuSixKE/s1600/meta+1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Deskripsi/Keyword Otomatis" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0Kz0tU8UHzi8O2RXKMy-CUS7PNImrIaUHIiV6FBNXIfd3D5IMAkkel3Ulr-0zZxW0oZ64mFLIASClhIsBqfC7OMQolN_ab6v7eMg_RTQNLUeS34SD2YJrFdt7ohpBApCpx9FiuSixKE/s400/meta+1.jpg" title="Meta Tags Deskripsi/Keyword Otomatis" width="400" /></a></div> <div style="text-align: justify;"> Silahkan lihat perbedaan judul dan deskripsi yg tertata rapi mulai dari kata pengantar > kategori > tags > judul, tentu SEO friendly (menurut penulis).</div> <div style="text-align: justify;"> Hasil di atas tentu saja perlu sentuhan kreatif saat proses menulis artikel pada awal paragraf dan ahkir paragraf supaya menampilkan deskripsi berkaitan dgn judul (relevant). Dan itu tergantung pada pilihan dan cara anda utk menyesuaikannya agar <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">meta tags deskripsi / keyword otomatis untuk seo blogger</a> bekerja secara sempurna. Semoga berguna, sukses!</div> Terima kasih kepada penulis artikel ini, Saudara: <div class="left"> <a href="https://google.com/+AgiefIkhsan" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"> <img alt="Author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7fy_cT0ec24a_8B3717LjIsQojy1IgAHeHyxHiLPTSQ_KA9BOWcLokDs229Ce-6-73B5-yfRGPe_pL5ZkHpXQbteEZDiGhypZV0IKXK5G9ebdxPXVn9zzoBy4ImJ7FfGxixwdmDH_hk/s200/Author.jpg" style="background-color: #101116; height: 85px; padding: 8px; width: 85px;" title="Penulis Blog SEO Test" /> </a> <h4> » Agief Ikhsan </h4> </div> <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™</a> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=dd963a8f-7bf1-4b4f-962d-55d627e4d9a6" style="border: none; float: right;" /></div> </div>

Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™

Untuk urusan SEO blog khususnya blogger, terkadang kita harus melakukan uji coba(eksperimen). Dari hasil uji coba pemilik blog Blog SEO Tes...

efek animasi loading halaman dengan css3 pada blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-header"> </div> <div dir="ltr" style="text-align: left;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s1600/animasi+loading+halaman+blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s400/animasi+loading+halaman+blogger.png" width="400" /></a></div> <div style="text-align: center;"> </div>  efek loading ini hanya dibuat dengan <a class="zem_slink" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="wikipedia" title="Cascading Style Sheets">CSS</a>, untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut: 1. Untuk menampilkan efek load diatas pada halaman Anda, letakkan kode berikut sebelum tag <code>]]></b:skin></code> dalam template blog anda <pre><code class="css">#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;} .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;} .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;} @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }} @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }} @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }} @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}</code></pre> 2. Masukkan kode di bawah ini sebelum kode tag <code></body></code> <pre><code class="xml"><div id='loadhalaman'> <div class='loadball'></div> <div class='loadball-2'></div> </div> <script type='text/javascript'> $(function() { var siteURL = "http://" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']"); $internalLinks.click(function() { $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank' $('#loadhalaman').click(function() { $(this).hide(); }); }); </script></code></pre> demikian semoga berguna dan bisa membuat blog anda lebih menarik....</div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=18d007e9-435b-4d21-a6a4-0b9c8507938e" style="border: none; float: right;" /></div> </div>

efek animasi loading halaman dengan css3 pada blogger

efek loading ini hanya dibuat dengan CSS , untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut: 1. Untu...

Meta Tag Generator

<div dir="ltr" style="text-align: left;" trbidi="on">   <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 300px;"> <tbody> <tr> <td height="16" width="16"><img height="16" src="http://images.devshed.com/sc/seotools/image_01.gif" width="16" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" height="16" width="130"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="130" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" height="16" width="118"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="150" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" width="40"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="40" /></td> <td height="16" width="18"><img height="16" src="http://images.devshed.com/sc/seotools/image_02.gif" width="16" /></td> </tr> <tr> <td background="http://images.devshed.com/sc/seotools/bckg07.gif" height="30"></td> <td bgcolor="#CCCCCC" class="toolbox" colspan="2" valign="top" width="*">Meta Tag Generator Tool © <a href="http://www.seochat.com/">SEO Chat™</a> <form action="http://www.seochat.com/seo-tools/meta-tag-generator?tool=3?tool=3&code=1/?tool=3" class="tool-form" method="POST" name="form"> <input name="go" type="hidden" value="1" /> <h5> Keywords</h5> List of relevant keywords<textarea cols="30" name="keywords" rows="5" tabindex="1">

Description

Short description of page

Enter Captcha To Continue

To prevent spamming, please enter in the numbers and letters in the box below

Report Problem with Tool.

Meta Tag Generator

Meta Tag Generator Tool © SEO Chat™ ...

Marquee Codes Images and Text

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> </div> Images and Text  <marquee behavior="scroll" direction="left"> <div style="text-align: center;"> <img alt="Flying bat in a marquee" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpdlS8VQvP093MGaWlqt-dTM14eXNUjeW4ttlLs7eD7h8nfB6dzG3LJ0GfBlIYgCVGjsnWDtUHdrjibjYwROBTHIGb1lj7-_2SyeZzDDj-Ntsc2fmstJTUhpFvsULPGCZVlZNqOJW_Gb_/s1600/flying_bat.gif" width="125" /> Bruce the Bat </div> </marquee> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.quackit.com/" style="margin-left: 1em; margin-right: 1em;"></a></div> There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so will make both scroll. <table border="0" cellspacing="0" class="example"> <tbody> <tr><th>Source Code</th><th>Result</th></tr> <tr><td><textarea class="exampleCode" cols="40" name="bodyText" onclick="this.focus();this.select()" rows="3"> <marquee behavior="scroll" direction="left"> <div style="text-align:center;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpdlS8VQvP093MGaWlqt-dTM14eXNUjeW4ttlLs7eD7h8nfB6dzG3LJ0GfBlIYgCVGjsnWDtUHdrjibjYwROBTHIGb1lj7-_2SyeZzDDj-Ntsc2fmstJTUhpFvsULPGCZVlZNqOJW_Gb_/s1600/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /> Bruce the Bat </div> </marquee>

Bruce the Bat

Marquee Codes Images and Text

Images and Text Bruce the Bat There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so wi...

Marquee Codes Images and Text

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"></div>Images and Text <marquee behavior="scroll" direction="left"><div style="text-align: center;"><img alt="Flying bat in a marquee" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpdlS8VQvP093MGaWlqt-dTM14eXNUjeW4ttlLs7eD7h8nfB6dzG3LJ0GfBlIYgCVGjsnWDtUHdrjibjYwROBTHIGb1lj7-_2SyeZzDDj-Ntsc2fmstJTUhpFvsULPGCZVlZNqOJW_Gb_/s1600/flying_bat.gif" width="125" /> Bruce the Bat </div></marquee> <div class="separator" style="clear: both; text-align: center;"><a href="http://www.quackit.com/" style="margin-left: 1em; margin-right: 1em;"></a></div>There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so will make both scroll. <table border="0" cellspacing="0" class="example"> <tbody><tr><th>Source Code</th><th>Result</th></tr><tr><td><textarea class="exampleCode" cols="40" name="bodyText" onclick="this.focus();this.select()" rows="3"><marquee behavior="scroll" direction="left"><div style="text-align:center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpdlS8VQvP093MGaWlqt-dTM14eXNUjeW4ttlLs7eD7h8nfB6dzG3LJ0GfBlIYgCVGjsnWDtUHdrjibjYwROBTHIGb1lj7-_2SyeZzDDj-Ntsc2fmstJTUhpFvsULPGCZVlZNqOJW_Gb_/s1600/flying_bat.gif" width="125" height="82" alt="Flying bat in a marquee" /> Bruce the Bat </div></marquee>

Bruce the Bat

Marquee Codes Images and Text

Images and Text Bruce the Bat There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so w...

Automatic Recent Posts Slider With jQuery For Blogger

Now save your template.

Step 3 -Adding The Gadget

Now go to Page Layout

Add a Gadget > HTML/JavaScript

Paste below piece of code and save it.

<div id="slider"><br /><script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script><br /><script style="text/javascript"><br /> var numposts_gal = 6;<br /> var numchars_gal = 150;<br /> var random_posts = false; // random posts<br /></script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div><br />

Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.

To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)

If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.

Good day....

By: http://www.helperblogger.com/

Automatic Recent Posts Slider With jQuery For Blogger

Now save your template. Step 3 -Adding The Gadget Now go to Page Layout Add a Gadget > HTML/JavaScript Paste below piece of code and save...

Automatic Recent Posts Slider With jQuery For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post hentry"><div class="separator" style="clear: both; text-align: center;"><a href="http://draft.blogger.com/blogger.g?blogID=2377571801251927013" name="8410303999780068786"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s1600/recent-content-image-slider-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s320/recent-content-image-slider-for-blogger.png" width="320" /></a></div><div class="post-body entry-content"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"> Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.If you are thinking that customization's will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don't need to add images,text or any links like other sliders all is Automatic :D.  Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider. <div style="text-align: center;">Live Demo ▼ </div> <div id="slider"><script src="http://code.helperblogger.com/easySlider.min.js"></script> <script> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script>  <script src="http://ajabingung.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div></div> <h3>How To Add This Slider To Blogger?</h3> <h4>Step 1 - Applying Styles</h4> <ol style="text-align: left;"><li>Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)</li><li>As always download a copy of your template first.</li><li>Now find for ]]></b:skin></li><li>Add below code just before ]]></b:skin></li></ol></div> <pre><code>/* START EasySlider By helperblogger.com */ #slide-container { height: 360px; position: relative; width: 480px; } #slider { height: 360px; left: 25px; overflow-x: hidden; overflow-y: hidden; position: relative; width: 480px; font-family: calibri; } .slide-desc { background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0; color: #FFFFFF; padding: 10px; position: absolute; right: 0px; text-align: left; top: 0; width: 200px; z-index: 99999; } .slide-desc h2 { display: block; } .crosscol .widget-content { position: relative; } #slider ul, #slider li, #slider2 ul, #slider2 li { margin: 0; padding: 0; list-style: none; } #slider2 { margin-top: 1em; } #slider li, #slider2 li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width: 480px; height: 360px; overflow: hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; width: 30px; height: 77px; position: absolute; left: -30px; text-indent: -9999px; top: 71px; z-index: 1000; } #nextBtn, #slider1next { left: 520px !important; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; height: 77px; left: 0; position: absolute; top: 132px; width: 30px; z-index: 1000; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display: block; position: relative; width: 30px; height: 77px; background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0; } #nextBtn a, #slider1next a { background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0; } /* numeric controls */ ol#controls { margin: 1em 0; padding: 0; height: 28px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; } ol#controls li a { float: left; height: 28px; line-height: 28px; border: 1px solid #ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; } ol#controls li.current a { background: #5DC9E1; color: #fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; } /* END EasySlider By helperblogger.com */ </code></pre> You can edit above CSS values as you wish.You may use our <a href="http://editor-btsnts.blogspot.com/" target="_blank">HTML Editor</a> to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor) <h4>Step 2 - Adding JavaScript</h4> <ul style="text-align: left;"><li>Now find for </body> tag</li><li>Add below code just after/below </body> tag.</li></ul></div> <pre><code> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); //]]> </script>  </code></pre> Now save your template. <h4>Adding The Gadget</h4><ul style="text-align: left;"><li>Now go to Page Layout</li><li>Add a Gadget > HTML/JavaScript</li><li>Paste below piece of code and save it.</li></ul> <pre><code><div id="slider"> <script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script>  <script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div> </code></pre> <ul style="text-align: left;"><li>Now replace <code>yourblog.blogspot.com</code> with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.</li></ul> <ul style="text-align: left;"><li>To change number of post find this <code>var numposts_gal = 6;</code> line in above code. (Code Line - 4)</li></ul> <ul style="text-align: left;"><li>If you want to change number of characters to show in description find this piece of code <code>var numchars_gal = 150;</code> (Code Line - 5)</li></ul><div>Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div><div> </div><blockquote class="tr_bq">Follow this <a href="http://www.helperblogger.com/2012/03/how-to-displayhide-blogger-widgets-on.html" target="_blank">tutorial</a> to show this gadget only on specific page or only in homepage.</blockquote><div> </div><div>Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.</div><div>Good day....</div></div>By: http://www.helperblogger.com/ <div style="clear: both;"></div></div><div class="post-footer"><div class="post-footer-line post-footer-line-1"></div><div class="post-footer-line post-footer-line-2"></div><div class="post-footer-line post-footer-line-3"></div></div></div></div>

Automatic Recent Posts Slider With jQuery For Blogger

Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpres...

What can I do with CSS?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="answer_heading"> <h2 class="answer-title"> </h2> </div> <div class="article_content article-content-41954" id="article-content-div"> You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see <a href="http://www.w3schools.com/css/css_examples.asp">W3 Schools CSS Examples</a> and <a href="http://www.w3.org/MarkUp/Guide/Style">The W3C Introduction to CSS</a>. Our default templates have all the CSS information towards the top, between <code><style></style></code> tags. You'll see a bunch of lines there that look like this: <img height="71" src="http://storage.googleapis.com/support-kms-prod/SNP_3031217_en_v0" width="409" /> The highlighted line shows the style that is applied to every <code><h3></code> tag in your blog. What we're going to describe here are some options for how to style it. Any of the pieces of code below can be inserted between the { curly brackets } in the style sheet. <table class="nice-table wide no-stripes"> <tbody> <tr> <th>Code</th> <th>Examples</th> </tr> <tr> <td colspan="2">Colors</td> </tr> <tr> <td><code>color:blue;</code></td> <td>This text is blue.</td> </tr> <tr> <td><code>background:yellow;</code></td> <td>This has a yellow background.</td> </tr> <tr> <td colspan="2">You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a greater range of colors (e.g. #0033AA). For more information on color, please see the <a href="http://www.webreference.com/html/reference/color/">Web Color Reference</a>.</td> </tr> <tr> <td>colspan="2">Borders</td> </tr> <tr> <td><code>border:solid 1px red;</code></td> <td><div style="border: solid 1px red;"> This has a red border.</div> </td> </tr> <tr> <td colspan="2">A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, border-bottom, border-right, or border-left.</td> </tr> <tr> <td colspan="2">Fonts</td> </tr> <tr> <td><code>font-family:"Times New Roman",Serif;</code></td> <td>This is in a serif font.</td> </tr> <tr> <td><code>font-family:Verdana,Sans-Serif;</code></td> <td>This is in a sans-serif font.</td> </tr> <tr> <td colspan="2">You can specify a list of font choices. If the first one isn't available on your reader's computer, the next will be used, and so on. Indicating "Serif" will use any available serif font.</td> </tr> <tr> <td><code>font-size:24px;</code></td> <td>This text is 24 pixels high.</td> </tr> <tr> <td colspan="2">The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).</td> </tr> <tr> <td><code>font-weight:bold;</code></td> <td>This text is bold.</td> </tr> <tr> <td colspan="2">Choices are bold and normal.</td> </tr> <tr> <td><code>text-decoration:underline;</code></td> <td>This text is underlined.</td> </tr> <tr> <td colspan="2">The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links.</td> </tr> <tr> <td><code>text-align:right;</code></td> <td><div style="text-align: right;"> This text is right aligned.</div> </td> </tr> <tr> <td colspan="2">The alignment can be set to left, right, or justify.</td> </tr> <tr> <td colspan="3">Margins and Padding</td> </tr> <tr> <td><code>margin:15px;</code></td> <td><div style="border: solid 1px gray; margin: 15px;"> This has a 15px margin all around.</div> </td> </tr> <tr> <td><code>padding:15px;</code></td> <td><div style="border: solid 1px gray; padding: 15px;"> This has 15px of padding all around.</div> </td> </tr> <tr> <td colspan="2">Margin and padding both specify the amount of space around something. The difference is that a margin is outside the border and padding is inside. (The border here is just for illustration.) As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with <code>margin:1px 2px 3px 4px;</code> where the order is top, right, bottom, left.</td> </tr> </tbody> </table> Notes: You can also use inline styles, if you want to do one-time formatting for a specific piece of text in a post. Here is the format to use: <code></code>This text will be red.<code></code></div> <div class="last-updated"> updated 03/08/2013 </div> <a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=41954#" name="helpful"></a> <div class="answer-features nocontent"> <div class="rating-parent unsent slider-parent" id="rating-parent"> Rate this article: <form class="rating-details"> What could be better? (Optional) <div class="feedback-checkbox-container"> <label class="feedback-checkbox"> Not related to my issue </label><label class="feedback-checkbox"> Incomplete information </label><label class="feedback-checkbox"> Too much information </label><label class="feedback-checkbox"> Too complicated </label><label class="feedback-checkbox"> Incorrect information </label><label class="feedback-checkbox"> Unclear information </label></div> </form> Feedback recorded. Thanks! </div> <div class="button plus-one"> </div> </div> <div class="survey-invite-green "> <a href="http://support.google.com/blogger/bin/request.py?contact_type=survey&v=1" id="surveyLink" target="_blank">Tell us how we're doing - Answer five short questions about your help center experience</a> </div> <div class="zemanta-pixie"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div> </div>

What can I do with CSS?

You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common th...

What can I do with CSS?

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="answer_heading"><h2 class="answer-title"></h2></div><div class="article_content article-content-41954" id="article-content-div">You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see <a href="http://www.w3schools.com/css/css_examples.asp">W3 Schools CSS Examples</a> and <a href="http://www.w3.org/MarkUp/Guide/Style">The W3C Introduction to CSS</a>. Our default templates have all the CSS information towards the top, between <code><style></style></code> tags. You'll see a bunch of lines there that look like this: <img height="71" src="http://storage.googleapis.com/support-kms-prod/SNP_3031217_en_v0" width="409" />The highlighted line shows the style that is applied to every <code><h3></code> tag in your blog. What we're going to describe here are some options for how to style it. Any of the pieces of code below can be inserted between the { curly brackets } in the style sheet. <table class="nice-table wide no-stripes"><tbody><tr><th>Code</th><th>Examples</th></tr><tr><td colspan="2">Colors</td></tr><tr><td><code>color:blue;</code></td><td>This text is blue.</td></tr><tr><td><code>background:yellow;</code></td><td>This has a yellow background.</td></tr><tr><td colspan="2">You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a greater range of colors (e.g. #0033AA). For more information on color, please see the <a href="http://www.webreference.com/html/reference/color/">Web Color Reference</a>.</td></tr><tr><td>colspan="2">Borders</td></tr><tr><td><code>border:solid 1px red;</code></td><td><div style="border: solid 1px red;">This has a red border.</div></td></tr><tr><td colspan="2">A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, border-bottom, border-right, or border-left.</td></tr><tr><td colspan="2">Fonts</td></tr><tr><td><code>font-family:"Times New Roman",Serif;</code></td><td>This is in a serif font.</td></tr><tr><td><code>font-family:Verdana,Sans-Serif;</code></td><td>This is in a sans-serif font.</td></tr><tr><td colspan="2">You can specify a list of font choices. If the first one isn't available on your reader's computer, the next will be used, and so on. Indicating "Serif" will use any available serif font.</td></tr><tr><td><code>font-size:24px;</code></td><td>This text is 24 pixels high.</td></tr><tr><td colspan="2">The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).</td></tr><tr><td><code>font-weight:bold;</code></td><td>This text is bold.</td></tr><tr><td colspan="2">Choices are bold and normal.</td></tr><tr><td><code>text-decoration:underline;</code></td><td>This text is underlined.</td></tr><tr><td colspan="2">The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links.</td></tr><tr><td><code>text-align:right;</code></td><td><div style="text-align: right;">This text is right aligned.</div></td></tr><tr><td colspan="2">The alignment can be set to left, right, or justify.</td></tr><tr><td colspan="3">Margins and Padding</td></tr><tr><td><code>margin:15px;</code></td><td><div style="border: solid 1px gray; margin: 15px;">This has a 15px margin all around.</div></td></tr><tr><td><code>padding:15px;</code></td><td><div style="border: solid 1px gray; padding: 15px;">This has 15px of padding all around.</div></td></tr><tr><td colspan="2">Margin and padding both specify the amount of space around something. The difference is that a margin is outside the border and padding is inside. (The border here is just for illustration.) As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with <code>margin:1px 2px 3px 4px;</code> where the order is top, right, bottom, left.</td></tr></tbody></table> Notes: You can also use inline styles, if you want to do one-time formatting for a specific piece of text in a post. Here is the format to use: <code></code>This text will be red.<code></code></div><div class="last-updated">updated 03/08/2013 </div><a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=41954#" name="helpful"></a> <div class="answer-features nocontent"><div class="rating-parent unsent slider-parent" id="rating-parent">Rate this article: <form class="rating-details">What could be better? (Optional) <div class="feedback-checkbox-container"><label class="feedback-checkbox"> Not related to my issue </label><label class="feedback-checkbox"> Incomplete information </label><label class="feedback-checkbox"> Too much information </label><label class="feedback-checkbox"> Too complicated </label><label class="feedback-checkbox"> Incorrect information </label><label class="feedback-checkbox"> Unclear information </label></div></form>Feedback recorded. Thanks! </div><div class="button plus-one"></div></div><div class="survey-invite-green "><a href="http://support.google.com/blogger/bin/request.py?contact_type=survey&v=1" id="surveyLink" target="_blank">Tell us how we're doing - Answer five short questions about your help center experience</a></div><div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

What can I do with CSS?

You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common ...

Edit CSS in the Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="answer_heading"> <h2 class="answer-title"> </h2> </div> <div class="article_content article-content-175740" id="article-content-div"> Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style sheets (CSS). To add custom CSS snippets to your template, go to the Template <a class="zem_slink" href="http://en.wikipedia.org/wiki/Tab_key" rel="wikipedia nofollow" target="_blank" title="Tab key">tab</a> and click <a class="zem_slink" href="http://www.tumblr.com/customize" rel="homepage nofollow" target="_blank" title="Customize">Customize</a>. Then, add your code to the field located in the Advanced | Add CSS tab. Changes you make will reflect instantly in a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Live_preview" rel="wikipedia nofollow" target="_blank" title="Live preview">live preview</a> beneath the editor. <img height="228" src="http://storage.googleapis.com/support-kms-prod/SNP_2907889_en_v0" width="550" /> Note: Editing CSS allows you to change the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Look_and_feel" rel="wikipedia nofollow" target="_blank" title="Look and feel">look and feel</a> of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, click Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia nofollow" target="_blank" title="HTML">HTML</a> on the Template tab. Also remember that, like other customizations, your CSS will be removed if you change designs. For a comprehensive list of various CSS tweaks, please see the <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41954">What can I do with CSS</a> article in our Help Center.</div> <div class="last-updated"> updated 02/15/2013 </div> <div class="zemanta-pixie"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div> </div>

Edit CSS in the Template Designer

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style s...

Edit CSS in the Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="answer_heading"><h2 class="answer-title"> </h2></div><div class="article_content article-content-175740" id="article-content-div">Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style sheets (CSS). To add custom CSS snippets to your template, go to the Template <a class="zem_slink" href="http://en.wikipedia.org/wiki/Tab_key" rel="wikipedia nofollow" target="_blank" title="Tab key">tab</a> and click <a class="zem_slink" href="http://www.tumblr.com/customize" rel="homepage nofollow" target="_blank" title="Customize">Customize</a>. Then, add your code to the field located in the Advanced | Add CSS tab. Changes you make will reflect instantly in a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Live_preview" rel="wikipedia nofollow" target="_blank" title="Live preview">live preview</a> beneath the editor. <img height="228" src="http://storage.googleapis.com/support-kms-prod/SNP_2907889_en_v0" width="550" />Note: Editing CSS allows you to change the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Look_and_feel" rel="wikipedia nofollow" target="_blank" title="Look and feel">look and feel</a> of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, click Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia nofollow" target="_blank" title="HTML">HTML</a> on the Template tab. Also remember that, like other customizations, your CSS will be removed if you change designs. For a comprehensive list of various CSS tweaks, please see the <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41954">What can I do with CSS</a> article in our Help Center.</div><div class="last-updated">updated 02/15/2013 </div><div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

Edit CSS in the Template Designer

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style ...