Rabu, 15 Oktober 2014

Cara Menambah Atau Membuat Header Pada Blog

0 komentar
Sudah kita ketahui, blogspot mengunci headernya hanya ada satu saja, dan tidak ada fitur tambah gadget, untuk itu sebelum memodifikasi template, kita tidak bisa membuat iklan seperti gambar di atas.

Ternyata caranya mudah, teorinya, kamu perlu menambahkan fitur tambah gadget di tata letak blogger untuk menambah iklan agar blog kamu menghasilkan uang, nanti gadget ini bisa diletakkan dimana saja pada posisi header, baik di atas header asli atau dibawahnya, kamu hanya perlu menarik-nariknya di tata letak.

Kamu perlu memodifikasi template blogger, caranya:

  • Masuk ke blogger
  • Pada dashboard pilih > template > edit HTML
  • Klik cursor di laman, kemudian tekan CTRL + F untuk mencari kode berikut: 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Rubah kode diatas, dan masukkan kode baru seperti di bawah ini:
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>


  • Klik Simpan

Kini kamu buka tata letak, lihat sekarang sudah ada link tambahkan gadget pada header, kamu bisa mengisinya dengan link iklan, keterangan atau lainnya sekarang.
Test di hape, widget yang kita buat ternyata ditaruh di bawah postingan kita, bagaimana caranya agar berada di atas postingan, jadi urutannya; header (judul), widget-widget, Pos artikel, footer. kalo dengan kode di atas; header (judul), Pos artikel, widget-widget, footer.
Jika kamu menyukai widget ditampilkan lebih dulu dibanding Pos pada tampilan selular, maka hapus kode diatas dan ganti dengan kode berikut ini:

<b:section class='header' id='header' preferred='yes'>

klik simpan dan bedakan hasilnya. lihat di versi mobile dan web.

Minggu, 12 Oktober 2014

Download Kumpulan Blogger Template Responsive Simple Seo

0 komentar
Template blogger yang saya kumpulkan kali ini adalah template pilihan yang tentunya sudah seo dan ringan ,selamat download gratis.. dan silahkan mencoba.

Mashable blogger template 
LIVE DEMO DOWNLOAD
MARVEL BLOGGER TEMPLATE RESPONSIVE
LIVE DEMO DOWNLOAD

SUPREME V2 RESPONSIVE
LIVE DEMO DOWNLOAD

SUPREME BLOGGER TEMPLATATE V1 RESPONSIVE
LIVE DEMO DOWNLOAD

 Free Premium Blogger Template
LIVE DEMO DOWNLOAD

BloggerLeaf ~ Blogger Template
LIVE DEMO DOWNLOAD


Rabu, 06 Agustus 2014

Membuat Readmore Animasi Keren Pada Blogger

0 komentar
 langkah 1

login kedalam blogger

langkah 2

backup(membuat salingan) template untuk berjaga-jaga jika terjadi hal-hal yang tidak diinginkan.

langkah 3

setelah login pilih template>Edit HTML

langkah 4

klik kiri 1x (dimana saja) didalam kotak kode-kode template lalu tekan ctrl+F dan ketikkan </head> untuk mencari kata </head>.

langkah 5

masukkan kode berikut ini tepat diatas </head>

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

langkah 6

Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,
biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

langkah 7

Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.

 <!-- Auto read more Mulai -->
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

Selasa, 05 Agustus 2014

Memasang Related Post keren Pada blogger

0 komentar
Click "CTRL+F" cari  </head>
7.) copy code dibawah  dan faste diatasnya
=======================
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:215px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;border: 1px solid black;  }
#related-posts h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;}
#related-posts a{color:#D80556;}
#related-posts a:hover {background-color: #D80556;color: white; font-weight: bold; text-decoration: initial;}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


==========================
cari.. dan taruh setelah.

<div class='post-footer'>

=================================
<!-- Related Posts with Thumbnails Code Start-->
<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Selasa, 15 Juli 2014

Minggu, 13 Juli 2014

Download Gradient Red and Black Blogger template

0 komentar


Features:
Template author:     Yanku template
Description:   

Gradient Red and Black is a free blogger template with 3 columns, left and right sidebars, web 2.0 design, gradients and vectorial elements.

Excellent layout for blogs about a diary.

Klik disini Untuk DOWNLOAD

Selasa, 08 Juli 2014

Tutorial Membuat Tombol Demo Download Dengan Efek Slide Di Postingan blogger

0 komentar
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style> Lalu tambahkan kode CSS berikut ini tepat diatas kode tersebut.

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}


4.Simpan template.
5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://274pril.blogspot.com/" target="_blank"> DEMO </a></li>
<li><a href="http://274pril.blogspot.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>

Silahkan ganti url warna merah diatas dengan link DEMO dan Link DOwnload milik sobat. Jangan lupa juga lihat artikel terbaru http://274pril.blogspot.com/