Senin, 27 Mei 2013

Cara Membuat Widget Berlangganan Artikel Plus Tombol Share Lainnya

Cara Membuat Widget Berlangganan Artikel Plus Tombol Share Lainnya





Berikut ini adalah artikel sederhana mengenai cara Membuat Widget Berlangganan artikel lewat E-mail plus tombol-tombol share menarik lainnya. Membuat Widget / kotak Berlangganan lewat e-mail adalah sesuatu yang cukup penting pada Blog, sebab dengan adanya widget ini, para pengunjung yang senang dengan blog kita dan ingin mengetahui update postingan kita maka widget ini sangat berguna atau bermanfaat bagi para Blogger. Pada widget berlangganan artikel yang akan dipasang pada blog in nantinya juga akan terdapat tombol Share, Feedburner, Twitter, Facebook dan Google+ Sehingga para pengunjunga juga dapat Menshare Postingan pada Blog ke berbagai media social lainya..Ok,Ok, Berikut Tutorialnya..


Adapun langkah-langkahnya adalah seperti berikut :

1. Login terlebih dahulu pada akun blogger Sodara

2. Selanjutnya pada dasbor Blog sodara klik menu Template

3. Kemudian Klik Edit HTML

4. Buka semua kotak Keci tanda pana hitam pada Format xml di HTML Blog Sodara

5. Letakan kursor di dalam Format xml blog sodara tersebut.

6. Kemudian carilah kode <data:post.body/> dengan menekan Ctrl+f , biasa nya kode tersebut ada 2,3 ataupun 4, pilih saja kode yang ke 3 kemudian copy lah kode berikut dan paste dibawah kode yang ke 3 tadi.



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

form.feedburner{

margin:20px 0 0;

display:block;

clear:both;

}

.BDstyle{

background:url(http://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.png) no-repeat scroll 4px center transparent;

padding:7px 15px 7px 35px;

color:#666;

font-weight:bold;

text-decoration:none;

border:1px solid #D3D3D3;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

.BDsubmit{

color:#666;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

cursor: pointer;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-goog-ms-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

#emailwidget-outer {

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

-goog-ms-border-radius: 10px 10px 10px 10px;

border-radius: 10px;

background: none repeat scroll 0 0 transparent;

border: 1px solid #D3D3D3;

padding: 8px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

width:480px;

}

#emailwidget-outer:hover{

background: none repeat scroll 0 0 #FFF;

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

}

#emailwidget-outer td{

padding:3px 0;

}

</style>

<center>

<div id='emailwidget-outer'>

<div id='emailwidget'>

<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>

<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/ardiean &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='Blog Dollar'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='BDstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='BDsubmit' title='' type='submit' value='Submit'/>

</form>

</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/c/camil ' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/camil ' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png'/></a>

<a href='https://www.facebook.com/pages/camil/703012395870 ' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/u/0/1178594033339860' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png'/></a>

</td>

</tr>

</tbody></table>

</div></div>

</center>

</b:if>



CATATAN;

- Silahkan ganti http://feedburner.google.com/fb/c/camil dengan url Feedburner Blog sodara.

- kemudian Ganti lagi http://twitter.com/camil dengan url Twitter milik sodara.

- selanjutnya silahkan ganti juga https://www.facebook.com/pages/camil/703012395870 dengan url facebook anda.

- Langkah terakhir silahkan ganti https://plus.google.com/u/0/1178594033339860 dengan url Google plus Sodara.


7. Setelah selesai silahkan simpan template Sodara dan lihat hasilnya pada halaman postingan blog Sodara.


Demikian artikel Sederhana Ini, semoga bisa memberikan manfaat bagi yang membutuhkan, sekian dan terimakasih.


Wassalam…… 


Tidak ada komentar:

Posting Komentar