Showing posts with label blogspot. Show all posts
Showing posts with label blogspot. Show all posts

Wednesday, March 29, 2017

Membuat Widget Fans Page Melayang di Blogspot

Membuat Widget Fans Page Melayang di Blogspot


Selamat Pagi...para pengunjung blog semua, pagi ini sungguh cerah, ditemani secangkir Teh Herbal Ashitaba sebagai penghangat dan pemberi tenaga pada tubuh, juga tak lupa sebatang rokok yang siap mengepul. Saya akan memberikan suatu tutorial yang bisa di bilang sudah banyak yang mengupasnya.

Tapi kali ini saya akan merincikan langkah-langkahnya, agar mudah di fahami dan di aplikasikan.

Tutorial apakah itu ? Bagi sebagian orang ini mungkin sudah bukan sesuatu yang hebat, tapi bagi sebagian yang lainnya yang masih terus mau belajar dan terus mencari, ini tidak salah dicoba. Terutama bagi para blogger muda yang baru berkecimpung didunia blog saya rasa tulisan ini bisa memberi sedikit manfaan.

Pada tutorial kali ini saya akan mengupas soal tentang Membuat Widget Fans Page Melayang di Blogspot. Siapa yang tidak kenal dengan Facebook ? Situs jejaring sosial yang telah dipakai oleh jutaan orang diseluruh dunia. Lantas apa manfaat dari Fans Page ? Yah itu dia bagaimana saya harus menjelaskan disini, sebaiknya nanti kawan-kawan blogger bertanya pada suhu yang serba tahu...Suhu Google. 

Karena disini saya hanya membahas cara menampilkan halaman Fans Page di halaman blog Anda secara melayang, dengan harapan setiap pengunjung blog Anda bisa memberikan apresiasi dengan cara nge-Like blog Anda. 

Ok....Tanpa perlu berlebar panjang kita mulai saja Tutorial nya. Srrrruuuuttttt........(minum teh dulu biar sehat)
  • Pertama-tama silahkan Anda LOGIN ke account Blogger Anda.
  • Setelah itu Pilih pada Tata Letak/Layout
  • Kemudian Pilih Tambah Widget / Add Widget
  • Pilih HTML/Java Script
  • Lalu Tambahkan kode berikut pada kolom HTML/Java Script

<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
 barheight=document.getElementById("topbar").offsetHeight
 var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
 var d = document;
 function ml(id){
  var el=d.getElementById(id);
  if (!persistclose || persistclose && get_cookie("remainclosed")=="")
  el.style.visibility="visible"
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
  el.y -= startY;
  }
  return el;
 }
 window.stayTopLeft=function(){
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : iecompattest().scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
 }
 ftlObj = ml("topbar");
 stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RofkCcTtQDxzwWXgUtAUuqF7Pui8oGgNwhZvkQnKRguYa1ICzOaApEgYsMrecjakOTrnEnAR9YKWtFg3aI8Y21vfyHlArhpDY74H3DTv5FWY2XYxI5SOcLKvzSl06bAT67QKvjGrEXzm/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/pages/Sasak-Culture-Funs-Club/101142649986137" width="250" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>
</div>
</center>
</div>

  • Gati alamat URL yang di beri warna merah dengan alamat URL FansPage Anda
  • Pilih Save dan coba Reload halaman blog Anda.
Semoga Bermanfaat


Available link for download

Read more »
Posted by at
Labels: , , , , , ,

Thursday, March 2, 2017

Membuat Search Box Blogspot Dengan Mudah dan Cepat

Membuat Search Box Blogspot Dengan Mudah dan Cepat


Search Box adalah sebuah tool yang bisa dikatakan wajib ada pada sebuah website atau pun blog agar pengunjung mudah untuk mencari dan menemukan artikel yang mereka butuhkan di dalam website atau blog kita. Namun terkadang ketika kita mendownload template entah itu blogspot atau yang lain setelah kita pasang ternyata tidak ada tombol search tersebut padahal kita sudah suka dengan desain template tersebut dan hanya karena tidak fitur search box kita jadi kecewa berat.

Search Box

Tapi tenang, Versifull punya solusi jitu untuk hal ini. Kali ini saya akan membagikan sebuah cara untuk membuat search box secara manual di blogspot kita, dan tentunya tampilannya ya lumayan lah ga jelek jelek amat ko, dan bisa dimodifikasi jika kalian bisa atau mahir edit script nya, hehe

Ok ga usah banyak omong langsung ajah ikuti langkah - langkahnya berikut :
1. Masuk ke Blogger anda
2. Klik Layout (Kalo bahasa Inggris) atau Tata Letak (Kalau bahasa Indonesia)
3. Klik Add Gadget atau Tambah Gadget di tempat kita akan menambahkan tombol search nanti
4. Pilih HTM/Java Script
5. Copy script dibawah ini :
<!-- KODE SEARCH BOX VERSIFULL RESPONSIF  -->
<style>
#search-box {
position: relative;
width: 100%;
margin: 15px 0px 20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id=search-box>
<form action=/search id=search-form method=get target=_top>
<input id=search-text name=q placeholder=Search here... type=text/>
<button id=search-button type=submit><span>Search</span></button>
</form>
</div> 
6. Kemudian Paste di HTML/Java Script yang kita buat tadi
7. Simpan
8. Selesai

Search Box

Lihat hasilnya Search Box sudah muncul di blog kita. Untuk contoh langsungnya bisa kalian lihat di blog Versifull ini ada Search Box nya :)

Baca juga : Cara Pasang Iklan Adsense di dalam Postingan

Sekian tutorial tentang Cara Membuat Search Box Blogspot Dengan Mudah dan Cepat. Semoga dapat membantu dan menambah wawasan kita semua. Jangan lupa like dan sharenya atau jika ada pertanyaan dan saran bisa berkomentar dengan bahasa yang baik dan sopan.


Available link for download

Read more »
Posted by at
Labels: , , , , , , ,

Thursday, December 22, 2016

Kumpulan E Book OptimusClick blogspot com

Kumpulan E Book OptimusClick blogspot com


Berikut kumpulan e-book yang saya rasa bermanfaat :

  1. E-book tentang ip address dan subnet (download)
  2. E-book tentang konfigurasi server debian (download)


Available link for download

Read more »
Posted by at
Labels: , , , , ,

Wednesday, November 30, 2016

KATA2 MUTIARA ISLAM UNTUK BLOGSPOT ATAU PUN WEBSITE

KATA2 MUTIARA ISLAM UNTUK BLOGSPOT ATAU PUN WEBSITE


Berikut ini saya akan memberikan kode HTML  mutiara islam harian ter update yang bisa sobat pasang di website atau pun di blog ,widget ini di buat oleh sebuah website islami al-habib
Cotoh seperti di bawah ini :

untuk kodenya sobat tinggal copy dan pastekan di widget blogspot milik sobat :

Semoga bisa bermanfaat...amin...


Available link for download

Read more »
Posted by at
Labels: , , , , , , ,

Friday, November 4, 2016

Menambah Scroll Box di sidebar Blogspot

Menambah Scroll Box di sidebar Blogspot


Menambah Scroll Box
coba lihat pada sidebar sebelah kanan, pada kategori Berita Bisnis...disitu saya menambahkan sebuah scroll box untuk kotak iklan dari kumpul blogger sehingga iklan yang tampil seolah-olah bisa diatur sedemikian rupa sehingga terlihat rapi

secara default jika script dari kumpul blogger langsung dipasang maka tampilannya akan melebar dan panjang kebawah dan terlihat nggak rapi, maka dari itu agar terlihat rapi kode dari kumpul blogger harus dimasukkan ke sebuah element HTML yaitu scroll box.

berikut ini adalah cara untuk menambahkannya:
- login ke blogger
- masuk ke tataletak dan tambahkan sebuah widget untuk javascript/html
- widget bisa diletakkan di sidebar atau body
- copast kode berikut ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> --masukkan kode kumpulblogger disini--</div>
- masukkan kode tersebut diatas pada widget javascript/html yang baru saja anda tambah
- letakkan kode kumpulblogger sebelum tag penutup dari "div"
- simpan
Keterangan :
- overflow:auto --> kode ini akan membuat scroll box otomatis memanjang kebawah jika isinya melebihi ukuran standart
- width -->digunakan untuk mengatur lebar dari scroll box
- height --->digunakan untuk mengatur tinggi dari scrool box
- padding --->digunakan untuk mengatur spasi
- border -->mengatur garis tepi, jika bernilai 1 maka garis tepi (kotak) akan dimunculkan
- solid --> warna






Add to GoogleShare


Available link for download

Read more »
Posted by at
Labels: , , , , ,

Friday, October 14, 2016

Menampilkan Iklan di dalam posting blogspot

Menampilkan Iklan di dalam posting blogspot



Parsing Scritpt HTML ke XML di blogspot
permasalahan yang sering terjadi ketika kita ingin menampilkan iklan atau adsense di dalam posting adalah terjadinya error...sintak not wellperformed,,sehingga script iklan tidak dieksekusi oleh blogspot.

nah, untuk menampilkan iklan pada postingan di dalam body blogspot maka script andsense terlebih dahulu harus diparsing menjadi kode xml, salah satu cara yang mudah untuk dilakukan adalah
1. buka browser kesayangan anda
2. ketikkan alamat web berikut ini http://www.blogcrowds.com/resources/parse_html.php
3. pada web tersebut terdapat kotak inputan
4. masukkan script adsense anda
5. klik tombol parse
6. tunggu beberapa saat sampai script html dari adsense anda berubah menjadi script xml
7. masukkan script yang sudah di parse tadi ke dalam body sesuai keinginan anda
8. selesai

semoga bermanfaat

Add to GoogleShare/Bookmark


Available link for download

Read more »
Posted by at
Labels: , , , , ,

Tuesday, October 4, 2016

KOLEKSI WIDGET CALENDER UNTUK BLOGSPOT

KOLEKSI WIDGET CALENDER UNTUK BLOGSPOT


Berikut ini saya akan memberikan code html calender  untuk mempercantik blogspot silahkan sobat pilih :


Powered by Calendar Labs

Copy all code html :


2.copy allCode  html lainya :



Powered by Calendar Labs


Available link for download

Read more »
Posted by at
Labels: , , , ,
Subscribe to: Posts (Atom)