Recent Post Dengan Thumbnail

Posted By anasku
Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi.
Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini .

Pada menu Dashboard klik menu "Design - > Page Elements"

Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

Dan taruh script dibawah ini kedalamnya.


<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";

imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";

imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";

imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";

imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;

boxwidth = 230;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "transparent";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://sangmerak.blogspot.com/";

</script>

<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "
http://sangmerak.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

Nah kalau sudah tinggal SAVE.

Sekian sobat blogger, semoga tutorial ini dapat anda gunakan dan bermanfaat bagi Anda. Sampai jumpa lagi di lain kesempatan.
READ MORE - Recent Post Dengan Thumbnail

Membuat Tepi Gambar Bershadow Dengan CSS 3

Posted By anasku
CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.
READ MORE - Membuat Tepi Gambar Bershadow Dengan CSS 3

Menampilkan Widget Di Halaman Tertentu

Posted By anasku
Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code
<b:if cond='data:blog.pageType == data:blog.homepageUrl'>


Untuk menempatkan di halaman Archive saja
<b:if cond='data:blog.pageType == "archive"'>


Untuk menempatkan dihalaman item/posting saja digunakan code
<b:if cond='data:blog.pageType == "item"'>


Dan untuk pada halaman pages atau static page blogger digunakan
<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
<b:if cond='data:blog.url == "URL_HERE"'>


Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya
READ MORE - Menampilkan Widget Di Halaman Tertentu

Jquery Multi Level Menu Horizontal

Posted By anasku
Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>



.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>


Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>


Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²
READ MORE - Jquery Multi Level Menu Horizontal

Cara Menghilangkan Widget Attribution Blogger

Posted By anasku
Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {
height:0px;
visibility:hidden;

display:none
}


Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Sekian dan terima kasih
READ MORE - Cara Menghilangkan Widget Attribution Blogger
 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas