Tampilkan postingan dengan label Wordpress Trick. Tampilkan semua postingan
Tampilkan postingan dengan label Wordpress Trick. Tampilkan semua postingan

Kode-kode mouse over html

anbu-files.blogspot.com - Kode-kode mouse over html - berikut ini adalah contoh kode-kode html untuk efek mouse over :

<p style="text-align: center;"><a href="platinum-forum.html"><img src="images/stories/demo/platinum_forum.png" border="0" onmouseover="this.src='images/stories/demo/platinum_forum_white.jpg';" onmouseout="this.src='images/stories/demo/platinum_forum.png';" style="border: 0pt none;" /></a></p>


<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=49&amp;Itemid=56"><img src="images/stories/menu1.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu1.jpg';" style="border: 0pt none;" border="0" /></a>
</p>
<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=57"><img src="images/stories/menu2.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu2.jpg';" style="border: 0pt none;" border="0" /></a>
</p>
<p style="text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=51&amp;Itemid=58"><img src="images/stories/menu3.jpg" onmouseover="this.src='images/stories/hover-facial.jpg';" onmouseout="this.src='images/stories/menu3.jpg';" style="border: 0pt none;" border="0" /></a>
</p>


<p style="text-align: center;"><a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=34&amp;Itemid=56"><img src="/images/stories/catering.jpg" border="0" width="420" height="111" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" /></a> <a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=35&amp;Itemid=56"><img src="/images/stories/wedding.jpg" border="0" width="421" height="111" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" /></a></p>



»»  read more

Membuat Random ads menggunakan JQUERY


anbu-files.blogspot.com-Membuat Random ads menggunakan JQUERY- Katakanlah bahwa Anda memiliki banyak iklan di situs web Anda dan Anda ingin memastikan bahwa beberapa iklan tidak muncul lebih sering dari yang lain. Nah, inilah kode jQuery bagus yang akan membiarkan Anda menampilkan mereka secara acak.

shuffleAds: function(arr)
{
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}

Meskipun saya belum mencoba belum sendiri, kode ini juga dapat digunakan untuk menunjukkan artikel acak untuk pembaca. Kenapa blog Anda yang akan Anda ingin menampilkan posting secara acak? hal itu dikarenakan, supaya pembaca Anda tahu bahwa situs Anda tidak terbatas hanya pada satu tema atau niche tertentu.

Atau mungkin Anda ingin menggunakan jQuery plugin ini  Shuffle (dari jsfromhell.com):

.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
}
$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
})(jQuery);


berikut contoh kode untuk random ads :

//Function to display ads on the jQuery Blog and shuffle
(function($)
{
var displayAds = {
ads: {
1: {
title: “jQuery UI Widgets for PC, Mobile and Touch devices”,
href: “http://www.jqwidgets.com”,
img: “jqwidgets.png”
},
2: {
title: “jQuery Chop Slider 2.0 – The most eye catching image slider on the internet!”,
href: “http://www.idangero.us/cs/”,
img: “idangerous.jpg”
},
3: {
title: “Sauce Labs – Online Cross Browser Testing”,
href: “http://www.saucelabs.com/scouthome?utm_source=banner&utm_medium=flat&utm_campaign=all+all+banner+jquery4u”,
img: “sauce-labs.jpg”
},
4: {
title: “Diamond Slider – Ken Burns Effect & Unlimited Transitions”,
href: “http://www.diamond.billykids-lab.net/”,
img: “diamond-slider.jpg”
},
5: {
title: “AJAX Zoom – jQuery Dynamic 2d/360 Degrees Zoom with ipad support.”,
href: “http://www.ajax-zoom.com”,
img: “ajax-zoom.jpg”
}
},
signupAd: {
title: “Advertise here”,
href: “http://www.jquery4u.com/advertise/”
},
shuffleAds: function(arr)
{
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
},
load: function()
{
$(‘#shuffle-ads’).hide();
var adContainer = $(‘#jq4u-sidebar-ads’).empty(), adsArray = Array();
/* construct ads */
$.each(this.ads, function(i,v)
{
adsArray.push(‘







‘);
});
/* shuffle ads in random order */
adsArray = this.shuffleAds(adsArray);
/* output ads */
$.each(adsArray, function(i,v)
{
adContainer.append(v);
});
/* add the signup ad */
adContainer.append(‘




‘ + this.signupAd.title + ‘



‘);
/* show shuffle button */
adContainer.append(‘Shuffle‘);
$(‘#shuffle-ads’).live(‘click’, function(e)
{
e.preventDefault();
displayAds.load();
});
$(‘#shuffle-ads’).show();
}
}
$(document).ready(function() {
displayAds.load();
});
})(jQuery);

 Semoga tutorial ini bisa sedikit membantu anda
»»  read more

Tutorial membuat gambar untuk background website


anbu-files.blogspot.com-Tutorial membuat gambar untuk background website- dalam beberapa kerjaan saya dalam web design saya menemukan beberapa hal yang membuat saya harus sedikit bertanya-tanya ke beberapa kawan saya , salah satunya adalah membuat gambar untuk background website.
walaupun sederhana tetapi ini bisa membantu saya dalam mengatasi masalah saya dulu pada saat saya masih belum bisa mendesign sebuah website. semoga sedikit kutipan tutorial ini bisa membantu anda yang sedang belajar dalam mendesign sebuah situs.

Berikut adalah tutorial singkat bagiamana membuat gambar untuk background website anda :

masukkan pada tag script body pada skrip html seperti berikut
<body style=”background:url(images/imagescontoh.jpg); background-attachment:fixed“></body>
atau pada style cssnya caranya sperti berikut:
<style type=”text/css”>
body {
background:url(images/imagescontoh.jpg); background-attachment:fixed
}
</style>

semoga dapat membantu
»»  read more

Meletakkan Halaman Blog/web Lain pada Postingan

Anda ingin Meletakkan halaman blog/ web lain pada postingan agan? nah salah satu cara yang akan saya share untuk meletakkan halaman blog/web lain pada postingan adalah dengan cara menambahkan sedikit kode HTML ke dalam Postingan agan . 
nah Kode untuk meletakkan halaman web/ blog ke dalam postingan bisa di copy paste di bawah ini


login ddi blog >> dasbor >> entri baru >> copy code dibawah ini pada postingan dengan mode edit HTML
ganti url warna hijau dengan url blog/web yang anda ingin tampilkan pada postingan blog anda...
<iframe src="http://www.google.com/" width="98%" height="400" border="1"></iframe> 

Thakns to...
http://uc1n.blogspot.com/2010/07/memasukkan-halaman-webblog-lain-pada.html
»»  read more

Auto Generate Content

Auto generate content dengan Google Search API (Click here for English Version). Tips wordpress berikut saya dapatkan dari blog jevuska.com, yang bikin beda disini cuman pemakaian Google Search API, jika di blog mas jevuska pakai Bing Search API.
semua langkah-langkahnya sama persis dengan mas jevuska karna saya ngambil ilmunya juga dari sana :)
Sebelumnya kita daftar dulu untuk mendapatkan Google Search API di sini http://code.google.com/apis/ajaxsearch/signup.html
Langsung saja kita buka file “search.php” pada theme WP yang kita pakai.
letakkan kode berikut di bagian paling atas file search.php atau di atas tanda “<?php get_header(); ?>“.


<?php
define(‘GOOGLE_API_KEY’, ‘MASUKKAN GOOGLE SEARCH API DISINI’);
function pete_curl_get($url, $params)
{
$post_params = array();
foreach ($params as $key => &$val) {
if (is_array($val)) $val = implode(‘,’, $val);
$post_params[] = $key.’=’.urlencode($val);
}
$post_string = implode(‘&’, $post_params);
$fullurl = $url.”?”.$post_string;
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_URL, $fullurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, ‘Mailana (curl)’);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}

function perform_google_web_search($termstring)
{
$start = 0;
$result = array();
while ($start<50)
{

$searchurl = ‘http://ajax.googleapis.com/ajax/services/search/web?v=1.0′;
$searchurl .= ‘&key=’.GOOGLE_API_KEY;
$searchurl .= ‘&start=’.$start;
$searchurl .= ‘&rsz=large’;
$searchurl .= ‘&filter=0′;
$searchurl .= ‘&q=’.urlencode($termstring);
$response = pete_curl_get($searchurl, array());
$responseobject = json_decode($response, true);
if (count($responseobject['responseData']['results'])==0)
break;
$allresponseresults = $responseobject['responseData']['results'];
foreach ($allresponseresults as $responseresult)
{
$result[] = array(
‘url’ => $responseresult['url'],
‘title’ => $responseresult['title'],
‘abstract’ => $responseresult['content'],
);
}
$start += 8;
}
return $result;
}
if (isset($_REQUEST['q'])) {
$termstring = urldecode($_REQUEST['q']);
} else {
$termstring = ”;
}
?>
Setelah itu tambahkan kode berikut sebelum tanda “<?php endif; ?>” pada file search.php
<?php
function CleanFileNameBan($result){
$bannedkey = array(“key1″,”key2″,”key3″,”admin”,”porno”); //masukkan keyword satu persatu untuk menghindari kata-kata yang tidak diinginkan.
$result = str_replace($bannedkey, ”,$result);
$result = trim($result);
return $result;
}
function hilangkan_spesial_karakter($result) { //fungsi hilangkan semua spesial karakter pada Title
$result = strip_tags($result);
$result = preg_replace(‘/&.+?;/’, ”, $result);
$result = preg_replace(‘/\s+/’, ‘ ‘, $result);
$result = preg_replace(‘|%([a-fA-F0-9][a-fA-F0-9])|’, ‘ ‘, $result);
$result = preg_replace(‘|-+|’, ‘ ‘, $result);
$result = preg_replace(‘/&#?[a-z0-9]+;/i’,”,$result);
$result = preg_replace(‘/[^%A-Za-z0-9 _-]/’, ‘ ‘, $result);
$result = trim($result, ‘ ‘);
return $result;
}
function ubah_tanda($result) { //fungsi ubah spasi jadi minus pada permalink title
$result = strtolower($result);
$result = preg_replace(‘/&.+?;/’, ”, $result);
$result = preg_replace(‘/\s+/’, ‘-’, $result);
$result = preg_replace(‘|%([a-fA-F0-9][a-fA-F0-9])|’, ‘-’, $result);
$result = preg_replace(‘|-+|’, ‘-’, $result);
$result = preg_replace(‘/&#?[a-z0-9]+;/i’,”,$result);
$result = preg_replace(‘/[^%A-Za-z0-9 _-]/’, ‘-’, $result);
$result = trim($result, ‘-’);
return $result;
}

?>
<?php $termstring = $s ?>
<?php if ($s!=”) {
$googleresults = perform_google_web_search($termstring);
//Kamu bisa ganti kode <h1> serta test yang ada sesuai dengan kode html dan text keinginan kamu begitu juga dengan yang lainnya
print ‘<h3>Hasil Pencarian ‘.$s.’</h3>’;
foreach ($googleresults as $result) {
print ‘<div>’;
print ‘<h4><a target=”_blank” href=”‘. get_settings(‘home’).’/search/’.ubah_tanda(CleanFileNameBan(hilangkan_spesial_karakter($result['title']))).’”>’.CleanFileNameBan(hilangkan_spesial_karakter($result['title'])).’</a></h4>’;
print ‘<p>’.CleanFileNameBan(strip_tags($result['abstract'])).’</p>’;
print ‘<p style=”color:#666666″>’.$result['url'].’</p>’;
print ‘</div>’;
}
}
?>
Kemudian save.
untuk tutorial lebih lengkapnya bisa langsung dateng ke blog jevuska.com,
»»  read more

Membuat Scrool pada Kontent Blog

ini ilmu saya dapat dari salah satu blogger yang aktif di dunia internet cukup lama :)
semoga  saja bermanfaat :)


Masih dalam rangkaian utak-atik template untuk tampilan blog, kali ini akan berbagi cara Membuat Scroll Pada Archive Blog seperti pada blog ini jika jumlah artikelnya pada bulan itu banyak maka scrollnya akan berfungsi. Ini juga sekaligus sebagai realisasi dari janji saya pada postingan sebelumnya.


Cara Membuat Scroll Pada Archive Blog ini hampir sama dengan membuat Fungsi Scroll Pada Label / Kategori yang telah saya posting sebelumnya, perbedaannya hanya terletak pada kata label dengan archive saja.

Untuk jelasnya langsung saja langkahnya seperti ini :
Masuk dulu ke Acount Blogger atau Dashboard
Pilih Layout , lalu klik Edit HTML
Centang dulu Expand Widget Templates
Cari kode yang seperti ini : <div id=’ArchiveList’> atau kata Archive.
Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.
Kalau sudah, tambahkan kode warna merah itu sebagai scollnya
Lengkapnya kode tersebut seperti dibawah ini :

<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<div style=’overflow:auto; width:ancho; height:200px;’>
<div id=’ArchiveList’>
<div expr:id=’data:widget.instanceId + &quot;_ArchiveList&quot;’>
<b:if cond=’data:style == &quot;HIERARCHY&quot;’>
<b:include data=’data’ name=’interval’/>
</b:if>
<b:if cond=’data:style == &quot;FLAT&quot;’>
<b:include data=’data’ name=’flat’/>
</b:if>
<b:if cond=’data:style == &quot;MENU&quot;’>
<b:include data=’data’ name=’menu’/>
</b:if>
</div></div>
</div>
<b:include name=’quickedit’/>
</div>
</b:includable>
Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.
Mungkin saja diblog sobat kodenya beda,, Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.
Kalau sudah jangan lupa save template .
Selesai.

Hasil akhirnya adalah seperti ini :



Masih sekitar tema scrolling, sebelumnya saya juga telah posting membuat Fungsi Scroll Pada Komentar dan Fungsi Scroll pada Related Post serta Fungsi Scroll Pada Label / Kategori. Kalau diperlukan silahkan aja di klik.

Cuma bocoran saja (biar tidak lupa), ada beberapa kegiatan ngeblog lagi yang telah saya lakukan minggu ini, naah kegiatan tsb. Insya Allah akan saya dokumentasikan pada posting selanjutnya, yaitu tentang :
Cara merubah lebar kolom pada sidebar .. coba perhatikan lebarnya saya tambah 100 pixel tuh.
Cara menghosting CSS Blog ke pihak ketiga..
Cara membuat menu tab view . , dll.

Makanya agar tidak ketinggalan info, masukan Email sobat untuk berlangganan artikel Saung Web secara gratis.. ., Selamat mencoba semoga bermanfaat.

Update :
Silahkan lihat Cara Merubah Lebar Kolom Pada Template
Cara hosting file di google Site lihat disini
Loading Blog lebih Cepat Dengan CSS External



http://saungweb.blogspot.com

blogconfig.com
»»  read more

Membuat Template wordpress dalam 5 menit

Hi, how many of you have felt the need to create a new wordpress template/theme and felt that the structure is too intimidating? We had the same feeling too until we realised how easy it is to create a wordpress template. (I also presented this at the BlogCamp 2006, Chennai). You could also check out 100+ Best WordPress Premium themes and top 90 free wordpress themes.





A few things before you need a template are:
1. Figure out the layout of your blog. That is, you should be clear about what should be placed where. Ofcourse, it’s entirely at your discretion.
2. Create a simple HTML page that show cases your layout.
3. Mould the simple page into a beautiful wordpress template.
Ready?? Ok, let’s start!
As said in point 1, I have just created a basic layout as shown in the screen shot below.

 How To: Create a Wordpress Theme in 5 minutes

You can definitely tell about the various sections that make up the page. They are the header, content, sidebar, footer. To abstract this and give power to the template designers, wordpress has placed the various sections into different pages.
In addition to this, you have to add proper CSS to your design. Include them in “style.css”.
Therefore, the files necessary are:
1. header.php -> Header
2. footer.php -> Footer
3. sidebar.php -> Sidebar
4. index.php -> Content glued with header, sidebar and footer.
5. style.css -> CSS
That is all you need to create a basic template. Clear? Any doubts? Post them here.
Designing the Template:
The HTML for our basic layout goes like this:

Have a look at the simple style sheet for the basic layout. Save this as “style.css”. We would need it later.

Now that you have saved it, open the HTML file in a good text editor. You can see sections that are tagged with “header”, “footer”, “sidebar” and “content”. Let us create the header file.
1. Open notepad, and paste the code shown below. Save this file as “header.php”.


2.
Copy the fragment below and save it in a new file as “footer.php”.


3.
Copy the sidebar code and save it in a new file as “sidebar.php”.


4.
Last but not the least, let us create the “index.php”. If you notice, there are special lines such as “”, “”, “”. These are the functions that are used to glue the content with header, sidebar and footer. Great! we are almost done… few more minutes.

5. Create a new folder and name it as “DarlingTemplate”. Move all the newly created files, including the “style.css” to the folder. To test the new template, upload[:1] this folder to the /wp-content/themes folder. Login to your blog and you will see the new template under the “Presentation” tab.
6. Click on our template name to activate it. Well, everything is cool. The template looks just like the simple HTML file we created earlier. But, what happened to the posts?
7. Open up “index.php”, replace it with the text in the following box and save it. Make sure the modified file is uploaded to the /wp-content/themes/DarlingTemplate folder. Refresh the blog homepage. Voila!! the posts are there.


8.
Oh! we are still left with 30 seconds. Take a screen shot of your theme. Save it as “screenshot.png” and upload it to
/wp-content/themes/DarlingTemplate.
Now, when you login to your wordpress account, our template will have a medium sized thumbnail picture.
We have uploaded the final sample template as a zip file for your reference. Download it here.
This is how the final version of DarlingTemplate looks. I know it’s not professional, but you have learnt the basic tricks of building a new template.
 How To: Create a Wordpress Theme in 5 minutes
Happy Templating! icon smile How To: Create a Wordpress Theme in 5 minutes



from : http://www.levoltz.com/2006/09/17/how-to-create-a-wordpress-template-in-5-minutes/
»»  read more

7 Ebook Gratis Tutorial Wordpress


Wordpress merupakan salah satu platform blogging yang paling banyak dipakai, termasuk oleh klik-kanan.com ;-) Selain gratis dan cukup mudah digunakan, Wordpress juga menawarkan banyak sekali plugin yang akan memperkaya fitur Wordpress.
Di bawah ini kami rangkum 7 ebook seputar Wordpress yang dapat Anda download secara gratis.


1. How to Create a Secure Wordpress Install
Sesuai dengan judulnya, ebook ini membahas tentang cara menginstall dan membuat wordpress Anda menjadi lebih aman dari serangan cracker.

Download: wordpress-modsecurity-paper.pdf
2. Launching a WordPress Blog

Ebook ini membahas dasar-dasar Wordpress, mulai dari menginstal wordpress, menginstall plugin dan themes, melakukan konfigurasi dasar, dan sebagainya.
Download: Launching a WordPress Blog PDF
3. Wordpress SEO for Beginners

Ebook ini membahas tentang dasar-dasar SEO atau Search Engine Optimization.
Download: Wordpress-SEO-for-Beginners.zip
4. SEO for WordPress Blogs
Ebook ini membahas tentang bagaimana mengoptimalkan wordpress Anda supaya mendapat ranking yang baik dari hasi pencarian search engine.
Download: seo-for-wordpress-blogs-blizzard-internet-marketing.pdf
5. How to Design a WordPress Theme
Ebook ini membahas tentang cara membuat theme untuk wordpress.
Download: how-to-design-a-wordpress-theme.zip
6. How to Slice a WordPress Theme
Ebook ini adalah kelanjutan dari ebook How to Design a WordPress Theme.
Download: how-to-slice-a-wordpress-theme.zip
7. How to Code a WordPress Theme
Ini adalah ebook bagian ketiga yang membahas tentang cara membuat theme wordpress.
Download: http://www.wpdesigner.com/
Update 27 Maret 2009
Password untuk ebook “Launching a WordPress Blog”: babygirl
»»  read more

Memasang Favicon di Blog WordPress


Favicons are displayed in most major graphical Web browsers.
A favicon (singkatan dari favorit icon), juga dikenal sebagai ikon situs web, ikon cara pintas, ikon URL, atau penunjuk ikon adalah 16 × 16, 32 × 32 atau 64 × 64 piksel persegi ikon yang terkait dengan situs Web atau halaman Web tertentu. [ 1] Seorang perancang web dapat menciptakan seperti ikon dan menginstalnya ke dalam website (atau halaman Web) dengan beberapa cara, dan web browser yang paling grafis akan
memanfaatkannya. Browser yang memberikan dukungan favicon biasanya menampilkan favicon halaman di bar alamat browser dan di sebelah nama halaman dalam daftar penanda. Browser yang mendukung antarmuka dokumen tab favicon biasanya menunjukkan halaman di sebelah judul halaman pada tab. Beberapa program memungkinkan pengguna untuk memilih ikon sendiri dari hard drive dan mengasosiasikannya dengan sebuah website. (http://en.wikipedia.org/wiki/Favicon)

Cara menambahkan favicon sangat mudah. Kita bisa memakai gambar apa saja (usahakan ukuran panjang dan lebarnya sama, paling baik dengan ukuran 50×50 sehingga kita bisa tahu apakah gambarnya nanti kelihatan atau tidak. Ukuran normal ikon yang dijadikan favicon adalah 48×48 piksel.
Lalu, bagaimana caranya menambahkan favicon ? Baca selanjutnya…
»»  read more