06-25-2011, 06:39 PM
Kalau korang jadikan blog korang nampak canggih lehla gunakan kod ni. Leh zoom gambar pada blog mengikut saiz korang nak. tapi kene edit sket kod dibawah: Try la yer~
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
<script src="
<a href="http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" target="_blank">http://www.yourjavascript.com/6103104340...pot.com.js" type="text/javascript">
/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>
/* ==========================================================
MAIN BOX
========================================================== */
.gz-related-box {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 28px 0;
padding: 18px;
background:
linear-gradient(
135deg,
#fffdf7,
#fff8dc
);
border:
1px solid #e2cd7b;
border-radius: 14px;
box-shadow:
0 4px 12px
rgba(90,70,20,0.10);
clear: both;
overflow: hidden;
}
/* ==========================================================
HEADING
========================================================== */
.gz-related-heading {
font-size: 20px;
line-height: 1.3;
font-weight: 800;
color: #5a4300;
padding-bottom: 12px;
margin-bottom: 5px;
border-bottom:
3px solid #d8ad2f;
}
.gz-related-subtitle {
display: block;
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
font-weight: normal;
color: #967d37;
}
/* ==========================================================
ARTICLE ROW
========================================================== */
.gz-related-item {
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
gap: 16px;
padding: 15px 5px;
border-bottom:
1px solid #eee2b9;
color:
#333333 !important;
text-decoration:
none !important;
transition:
background 0.20s ease,
transform 0.20s ease;
}
.gz-related-item:last-child {
border-bottom: none;
}
.gz-related-item:hover {
background: #fff4c5;
transform: translateX(3px);
}
/* ==========================================================
DESKTOP THUMBNAIL
========================================================== */
.gz-related-thumb {
width: 145px;
height: 95px;
min-width: 145px;
flex: 0 0 145px;
box-sizing: border-box;
position: relative;
overflow: hidden;
border-radius: 9px;
border:
2px solid #dcc15b;
background: #eeeeee;
}
.gz-related-thumb img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
/* ==========================================================
ARTICLE INFORMATION
========================================================== */
.gz-related-info {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.gz-related-title {
margin-bottom: 8px;
color: #493600;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
}
.gz-related-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 12px;
color: #999999;
font-size: 12px;
line-height: 1.4;
}
.gz-related-meta span {
margin: 0;
}
/* ==========================================================
TABLET
========================================================== */
@media only screen and (max-width: 800px)
{
.gz-related-box {
padding: 14px;
}
.gz-related-thumb {
width: 130px;
height: 88px;
min-width: 130px;
flex:
0 0 130px;
}
.gz-related-title {
font-size: 15px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media only screen and (max-width: 600px)
{
.gz-related-box {
margin: 20px 0;
padding: 12px;
border-radius: 12px;
}
.gz-related-heading {
font-size: 18px;
line-height: 1.35;
padding-bottom: 11px;
margin-bottom: 3px;
}
.gz-related-subtitle {
font-size: 12px;
line-height: 1.4;
}
.gz-related-item {
display: flex !important;
align-items: center !important;
width: 100% !important;
gap: 14px !important;
padding:
14px 4px !important;
transform: none !important;
}
/*
* MOBILE IMAGE
*
* 120 x 90 = ratio 4:3
*/
.gz-related-thumb {
width: 120px !important;
height: 90px !important;
min-width: 120px !important;
max-width: 120px !important;
flex:
0 0 120px !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
border-radius: 10px !important;
border:
2px solid #dcc15b !important;
background: #eeeeee !important;
}
/*
* FORCE IMAGE TO FILL ENTIRE THUMBNAIL
*
* Rule ini mengatasi global.css lama MyBB
* yang mungkin menggunakan height:auto atau
* max-width:100%.
*/
.gz-related-thumb img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
max-width: none !important;
min-height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
object-position:
center center !important;
display: block !important;
}
.gz-related-info {
flex:
1 1 auto !important;
min-width: 0 !important;
overflow: hidden;
}
.gz-related-title {
margin-bottom: 7px;
font-size: 15px !important;
line-height: 1.38 !important;
font-weight: 700;
overflow-wrap: break-word;
}
.gz-related-meta {
display: flex;
flex-wrap: wrap;
gap: 3px 9px;
font-size: 11px !important;
line-height: 1.45 !important;
}
.gz-related-meta span {
margin: 0 !important;
}
}
/* ==========================================================
VERY SMALL PHONE
========================================================== */
@media only screen and (max-width: 380px)
{
.gz-related-box {
padding: 9px;
}
.gz-related-item {
gap: 10px !important;
padding:
12px 2px !important;
}
/*
* Sedikit kecil untuk telefon sangat sempit.
*/
.gz-related-thumb {
width: 105px !important;
height: 79px !important;
min-width: 105px !important;
max-width: 105px !important;
flex:
0 0 105px !important;
}
.gz-related-title {
font-size: 14px !important;
line-height: 1.35 !important;
}
.gz-related-meta {
font-size: 10px !important;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
<script src="
<a href="http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" target="_blank">http://www.yourjavascript.com/6103104340...pot.com.js" type="text/javascript">
/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>
