Cara Menbuat Follow me Pop Up Responsive Seo Friendly

Cara Menbuat Follow me Pop Up

Cara Menbuat Follow me Pop Up

Tutorial kali ini saya akan membahas bagai mana cara membuat About me+Follow me.model popup.

DEMO

Ok langsung saja kita menuju TKP.Pertama kalian sediakan beberapa link yang nanti akan kita sematkan pada widged nya

-Url image buat avatar kita.

-Url fans page facebook

-Url Google + kalian dan

-Url Twiter kalian

Yang nanti akan kita pasang buat follower sosial media

Kalau semua dah siap semua kita lanjut pasang codenya:

Masuk bloger -Pilih -Template -Pilih Edit HTML

Cari code "</b:skin>"cara nya tekan CLTRL+F kalau sudah ketemu pasang code di bawah ini tepat di atas code "</b:skin>

Code</> css Popup

     /* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:39%;margin-left:-250px;background-color:#1EB004;top:20px}.contentbox{position:absolute;background-color:#1EB004;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}kepala{background:#de9b31;height:50px;width:100%;position:inherit}#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:61%;box-sizing:initial;}#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}#left a{color:#bdc3c7;}#left a:hover{color:#fff;}.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}.scrollbarbox .innerone{height:480px;overflow:auto}}a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}#popup{display:none;}#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}.popup-container{position:relative;margin:0 auto;padding:20px}a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}a.popup-close:hover{color:#fff}.totalposts{margin:auto;display:table;text-align:center}.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}li.smartpik{border:0;float:right;list-style:none}li.smartpik a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-size:15px;font-family:'Roboto Condensed';transition:background-color .3s}i.smartpik a:hover{background:#e67e22;color:#fff;}@media (min-width:768px){.popup-container{width:600px}}@media (max-width:767px){.popup-container{width:100%}}

Jangan simpan dulu.
Masih pada halaman edit HTML cari kode "</body>"caranya sama seperti di atas.kalau sudah ketemu jangan tempel dulu edit dengan menggunakan notepad code di bawa ini:

Code</>HTML Popup

<div class='popup-wrapper' id='popup'><div class='popup-container'><div class='boxinner'><div class='circle'/><div class='circle'/><div class='circle'/><div class='contentbox'><kepala><span id='textlogo'><data:blog.title/></span><a class='popup-close' href='#closed' title='Close'>&#215;</a></kepala><br/><div class='scrollbarbox'><div class='innerone'><div id='aboutus'><img expr:alt='data:blog.title' expr:title='data:blog.title' src='....Url gambar kalian .jpg....'/><br/><script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/><b>...Nama web Kalian...</b><br/><br/>Type your blog ...Judul...<br/><br/>...Tentang blog anda...<br/><br/></div></div></div><div id='left'><div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div><div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'><i class='fa fa-google-plus'/> Google+</a></div><div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div><div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a></div><div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen'/> Codepen</a></div><div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-envelope-o'/> Join this blog</a></div></div></div></div></div></div>

Edit Tulisan yang berwana merah dengan url yang telah kita siapkan tadi.Kalau sudah di edit dan sudah siap sekarang kita pastekan code tadi tepat di atas code "</body>
Kemudian kalian cari lagi code "</head>caranya masih sama seperti yang di atas.kalau sudah ketemu pastekan code di bawah ini tepat di atas code "</head>

Code</> js Popup

<script type='text/javascript'>//<![CDATA[// Total Postsfunction getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Publish Articles</span></div>');}//]]></script>

Kalau sudah selesai sekarang klik simpan.
Lanjut kita pilih Tambah widged -Pilih HTML/Javascript
Tempelkan code di bawah ini:

Code</>HTML Popup

<li class='smartpik'><a class='popup-link' href='#popup'>Info</a></li>

Ok selesai.Dan lihat hasilnya
Terimakasih sampai ketemu di postingan selanjutnya.