Night Raid Script

Cara Membuat Tab View Pada Blog

Posted by Night Raid Script Posted on 00.50

Cara Membuat TabView - Pasti anda sering bertanya Bagaimana Cara Membuat Tab View di Blog ? Karena tab view ini memiliki banyak kegunaan maupun kelebihan jika kita memasangnya dalam blog kita.

Ukuran untuk tab view sendiri relatif kecil dan dapat menyimpan isi yang banyak. contohnya saja dalam tabview kita akan buat menjadi 3 bagian dan berisikan Comment, recent post, dan yang lainya.

Cara Membuat Tabview

Kali ini saya akan berbagi sharing Bagaimana Cara Membuat Tab View Pada Blog

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS

div.TabView div.Tabs{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Menu Utama Atas */ text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna border Menu Atas */border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */font-weight: 900;

color: #000; /* Warna Font Menu Utama Atas */}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Warna background Menu Utama Atas*/

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna border Kotak Utama */overflow: hidden;

background-color: #FF9900; /* Warna background Kotak Utama */}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode

</head>

<script src='http://kendhin.890m.com/blog/tabview.js'

type='text/javascript'/>

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"

8. Selanjutnya pilih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan anda letakkan Menu Tab View ini.

9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">

<div class="Pad">

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Keterangan Warna langkah nomor 9 :

- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.

- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).

- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

Sekian Cara Memasang Tabview dalam Sidebar, semoga dapat mempercantik tampilan dan dapat mempermudah pengunjung dalam menjelajahi blog sobat.

Cara Membuat Recent Post Keren

Posted by Night Raid Script Posted on 00.44

Night Raid : Cara Membuat Widget Recent Post - Recent Post merupakan widget yang berisikan artikel terbaru dari sebuah blog. Manfaatnya adalah agar seorang pengunjung mengetahui bahwa ada artikel terbaru pada blog kita. Widget ini dapat menampilkan judul artikel beserta diskripsinya dan juga dapat menampilkan judul saja.

Terkait: Cara Membuat Scroll di Widget Archive Blog

Cara membuat recent post keren warna warni

Langkah Pertama : Buka dashboard blog kemudian masuk pada layout lalu klik add gadget dan pilih HTML/Javascript lalu copy paste script dibawah ini.

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Langkah Kedua : Simpan

Sumber kode : http://jepang-script.blogspot.co.id/2016/02/cara-membuat-recent-post-keren.html

Demikian cara membuat recent post keren warna warni diblog semoga berguna bagi kita semua.

Cara Memasang Slider Otomatis Keren di Blog (Update)

Posted by Night Raid Script Posted on 00.29

Kamu dapat mempercantik tampilan blog dengan memasang slider otomatis artikel terbaru ini (recent post slider) di blog kamu. Slider berikut adalah slider otomatis dimana artikel terbaru yang ada di blog akan otomatis ditunjukan oleh slider ini, jadi kamu tidak perlu repot-repot memasukan gambar dan link satu persatu ke dalam slider.

Sebelumnya juga sudah pernah dibagikan slider otomatis responsive artikel terbaru di blog, sekarang slider yang sederhana saja tampilannya, ok sobat cekidot...

Cara Memasang Slider Otomatis Keren di Blog

Slider Otomatis Di Blogspot

Cara Memasang Slider di Blogger

1. Masuk di Blog kamu di Blogger
2. Pilih Template kemudian Edit HTML
3. Letakan kode dibawah ini diatas </head>

<style>
#featuredSlider {margin:10px; padding:0 0 10px;width:96%; position:relative;border:3px solid #444;box-shadow:1px 1px 5px #666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0;}
#featuredSlider .container {height:246px; margin:0 10px 0 0; overflow:hidden; position:relative;}
.featuredTitle{padding-top:15px;font:16px Arial;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;display:none}
a.readmore {float:left;border:1px solid #444;background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLIsW6TW_G_OrX3WdVrRVTgYIwEZD-kDzj4BmEis6oKY663Na9s-42PYig111ooXy3GQzbyMSO11o0UxPtxBCY_h7qDp4TJxt-Jd4RF3B7dJ7qCY0evNeumDHVsBPvNZ9Ff95jNDwjUa0/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/master/slider-otomatis-seocips-1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgP51_bu-BIAJSylGSiwWbt8yjKdFYwFp-FEOxkyyRAbcq_-CBxIbfK1dtEWSAutxmstocUiOxEUNB1APCgXhzT50_wy1-LQFTrULCypHa1NXFywmmpmkj3cVt03O5b3MyOys2j6xr14/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts = 6;
//]]>
</script>

Setting

Kode width:96% adalah lebar slider otomatis ini, silahkan sesuaikan dengan template yang kamu gunakan.
Kode warna merah diatas (kode jQuery.min.js), Jika pada template kamu sudah terdapat jQuery.min.js walaupun serinya berbeda, maka kode warna merah diatas tidak perlu dipasang lagi

Memunculkan Slider di Blog

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'> (kode ini bisa berbeda penamaannya di template kamu), letakkan kode berikut ini dibawahnya :

<b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div>
</div>
</div>
</b:if>

Kode tag kondisional pembuka dan penutup warna merah adalah untuk menapilkan widget ini kecuali di halaman posting (slider akan muncul di homepage dan lain-lain) hapus jika ingin memunculkan disemua halaman.

Save tamplate dan lihat hasilnya. Semoga berhasil, selamat mencoba.

Membuat Navigasi Menu Dropdown Bounce Effect di Blogger

Posted by Night Raid Script Posted on 23.50

Dengan memasang menu navigasi pada blog, dapat memudahkan pengunjung untuk mencari artikel dalam satu kelompok/ kategori yang di letakan dalam navigasi ini. Misalkan pada menu navigasi tertera "Widget" maka pada menu drop downnya bisa diisi pecahan-pecahan dari kategori Widget ini misalnya widget facebook, widget email subcribe, widget Google Plus dan lain sebagainya.

Baiklah sobat pada kesempatan ini seocips akan membagikan tentang cara membuat navigasi menu dropdown dengan effect easeOutbounce. Sebelumnya juga seocips telah membagikan menu navigasi yang lebih keren dari menu ini, seperti mega menu navigasi dengan gambar perlabel di blog dan menu navigasi multi dropdown responsive di Blogger.

Cara Membuat Navigasi Menu Dropdown Bounce Effect

1. Jika sudah ada menu pada template maka dihapus saja, tapi jika menunya lebih bagus dari menu ini sebaiknya berpikir 4x sebelum menghapusnya.
2. Selanjutnya simpan kode di bawah ini di atas main-wrapper . Ingat nama element setiap template berbeda tergantung pembuatnya.

<nav id='navseocips'>
<ul>
<li class='depan'><a href='/'>Beranda</a></li>
<li><a href='#'>Title 2</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 3</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Title 4</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>

3. Simpan CSS di atas kode ]]></skin> atau </style>.

#navseocips { background:#156AA6; overflow:hidden; }
#navseocips ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; }
#navseocips li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; }
#navseocips li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; }
#navseocips li.depan a { border-left:none; }
#navseocips li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; }
#navseocips li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; }
#navseocips li:hover li a { background:#156AA6; }
#navseocips li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; }
#navseocips li a:hover,#navseocips li:hover > a { color:#fff; }
#navseocips li:hover ul.hidden { display:block; }

4. Simpan script di atas kode </head>.
Catatan : jika jquery pada kode berwarna merah dibawah sudah ada pada template anda, maka jangan di masukan lagi. cukup satu saja.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#navseocips li ul').removeClass('hidden');
$('#navseocips li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>

5. Save dan lihat hasilnya.

Ada banyak macam menu navigasi yang bisa kamu gunakan, saat ini ada yang tampilannya sederhana seperti menu navigasi tadi, atau tapilan yang menarik seperti navigasi menu Lavalamp , atau juga menu navigasi yang bisa kamu letakan sesuka hati di sidebar blog kamu seperti menu navigasi click me di sidebar blog.

Nah, sekian navigasi menu dropdown yang dapat dibagikan Night Raid saat ini. Semoga Bermanfaat.

Cara Membuat Tombol Back To Top di Blog

Posted by Night Raid Script Posted on 19.42

Night Raid - Cara Membuat Tombol Back To Top di Blog. Pada kesempatan ini kami akan memabgikan kepada anda tentang bagaimana cara memasang tombol "back to top di Blogspot". Ada beberapa alasa sehingga banyak Blogger memasang tombol back to top ini ke Blog mereka. Yah untuk mempermudah pengunjung blog dan mempercantik tampilan blog mereka.

Kenapa tombol ini dapat mempermudah pengunjung blog? Ketika blog memposting artikel yang panjang, tombol ini dapat membeantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artilel tanpa perlu menggeser scroll ke atas.

Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Cara Membuat Tombol "Back To Top" Di Blogspot

Bebicara mempercantik tampilan blog sebelunya juga seocips telah membagikan tentang cara membuat recent post efek slide ketika halaman di scroll, mungkin saja sobat tertarik ingin membuatnya juga. Ok, berikut ini adalah cara membuat dan memasangnya ke dalam Blogspot!

1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode </head> Tapi jika sudah ada kode ini di template anda, maka lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>

7. Masih di tempat yang sama - Cari kode </head>
8. Masukan script dibawah ini diatas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>

9. Cari kode ]]></b:skin>
10. Masukan kode CSS dibawah ini diatas ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

11. Cari kode </body>
12. Masukan kode di bawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0K9_P9ixJiGJvJmkP9g8xW0uz4fO4N_OBgOWtqwYgac6ygNaHkWKTQMNpqaVEO5-Mw6UiSqzpZ5gPg7sNGmse3q-5nGOyAz6JLXu7uAaUEYIFMUh2NBchvPFyMJZw7q1vHpEpzgCzE0Q/s1600/backtotop.png'/></div>

13. Save Template dan lihat hasilnya.

Kode berwarna biru di atas adalah link/url gambar back to top anda dapat menggantinya dengan gambar yang anda inginkan.

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, dari pada harus menggerakannya dengan mouse. Ini adalah salah satu cara untuk mempermudah pengunjung menelusuri konten - konten yang ada di blog kita. Nah untuk itulah kita membuat dan memasang tombol back to top di Blog.

Cara Memasang Widget Likebox Fanspage Facebook Melayang di Blog

Posted by Night Raid Script Posted on 00.19

Tutorial Night Raid kali ini adalah tentang bagaimaan Cara Memasang Widget Likebox Fanspage Facebook Melayang di Blog. Pada dasarnya tujuan Membuat Widget Like Box Facebook fanspage Melayang di Blog adalah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola dengan memberikan Likenya, sehingga Like halaman facebook yang anda kelola semakin banyak.

Ini juga berguna nantinya jika anda ingin mempromosikan artikel blog anda di halaman Fanspage Facebook anda. karena ketika anda mempostingkan halaman blog atau website anda maka akan muncul di beranda Facebook orang yang sudah me-like Fanspage Facebook anda. Coba anda bayangkan ketika like di "Fanspage Facebook" anda telah berjumlah ribuan atau bahkan puluhan ribu! ini memungkinakan artikel anda akan dilihat oleh banyak orang dan tentu saja mendatangkan pengunjung yang banyak pulah diblog anda.

Berbicara mengenai halaman Fanspage. Di Google Plus juga memiliki halaman fanspage, tentusaja jika anda ingin memiliki nilai yang bagus di pencaharian om gugel maka anda harus memanfaatkan sebaik-baiknnya semua fitur Om gugle. Jika anda tertarik ingin membuat Halaman fanspage Google Plus, silahkan baca artikel yang berjudul Cara membuat dan Memasang halaman Fanspage Google Plus ke Blog. Sebelumnya juga mengenai widget Blogger sudah pernah dibahas :

Facebook Fanspage Melayang dengan Timer
Cara membuat widget author box
Memasang slider otomatis disamping postingan

Widget Fanspage Facebook melayang berikut ini dapat dikatakan simple karena tidak besar-besar amat sehingga dengan tombol close yang kecil, sehingga jika nantinya pengunjung blog anda malas mngklik close maka dia tidak akan terganggu dengan widget ini.

Ok apakah anda tertarik ingin Membuat Widget Like Box Facebook Melayang di Blog anda? silahkan Ikuti langkah-langkah dibawah ini.

Cara Membuat Widget Fanspage Facebook Melayang di Blog

1. Syarat utama : Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu. Baca disini Cara Membuat Halaman Facebook. Setelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tabaah Gadget
4. Lalu pilih HTML/Javascript
5. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- FB melayang tombol close by nightraidt.blogspot.com --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<!-- Mulai --!>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fseocips&width&height=62&colorscheme=light&show_faces=false&header=true&stream=false&show_border=false&appId=1439296419615573" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowtransparency="true"></iframe>
<!-- Selesai --!>
<a class='close' href='#'>×</a></div>

6. Kode yang berwarna biru di atas silahkan ganti dengan script halaman Fansapage Facebook milik anda. Simpat Widget Baru yang anda buat tersebut. Bagaimana cara mendapatkan kodenya ( iframe warna biru ) di atas? Baca caranya DISINI.
7. Lihat hasilnya seperti gambar dibawah ini :

8. Jika berhasil maka selamat anda telah berhasil memasang Likebox fanspage di facebook versi melayang.

Perlu diperhatikan :
1. Tulisan berwarna Biru adalah Kode Script dari Halaman Facebook seocips.com. Silahkan anda ganti Kode Script tersebut dengan Kode Script dari Halaman Facebook Anda.
2. Bila tidak berhasil, coba ulang dari awal.

Baca juga:

Widget random post bergerak diblog
Memasang komentar facebook diblog
Widget popular post bergerak 3D diblog

Sekian tutorial kali ini semoga tutorilannya bermanfaat untuk anda.

Widget Sosial Gplus Facebook dan Twitter Sekaligus Di Blog

Posted by Night Raid Script Posted on 00.14

Widget Social For Blog. Ok sobat pada kesempatan ini seocips.com akan memberikan sebuah widget Blog - cara membuat widget sosial Google plus, Facebook dan Twiter di Blogger. Nah pastinya sobat ingin blog atau website sobat banyak pengunjungnya, selain dari search engine sobat dapat memperbanyak pengunjung blog lewat sosial media seperti facebook Twiter dan Google Plus.

Jejaring sosial merupakan bentuk media sosial yang paling umum digunakan oleh masyarakat di seluruh dunia. Media sosial adalah media online yang mendukung interaksi sosial dan media sosial menggunakan teknologi berbasis web yang mengubah komunikasi menjadi dialog interaktif.

Sobat dapat memanfaatkan kunjungan dari blog sobat untuk mendapatkan misalnya like dan follower nah caranya adalah dengan memasang widget ini di blog sobat. Bagaimana tampilan widget ini? nah tampilannya adalah seperti gambar dibawah ini.

cara membuat widget sosial Google plus, Facebook dan Twiter di Blogger

Catatan:
Untuk membuat widget ini sobat sudah memiliki

Fanspage Facebook
Fanspage Google Plus
Gplus, Facebook dan Twitter.

Cara membuat widget Gplus Facebook Twitter di blog.

1. Masuk ke Blogger.
2. Pilih Blog yang ingin di pasangi widget ini.
3. Pilih tambahkan widget ( HTML )
4. Masukan kode dibawah ini kedalam widget HTML sobat.'

.seocipsglebox { width:280px; background:#333; margin:0 auto; padding:10px 0 10px 20px; border-bottom:1px solid #1e1e1e; }

.seocipsgle1,.seocipsgle2 { margin-top:5px; }

.people { float:left; margin-top:3px; font-weight:bold; color:#fff; }

.googlewidget { margin-left:120px; }

.seocipsfbox { width:260px; background:#333; padding:10px 20px; margin:0 auto; text-align:left; border-top:1px solid #454444; border-bottom:1px solid #1e1e1e; }

.twitter-box { width:260px; background:#333; padding:10px 20px; margin:0 auto; text-align:left; border-top:1px solid #454444; }

.seocipsfb,.seocipstw { font-weight:bold; margin-bottom:5px; color:#fff; }

</style>

<span class="people">Brando Mewo on</span><div class="googlewidget"><div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/103662134309614692674" data-rel="author"></div></div>

</div>

<span class="people">Seocips on</span><div class="googlewidget"><div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/100265901462951809989" data-rel="publisher"></div></div>

</div>

<div class="seocipsfb">Seocips on Facebook</div>

</div>

<div class="seocipstw">Seocips on Twitter</div>

<a href="https://twitter.com/mewobrando" rel="nofollow" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @mewobrando</a>

</div>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&appId=483767385088491&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Pada bagian berwarna diatas silahkan diganti sesuai kebutuhan.

Jejaring sosial merupakan situs dimana setiap orang bisa terhubung dengan teman-teman untuk berbagi informasi dan berkomunikasi. Jejaring sosial terbesar antara lain Facebook, Google Plus, dan Twitter. Media sosial mengajak siapa saja yang tertarik untuk berpertisipasi dengan memberi kontribusi dan feedback secara terbuka, memberi komentar, serta membagi informasi dalam waktu yang cepat dan tak terbatas.

Nah sekian mengenai cara memasang Widget Sosial GPlus Facebook dan Tweet Sekaligus Di Blogger dan semuga bermanfaat.

Night Raid Script

Cara Membuat Tab View Pada Blog

Cara Membuat Recent Post Keren

Cara Memasang Slider Otomatis Keren di Blog (Update)

Cara Memasang Slider di Blogger

Setting

Memunculkan Slider di Blog

Membuat Navigasi Menu Dropdown Bounce Effect di Blogger

Cara Membuat Navigasi Menu Dropdown Bounce Effect

Cara Membuat Tombol Back To Top di Blog

Cara Membuat Tombol "Back To Top" Di Blogspot

Cara Memasang Widget Likebox Fanspage Facebook Melayang di Blog

Cara Membuat Widget Fanspage Facebook Melayang di Blog

Widget Sosial Gplus Facebook dan Twitter Sekaligus Di Blog

Cara membuat widget Gplus Facebook Twitter di blog.

Entri Populer