Minggu, Agustus 04, 2013

Yaminth Blogger Template 2013


Date Released: Jan, 2013
Designer: New Blogger Themes

Creative Commons Attribution:
You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

Yaminth Blogger Template is a new Pro look Blogger Template, this template is adapted from WordPress. This template has 2 columns layout along with 3 columns footer. This template is ads ready, SEO Ready, One right sidebar along with many features. This template works with all type of browsers. This template is specially design for personal and commercial blogs. Yaminth Blogger Template is magazine style blogger template. You Can Download it free from our blog.



More Features
SEO Ready : Yaminth template is optimized for Search engines like Google. This template helps your website to rank higher in search engines.Ad Ready : Use this template to show Banner advertisement or Google ads easily. Make money using your site. RSS Buttons : Yaminth template comes with RSS Buttons. Let your user follow you using your RSS feed.Social Buttons : This template comes with social buttons like facebook, twitter etc., Let your users share your content easily. Search box : Yaminth template has search box in it. Search box helps your user to find the content easily on your site.Widget Menu : This template has Widget menu. Meaning, you do not need to edit the HTML to set up navigation menu. No HTML changes : This template works out of the box without any HTML changes. Use this template if you are not comfortable in editing HTML.

Set up Featured Post
Open the Yaminth Blogger template.xml file in a text editor like notepad or notepad++. Find following code. Replace ENTER-FEATURED-POST-1-LINK-HERE to the featured post link, change src value for Image to point to the featured post image. Replace "Enter Featured Post 1 Title Here" with the Post title. Follow this for all 4 featured posts. After these changes you can upload this template in Blogger.
<div id='featured-posts'>
<ul id='featured-posts-list'>
<!-- Featured Post 1 Code Start --> <li>
<div class='featured-post-image'>
<a href='ENTER-FEATURED-POST-1-LINK-HERE'><img src='http://3.bp.blogspot.com/-c_3Jn40x9fE/UQHrAX2hlXI/AAAAAAAAELw/TsVLJlcrLvE/s1600/1.jpg'/></a>
</div>
<div class='featured-post-text'>
<h2 class='featured-post-title'><a href='ENTER-FEATURED-POST-1-LINK-HERE'>Enter Featured Post 1 Title Here</a></h2> </div> </li>
<!-- Featured Post 1 Code End -->
<!-- Featured Post 2 Code Start -->
<li>
<div class='featured-post-image'>
<a href='ENTER-FEATURED-POST-2-LINK-HERE'><img src='http://1.bp.blogspot.com/-Uk1hoXnZYmY/UQHrAjXBdTI/AAAAAAAAEL0/LI2CCOr0liA/s1600/2.jpg'/></a>
</div>
<div class='featured-post-text'>
<h2 class='featured-post-title'><a href='ENTER-FEATURED-POST-2-LINK-HERE'>Enter Featured Post 2 Title Here</a></h2>
</div>
</li>
<!-- Featured Post 2 Code End -->
<!-- Featured Post 3 Code Start -->
<li>
<div class='featured-post-image'>
<a href='ENTER-FEATURED-POST-3-LINK-HERE'><img src='http://3.bp.blogspot.com/-Zz5z9pTqh2Y/UQHrA04C3tI/AAAAAAAAEL8/Cpgy6E3cW8c/s1600/3.jpg'/></a>
</div>
<div class='featured-post-text'>
<h2 class='featured-post-title'><a href='ENTER-FEATURED-POST-3-LINK-HERE'>Enter Featured Post 3 Title Here</a></h2>
</div>
</li>
<!-- Featured Post 3 Code End -->
<!-- Featured Post 4 Code Start -->
<li>
<div class='featured-post-image'>
<a href='ENTER-FEATURED-POST-4-LINK-HERE'><img src='http://3.bp.blogspot.com/-3qV_g88xnvw/UQHrBxiq_vI/AAAAAAAAEMI/B5QNuIpZ4qk/s1600/4.jpg'/></a>
</div>
<div class='featured-post-text'>
<h2 class='featured-post-title'><a href='ENTER-FEATURED-POST-4-LINK-HERE'>Enter Featured Post 4 Title Here</a></h2>
</div>
</li>
<!-- Featured Post 4 Code End -->
</ul>
</div>
 
Timestamp formatting
Go to Settings -- Language and Formatting. Update the Date Header Format and Timestamp format to Tuesday, January 29, 2013 like format.

Top Navigation Menu
This template comes with Widget menu. Go to Layout and find Edit this Menu widget and click Edit. Add the links easily in this widget. No hierarchical menu available with this template

Set up Recent posts
For recent posts to work like our demo, please go to Layout -- click Edit on Recent posts widget. Paste following script in the content box. 

<style type='text/css'>
#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='Turn off comments';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://1.bp.blogspot.com/-F9gb64Mlbq0/UOc8eRKL3sI/AAAAAAAACms/DEXj7UWLbkg/s000/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>


Meta Description
This template uses Search preferences options for meta description. Go to settings -- Search Preferences and enter a description for your site. This description will come as meta description for your home page. Helpful for Search engines. Also, you can add meta descriptions for every page you create in blogger. This template is completely optimized for SEO by XTheme

Elice responsive blogger template


Date Released: Jul, 2013
Designer: Blog Tips & Tricks
Price: FREE
Design Features:
Post Thumbnails : Show a thumbnail image (small image) for every post using this template

Responsive design : Designed to provide optimal viewing experience across wide range of devices from Desktop to mobile phones.

Good Typography : Elice template has beautiful Typography (font styles). Your website will look beautiful and readable

Custom web fonts : Elice template uses Web fonts like Google Fonts. Improve your website typography by using custom fonts

License : Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

More Features

SEO Ready: Elice template is optimized for Search engines like Google. This template helps your website to rank higher in search engines.

Ad Ready: Use this template to show Banner advertisement or Google ads easily. Make money using your site

Pagination: Pagination links helps users to navigate easily to your older posts. Users can click easy to use buttons to go to Page 2, Page 3 etc.,

Set up Navigation Menu

After installing this template, go to Template -- Edit HTML and find following code. Update the link url and Link names to your needs. 
<!-- Main Menu -->
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Category #2</a></li>
<li><a href='#'>Category #3</a></li>
<li><a href='#'>Category #4</a></li>
<li><a href='#'>Category #5</a></li>
</ul>
Customize Newsletter Subscription forms
Go to Template -- Edit HTML and find "<!-- Opt-In Subscribe -->" in the template html. You will find this 2 times because there are 2 newsletter subscription forms in this template. One form is in home page and another one is in the sidebar. Newsletter subscription form in sidebar will appear only in post pages. After you find the code, then replace "lovely-blogger-templates" with your feed ID. Your feed ID is available at the end of feedburner url. You may also change the Newsletter subscription text as you like.

Customize HomePage Call to Action text

This will update the Home page info which is left to the Newsletter form. Go to Template -- Edit HTML and find "<!-- Opt-In Info -->". Then, update the text and links as you like. Use this area to promote your product or service. This Call to Action area will appear only in Home page.
<!-- Opt-In Info -->
<h4>Elise - A Responsive Blogger template, Lets Take your blog to the next level using this Awesome template</h4>
<p>This is an example of a Optin Form, you could edit this to put information about yourself or your site so readers know where you are coming from. <a href='http://www.lovelytemplates.com/blogger-templates'>Find out more...</a></p>
<br/>
<p>Following are some of the Advantages of Opt-in Form :-</p>
<ul>
<li>Easy to Setup and use.</li>
<li>It Can Generate more email subscribers.</li>
<li>It&#8217;s beautiful on every screen size (try resizing your browser!)</li>
</ul>
</div>
</div>

Pinfinity Blogger Template


Template name : Pinfinity
Release date : August 2012
Author : www.soratemplates.com
Designer : www.cssigniter.com

Basic Instructions : How to install a Blogger Template 

Template features : 
Pinterest Look, Clean Design, Social Widget, Dropdown Menu.




Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='group' id='navigation'>
<li class='current_page_item'><a href='#'>Home</a></li>
<li><a href='#'>Page Template</a></li>
<ul>
<li><a href='#'>Standard Format</a></li>
<li><a href='#'>Image Format</a></li>
..........
Now replace "#" with your menu item URL.

Configure Social Widget: 

search for:
<aside class='widget group widget_ci_social_widget'>
<a class='icn twitter' href='https://twitter.com'>Twitter</a>
<a class='icn facebook' href='http://www.facebook.com'>Facebook</a>
<a class='icn pinterest' href='http://pinterest.com'>Pinterest</a>
<a class='icn youtube' href='http://www.youtube.com'>Youtube</a>
</aside>







Sunrise Blogger Template

Template name : Sunrise
Platform: Blogger / Blogspot
Release date : December 2012
Author : www.soratemplates.com
License : Creative Commons Attribution 3.0
Basic Instructions : How to install a Blogger Template

Template features :
Wordpress Look, 3 Columns, Right Sidebar, 3 Columns Footer, Music, Featured Content Slider, Fixed Width, Dark Background, Dropdown Menu.


Configure Featured Content Slider:
Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<li class='jcarousel-item-1 odd'>
<div class='views-field views-field-field-portfolio-image'>
<div class='field-content'><a href='#'><img src='/image.jpg'/></a></div></div>
<div class='views-field-title'>Aenean sodales dapibus.</div>
<div class='clearfix'>
<div class='button'><a href='#'>more</a></div>
</div>
</div>
</div></span>
</div>
</li>
..........
Replace:
"#" with your featured post URL.
"image.jpg" with your slider image URL.
Configure Dropdown Menu:
Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='sf-menu' id='superfish-1'>
<li><a href='#'>Events</a></li>
<li><a href='#'>Artists</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Gallery</a>
<ul>
<li><a href='#'>Gallery 1 col</a></li>
<li><a href='#'>Gallery 2 cols</a></li>
..........
Replace "#" with your menu item URL. 

How to install a Blogger Template



Follow this simple guide to install your Favorite Blogger Template:

  1. Click on the Download button and save file to PC (.xml format).
  2. Log in Blogger dashboard.
  3. Go to Template section → Backup/Restore.
  4. Click on Download Full Template to Backup your previous template.
  5. Upload a template from a file on your hard drive by click Browse option button.
  6. Click Upload button, a confirmation message will appear. Click on Keep Widgets.

Now you're done.

Or watch the clip below if you're still confused:

Project 10 Blogger Template





Template name : Project 10
Platform: Blogger / Blogspot
Release date : Sep 2012
Author : www.soratemplates.com
Designer : www.orange-themes.com

Template features :
Wordpress Look, 3 Columns, 4 Columns Footer, Right Sidebar, Fashion, Featured Content Slider, Fixed Width, Gray Background, Social Widget, Page Navigation Widget.




Note: You must publish at least 5 posts and your blog must be in public mode, if not, you will be redirect to this site, we're really sorry for caused you this trouble.

Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below
<div id='layerslider' style='width: 748px; height: 300px;'>
<div class='ls-layer' rel='slidedelay: 5000'>
<img class='ls-bg' src='/image.jpg'/> ..........
Replace"image.jpg" with your slider image. 

Configure Dropdown Menu: 

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='menu' id='menu-top-menu'>
<li><a href='#'><i style='font-family:Ropa Sans;'><span>Homepage</span></i></a></li>
<li><a href='#'><i style='font-family:Ropa Sans;'><span>Blog</span></i></a></li>
..........
 Just replace "#" with your menu item URL. 

Configure Social Widget:

Search for:
<div class='left-social-icons'>
<a class='social-facebook' href='#' target='_blank'><span/></a>
<a class='social-twitter' href='#' target='_blank'><span/></a>
..........
Replace "#" with your Social Account URL. 

Configure Page Navigation Widget:

search for:
var posts=3, // Number of posts in each page
       num=2, // Number of buttons will display

Newsly Blogger Template


Template Author :  Lasantha Bandara
Designer : Newwpthemes.com
 
Descriptions :
Newsly Blogger Template features: 1 Sidebar, 2 Column, 3 Column footer, Adapted from Wordpress, Elegant, Featured Section, Fixed width, Fresh, Grey, Header Banner, Magazine, Premium, Red, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White


Newsly is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Bookmark Ready, Fixed, Footer Columns, Gray, News, Page Number, Slideshow, White, and now you can download Newsly blogger template for free only in Expo Templates.



Configure Featured Content Slider:
Go to "Template" --> "Edit HTML" of your blog. Find <!-- Featured Content Slider Started -->. Now scroll down slowly and you can see each featured slide codes between <div class='fp-slides-items'> and </div>. Now replace, * "This is default featured post X title" with your featured post title. * "#" with your featured post URL. * "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions. This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." with your slider description. * Slider image address with your slider image.
How To Change Tab Names of Tab Widget: 
Find this in "Edit HTML":
If you want to change your tab names of your tab widget then find this:
Now change the names "Popular", "Tags" and "Blog Archives" as you like
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a>
</li>
</ul>


Cara Membuat Widget Daftar Menu Blog Otomatis

Widget Daftar Menu Blog
Ada banyak cara agar pengunjung betah berlama-lama di blog kita. Selain tata letak dan tampilan template yang rapi dan menarik, fungsi widget juga perlu di optimalkan. Salah satunya adalah  membuat Widget Daftar Menu Blog Otomatis. 

Table of content atau daftar menu blog ini berfungsi hampir sama dengan daftar isi. Namun, pada script daftar menu blog tersebut, mampu menampilkan sampai max 500 halaman posting.

Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya. Jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.


Tidak hanya itu, Widget Daftar Menu Blog Otomatis tersebut, juga sudah dilengkapi fungsi scrolling. Sehinggapengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting, serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”.


Keren bukan? ;)

Karena saya mendapatkannya secara gratis maka sudah menjadi kewajiban juga untuk berbagi gratis. Langsung aja kita mulai tahapannya;


Cara Membuat Daftar Menu/Isi Di Sidebar Blog:

  • Login ke dashboard blogger anda.
  • Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
  • Copy script dibawah ini dan paste pada gadget.

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


  • Silahkan edit pada lebar (width:260px) dan tinggi (height:310px) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya (http://expotemplate.blogspot.com) dengan nama blog anda.
  • Save / Simpan.



Cara Memasang Widget Share Button Facebook, Twitter, Google keren di Blog

Widget Share Button
Seiring dengan perkembangan media sosial, Widget Share Button seperti Facebook, Twitter, Google sangat dibutuh sebuah blog saat ini.  Widget ini, memungkinkan kita untuk berbagi secara cepat berbagai konten kepada publik.

Widget Share Button pada dasarnya bukan hanya memudahkan pengunjung melakukan share pages di situs kita. Lebih dari itu, hal ini sangat berdampak positif pada blog kita. Karena, bisa menjadi media marketing gratis yang dapat menyebar kemana-mana.

Tertarik?

Untuk itu, ada beberapa cara yang dapat dilakukan. Di antaranya adalah mencoba langkah-langkah berikut ini;

Login ke dasbor blog anda

  • Pilih rancangan
  • Pilih tambah gadget
  • Pilih Html/Java script
  • Copy kode Html di bawah ini
  • Pastekan di Html/ Java Script tadi
  • Simpan
  • Selesai

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="  http://expo2012online1.blogspot.com/2012/07/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Catatan : untuk tulisan warna PINK anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna BIRU bisa anda hapus jika anda ingin tampilan yang simple.

Contoh hasilnya? Click here ;) Liat disamping sebelah kanan..  Klik suka bila perlu.. hehehe.... 

Memahami Perusahaan Pembuatan Website (Web Design)

Internet menjangkau audiens target yang luas dan digunakan untuk mempublikasikan informasi pribadi dan profesional dengan memasukkan penga...