Not-
Found
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Ingin mempercantik blog dengan kalender (Kalender Lucu Untuk Blogger)?

Hari ini saya akan menuliskan tutorial / cara pasang kalender untuk blogger dengan menggunakan blog kalender widget.

Sebelum saya tuliskan cara pasang kalender di blogger, mungkin teman-teman ingin melihat bagaimana penampilan kalender lucu untuk blogger ini, berikut gambar kalender tersebut


Kalender Untuk Blogger
Ada berbagai macam pilihan blog kalender widget yang bisa kamu pilih, silakan pilih kalender lucu untuk blogger yang kamu suka.
Kalender Lucu Untuk Blogger

Widget Blog Kalender

Berikut cara mendapatakan script kalender widget untuk di pasang pada blog blogger kamu
  1. Kunjungi www.cuteki.com/widgets/calendars/
  2. Pilih dan klik widget kalender yang kamu suka
  3. Sesuaikan lebar widget kalender ini dengan template blogger yang kamu gunakan saat ini
  4. Kopi dan paste script kalender widget di blog blogger kamu

Panduan Cara Pasang Kalender Di Blogger

Berikut tutorial pasang kalender widget di blogger
  1. Login ke blogger
  2. Pilih menu Rancangan / Tata Letak
  3. Klik Tambah Gadget / Add Gadget
  4. Pilih Gadget HTML/JavaScript
  5. Paste script kalender widget di sana
  6. Simpan
Nah itulah tutorial/panduan cara pasang kalender di blogger menggunakan script kalender lucu untuk blogger.
Selamat mencoba dan semoga bermanfaat

Sumber : http://mazbuddyazah.blogspot.com/2012/01/ingin-mempercantik-blog-dengan-kalender.html?showComment=1327846517222#c8689074080058047863

Posted by
Solahudin Syihab

More

Membuat kalender di blogger menggunakan JavaScript

Sekedar iseng-iseng... Bagi yang mau belajar atau yang sedang belajar membuat blog, saya punya kode JavaScript kalender yang bisa di pasang di blog kamu...! Dan untuk sample bisa kamu lihat di halaman depan blog ini, ada di sebelah kiri halaman.






Kalender ini bisa kamu modifikasi sendiri, seperti table, warna background, warna text, dan warna tanggal sekarang, sesuai selera kamu sendiri, atau kamu juga bisa menggunakan desain css style.
Silahkan copy dan paste di blog kamu, ini kode nya :

<script language='javascript' type='text/javascript'>
var fifteenth = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var sixteenth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var seventeenth = new Date();
var eighteenth = seventeenth.getMonth();
var nineteenth = seventeenth.getDay();
var first2 = seventeenth.getDate();
var second2 = sixteenth[eighteenth];
if (eighteenth == 1) {  var third2 = seventeenth.getYear();
if (third2%4 == 0) second2 = 29;}
document.write("<table border='0' bgcolor='#90c0f0' cellspacing='1' cellpadding='1'>");document.write('<tr>');
for (var fourth2=0; fourth2<7; fourth2++) {
document.write("<td width='30' height='30'>");
document.write("<div align='center'>" + fifteenth[fourth2] + "</div>");
document.write('</td>');}
document.write('</tr>');
var fifth2 = 0;
var sixth2 = 1;
var fifteenth3 = nineteenth - first2%7 + 1;
if (fifteenth3 < 0) fifteenth3 += 7;
var sixteenth3 = parseInt((fifteenth3 + second2)/7);
if ((fifteenth3 + second2)%7 != 0) sixteenth3++;
for (var fourth2=sixteenth3; fourth2>0; fourth2--) {
document.write('<tr>'); 
for (var seventeenth3=7; seventeenth3>0; seventeenth3--) {
document.write('<td>');   
if (fifth2<fifteenth3 || sixth2>second2) {
document.write("<div align='center'></div>");      fifth2++;    }   
else {     
if (sixth2 == first2)
document.write("<div align='center'><font color='blue'>[" + sixth2 + "]</font></div>");     
else document.write("<div align='center'>" + sixth2 + "</div>");      sixth2++;    }
document.write('</td>')  }
document.write('</tr>');}
document.write('</table>');
</script>

Silahkan modifikasi sendiri ya....!

Misalnya kamu ingin mengganti warna background nya...?
Kamu hanya tinggal mengganti kode warna seperti pada kode di bawah ini:

<table border='0' bgcolor='#90c0f0' cellspacing='1' cellpadding='1'>

Nah, untuk mengganti warna background kalender ini, dengan mengganti kode warna yang di beri font tebal pada kode HTML di atas ( #90c0f0 ).

Atau misalkan kamu ingin menambahkan link ke posting yang kamu buat pada tanggalnya, itu bisa saja, kamu cukup menambahkan link nya pada bagian ini :

document.write("<div align='center'><font color='blue'>[" + sixth2 + "]</font></div>");

Kemudian tambahkankode seperti ini :

<a href='link_url' target='_blank'>[" + sixth2 + "]</a>



Perhatikan pada kode JavaScript di atas, document.write() adalah untuk menampilkan data HTML atau TEXT biasa yang ada di dalam nya. Mudah-mudahan saya ada kesempatan untuk menjelaskanya nanti,dan untuk saat ini kita hanya akan membahas tentang cara pasang kalender ini saja...

Seperti biasa kamu bisa buka blogger.com lalu login, kemudian pilih blog yang telah kamu buat sebelumnya yang akan kamu pasangi kalender ini, coba lihat gambar-gambar di bawah ini untuk langkah-langkah pemasangan nya :


1. Setelah login ke blogger, kemudian pilih editor Layout :

 2. Kemudian tambahkan Gadget baru :


3. Selanjutnya tambahkan gadget HTML/JavaScript : 

4. Lalu masukan kode JavaScript kalender yang tadi kamu edit itu, pada bagian form gatget, kemudian setelah selesai klick simpan, dan lihat hasilnya.

Semoga tutorial kalender ini dapat di mengerti dan bermanfaat bagi yang sedang belajar, karena segala ilmu itu tidaklah ada batasanya.... mari kita belajar bersama-sama...! Dan terimakasih telah berkunjung di blog ini.

Sumber : http://ujang-rohidin.blogspot.com/2011/10/membuat-kalender-di-blogger-menggunakan.html

Posted by
Solahudin Syihab

More

Membuat Read More Tanpa Script

Panduan Cara Membuat Read More Di Blogger Tanpa Menggunakan Script Read More

Hari ini saya ingin menuliskan cara membuat read more tanpa script atau cara membuat posting yang ada tulisan baca selengkapnya tanpa harus menutak-atik template yang kita gunakan, tanpa harus repot-repot menambahkan kode/script lagi. Bagi yang ingin mencoba membuat Auto Read More (Read More Otomatis menggunakan script) silakan baca Cara Membuat Auto Read More di Blogger.

Saya rasa ini bisa di jadikan alternatif yang sangat tepat/JITU bagi siapa saja yang ingin menampilkan sebagian tulisan di home page yang ada tulisan Read More atau Baca Selengkapnya. Cara ini juga sangat aman, karena tidak ada RESIKO EROR.

Ingin tahu Cara Membuat Read More Tanpa Script???

Silakan baca terus ,,,
Oh ia ... bagi yang sudah tahu cara ini silakan tegur jika ada yang salah.

Cara Membuat Read More/Baca Selengkapnya tanpa edit template sangat mudah!!!
  1. Silakan tulis artikel seperti biasanya (tulis saja dulu sampai selsai)
  2. Letakkan korsur pada tulisan (sesudah kalimat) yang ingin di masukkan Read More.
  3. Klik Icon Insert jum break Cara Mudah Membuat Read More Tanpa Script
  4. Terbitkan/Publish artikel tersebut dan silakan lihat hasilnya.
Nah itu lah cara mudah membuat read more/baca selengkapnya di blogger tanpa harus pusing dan ribet memasukkan script read more lagi.

Selamat Mencoba

Update (Artikel ini telah saya tambah sedikit pada tgl 14 November 2011)

Bagi teman-teman yang sudah menggunakan Cara Membuat Read More Tanpa Script ini namun tombol/tulisan Read More/Baca Selengkapnya tidak ada. Maka silakan teman-teman baca artikel Cara Menambahkan Tombol Read More bagi pengguna cara bikin read more tanpa script.

Sebenarnya artikel tersebut sudah lama saya tulis, namun lupa masukin info nya di sini.
Tags: ,
Jangan Lupa Klik Tombol Like dan Share Di Bawah ini ya ... :-)

Sumber : http://blog.ahmadrifai.net/2011/04/membuat-read-more-tanpa-script.html

Posted by
Solahudin Syihab

More

Mudahnya Membuat Toko Online di Blogspot dengan SimpleCart + Paypal

Banyak orang yang merasa kesulitan ketika akan membangun toko online, dengan berbagai alasan dan keterbatasan, misalnya karena harganya yang mahal, pengaturannya yang super rumit yang hanya bisa dilakukan oleh seorang yang sudah mahir dibidangnya, sedangkan modal untuk membangun toko onlinehanya pas pasan.

Namun bukan berarti untuk kita yang memiliki keterbatasan itu lantas mengurungkan niat untuk membangun toko online, kita juga bisa membangun toko online mudah dan gratis.Walaupun kita tidak memiliki keahlian programing sekalipun dan tanpa harus memiliki database.

Bagi pengguna blogger, ada aplikasi Javascript sederhana yang diperuntukan untuk pembuatan toko online di blogspot, SimpleCart.js. SimpleCart.js adalah solusi terbaik untuk membangun aplikasi toko online yang sederhana tanpa harus memerlukan Database. Aplikasi yang dikembangkan oleh The wojo grup ini memungkinkan kita untuk menampilkan beberapa item produk dalam jumlah terbatas. Sebelum melakukan pemesanan, customer juga dimudahkan untuk memilih dan menyimpan item untuk sementara waktu di shopping cart (keranjang belanja) dan aplikasi ini juga support pembayaran via online karena sudah terintegrasi dengan Paypal. Selain itu kita dalam hal ini sebagai pemilik (e-merchant) dapat dengan mudah mengatur sendiri harga per-item dari produk yang akan dijual :)

Silahkan download script dan sample aplikasi yang dibangun dengan Simple chart (JS) pada link dibawah ini:

||Download ||




Step By Step Instalasi

1. Download dan install SimpleCart.js

Download SimpleCart.js dari link diatas, kemudian ekstrak. Upload file simplecart.js ke file hosting gratis (di Ripway.com atau Google Sites).
Jika tidak mau repot gunakan kode dibawah ini.
Silahkan masuk ke Akun Blogger anda, pilih blog yang akan dijadikan sebagai toko online anda, pilih Rancangan, Edit HTML.
Copy Paste kode dibawah ini tepat di bawah kode <b:skin><![CDATA[

=========code=======

<!--Include the SimpleCart(js) script-->
<script charset='utf-8' src='https://sites.google.com/site/s2sblue69/simplecart-1/simpleCart.txt' type='text/javascript'/>

<!--Make a new cart instance with your paypal login email-->
<script type='text/javascript'>
simpleCart = new cart(&quot;yourpaypalemail@yahoo.com&quot;);
simpleCart.currency = Rupiah;
</script>


Ganti yourpaypalemail@yahoo.com dengan email paypal anda.
Simpan Template

2. Install CSS Code berikut
copy dan pasti code CSS dibawah tepat sebelum ]]></b:skin>


/* Your Cart */
.cartHeaders,.totalRow{display:none;}
.simpleCart_items{
overflow-y:auto;
overflow-x:hidden;
height:324px;
width:200px;
margin-bottom:20px;
}
.itemContainer{
clear:both;
width:229px;
padding:11px 0;
font-size:11px;
}
.itemImage{
float:left;
width:60px;
}
.itemName{
float:left;
width:85px;
}
.itemPrice{
float:left;
width:85px;
color:#418932;
}
.itemQuantity{
float:left;
width:33px;
margin-top:-20px;
vertical-align:middle;
}
.itemQuantity input{
width:20px;
border:1px solid #ccc;
padding:3px 2px;
}


.itemTotal{
float:left;
color:#c23f26;
margin-top:0px
}


Simpan Template

3. Membuat Produk
Posting Entri baru untuk membuat produk, sebagai contoh Copy Paste code dibawah ini dalam HTML mode.

<center>
<img src="https://lh4.googleusercontent.com/-uxQZUDZ_QO4/TbWqtcH5qZI/AAAAAAAAADo/Fn2FkkCRSEY/Canon%252520Camera%252520Lens%252520Cup%252520%252528Holder%252520EF%25252024-105mm%252529edit.jpg" alt="Camera Cup" />
Price : $50
Name : Camera Cup
Details : Bla.. bla.. bla
<a href="#" onclick="simpleCart.add('name=Red Shoe','price=50','image=http://sites.google.com/site/angga123site/redShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/goldShoe.jpg" alt="Gold Shoe" />
Price : $70
Name : Gold Shoe
<a href="#" onclick="simpleCart.add('name=Gold Shoe','price=70','image=http://sites.google.com/site/angga123site/goldShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/blackGold.jpg" alt="Black Gold Shoe" />
Price : $58
Name : Black Gold
<a href="#" onclick="simpleCart.add('name=Black Gold','price=58','image=http://sites.google.com/site/angga123site/blackGoldthumb.jpg');return false;"> add to cart</a>


</center>

Terbitkan Entri

4. Membuat Widget

Go to Layout - Page Element - Add A Gadget - Choose HTML / Javascript
Copy and paste this code into your widget

<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items">
</div>




TOTAL : <div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> items
<br/>
<br/>
<!--Here's the Links to Checkout and Empty Cart-->
<center>
<a href="#" class="simpleCart_empty">Empty cart </a> |
<a href="#" class="simpleCart_checkout">Checkout</a></center>

Save dan lihat hasilnya

Sumber : http://webutakatik.blogspot.com/2011/06/mudahnya-membuat-toko-online-di.html?showComment=1326608761666#c3873671290900326810

Posted by
Solahudin Syihab

More

MEMBUAT BARIS, PARAGRAF DAN GARIS PEMISAH

Membuat paragraf dan garis baru pada halaman untuk situs anda tidak sama dengan membuat paragraf dan garis baru pada dokumen biasa. Kalau di MS Word kita tinggal menekan enter, maka kalau di halaman website ini, untuk membuat paragraf, garis baru dan garis pemisah, diperlukan kode tag khusus yaitu:
  • <br/> untuk break atau garis baru.
  • <p></p> untuk parapraph.
  • <hr/> untuk horizontal rule atau garis horizontal.
Penting: Banyak juga yang menulis kode break dengan kode <br>atau <hr> tanpa garis miring. Kemudian ada pula yang menulis <p>saja tanpa ditutup dengan tag </p>. Ini bisa saja dilakukan. Tapi disarankan untuk menulis kode-kode ini dengan lengkap. Hal ini dilakukan untuk meminimalisir kemungkinan terjadinya error pada web page kita sekaligus membiasakan diri menulis kode dengan benar mengingat perkembangan kode-kode XHTML yang semakin ketat dalam segi penulisan script-scriptnya. Contoh:
<html>
<body>
Internet marketing <br/>
adalah belajar berbisnis lewat internet. <br/>
Internet marketing sangat beragam.
<p>di antara adalah pay per click seperti google adsense</p>
atau pay per buy seperti misalnya affiliate program <br/>
yang banyak dijumpai di situs-situs.
<hr/>
</body>
</html>
Jika ingin melihat hasilnya silahkan klik di sini. Mudah kan? Selanjutnya kita akan masuk ke bagian tutorial HTML dasar yaitusetting format dan style teks HTML.

Posted by
Solahudin Syihab

More

Cara Merubah Ukuran Font Judul Blog [ Besar/Kecil/Normal ]

Pada template minima, judul blog ditulis dalam huruf besar semua. Untuk merubah cara penulisannya menjadi normal, atau mungkin merubah cara penulisannya dalam huruf kecil semua caranya adalah sebagai berikut:
Login ke Blogspot –> Tata Letak (Layout) –> Edit HTML Cari baris kode berikut:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Rubah variabel text-transform sesuai keinginan.
uppercase = huruf besar semua
lowercase = huruf kecil semua
- atau normal
Simpan template.
Catatan:
- Untuk merubah cara penulisan deskripsi blog, cari dan rubah kode text-transform pada baris kode berikut:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
- Untuk memudahkan pencarian baris kode, gunakan “kotak pencari”, tekan Ctrl + F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, “kotak pencari” letaknya sedikit berbeda.

Sumber : http://safarinda.com/2011/03/cara-merubah-ukuran-font-judul-blog-besarkecilnormal/

Posted by
Solahudin

More

Script Untuk Membuat Popular Post

Jika Anda Tertarik Untuk Membuat Popular Post di blog anda,Silahkan Copy Code Berikut Ini,dan untuk cara meletakannya Blh di postingan atau sidebar blog anda,tergantung selera masing-masing....





<script language='javascript'>

aBold = false;

numposts=100;

maxshowresult=20;

home_page = "http://www.tutorial-share.co.cc/";

</script>

<script type='text/javascript'>

//<![CDATA[

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>
Silahkan anda ganti Code yang berwarna MERAH.....
Sumber : http://www.blog-id.co.cc/2010/10/script-untuk-membuat-popular-post.html

Posted by
Solahudin

More

Cara Mengganti Icon Pada Address Bar

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img404.imageshack.us/img404/1214/image10vr1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif



Sumber : http://trik-tips.blogspot.com/2007/12/cara-mengganti-icon-pada-address-bar.html

Posted by
Solahudin

More

Cara Membuat Teks Berkedip/Blink

Saya sering melihat di blog teman-teman menemukan kata atau kalimat yang berkedip-kedip. Waktu itu saya mikir, bagaimana cara membuat teks berkedip-kedip itu, sepertinya sulit sekali membuatnya? Contohnya kayak gini 'Aku Orang Ganteng'. Kalo pertama liat pasti situ juga akan heran kayak saya. Setelah selidik punya selidik eh.. ternyata membuat teks berkedip itu gampang banget, suer deh.. Untuk membuat teks berkedip itu kita hanya perlu menambahkan sedikit kode HTML

Kode HTMLnya seperti ini:


<blink>(Kata yang ingin kamu kedipkan)</blink>



Kita tinggal menyisipkan kalimat yang ingin berkedip/blink diantara kode <blink> dan </blink>

Contohnya kayak gini

<blink>Aku orang yang ganteng dan baik hati</blink>


Hasilnya akan seperti ini:
Aku orang yang ganteng dan baik hati


Mudah bukan.. selamat membuat teks berkedip yah..
Oya, trik ini hanya bisa dilakukan di blog yang mendukung HTML kayak blogger saja. Kalo di WP sampe jungkir balik juga kayaknya ga bakal bisa

Sumber : RyzkiThea

Posted by
Solahudin

More

Copyright © / Solah's Kliping

Template by : Urangkurai / powered by :blogger