Showing posts with label Blogspot. Show all posts
Showing posts with label Blogspot. Show all posts

Friday, July 4, 2014

Video hướng dẫn trỏ tên miền về blogspot

0 comments
Hướng dẫn trỏ tên miền về blogspot



Bước 1: Đăng nhập sẵn blogspot muốn trỏ về.



Bước 2: Đăng nhập sẵn cấu hình tên miền ở đây mình dùng PA VIỆT NAM



Bước 3: tên miền đăng ký ở nhà mạng khác thực hiện tương tự



===

video hướng dẫn trỏ tên miền về blogspot



tên miền của mình là trungtamlaodong. vn
bây giờ mình sẽ trỏ tên miền này về

blog mang tên http://xuatkhaunhatban.blogspot.com/



Chọn cài đặt  >> cơ bản >>  thêm tên miền tuỳ chỉnh


nhớ thêm www vào trước tên miền của bạn như thế này xong các bạn chuyển sang tab quản lý tên miền của pa



các bạn điền như trong video của mình



Bấm lưu cả 2 nơi nhé

oke đã kết nối thành công rồi nhé, cập nhật rất nhanh. Chúc các bạn thành công
video hướng dẫn trỏ tên miền về blogspot


Hướng dẫn tối ưu SEO cho blogspot

0 comments
Chắc chắn rằng, tối ưu SEO là 1 việc không thể thiếu đối với các Blogger coi SEO như là phương tiện chính để phát triển. Không giống với WordPress khi việc tối ưu SEO được sự giúp đỡ rất nhiều từ các plugin, thì tối ưu SEO cho Blogspot hoàn toàn dựa vào bạn.

Tối ưu Search Preferences

Việc đầu tiên và cũng là việc đơn giản nhất đó chính là chỉnh sửa Search Preferences trong menu Setting của Blogspot. Đây là mục mà Blogspot cung cấp sẵn cho bạn nhằm giúp những người mới làm blog có thể tối ưu trang web sao cho thân thiện với các bộ máy tìm kiếm.
toi-uu-seo-blogspot-2
Meta tags: Ở mục Meta Tags, các bạn thêm Description – Mô tả cho trang web. Mặc định thì nếu bạn chưa thêm Description cho trang web ở đây thì mục Mô tả khi post bài cũng sẽ được ẩn đi. Vì vậy mặc dù bạn có thể thêm Description trực tiếp vào Template nhưng việc này là hoàn toàn cần thiết.
Errors and redirections: 
  • Custom Page Not Found: Khi độc giả truy cập vào 1 đường link sai hoặc không tồn tại thì sẽ hiện lên thông báo 404, tuy nhiên để việc điều hướng visit được tốt thì bạn nên thêm Page Not Found của riêng bạn. Nếu Template của bạn đã có 404 Page sẵn rồi thì bạn có thể bỏ qua công đoạn này, để kiểm tra xem Template của bạn đã có chưa, bạn có thể đánh bừa 1 đường link đến blog của bạn. Nếu đã có, bạn có thể chỉnh sửa trực tiếp trong Template.
  • Custom Redirects: Đây là mục khi bạn muốn trỏ 1 đường link trên blog của mình đến 1 đường link khác cũng nằm trên trang của bạn. Để thêm Redirect, bạn nhấn vào New Redirect.
Crawlers and indexing:
Đây là danh mục giúp bạn tối ưu blog thân thiện hơn với Search Engine.
Custom robots.txt: Việc chỉnh sửa file robot.txt giúp bạn thông báo cho bot của bộ máy tìm kiếm sẽ index trang nào và trang nào mà bạn không muốn index. Bạn thêm code sau vào robot.txt:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search?updated-min=
Disallow: /search?updated-max=
Disallow: /search/label/*?updated-min=
Disallow: /search/label/*?updated-max=
Allow: /
Sitemap: http://www.domain.com/feeds/posts/default?orderby=updated
Code trên có thể giúp bạn chặn index Search và Archive, nguyên nhân chính khiến cho blog bị Search Engine gán cho mác ‘Duplicate Content’.
Custom robots header tags: Danh mục này giúp làm đẹp hơn kết quả tìm kiếm trên SE, bạn có thể điều chỉnh theo ý của bạn hoặc làm giống như hình dưới:
toi-uu-seo-blogspot-1
Ở hình trên, việc cài đặt Custom robots header tags giúp cho bạn không cho Google lấy kết quả tìm kiếm từ các danh bạ web cho blog của bạn bằng việc đánh dấu vào Noodp. Bên cạnh đó bạn cũng chặn không cho Google index Search và Archive Page, giống với việc cài đặt file robot.txt như bên trên.

Tối ưu SEO cho Template

Việc tối ưu như bên trên có thể nói là đã thành công tới 70% rồi. Tuy nhiên, Blogspot coi những chỉnh sửa trong Template lớn hơn những chỉnh sửa trong Search Preferences. Bằng chứng là nếu 2 Description trong Template và Search Preferences khác nhau thì Blogspot sẽ lấy trong Template. Hơn nữa việc điều chỉnh Mô tả trong Template có thể giúp bạn viết được nhiều hơn.
Các bạn có thể chỉnh sửa bằng cách vào Template -> Edit HTML và tìm đến thẻ <Head>, xóa tất cả các thẻ Meta Tags sau nó bao gồm cả
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<b:include data='blog' name='all-head-content'/>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <title>
 <meta content='Tên của bạn' name='Author' rel='author'/>
 <data:blog.title/>
 </title>
 <b:else/>
 <title>
 <data:blog.pageName/>
 |
 <data:blog.title/>
 </title>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <meta content='index,follow' name='robots'/>
 <b:else/>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <meta content='index,follow' name='robots'/>
 <meta content='Mô tả của blog bạn' name='description'/>
 <meta content='Từ khóa chính của blog bạn' name='keywords'/>
 <meta content='Tên của bạn' name='Author' rel='author'/>
 <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
 <b:else/>
 <meta content='noindex,follow' name='robots'/>
 </b:if>
 </b:if>
<pre>
Ở đoạn code trên, bạn thay Description bằng Mô tả cho blog của bạn, Mô tả của bạn nên ngắn gọn, từ 120 đến 160 ký tự, không nên spam từ khóa vào Description. Bạn thay Keyword bằng những từ khóa cho blog của bạn, các từ khóa ngăn cách nhau bởi dấu phẩy. Bạn thay Author bằng tên tác giả cho blog của bạn, đây là tên sẽ hiển thị khi bạn đem share link lên các mạng xã hội, forum có hỗ trợ Embed.
Một lưu ý đó là, với thẻ <meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>, đây là thẻ Tag meta viewport giúp thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay. Nếu Template của bạn không có giao diện Responsive thì việc chỉ thêm thẻ Tag này cũng không thể tạo nên được 1 giao diện Responsive hoàn chỉnh, tuy nhiên để đề phòng việc bạn đã xóa hết các thẻ Meta như mình nói ở trên có thể làm hỏng giao diện Responsive mặc định của Template bạn  ( Cách thiết kế Template Responsive mình sẽ đề cập ở những bài viết nâng cao sau, ta nên đi dần đần  )
Xong, ấn Save Template để lưu lại những gì bạn vừa chỉnh sửa.

Tối ưu SEO khi viết bài

Với 2 bước bên trên thì bạn đã hoàn thành việc tối ưu SEO cho blog, tuy nhiên việc post bài thân thiện hơn với bộ máy tìm kiếm là rất quan trọng. Một số lưu ý sau đây có thể giúp bạn làm được điều đó:
Heading Tags
toi-uu-seo-blogspot-3
Thẻ Heading là rất quan trọng, nó giúp Search Engine nhận ra trọng tâm SEO mà bạn đang hướng tới. Một trang chỉ nên có 1 thẻ H1, đó nên là tiêu đề của blog. Thẻ H2 có thể có nhiều hơn, bạn có thể gán thẻ này cho tiêu đề của bài viết. Thẻ H3 bạn có thể đặt cho các danh mục trong bài viết. Tương tự với các thẻ còn lại từ H4 đến H6. Để thêm thẻ Heading, bạn bôi đen từ khóa và chọn như khung bên dưới, trong đó Heading là thẻ H2, Subheading là thẻ H3, Minor Heading là thẻ H4, những thẻ khác bạn có thể chèn trực tiếp qua HTML bằng câu lệnh: <h2>Nội dung</h2>
Alt và Title của ảnh
toi-uu-seo-blogspot-4
Alt Tag giống như là Anchor Text cho link vậy (nếu hình ảnh của bạn có sở hữu liên kết), Title là dòng chữ hiện lên khi bạn rê chuột vào hình ảnh. Việc thêm 2 thẻ này là rất quan trọng nếu như bạn chú ý đến SEO Hình ảnh. Để thêm 2 Tag này vào hình ảnh, bạn dùng chuột trái click vào hình ảnh, khi xuất hiện menu trên hoặc dưới hình ảnh, bạn chọn Properties, sau đó thêm thủ công trong khung mới hiện lên.
Label
toi-uu-seo-blogspot-5
Label trong Blogspot sở hữu cả 2 đặc điểm của Tag và Category trong WordPress. Thêm Label giúp bạn phân loại bài viết, điều hướng visit thông qua Related Post gadget. Click vào Label và thêm 1 hoặc nhiều nhãn.
Description
toi-uu-seo-blogspot-6
Tab Description sẽ bị ẩn đi nếu như bạn không thêm Description trong Search Preferences, nếu không có bạn có thể thêm như bên trên. Description trong bài viết của bạn nên từ 120-160 ký tự và đừng quên, đừng spam từ khóa!! Nếu Description không được thêm, Google sẽ tự động hiển thị Description theo từ khóa mà người dùng search.

Location
Với nhiều SEOer quan tâm đến SEO địa điểm thì việc thêm Location là 1 thứ khá là quan trọng, việc hiển thị trên Google sẽ đẹp hơn khá nhiều. Tuy nhiên nếu bạn không quan tâm đến SEO địa điểm thì chẳng việc gì để ý đến cái này cả.
Xong, mình nghĩ đã hết những lưu ý cho SEO bài viết blogspot rồi 

Theo Thachpham

Hướng dẫn thêm domain vào Blogspot

0 comments
Một trong những lợi thế của Blogspot đó chính là bạn có thể thêm domain của bạn vào blog thay vì domain mặc định dạng: abc.blogspot.com. Trong bài viết này mình sẽ hướng dẫn các bạn làm điều đó một cách nhanh và gọn nhất 

Thêm Domain vào Blogspot

Để add custom domain vào blog, các bạn chuyển đến tab Setting > Basic. Trong phần Publishing, chọn + Setup a 3rd party URL for your blog, sau đó bạn add tên miền vào sau http:// như hình dưới:
them-domain-vao-blogspot-1
Lưu ý đó là tên miền mà bạn thêm vào phải ở dạng sub domain, ví dụ www.manualgame.com hoặc blog.manualgame.com như hình trên chứ bạn không được quyền thêm root domain vào blog như WordPress.
Sau khi chọn Save, bạn sẽ nhận được thông báo như sau:
them-domain-vao-blogspot-2
Đừng lo lắng, việc thông báo kia xuất hiện là do bạn chưa chứng thực quyền sở hữu domain của mình nên không thể trỏ tên miền về blog.
Để verify quyền sở hữu domain với Blogspot, bạn đăng nhập vào trang quản trị domain và thêm 2 record xuất hiện trong thông báo như trên của bạn.
Ví dụ như trong trường hợp trên, Blogspot cung cấp cho mình 2 record để verify, mình sẽ tiến hành thêm 2 record này vào domain dưới dạng CNAME:
wwwghs.google.com
jlnvap6umoozgv-r7au24s4qu42rf.dv.googlehosted.com
Bạn lưu ý là với mỗi domain khác nhau thì record trên sẽ khác nhau nên các bạn không thể thêm record trên để verify cho domain của bạn.
them-domain-vao-blogspot-3
Bên trên là khi mình đã thêm xong các giá trị CNAME để xác nhận quyền sở hữu với Blogspot. Bạn chờ khoảng 1-3 phút để việc cập nhập domain được Blogspot ghi nhận.
Quay trở lại giao diện Basic Setting của Blogspot, các bạn chọn Save như bên trên, nếu quá trình xác nhận chính xác, bạn sẽ thấy kết quả như hình nhu hình dưới:
them-domain-vao-blogspot-4

Trỏ Root domain về blog

Nếu blog của bạn không phải là site vệ tinh, tức là blog bạn vừa add custom domain là blog chính thì việc trỏ root domain về blog là thực sự cần thiết vì nó có ảnh hưởng đến SEO. Vì nếu root domain và sub domain không đồng nhất thì khi độc giả truy cập đến blog bằng root domain thì sẽ hiện ra thông báo 404.
Các bạn chọn Edit, sau đó tick vào ô Redirect … to www…
them-domain-vao-blogspot-5
Vậy là việc thêm domain vào Blogspot đã hoàn thành rồi

Theo Thachpham

5 cách tăng tốc cho Blogspot tốt nhất hiện nay

0 comments
Không giống với WordPress có thể sử dụng các plugin để tăng tốc cho blog. Với Blogspot, việc tăng tốc blog trên thực tế dựa nhiều vào mẹo hay thủ thuật nhiều hơn. Trong bài viết này, mình sẽ hướng dẫn các bạn cải thiện tốc load trang của Blogspot bằng nhiều cách khác nhau.
Nào, hãy cùng dùng dầu ăn “bôi trơn” cho blog nào. 

1. Rút gọn CSS

Việc hoạt động lâu ngày có thể dẫn tới việc mã CSS của Template dài vô tận, tưởng như không bao giờ hết, điều này có thể làm cho tốc độ tải trang của blog chậm đi đôi chút. Để nén CSS, các bạn vào Template > Edit HTML. Tìm đến thẻ <b:skin> và copy toàn bộ CSS cho đến trước thẻ đóng </b:skin>. Truy cập vào địa chỉ này: http://www.csscompressor.com/ để nén CSS rồi replace cho phần CSS cũ của blog.

2. Tối ưu hình ảnh

Việc lấy hình ảnh từ các trang web khác rồi đặt lên blog của mình sẽ làm chậm tốc độ tải hình ảnh của blog vì việc tải hình ảnh lúc này phụ thuộc vào tốc độ của host chứa hình ảnh mà bạn lấy. Vì vậy lời khuyên của mình là bạn cứ nên upload trực tiếp hình ảnh lên blog, việc này sẽ cải thiện được đôi chút tốc độ.

3. Tối ưu Javascript

Việc chèn nhiều script vào blog là điều không nên vì điều đó sẽ làm cho tốc độ của blog chậm đi đáng kể. Để cải thiện tốc độ bạn có thể tối ưu các script qua các cách sau:
Chèn trực tiếp script vào template bằng thẻ sau:
1
2
3
<script type='text/javascript'>//<![CDATA[
code
//]]></script>
Việc chèn script thẳng vào template thay vì Layout sẽ làm tốc độ tải trang được nhanh hơn, tuy nhiên việc này sẽ làm template dài hơn và điều này thì không có lợi cho SEO. Chính vì thế, bạn nên chèn script càng xuống phía dưới, càng gần thẻ </body> càng tốt và lời khuyên của mình vẫn cứ là sử dụng càng ít script thì càng nhanh 
Các script không nhất thiết phải xuất hiện ở toàn bộ các trang, vì vậy bạn nên tính toán xem nó nên xuất hiện ở những trang nào. Việc tùy chỉnh vị trí xuất hiện của các script mình sẽ nói chi tiết ở những bài sau, tuy nhiền có 2 thẻ có thể giúp bạn cơ bản trong việc này:
Chỉ hiện thị script tại trang chủ:
1
2
3
<b:if cond='data:blog.url == data:blog.homepageUrl'>
DATA
</b:if>
Chỉ hiện thị script tại trang bài viết:
1
2
3
<b:if cond='data:blog.pageType == &quot;item&quot;'>
DATA
</b:if>

4. Sử dụng Jump Break mặc định thay vì Auto Read More

Nếu như Insert Jump Break mặc định của Blogspot thực sự thu gọn bài viết thì Auto Read More của các Template chỉ làm ẩn đi một phần bài viết. Vì vậy nếu bạn không sử dụng Jump Break thì trang chủ hay các trang search, archive của bạn sẽ vẫn load tất cả nội dung của các bài viết, điều này thực sự sẽ làm chậm blog của bạn đi rất là nhiều!! Chính vì thế Insert Jump Break vào mỗi bài viết là điều thực sự cần thiết 

5. Tăng tốc blog bằng Cloudflare hoặc Incapsula

Cả 2 dịch vụ Cloudflare và Incapsula đều có thể hỗ trợ tăng tốc website tuyệt đối với tính năng lưu cache các file tĩnh và tính năng tích hợp CDN. Blog của bạn sẽ thực sự được chạy với 1 tốc độ không tưởng so với trước khi sử dụng. Tuy nhiên việc Cloudflare có thể mang lại những lỗi DNS không mong muốn dẫn đến việc không thể truy cập blog. Vì vậy Incapsula có vẻ như là thích hợp để sử dụng nhất!

Theo Thachpham

Tuesday, May 21, 2013

Simple YouTube Subscribe Widget For Website And Blog

0 comments
Placing a Youtube Channel Subscribe widget on your website or blog to increase your subscriber is a good idea. To add this simply just embed the following code below into the html of your website or blog, in the same way you embed a YouTube video or anything:

Code


<iframe src=http://www.youtube.com/subscribe_widget?p=EXEIdeas style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

How To Add In Blogspot?
  1. Go To Your www.blogger.com
  2. Open Your Desire Blog.
  3. Go To Layout.
  4. Click "Add A Gadget" Where You Want To Add It.
  5. Now Scroll To "HTML-JAVASCRIPT"
  6. Click "+" Icon To Add It.
  7. Now Copy And Paste The Code There
  8. Leave The Title Empty.
  9. Click Save
  10. You Are Done.
How To Add In Website?
  1. Open Your HTML File.
  2. Copy And Paste The Code Anywhere Between <body> </body>.
  3. Save It
  4. You Are Done. 
Just Replace EXEIdeas In the Code With Your Youtube Channel Name



Here Is The Sample Image

Simple Page Navigation Widget For Blogger

0 comments
Blogger Page Navigation Bar Widget
This is a simple page navigation bar widget for blogger which help peoples to navigate easily through out your blog and it also did not contain any back link to publisher, The screen shoot is given below to check before proceed.
Blogger Page Navigation Bar Widget

Go To Blogger,
Open Layout,
Add HTML-JAVASCRIPT Gadget,
Copy The Below Code And Add It Into That Gadget.
Click Save And You Are Done.


<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>

How To Embed "SWF,FLV" Files Into Your Blog And Website

0 comments
Nowadays flash files are widely used in web and blog developing and designing, they not only give a gorgeous look to them but also provide a handy user interference.
Embedding a flash file in HTML pages is as easy as 123. All you need is a flash file uploaded at FTP (File Transfer Protocol) server. The best and free way for uploading flash file is to upload them on Google Sites.
  1. Make a site on sites.google.com
  2. Change page template to file cabinet.
  3. Add .swf file.
  4. Right-click and copy the download url of .swf file.
  5. Type this code in your site or blog.
  6. Replace the green code with the url of .swf file.
  7. Save and enjoy.
Code

<embed src="https://sites.google.com/site/exeideashassan/exe-ideas-hare-drive/EXEIdeasUnderConstruction.swf?attredirects=0" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="600px" width="800px"></embed>

Change quality, align, height and width attributes to your need and mood.
Feel free to ask any queries.

Related Posts Text Widget For Blogspot

0 comments
Related Posts Text Widget For Blogspot
I am going to post three awesome styled Text only related post widget for blogger. Actually, related posts widget increase your blog's bounce rate. Also many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time.So, hope you like all of the three.



JavaScript Code:-First of all Find  </head> and Paste the below JavaScript code above it:-

<script type='text/javascript'>var relatedpoststitle="Related Posts";</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>




HTML Code:-Now paste the below code where you want to show related posts widget like i suggest
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
Find the above code and paste the below code after it:-
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;          

<!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>




CSS Code:-
(Style 1)

For above type of Related Post just copy the below code and Paste the below CSS code just above </b:skin>


#related-posts {
clear: both;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #222;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
}



======X======X======X======
(Style 2)
For above type of Related Post just copy the below code and Paste the below CSS code just above </b:skin>


#related-posts {
clear: both;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
background: #111;
}
======X======X======X====== 
(Style 3)
(For Black and dark backgrounds)

For above type of Related Post just copy the below code and Paste the below CSS code just above </b:skin>  

#related-posts {
clear: both;
}
#related-posts h2{
color: #fff;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */
}
#related-posts ul li a:hover {
padding-left: 20px;
background: #111;
}

How To Add Stylish Borders Around All Blog's Gadget/Widget?

0 comments
  Some time your template is so simple that it can not attract visitors, so you have to spices up your blog, but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding.If you want to add borders you can also use this code, There are many different type of codes given below.

Before
After



Expand Your Widget
 

For All Of These Code, You Have To Do Some Thing Like This.
Go To Blogger.
Open Edit HTML
Find ]]></b:skin>
And Paste The Below Code Just Before It.


For Simple Square Color Border:-
.widget {
padding: 5px;
border: 1px solid  #ff0000;
}



For Simple  Square  Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff; 




For Simple  Square  Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}



For Simple Rounded Color Border:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;




For Simple Rounded Color Border With Filled Background:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; 
background:#ffffff; 



For Simple Rounded Color Border With Filled Background And Shade:-
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000; 
}

3-Column HTML Footer Bar For Blogs And Websites

0 comments

Now a days three column footer bar is most popular for blogger and websites.First column is for about company or author and other two column are for quick navigation links.as the screen shoot is available that how will it appear after published.So put this on your website or blog now, it's only HTML via tables.


Open Blogger.
Go To Layout.
Add A HTML-JAVASCRIPT Gadget.
Garb Them To The Footer.
Copy The Below Code, Edit It With Your Data And Paste It Into That Gadget.
Now Save It, And Published.

=========X=========X=========X=========
<table>
<tr>
<td width="30%">
<h2>About</h2>
<p>Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please...Text Please....<a href="##########">Read More...</a></p>
</td>
<td width="10%"></td>
<td width="33%">
<h2>Navigation</h2>
  <li><a href="##########">Link 1</a></li>
  <li><a href="##########">Link 2</a></li>
  <li><a href="##########">Link 3</a></li>
  <li><a href="##########">Link 4</a></li>
  <li><a href="##########">Link 5</a></li>
</td>
<td>
<h2>Navigation</h2>
  <li><a href="##########">Link 1</a></li>
  <li><a href="##########">Link 2</a></li>
  <li><a href="##########">Link 3</a></li>
  <li><a href="##########">Link 4</a></li>
  <li><a href="##########">Link 5</a></li>
</td>
</tr>
</table>

=========X=========X=========X=========

How To Add Smashing Floating Social Sharing Widget

0 comments
Photobucket
Step 1:
Go to blogger>> login>> Edit html>> Tick Expand widgets box>>
By using ctrl+f search the code ]]></b:skin>
And above ]]></b:skin> add the below code
Now,save your template and you are done 50% successfully.


position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.
scrollTop+document.documentElement.client Height-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}
#float_corner {padding: 5px; rder-bot}


Step2:
Now search the code </body> by using ctrl+f and
paste the below code above the </body>


<div id=’float_corner’>
<ul>
<script type=’text/javascript’>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script><a class=’DiggThisButton DiggMedium’/><br/>
<script src=’http://tweetmeme.com/i/scripts/button.js’type=’text/javascript’/><br/>
<a class=’google-buzz-button’ data-button-style=’normal-count’ data-locale=’en_IN’ href=’http://www.google.com/buzz/post’title=’Post on Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’type=’text/javascript’/><br/>
<script badgetype=’square’ src=’http://d.yimg.com/ds/badge2.js’ type=’text/javascript’>
ARTICLEURL
</script><br/>
<a href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’box_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’type=’text/javascript’/><br/>
<a href=’
http://www.exeideas.com'>Get This</a><br/> 
</ul>
</div>

Social Sharing Widget For Blog, Website And Browser

0 comments
From This You Can Share Your Article And Post To Any Social Network By Placing The Gadget On Your Blog, Website Or Browser. Just Go To WWW.SHAREAHOLIC.COM And Create An Account For Free And Get Widget...........
Founded in 2008, Shareaholic is a leader in making content sharing on the web faster and easier while also making it simple for web publishers, advertisers and mainstream businesses to measure the effectiveness of their content.
With more than 2 million browser plugin installations for Chrome, Firefox, Safari and more and its growing publisher network of over 200,000 websites using Shareaholic’s content sharing tools which are available for any website including WordPress and Tumblr, Shareholic reaches more than 250 million unique monthly visitors and has permission to an unparalleled amount of aggregate social data and reach to create targetable audiences for advertisers. This data drives even more quality visibility, traffic, leads and views to websites and content through real-time bidding advertising platforms.
For updates, you should follow Shareaholic on Twitter and Facebook. For more information about the company, please follow the navigation links on the pics.

Shareaholic

Auto Image Thumbnail & ReadMore Link For Blogger Post

1 comments
Some people looking for this code and he didn't find this because blogger create a template with this code and force people to use their template. But now peoples are free to use the code with their own desire template. So here we go on to finish the goal.

Features:-
1.) When you apply this code you need not to enter LINE BREAK option in your every new post even in old post, This will automatically break the line after some words.
2.) The first image of your post will be chosen for the view on main page of your blog for that post.
3.) If you already insert LINE BREAK option in your desire post, after applying this code you will see the two READ MORE link below of every post.Then Please Contact Me Or Comment Here, I Will Set It With You.


How To Apply The Code:-
Here we go:
Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Check the Expand Widget Templates check box on top right of the HTML window.
In the code window, look for </head> line.
Add the code below right after that line.
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

After that, find this line:
<data:post.body/>
Replace the line with this code:


<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
Click Preview.
 If it works, then click Save Template.
 

Customizing the snippet:
You can customize the read more by changing the values of the variables below:
thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.
Read More... Text  – you can also change this with image, Please comment here if you want read more image.

How To Add Animated Sharing Bar Widget To Blog And Website

0 comments
Social networks can make a big difference on the popularity of a blog. Sites that communicate better and understand social media are usually the most popular.
A move towards this goal would be to find a way to encourage your visitors to share your content on the networks they are most active on.
Today we are doing just that, by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.
Go ahead and just follow given steps...
How To Add Animated Sharing Bar To Blogger?

Login to blogger>> Design>>> Edit HTML
Click On Expand Widget Template Check Box
CTRL+F To find </head>
Copy n Paste Below Code Just Above It.


<link rel="stylesheet" type="text/css" href="https://gj37765.googlecode.com/svn/trunk/html/mddemo/Animated [www.gj37765.blogspot.com]Sharing Bar With jQuery & CSS.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://gj37765.googlecode.com/svn/trunk/html/mddemo/%5Bwww.gj37765.blogspot.com%5Dscript.js"></script>



Now save TemplateNext adding HTML for this widget...
Then
Design>>> Page Element>>> Add a Gadget
Choose HTML/Javascript from the list.
Copy n paste Below Code into it.




<div id="share">
<div id="stage">
<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>
<div class="thanksto"><a href="http://www.exeideas.com">Grab This</a>
</div>
</div>


J-Query "List Of Post/Article" Widget For Blogger

0 comments



Feature of this script :
Accordion effect
Show and hide effect
CSS 3
Automatic add jquery
Different color for content
Different style for open and close
Auto Sort the title
Add New!! for 10 newest entry




Just Create A New Page And Copy The Below Code In The HTML Section.

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.exeideas.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>


Replace www.exeideas.com with your blog name
Below images are how to create page in blogger.



Don't Forget To Say Thanks

No comments:

Post a Comment

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Subscribe by email" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quiries contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.

Stylish "List Of Post/Article" Widget For Blogger

0 comments



Feature of this script :
Accordion effect
Show and hide effect
CSS 3
Automatic add jquery
Different color for content
Different style for open and close
Auto Sort the title
Add New!! for 10 newest entry




Just Create A New Page And Copy The Below Code In The HTML Section.

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.exeideas.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>


Replace www.exeideas.com with your blog name
Below images are how to create page in blogger.



Don't Forget To Say Thanks

No comments:

Post a Comment

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Subscribe by email" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quiries contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.

20 Top Blog Directory To Submit Your Blog And Get Traffic

0 comments
If You Want Traffic Just Index Your Blog In The Following Directory And Boost Your Views...
Here are 20 directories you need to know about:

1. Best of the Web Blog Search remains a powerful tool for sharing your blog, especially since this director’s very selective, listing only mature and valuable blogs. A link from here is majestic.

2. Bloggeries is one of the most respected blog directories. The layout is clear and concise, and readers are able to find what they are looking for in a snap.

3. YouSayToo.com is also a directory like Bloggers from where you can get traffic and a back link free of cost.

4. OnToplist.com is a free, manually-edited directory that reads the RSS feed of your blog. You can also use the site’s social features, article directory, and other great tools to build your blog.

5. Blogged.com is an interesting mix of a directory and a Google News type site that is fed by the blogs listed with Blogged. And it’s free to list your blog.



6. Bloggers.com is a best social network for blog lovers from where you get more traffic and a lot of fans and followers.

7. Blog Catalog features a vast number of categories, from “academic” to “writing”, while offering the ability to search by country, language or user. It has a no-frills design, but offers convenient access through a simple blog registration.

8. Globe of Blogs has too many features to list. Only non-commercial blogs are accepted. The site may be busy, but I like being able to narrow my search by title, author or subject.

9. The ultimate directory of British blogs isn’t focused on location, but on the culture. It is asked that bloggers be genuinely “Britished.”

10. Blog Universe has a layout that’s easy to navigate and, although the content is limited, it’s an all-around good directory worthy of submission.

11. Bigger Blogs is intertwined with a business directory and an article directory, giving you access to several powerful tools in one location.

12. Bloggernity is a crisp, clean and easily navigated site. It’s low ad-to-content ratio has helped solidify its reputation as a quality directory.

13. Bloggapedia has an interesting and eye-catching homepage. Readers are easily connected to top blogs and new posts. Innovative categories, a colorful design and its blogger tool kit make this directory a hit.

14. Spillbean is a well-designed directory with categories such as “health,” “society,” “Internet,” and “personal.”

15. Blogging Fusion boasts over 60 categories, including family-focused blogs. Blogging Fusion has an good number of listings, and it also has visitor stats.

16. Blogflux is organized and clear with a strong social element.

17. The blogs at the top of Bloglisting are fun, colorful and catch the attention of the reader. Bloglisting displays the page-ranking blogs, which is a helpful tool when determining with whom you want to exchange links.

18. Blogio stores plenty of quality blogs, and it sports solid on-site search.

19. Blog Digger is a strong search tool, especially for local blog listings.

20. Blog Pulse features a powerful community element, on-site analytics, and a clean design. The “submit” page is a bit tricky to find, so here’s the quick link.

"List Of Post/Article" Widget For Blogger

0 comments

In this tutorial I will show you how to list the titles of your blog’s 1000 2000 most recent posts. If you are looking for an alternative to Blogger’s Archive gadget, then this might be it. This list can also be used as a Table Of Contents. This list is made possible with the use of Yahoo! Pipe.

See the demo in Our List Of Topic Page

The list comes with several options:List them inside a widget or inside a post page.
Arrange the titles in alphabetical or chronological order.
If you use your blog as an online serial novel, then chronological order is just what you need.
Append (or not) a comment count at the end of each title.
Choose numbered or bulleted list style.



Let’s get started,


<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<ul style="font-weight:bold">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.exeideas.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://www.bloggersentral.com/2009/12/list-post-titles-in-alphabetical-order.html" target="_blank">widget</a></span>
<!-- Alphabetical Post Title Listing End -->



Customizing the list:
Below are a few available customizations/options:

Listing order -the default order is alphabetical. To change to chronological order, just change the word alphabet in code line 21 to chrono.
Comment count - comment count is displayed by default. To remove comment count, delete code line 13.



If This Is Not Working Well With You Then Try Some New Widget Here.
Stylish "List Of Post/Article" Widget For Blogger
J-Query "List Of Post/Article" Widget For Blogger