Cara membuat kotak berlangganan email Feed Burner untuk blogger itulah topik yang kita bahas kali ini. Salah satu kegunaan atau fungsi dari Kotak Berlanggan Email ini adalah agar dapat memudahkan pengunjung untuk mendapat update terbaru dari blog yang kita miliki yang dikirimkan langsung lewat email sobat, tentunya dengan kita berlangganan terlebih dahulu pada feedburner blog atau situs. Untuk contoh dari kotak berlangganan Email ini silahkan lihat pada gambar dibawah ini.


Selain itu dengan semakin banyaknya orang yang telah berlangganan email feed burner kita tentunya akan semakin banyak pengunjung tetap pada blog yang kita miliki. Adapun Membuat Kotak Berlangganan Email Feed Burner Untuk Blogger adalah sebagai berikut:

1.Seperti biasa log in dulu ke account blog sobat
2.Pada dasbor klik Rancangan kemudian pilih Edit HTML.
3. Cari kode berikut ini </head>
4. Letakkan kode di bawah ini sebelum kode tersebut :
<style type='text/css'>
#hsection{border:1px solid #D3D3D3;background-color:#FFFFFF;}
#hsection:hover{border:1px solid #BABABA;background-color:#F8E0E0;}
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }
#sectionmy .sectionmy2 h2.rss { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/RSS-1.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.email { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/th_Mail_Read.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.twitter { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/Twitter-1.png) no-repeat top left; }
#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }
</style>
5.Simpan Template.
6.Selanjutnya pada Rancangan pilih Elemen Laman Kemudian pilih Add gadget pilih HTML/Javascript.
7.Copy kode dibawah ini kemudian masukkan paste kedalamnya.
<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>
8.Langkah terakhir Simpan Template

Keterangan : Ganti tulisan yang berwarna Orange dengan Url Feed Anda,yang warna Merah ganti dengan Url Feedburner Email Subscription anda,lalu yang berwarna Ungu dengan URL Twitter anda,,selamat mencoba semoga berhasil Jangan lupa cantumkan comment anda.
Bagi sobat yang sudah mencoba related post bergambar Atau Thumbnail tentu akan lebih tertarik lagi menggunakannya, karena tampilannya yang cukup menarik dengan adanya gambar (thumbnail) Sebagai Backroundnya. Kekurangan dari related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog sobat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal. Nah ada salah satu cara untuk memaksimalkan related post ini ialah dengan alternatif marquee atau berjalan



Keuntungan dari trik ini adalah sobat dapat menampilkan artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.

Untuk membuatnya ikuti saja langkah-langkah berikut ini.

1. Silahkan cari kode berikut ini:
<div class='post-footer-line post-footer-line-1'>
Atau
<p class='post-footer-line post-footer-line-1'>
2. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas.
<!-- Marquee Nobi 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>
<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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Nobi Related Posts with Thumbnails Code End-->
3. Langkah terakhir Simpan Template kemudian lihat hasilnya.

Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, Angka 10 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Silahkan ganti judul yang sobat inginkan).

Semoga artikel kali ini bermanfaat bagi sobat jangan lupa baca juga artikel-artikel menarik lainnya
 Mau buat Chatting pada Blog kalian...




Langsung aja kita menuju ke https://www.olark.com/

Cara buat halaman 1, 2, 3,...dst

Untuk mempersingkat waktu, langsung saja kita ke TKP Gan....

1. pergilah ke dasbor,tata letak , edit HTML, dan jangan lupa conteng expand widget template

dan cari code berikut..

]]></b:skin>












setelah ketemu.. letakan code di bawah ini tepat di atasnya...



.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;
}



dan sekaran cari lah code



</body>

dan tepat di atas code tersebut letakan code script di bawah ini...



<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>

</b:if>



langkah terakhir

cari lah code... 'data:label.url' 



jika sudah ketemu..hapus code tersebut dan ganti dengan code berikut:

'data:label.url + &quot;?&amp;max-results=5&quot;'



sekarang simpan lah!? dan lihat hasilnya...!!
 


Berikut ini langkah untuk memasangnya :



Untuk posisi disebelah kanan

1.   Masuk ke Edit HTML.

2.   Carilah kode </b:skin>

3.   Letakkan kode berikut
      di atas kode </b:skin> ini.

01#namaku {
02position:fixed;_position:absolute;bottom:30px;right:30px;
03clip:inherit;
04_top:expression(document.documentElement.scrollTop+
05document.documentElement.clientHeight-this.clientHeight); _right:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth);
06}
07#namaku a
08{
09-o-transition: all 2.5s ease-in-out;
10-moz-transition: all 2.5s ease-in-out;
11-webkit-transition: all 2.5s ease-in-out; 
12opacity: 0.5;
13filter: alpha(opacity=50);
14}
15#namaku img
16{
17border:0;
18}
19#namaku a:hover
20{
21opacity: 1.0;
22filter: alpha(opacity=100);
23}

Setelah Pphoo™ lakukan editing, ternyata bisa tampil disebelah kiri. Bahagia juga nech...
:lol:



Langsung sedot aja Gan, untuk posisi disebelah kiri dibawah ini

 #namaku {
    position:fixed;_position:absolute;bottom:25px;left:20px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollleft+ document.documentElement.clientWidth - offsetWidth);
    }
    #namaku a
    {
    -o-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    opacity: 0.3;
    filter: alpha(opacity=30);
    }
    #namaku img
    {
    border:0;
    }
    #namaku a:hover
    {
    opacity: 0.5;
    filte: alpha(opacity=50);
    }

KETERANGAN :
 Yang bisa dirubah dan diutak-atik sendiri :

Atur jaraknya ikonnya pada kode
bottom:.....px; right:.....px;.
-o-transition: all .....s ease-in-out;
    -moz-transition: all .....s ease-in-out;
    -webkit-transition: all .....s ease-in-out;
    opacity: .....;
filter: alpha(opacity=.....);

4.   Cari lagi kode </body>

5.   Letakkan kode berikut
     di atas kode </body> ini.

1<a name='down'></a>
2<script type="text/javascript">
3if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
4</script>

6.   Masih di kode </body>

7.   Letakkan kode berikut
      di bawah kode </body> ini.

8.   Pratinjaulah terlebih dahulu,
      kemudian simpan template anda.

1<div id='namaku'>
2<table border='0'>
3<tr>
4<td><a href='http://www.pphoo.tk' title=''><img src='http://i.imgur.com/jTVDo.gif'/></a></td>
5<td><a href='#' title=''><img src='http://i.imgur.com/wjlcE.gif'/></a></td>
6<td><a href='#down' title=''><img src='http://i.imgur.com/KtJSs.gif'/></a></td>
7</tr>
8</table>
9</div>

CATATAN :

Gantilah http://www.pphoo.tk
dengan URL alamat blog anda.

Bila perlu, ganti juga URL gambarnya
dengan URL gambar milik Anda sendiri.

Bagaimana Kawan...???
PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :




cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini : <data:post.body/> atau <p><data:post.body/></p> ganti kode tersebut dengan kode di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 340 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template.

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.
Subscribe to: Posts (Atom)