01 Oktober 2013

YAMINTH BLOGGER TEMPLATE 2013

Responsive, SEO Ready and clean blogger template
YAMINTH BLOGGER TEMPLATE 2013
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.


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.


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 New Blogger Themes in ALL ABOUT BLOGSPOT TEMPLATES


Cara Memasang Widget Social Media Sharing Metro Style

Cara Memasang Widget Social Media Sharing dengan Metro Style di Bawah Posting Blog : Tips ini saya dapat dari salah satu blog yang saya follow yakni Blogger Plus | Informasi seputar blog, website, internet, komputer, dan software gratis. Menurut saya, ini info keren dan penting yang layak untuk dibagikan.

Cara Memasang Widget Social Media Sharing Metro Style
Kenapa saya katakan keren dan penting? Pertama, tidak dapat dipungkiri bahwa media jejaring sosial sangat membantu para blogger dalam mempromosikan blognya. Oleh karena itu, hampir semua blogger memasang widget jejaring sosial pada blog mereka. Bahkan Blogger secara default sudah menyediakan fasilitas tersebut untuk semua blog (blogspot) secara otomatis. Itu menandakan bahwa widget tersebut penting.. ya kan...


Namun tampilan standar widget sosial media bawaan blogger terlihat sangat sederhan. Sedangkan style widget Social Media Sharing Metro Style sangat berbeda.

Untuk membuat tampilan widget social media agar terlihat lebih menarik perlu sedikit modifikasi pada kode CSS dan HTML blog. Salah satu yang saat ini sedang populer adalah Membuat Widget Social Media dengan Metro Style. Ini alasan kenapa saya bilang keren..

Metro Style merupakan model interface sistem operasi komputer yang pertama kali diperkenalkan Microsoft sejak Windows 8. Ciri khasnya berbentuk kotak dengan ukuran besar dan warna-warni yang mencolok. Widget social media memang perlu diberi warna yang mencolok agar para pengunjung blog lebih mudah menemukannya. Jika lebih mudah ditemukan maka kemungkinan untuk berbagi posting ke social media akan semakin besar.

Cara Memasang Widget Social Media Sharing Metro Style
Ini tampilan Widget Social Media Sharing Metro Style

Berikut adalah cara Memasang Widget Social Media Sharing dengan Metro Style di bawah posting blog.

Pastikan Anda sudah login ke Blogger. Pada halaman Dashboard blogspot, pilih menu Template kemudian Edit HTML. Letakkan kode berikut di atas ]]></b:skin>

 .promote_post_bg {
height: 70px;
background: #469ebe 0 -7px no-repeat;
width: 620px;
margin-left: 0;
}

.authorimg img {
float: left;
height: 70px;
width: 70px;
margin-left: 0;
}

.authorname {
text-shadow: none;
background: #CF910B;
float: left;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: 'cambria',serif;
margin-left: 0;
padding-top: 25px;
width: 120px;
height: 45px;
}

.authorname a {
color: #fff;
}

.authorname a:hover {
color: #5774b6;
}

.promote_twitter {
width: 110px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 30px;
text-align: center;
background: #3BAAE1;
}

.promote_facebook {
width: 150px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 0;
text-align: center;
background: #4861A3;
}

.promote_google {
width: 120px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 20px;
text-align: center;
background: #D71D1E;
}
Kemudian cari kode <data:post.body/> dan letakan kode html berikut ini di bawah <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promote_post_bg'>
<div class='authorimg'>
<img src='https://lh6.googleusercontent.com/-bPnA0pzPKrk/AAAAAAAAAAI/AAAAAAAAA08/NVnil4cN7T0/s120-c/photo.jpg'/>
</div>

<div class='authorname'>
<a href='https://plus.google.com/113357786970397590676'>DEDI ARIKO</a>
</div>

<div class='promote_twitter'>
<a class='twitter-share-button' data-via='MHT_MMT' href='https://twitter.com/share'>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = &quot;//platform.twitter.com/widgets.js&quot;;
fjs.parentNode.insertBefore(js, fjs);
}
}(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
 </div>

<div class='promote_facebook'>
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
<div>

<b:if cond='data:post.isFirstPost'>
<script>
(function (d) {
var js, id = &#39;facebook-jssdk&#39;;
if (d.getElementById(id)) {
return;
}
js = d.createElement(&#39;script&#39;);
js.id = id;
js.async = true;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));
</script>
</b:if>
</div>
</div>

<div class='promote_google'>
<g:plusone annotation='bubble' size='medium'/>
<script type='text/javascript'>
(function () {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>
Keterangan:
Ukuran margin, padding, height, dan weight bisa diatur agar sesuai dengan ukuran dan tampilan blog Anda. Kode warna background juga bisa diubah sesuai selera Anda.

Kode yang berwarna merah sebaiknya diganti dengan alamat url gambar/foto yang lain. Yang berwarna Orange adalah url Google+ Anda dan yang Biru adalah nama profil Anda.

Itulah cara memasang widget social media sharing dengan metro style di bawah posting blog. Untuk memasangnya memang perlu ketelitian dan eksperimen agar hasilnya sesuai dengan yang diharapkan. Selamat mencoba!

beautyful responsive blogger template : ExcluSive

beautyful responsive blogger template : ExcluSive
ExcluSive is beautyful responsive blogger template layout with many future. It's 2 columns and right sidebar the color is black, white and grey with top navigation menu, tab widget siderbar, custom search result, custom lightbox, social icon, emoticon and more.

Template author: MKR / http://www.ivythemes.com
Designer: MKR / http://www.ivythemes.com



Features Template:

ExcluSive is a free blog template with type :

Cara membuat Responsive Image untuk Blogger Template Blogspot

Cara membuat Responsive Image untuk Blogger Template Blogspot
Cara membuat Responsive Image untuk Blogger Template Blogspot
Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti; DEMO Responsive Image


Pertama, login blogger terus edit HTML.

Lalu cari kode :
]]></b:skin>
Dan tambahkan kode css dibawah ini diatasnya:
img {
display: block;
max-width:100%;
height:auto;
width:auto\9;} 
Setelah itu cari kode:
</head>
dan tambahkan javascript dibawah ini diatas kode tersebut:
<script type='text/javascript'>
      /*<![CDATA[*/

    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = "rwdimg-"+Math.floor(Math.random()*1000),
      tpl='<img src="{src}" alt="{alt}" title="{title}" id="{rwdImgId}" {attributes}>';

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }       
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
         
          var src = arg.src || arguments[0] || '',
              src = src.replace(/\/s\d*\//, '/s'+imgWid * hdpi+'/'), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || '',
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || '',
              attributes = arg.attr || arguments[3] || '',
              img = tpl.replace('{src}',src).replace('{title}',title).replace('{alt}',alt).replace('{rwdImgId}',rwdImgId).replace('{attributes}',attributes);
              document.write(img)
      }
  };
}()
/*]]>*/</script>
setelah itu cari kode
</body>
dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)
<noscript>
  <img src="http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png" alt="Responsive images test"/>
</noscript>
<script>
  cwResImg.rwdImg("http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png", 'Responsive images text script');

  ---or----

  cwResImg.rwdImg({src:'http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png', alt:'Responsive images text script', title:'Responsive images text script'});
</script>
Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.

credits : http://decodize.com/html/simple-responsive-image-technique/