Nurulcall: Widget

Showing posts with label Widget. Show all posts

Cara Pasang Kotak Admin Dibawah Posting Blogger

Post under Widget Posted by Nurulcall

Ketemu lagi dengan saya nah sobat kali ini Nurulcall akan kasih Tips Blogger dengan nama Cara Pasang Kotak Admin Dibawah Posting Blogger - Banyak cara untuk membuat tampilan blog menjadi lebih baik dan menarik pengunjung. Salah satunya adalah dengan memasang kotak admin dibawah postingan yang berisikan keterangan dari (Penulis/Author blog) tersebut tentang artikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author) ini terserah pada kreasi masing-masing. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah disertakan dalam script widget kotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secara manual.Ok langsung saja dilihat cara-caranya dibawah ini:

1. Login ke blogger anda.

2. Pilih Rancangan >> Edit HTML, centang Expand template widget.

3. Cari kode <div class='post-footer'> Copy script kotak admin dibawah ini dan paste tepat di atasnya

<b:if cond='data:blog.pageType == "item"'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>Deskripsi Blog Anda</h4>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://nurulcall-tanjungkalang.blogspot.com/2012/03/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>

</div>

</b:if>

5. Kemudian cari lagi kode ]]></b:skin> Copy kode CSS dibawah ini dan paste tepat diatas kode

]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode<data:post.body/>.

.admin-tulisan{

display:block;

width:auto;

background:#CFE2E0;

border:2px solid #fff;

box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;

padding:0;

margin:30px 0 10px 0;

font:normal 12px Arial, Sans-Serif;

color:#222;

}

.admin-tulisan .kontainer{padding:5px;}

.admin-tulisan h4{

background:#8A9C04;

border:none;

border-bottom:1px solid #699019;

color:#fff;

text-transform:normal;

text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);

font:bold 12px Arial,Sans-Serif;

padding:5px 10px;

margin:0 0 0 0;

display:block;

}

.admin-tulisan h4 a{color:#FEEA83;}

.admin-tulisan img{

width:70px;

height:70px;

margin:0 10px 0 0;

float:left;

border:1px solid #954B02;

padding:2px;

background:#C36702;

box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

}

6. Silahkan ganti link URL gambar profil yang berwarna BIRU dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata yang lain, silahkan diganti menurut selera anda.

7. Untuk jenis font, warna background dan border juga dapat sobat ganti sesuai selera anda.

8. Pratinjau dulu jika sudah ok Simpan template bla......bla....bla...... dah nongol tu......hehehehhe.

Demikian Cara Pasang kotak Admin Dibawah Postingan Blogger semoga bermanfaat..

Cara Menambah Widget Social Sharing di Blog

Post under Widget Posted by Nurulcall

Widget Socila Sharing diblog itulah nama yang Nurulcall akan post kali ini biasanya kalau ada pengunjung yang ingin share ke Yahoo,Fb atau juga anda mau share ke Digg dan banyak lagi social gak bisa nyebutin satu-persatu nih kalau ada sobat yang mau silahkan dicoba saja mudah cara pemasanganya sob tapi..! sebelumnya mungkin ini juga yang anda cari Widget Mata Mengikuti Cursor masih banyak lagi silahkan anda cari diblog Nurulcall untuk Langkah pemasangan Widget Social Sharing silahkan ikuti langkah-langkah dibawah:

Login ke blogger dashboard-->Klik Design-->Edit HTML
Cari kode ]]></b:skin> Paste kode dibawah ini tepat diatasnya

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}

#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}

#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2LxgV6JRcbaOIUYku7p-tSrUa8-m-oBPn47C5f7v05LtxV010reJtgQNk_OaEvIas1sQxub2LrSjxR9zUhgxmn-H4PYL1DNmEWl27ZWja7I6q9X_R3_tg33mq73JXrNxxSm4aJ2zsxVV/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }

#w2b-share ul li a.twitter {background-position: -0px -0px; }

#w2b-share ul li a.twitter:hover {background-position: -0px -33px; }

#w2b-share ul li a.facebook {background-position: -32px -0px; }

#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }

#w2b-share ul li a.stumbleupon {background-position: -64px -0px; }

#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }

#w2b-share ul li a.digg {background-position: -192px -0px; }

#w2b-share ul li a.digg:hover {background-position: -192px -33px;}

#w2b-share ul li a.reddit {background-position: -160px -0px; }

#w2b-share ul li a.reddit:hover {background-position: -160px -33px;}

#w2b-share ul li a.google {background-position: -128px -0px; }

#w2b-share ul li a.google:hover {background-position: -128px -33px;}

#w2b-share ul li a.del-icio-us {background-position: -480px -0px; }

#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}

#w2b-share ul li a.mixx {background-position: -96px -0px; }

#w2b-share ul li a.mixx:hover {background-position: -96px -33px; }

#w2b-share ul li a.technorati {background-position: -416px -0px; }

#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}

#w2b-share ul li a.linkin {background-position: -256px -0px; }

#w2b-share ul li a.linkin:hover {background-position: -256px -33px;}

#w2b-share ul li a.yahoobuzz {background-position: -448px -0px; }

#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}

#w2b-share ul li a.myspace {background-position: -512px -0px; }

#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}

#w2b-share ul li a.more {background-position: -576px -0px; }

#w2b-share ul li a.more:hover {background-position: -576px -33px;}

Seterusnya cari kode <data:post.body/>
Paste kode social sharing ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>

<ul>

</ul>

</div>

</b:if>

Perhatian!sekiranya kode <data:post.body/> ada tiga dalam template anda cari mana2 kode dibawah dan pastekan kode social sharing dibawah/selepasnya.

<b:if cond='data:blog.pageType == "item"'>

<data:post.body/>

Save template bla.....bla.....bla.........siap deh demikian Cara Menambah Widget Social Sharing di Blog silahkan dicoba...

Widget Mata Mengikuti Cursor

Post under Widget Posted by Nurulcall

Kali ini Nurulcall akan kasih Widget Mata Mengikuti Cursor tapi sebelum itu mungkin ini juga anda cari Cara merubah Tampilan Linkwithin dan ini juga Cara menambah Gambar Naruto di Sidebar ok langsung saja silahkan lihat gambar dibawah tampilanya akan seperti ini

Ikuti langkah-langkah dibawah ini:

//<![CDATA[

// Ojos que siguen al cursor

// Script original de Oopstudios.com

// Adaptado por ciudadblogger.com

EYES = {};

EYES.stack = [];

EYES.follow = function (eye) {

var el1 = document.getElementById (eye);

var el2 = el1.getElementsByTagName ("IMG");

el2 = el2[0];

el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;

el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";

el1.maxDist = 6 * el1.offsetWidth;

EYES.stack.push ([el1, el2]);

};

EYES.mousemove = function (e) {

if (!EYES.stack.length) {

return;

}

var mouseX = mouseY = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {

mouseX = e.pageX;

mouseY = e.pageY;

} else if (e.clientX || e.clientY) {

mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

}

for (var e=0, l=EYES.stack.length; e<l; e++) {

var el = EYES.stack[e];

var elX = elY = 0;

if (el[0].offsetParent) {

obj = el[0];

do {

elX += obj.offsetLeft;

elY += obj.offsetTop;

} while (obj = obj.offsetParent);

}

el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);

el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);

var difX = mouseX - el[0].centreX;

var difY = mouseY - el[0].centreY;

var dTan = Math.atan2 (difX, difY);

var dist = Math.sqrt ((difX * difX) + (difY * difY));

dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));

var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);

var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);

el[1].style.margin = newY + "px 0 0 " + newX + "px";

}

};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);

else document.addEventListener ("mousemove", EYES.mousemove, false);

//]]>

</script>

<div id="Ojo1" style="width: 170px; height: 140px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XF_0vhVFWCR7b6o8pRuHWgpjhTMM4HtLfLpDtR1Ei6qT95ttUxJc6vIb6w6ubDTf3cFJuTbj3SO4Oa1i6K2Bjk49FbCBxTdLwZwPXP9fbinn7U0f7cukjDAVrZlTWxOPgII2SrBzu6Q/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">

<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwmGnxeHeuWFZKCyacX-xLNN1uouLsilEft53Pf1sVMhhH2JyZKun7xAUg7GlLQsC2i3mrZ9vAmLozMWbjpCphNlZ_4ZV2fN3j8SYrLLeOkYq7m_cDCtm9BY0IaTzQ44-HQYrm8mxd70/s170/ojo_2.png) center center no-repeat; position:absolute;

left: 485px; top: 20px;">

</div>

EYES.follow ('Ojo1');

EYES.follow ('Ojo2');

</script>

Jika anda ingin gambar yang lain

Dan Juga ini

</div>

Semoga bermanfaat........

Widget Pilih Warna Background

Post under Widget Posted by Nurulcall

Hai sobat semua Nurulcall ada java script namanya Widget Pilih Warna Background mungkin ada sobat yang belum pernah lihat kalau mau demo silahkan dilihat gambar dibawah dan kamu bisa lihat diblog Nurulcall letaknya ada di atas Google Terjemahan tapi sebelum keTKP silahkan dilihat juga ini Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog ada juga Cara Membuat Tampilan Slide Show di Blogspot ok kalau suda silahkan anda copy script dibawah:

<div class="widget-content">
<center><b>Pilih Warna Kesukaan</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>

</iframe><span><a href="http://nurulcall-tanjungkalang.blogspot.com/2012/02/widget-pilih-warna-background.html">Tutorial Here</a></span></div></div>

Kemudian Simpan Selamat mencoba semoga berhasil.....

Cara Membuat Widget Naruto fight

Post under Widget Posted by Nurulcall

Mungkin di saat sobat blogwalking sobat pernah melihat naruto VS sasuke lagi berantem di pojok blog. kali ini Nurulcall akan berbagi cara memasang nya di blog sobat. tapi disini saya mencoba berbagi lagi kepada teman-teman yang belum mengetahui cara memasang widget ini yah kalau yang sudah masternya blogger mungkin ini sudah ketinggalan zaman.

fungsi dari widget ini mungkin akan mempercantik & menjadikan pengunjung betah di blog sobat. jika ingin menambahkan widget lain silahkan di klik Cara Membuat Background Template berubah-ubah atau Cara Menambah Smile di komentar blog. cara nya juga cukup mudah dan seperti biasa,

1. login di akun blogger sobat dan senyum dulu gan biar makin manis,

2. pilih design/rancangan.

3. pilih add widget/ tambah widget

4. scroll mouse ke bawah dan pilih HTML/javascript.

5. pastekan kode di bawah ini di dalam kotal html/javscript

6. atur letak nya se suka hati sobat

7. save dan selesai.

Demikian Cara Membuat Widget Naruto fight semoga bermanfaat untuk anda pecinta Naruto silahkan dicoba..

NURULCALL LINK EXCHANGE

Mau Tukar link silahkan Copy-Paste code HTML dibawah ke blog anda lalu beri commentar di postingan terbaru atau di buku tamu sebagai pemberitahuan secepatnya link anda saya pasang tanks.