/Tutorial Make Over Blogspot part 2
Make Pop Up Like box page Facebook and Gmail Subscribe

Tutorial Make Over Blogspot part 2

Tutorial Make Over Blogspot part 2, Make Pop Up Like box page Facebook and Gmail Subscribe

Google dan facebook sekarang ini bisa di katakan telah menguasai dunia berkat teknologi luar biasa yang mereka miliki, dua perusahaan internet tersebut memanfaatkan informasi sebagai sumber data.

Internet mempunyai dua peranan penting yaitu:

1. Sebagai sumber data dan informasi

Internet menyimpan berbagai jenis informasi yang sangat besar dan tidak terbatas dan sobat blogger dapat mencari dan mengakses informasi tersebut juga bisa berbagi informasi yang dapat di akses oleh orang lain.

2. Sarana pertukaran data dan informasi

Sobat blogger bisa saling berkomunikasi kepada masyarakat internet tanpa dibatasi jarak dan waktu, dimana antara pengguna satu dan lainya bisa saling bertukar informasi dan data, misalnya melalui jejaring media sosial facebook atau Gmail.

Dari dua hal penting di atas maka dari itu saya sebagai blogger pemula akan membuat pertukaran data dan informasi dengan cara yang sangat cepat dan mudah menurut pandangan saya.

Berikut  ini caranya:

A. Menggunakan Widget Pop Up Like Box page facebook

 

1.Login ke Blog sobat kemudian Klik Menu Tata Letak

2. Klik Tambahkan Gadget 

3. Klik HTML/JavaScript lalu akan muncul kotak dialog box dan copy paste  seluruh code di bawah ini:

<!– Facebook Popup Widget START –><!– Brought to you by www.JasperRoberts.com – www.TheBlogWidgets.com –>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>

<style>

#fanback {

display:none;

background:rgba(0,0,0,0.8);

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

z-index:99999;

}

#fan-exit {

width:100%;

height:100%;

}

#JasperRoberts {

background:white;

width:420px;

height:270px;

position:absolute;

top:58%;

left:63%;

margin:-220px 0 0 -375px;

-webkit-box-shadow: inset 0 0 50px 0 #939393;

-moz-box-shadow: inset 0 0 50px 0 #939393;

box-shadow: inset 0 0 50px 0 #939393;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin: -220px 0 0 -375px;

}

#TheBlogWidgets {

float:right;

cursor:pointer;

background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;

height:15px;

padding:20px;

position:relative;

padding-right:40px;

margin-top:-20px;

margin-right:-22px;

}

.remove-borda {

height:1px;

width:366px;

margin:0 auto;

background:#F3F3F3;

margin-top:16px;

position:relative;

margin-left:20px;

}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {

color:#80808B;

font-size:10px;

margin: 0 auto 5px auto;

float:center;

}

</style>

<script type=’text/javascript’>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie…

if (arguments.length > 1 && String(value) !== “[object Object]”) {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === ‘number’) {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), ‘=’,

options.raw ? value : encodeURIComponent(value),

options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE

options.path ? ‘; path=’ + options.path : ”,

options.domain ? ‘; domain=’ + options.domain : ”,

options.secure ? ‘; secure’ : ”

].join(”));

}

// key and possibly options given, get cookie…

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type=’text/javascript’>

jQuery(document).ready(function($){

if($.cookie(‘popup_user_login’) != ‘yes’){

$(‘#fanback’).delay(10000).fadeIn(‘medium’);

$(‘#TheBlogWidgets, #fan-exit’).click(function(){

$(‘#fanback’).stop().fadeOut(‘medium’);

});

}

$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });

});

</script>

<div id=’fanback’>

<div id=’fan-exit’>

</div>

<div id=’JasperRoberts’>

<div id=’TheBlogWidgets’>

</div>

<div class=’remove-borda’>

</div>

<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/bukangoogleblog&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false’

style=’border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;’></iframe><center>

<span style=”color:#a8a8a8;font-size:8px;” id=”linkit”>Powered by <a style=”color:#a8a8a8;font-size:8px;” href=”http://jasperroberts.com”>Jasper Roberts</a> – <a style=”color:#a8a8a8;font-size:8px;” href=”http://www.theblogwidgets.com”>Blog</a></span></center>

</div>

</div>

<!– Facebook Popup Widget END. Brought to you by www.JasperRoberts.com – www.TheBlogWidgets.com –>

 

4. Setelah itu klik tombol Simpan, kemudian lihat hasilnya pada blog sobat.

Keterangan :

Ganti Url https://www.facebook.com/bukangoogleblog’ menjadi halaman Url fan pages facebook sobat, kemudian untuk mengatur waktu munculnya pop like box pages, sobat bisa edit pada bagian kode ini : $(‘#fb-fanbox’).delay(10000)

Selanjutnya..

B. Menggunakan Pop Up Email Subscribe

1. Login ke Blog sobat > Template > Edit HTML

2. Kemudian CTRL + F untuk mencari kode ]]></b:skin> lalu tekan enter

3. Setelah itu copy code CSS dibawah ini tepat diatas ]]></b:skin>

#popup-wrap .popup-button { background: #A1362A url(“http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png”) no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; } #popup-wrap .popup-button:hover { background-color: #70261D; } #popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; } #popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } #popup-wrap .popup-trigger { display: none; } #popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; } #popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; } #popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #4d90fe; text-align: center; } #popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: “Century Gothic”, sans-serif; font-weight: bold; line-height: normal; } #popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; } #popup-wrap .popup-content { font-size: 16px; line-height: 26px; } #popup-wrap .popup-footer { font-size: 75%; font-style: italic; } #popup-wrap #mailbox, #popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: “Century Gothic”,sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; } #popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; } #popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; } #popup-wrap #subbutton:hover { background: #70261D; } #popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } #popup-wrap .popup-form-close:after, #popup-wrap .popup-form-close:before { content: ”; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } #popup-wrap .popup-form-close:hover:after, #popup-wrap .popup-form-close:hover:before { background: #70261D; } #popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

4. Selanjutnya cari tag </body> lakukan seperti langkah nomor 2 diatas lalu copy code dibawah ini tepat dia atas tag </body>

<div id=”popup-wrap”> <!– Subscribe Trigger –> <label class=’popup-button’ for=’popup-trigger’></label> <!– Subscribe Content –> <input class=’popup-trigger’ id=’popup-trigger’ type=’checkbox’/> <div class=’popup-bg’> <label class=’popup-bg-close’ for=’popup-trigger’ id=’popup-close’></label> <div class=’popup-form’> <label class=’popup-form-close’ for=’popup-trigger’ id=’popup-close’></label> <div class=’popup-inner’> <!– Opt-In Subscribe –> <span class=”popup-title”>Subscribe Via Email</span> <span class=”popup-content”>Subscribe For Free and You’re Lucky</span> <br/><br/> <form action=’http://feedburner.google.com/fb/a/mailverify’ id=’subscribe’ method=’post’ onsubmit=’window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’> <input name=’uri’ type=’hidden’ value=’YOUR-FEEDBURNER-ID‘/> <input name=’loc’ type=’hidden’ value=’en_US’/> <input id=’mailbox’ 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;}’ required=” type=’text’ value=’Enter your email…’/> <input id=’subbutton’ title=” type=’submit’ value=’Sign up’/> </form> <br /> <span class=”popup-footer”>Your email address is safe with us!</span> </div> </div><!– .popup-form –> </div><!– .popup-bg –> </div><!– #popup-wrap –>


5. Lalu save template dan lihat hasilnya pada blog sobat.

Keterangan:

Edit yang di tandai warna merah sesuai kebutuhan sobat.

Jika Bermanfaat, Jangan Share & Comment.

Terimah Kasih.