Monday, November 28, 2011

Menambahkan Langganan Email RSS Pop out Untuk Blogger Anda

rss feed email blogger Hari ini saya mempunyai akan memberikan tutorial blogger kembali mengenai cara memasukkan langganan email rss pop out untuk blogger anda . Anda sudah pasti sudah tahu kan bagaiman langganan email rss , langganan ini sih bertujuan untuk memudahkan para pengunjung berlangganan artikel anda , intinya memudahkan mereka untuk membaca artikel anda setiap kali anda mempunyai artikel baru di blog anda.

Disini kita akan sedikit membuat langganan email itu sedikit lebih menarik dari versi standar nya. Dengan kali ini langganan email kita berbentuk sebuah pop out yang akan muncul pada saat pengunjung baru anda datang di blog anda. untuk melihat demo dari langganan email dengan efek pop out di blog , anda bisa masuk pada blogger test saya dengan cara klik gambar view demo dibawah ini.

rss feed email new blogger template


  • Menambahkan Langganan email versi pop out

Sebelum kita melanjutkan ke langkah pembuatannya , ada baiknya anda bisa mengbackup terlebih dahulu template blogger anda , untuk mengantisipasi jika nanti terdapat suatu kesalahan dalam pemasangan.

1. Pada dashboard blogger anda pergi ke > desugn > edit html

rss feed blogger seo template










2. Kemudian pada kotak edit html cari kode ]]></b:skin> .

Note : tekan F3 atau ctrl + f , untuk memudahkan pencarian kode.


3. Copy paste kode dibawah ini diatas / sebelum kode ]]></b:skin>

/*Subscription Pop Up Css*/
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
/*End Subscription Pop Up Css @ http://vianjb.blogspot.com *


4. Kemudian cari lagi kode </head> , lalu copy paste kode dibawah ini diatas / sebelum </head>

<!--Pop Up Subscription-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6
$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {
//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});
});
</script>
<!--End Pop Up Subscription @ http:/vianjb.blogspot.com -->


5. Kembali cari kode </body> di blog anda lalu copy paste kode dibawah ini dan letakkan sebelum / diatas kode </body>

<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h1>Get Our Latest Posts Via Email - It&#39;s Free</h1>
<p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=INFO-TERBARU&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='INFO-TERBARU'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
</div>
<div id='backgroundPopup'/>

Note : Ada beberapa kode diatas saya block dengan warna kuning , ganti teks yang saya block berwarna kuning dengan nama feed anda , nama itu diambil dari belakan url feed anda , contohnya seperti http://feeds.feedburner.com/INFO-TERBARU .

Setelah itu save template anda , selesai sudah , kini anda sudah bisa menikmati subscription pop out di blog anda.

0 comments:

Post a Comment


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam